Design System

Belong
anywhere,
design everywhere.

A warm, welcoming light theme with vibrant coral-red accents, calming teal, and generous spacing that lets imagery breathe.

13 color tokens 18+ type steps 8px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Clean white canvas with warm grays for text hierarchy. Vibrant Rausch coral-red for primary actions and Babu teal for secondary accents.

White
#ffffff
Primary background, card surfaces
Off-White
#f7f7f7
Secondary sections, alternating rows
Smoke
#dddddd
Borders, dividers
Fog
#c4c4c4
Disabled states, inactive icons
Iron
#717171
Secondary text, captions
Charcoal
#484848
Body text, descriptions
Night
#222222
Headings, high-emphasis text
Rausch
#FF5A5F
Primary brand — CTAs, links
Rausch Dark
#D93B3F
Hover state for primary buttons
Babu
#00A699
Secondary accent, success states
Babu Dark
#008489
Hover for secondary accent
Archer
#FC642D
Warm accent, badges
Typography

Type Scale

Circular as primary typeface (Inter substitute). Rounded, geometric letterforms with friendly weight range for warm, approachable UI.

Display Belong anywhere 48px / 1.0 / −0.02em
Heading-lg Find your next adventure 32px / 1.15 / −0.02px
Heading Featured destinations 24px / 1.25 / −0.01px
Heading-sm Cozy mountain cabin 22px / 1.25 / −0.01px
Body Default body text for readable content 16px / 1.5 / 0
Body-sm Hosted by Maria · Superhost 14px / 1.43 / 0.01px
Caption 4.92 · 128 reviews · Verified 12px / 1.43 / 0.02px

Fonts

Primary Circular 400–800 · 12–48px
Mono Circular Mono 400–500 · Prices, data
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 8px. Generous density with ample breathing room. 13-step spacing scale, 6 border radius values for warm, rounded UI.

Spacing Scale (8px base)

44px
88px
1616px
2424px
3232px
4848px
6464px
9696px

Border Radius

default 4px
buttons 8px
lg 12px
cards 16px
chips 24px
pill 9999px

Shadows

Subtle search bar
Medium dropdowns
Large listing cards
Elevated modals
Elevation

Depth & Surfaces

Soft shadows over hard edges. Clean white surfaces with subtle off-white alternation. 4 distinct surface levels.

Depth Levels

White
Base page background — the canvas
Level 0
Off-White
Secondary sections, alternating rows
Level 1
Card White
Elevated cards with soft shadow
Level 2
Overlay
Modal overlays, lightboxes
Level 3

Surface System

White #ffffff
Off-White #f7f7f7
Card White shadow + #fff
Overlay rgba(0,0,0,.5)
Components

Button Variants

Primary CTA (Rausch coral-red), secondary (outlined), and ghost link variants for clear interaction hierarchy.

Primary CTA Button
Main call to action — highest visual weight
.btn-primary
Rausch (#FF5A5F) background, White text, 8px radius, 12px/24px padding. Use for booking, search, and key conversions.
Secondary Button
Secondary interactive actions
.btn-secondary
White background, Night text, Smoke border, 8px radius. For secondary navigation and filter actions.
Ghost Link Button
Tertiary actions, inline links
.btn-ghost
Rausch text, transparent background, underlined. For inline text links and low-emphasis actions.
Filter Chip
Category filters, tags
.chip
Amazing pools Beachfront Cabins
24px radius pill, Smoke border. Active state uses Night background with White text. Scrollable row on mobile.
Search Bar
Primary search interface
.search-bar
Where
Search destinations
Check in
Add dates
Guests
Add guests
9999px radius pill, White background with soft shadow. Divided sections with Smoke dividers. Rausch search icon.
Listing Card
Property display, content cards
.listing-card
Cozy mountain cabin ★ 4.92
Hosted by Maria
$120 / night
16px radius, soft shadow. Image with rounded top corners. Heart icon overlay. Price prominently displayed.
Guidelines

Do's & Don'ts

Do — Embrace
  • White (#ffffff) as primary canvas for content areas
  • Rausch (#FF5A5F) for primary CTAs and key interactive accents
  • Babu (#00A699) for secondary highlights and success states
  • Generous spacing — multiples of 8px, at least 24px card padding
  • 16px radius on cards, 8px on buttons for warm rounded feel
  • Large photography with breathing room — let images speak
  • Soft, diffused shadows (0 2px 16px rgba(0,0,0,.08))
Don't — Avoid
  • Rausch for backgrounds or large filled areas — accent only
  • Hard, sharp corners on any interactive element
  • Heavy, dark shadows — keep elevation subtle and airy
  • Crowded content — maintain generous whitespace
  • More than two accent colors (Rausch + Babu) per view
  • Monospace fonts for non-data content
  • Bright saturated colors that compete with Rausch