Internal Reference
Style Guide
Internal Reference
A living reference for every design token, component pattern, and asset in the Reno Restaurant Guide design system. If a pattern ships in the site, it lives here.
Section 01
All brand, surface, and status colors live as CSS custom properties. Prefer var() over hardcoded values everywhere in the app.
Brand
--accent
Warm bronze, main brand
--accent-hover
Accent hover state
--secondary
Deep amber bronze, secondary brand
--secondary-hover
Secondary hover state
Accent alpha ladder
--accent-t90
alpha 0.90
--accent-t75
alpha 0.75
--accent-t60
alpha 0.60
--accent-t40
alpha 0.40
--accent-t20
alpha 0.20
--accent-t10
alpha 0.10
Accent lightness ladder
--accent-50
50 (lightest)
--accent-100
100
--accent-200
200 (+30% L)
--accent-300
300 (+20% L)
--accent-400
400 (+10% L)
--accent-500
500 (base)
--accent-600
600 (-10% L)
--accent-700
700 (-20% L)
--accent-800
800 (-30% L)
--accent-900
900 (deepest)
Theme-swapped tokens
These tokens resolve to different values in dark vs. light mode. Each swatch renders both halves side by side.
--background
Page background
--surface
Elevated surface layer
--surface-raised
Higher elevation (cards, inputs)
--border-default
Standard border color
--text-body
Primary text color
--text-body-muted
Secondary text color
--text-body-subtle
Muted/meta text color
--neutral-bg
Deepest background (internal neutral)
--neutral-surface
Surface foundation (internal neutral)
--neutral-text
Text foundation (internal neutral)
Surface and chrome tokens
--header-bg
Site header background (unscrolled)
--header-bg-scrolled
Site header background (scrolled)
--drawer-bg
Mobile drawer background
--icon-bg
Icon chip background
--border-subtle-accent
Brand-tinted border
--divider-subtle
Subtle divider hairline
--glow-bg
Glow/halo background tint
--hover-overlay
Generic hover wash
--nav-link
Nav link foreground
--footer-link
Footer link foreground
--meta-text
Legal / meta text color
Status
--success
Open now, confirmed, positive
--success-light
Lighter success variant. Used in pulse animation rings and success-state highlights.
--success-hover
Success hover
--warning
Caution, pending
--warning-hover
Warning hover
--error
Closed, error, destructive
--error-hover
Error hover
Section 02
Two families. Playfair Display for editorial headings, Inter for everything else. All sizes use a 10px base (62.5% root font-size), so 1.6rem = 16px.
The quick brown fox jumps over the lazy dog
Display
font-display · clamp(4rem, 6vw, 7.2rem) · leading-tight · 600
The quick brown fox jumps over the lazy dog
H1
font-display · clamp(4rem, 6vw, 6.4rem) · 600
The quick brown fox jumps over the lazy dog
H2
font-display · clamp(3.2rem, 4vw, 4.8rem) · 600
The quick brown fox jumps over the lazy dog
H3
font-display · clamp(2.4rem, 3vw, 3.6rem) · 600
The quick brown fox jumps over the lazy dog
H4
font-body · clamp(2rem, 2.5vw, 2.8rem) · 600
The quick brown fox jumps over the lazy dog
Body Lg
font-body · 1.8rem · leading-1.6
The quick brown fox jumps over the lazy dog
Body
font-body · 1.6rem · leading-1.6
The quick brown fox jumps over the lazy dog
Small
font-body · 1.4rem · leading-1.5
The quick brown fox jumps over the lazy dog
Label
font-body · 1.2rem · 500
THE QUICK BROWN FOX JUMPS
Eyebrow
font-body · 1.1rem · 600 · tracking-0.2em · uppercase
Section 03
The spacing ladder is 1, 2, 3, 4, 6, 8, 12, 16 in rem at 62.5% root. Use --space-* custom properties for consistency, or Tailwind arbitrary values where the token isn't mapped to a utility.
--space-1
0.25rem · 2.5px
--space-2
0.5rem · 5px
--space-3
0.75rem · 7.5px
--space-4
1rem · 10px
--space-6
1.5rem · 15px
--space-8
2rem · 20px
--space-12
3rem · 30px
--space-16
4rem · 40px
Section 04
Four radius tokens cover every rounded surface in the app. Use var(--radius-*) for consistency.
--radius-sm
0.375rem
--radius-md
0.625rem
--radius-lg
1rem
--radius-xl
1.5rem
Section 06
DiamondDivider is the canonical section separator: two fading bronze hairlines with a rotated square at center. All visual properties are prop-driven.
<DiamondDivider />
<DiamondDivider lineWidth="12rem" />
<DiamondDivider lineWidth="4rem" diamondSize="0.5rem" />
<DiamondDivider color="var(--secondary)" />
Existing gradient hairline patterns (not yet componentized)
Short logo flank, 1.8rem, transparent → --border-accent
Full-width section rule, transparent → --border-accent → transparent
Bronze-to-amber bar, 2px, transparent → --primary → --tertiary → transparent
Section 07
Badge component not yet built; these are static previews demonstrating the intended visual treatments.
Section 08
Tier badges identify a listing's subscription tier at a glance. Visual weight scales with tier: Essential uses a neutral outline, Showcase fills in bronze, and Premier adds a soft glow to reinforce premium placement. Labels pull from siteConfig.tiers so any rename propagates automatically.
Default size
Small size
On a listing card
Example Listing Name
Downtown Reno · Italian
Section 09
Status pills communicate whether a listing is currently open or closed. Rendered on listing cards in the directory grid and on the listing detail page. The isOpen value is cached on each listing by the 15-minute Inngest cron.
Default size
Small size
On a photo surface
Section 10
Rounded pill-shaped toggle buttons for single binary filters like Open Now. Inactive uses an outline treatment; active fills with primary bronze. Accepts an optional icon slot. In the directory, a filled green dot reinforces the open-status semantic.
With icon
Without icon
Section 11
Collapsible group of checkbox filters. Header toggles expand/collapse. When the term list is longer than initialVisibleCount (default 7), a Show all (N) link reveals the rest. Each FacetCheckbox reads its active state from the URL searchParams.
Section 12
The directory card. Used in the directory grid and other listing surfaces. Hover the card to see the full choreography: image zoom, darken overlay, shimmer divider, arrow reveal, border lift, and shadow.
Downtown Reno
Dry-aged cuts seared over an oak-fired hearth and finished with house compound butters, alongside a short list of reserve pours behind the bar. The room leans dark wood and brass with a low-lit booth section built for long dinners. Service is unhurried and attentive without the steakhouse formality.
Price
Upscale
Hours
Open until 11 PM
Riverwalk District
River-side coffee bar pouring single-origin espresso and pour-overs alongside a seasonal menu of house-baked pastries and small plates. Tucked along the Truckee with patio seating when the weather holds. Regulars come for the morning rush and linger through lunch.
Price
Casual Eats
Hours
Open until 3 PM
Midtown
All-day breakfast built around local eggs, house biscuits, and a griddle that never cools down. The patio opens by 8 and stays full through the shoulder hours. Espresso program anchored by a small-lot roaster out of Truckee, plus a short cocktail menu for brunch drinkers.
Price
Casual Eats
Hours
Open until 2 PM
Loading state
Use ListingCardPlaceholder for skeleton states during data loads. Matches card zones so the real card can slot in without layout shift.
Section 13
Card patterns for directory listings, featured content, and info blocks. Component not yet built; these are layout previews.
Default
Brief descriptive copy about the restaurant or bar.
Elevated
Higher surface + soft shadow for emphasis.
Accent
Bronze wash + bronze border for callouts.
Section 14
Reusable primitives for every public form on the site. Input, Textarea, and Select share a single visual contract: 1.5px border, bronze focus state with a 3px ring, error variant in red, soft hover warm-up. Wrap any of them in FormField to attach a label, helper text, and error messaging. SegmentedControl handles two-or-more option choices.
Input states
Idle
Filled
Hover (move mouse over)
Focus (click into the field)
Error
Enter a valid email address.
Disabled
Textarea
A short paragraph is fine. We polish copy before publishing.
Select
Segmented control
value = owner
FormField composition
We use this to send your member receipt.
Phone number is required.
Section 15
Dark section bands create visual rhythm by punctuating the page with always-dark content regardless of the active theme. Use for hero moments, CTAs, and stat rows.
Always Dark
Dark bands anchor the page rhythm and work well for statistics, testimonials, and hero moments.
240+
Restaurants & bars
12
Neighborhoods covered
2026
Established
Apply data-theme="dark" to any section that should render dark regardless of the active theme.
Section 16
Icons use Lucide React. Install: npm install lucide-react. Import: import { IconName } from 'lucide-react'.
ArrowRight
ArrowUpRight
ArrowLeft
Check
ChevronDown
ChevronUp
ChevronRight
ChevronLeft
Menu
X
Search
Phone
MapPin
Calendar
Clock
Star
TrendingUp
BarChart2
Building2
Home
ExternalLink
Download
Upload
Sun
Moon
Settings
Plus
Minus
Edit
Trash2
Eye
EyeOff
Lock
Unlock
AlertCircle
Info
CheckCircle
XCircle
Shield
LayoutDashboard
LogOut
Loader2
Heart
Copyright
UtensilsCrossed
Wine
ImageIcon
Share2
ShoppingBag
Size demonstration
size=16
size=20
size=24
size=32
Section 17
Used on paginated listing grids (directory, search results). Shows previous/next controls, numbered page buttons with active state, and ellipsis truncation when total pages exceed the window size. Window size is configurable via siteConfig.pagination.paginationWindowSize.