Dark Mode

Design System Inspired by Airbnb

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Explore Stays Become a Host
01 / Colors

Color Palette

Brand
Rausch Red
#ff385c
Primary CTA
Deep Rausch
#e00b41
Pressed state
Luxe Purple
#460479
Luxe tier
Plus Magenta
#92174d
Plus tier
Text & Neutral
Near Black
#222222
Primary text
Secondary
#6a6a6a
Secondary text
Border
#c1c1c1
Borders
Surface
#f2f2f2
Circular buttons
Legal Blue
#428bff
Legal links
Error
#c13515
Error text
02 / Typography

Typography Scale

Section Heading
Section — 28px / 700 / 1.43 / Cereal VF
Card Heading
Card — 22px / 600 / 1.18 / -0.44px
Feature Title
Feature — 20px / 600 / 1.20 / -0.18px
UI Medium — Inspiration for future getaways
UI — 16px / 500 / 1.25
Body — Istanbul, Turkey. Apartment in Kadikoy. 2 guests, 1 bed, 1 bath.
Body — 14px / 400 / 1.43
Tag Bold — $145 night
Tag Bold — 12px / 700 / 1.33
SUPERHOST
Micro — 8px / 700 / uppercase / +0.32px
03 / Buttons

Button Variants

Explore
Primary Dark
Host
Outlined
←
Circle Nav
→
Circle Nav
🔍
Search
04 / Cards

Card Examples

Photo placeholder

Istanbul, Turkey

Entire apartment. 2 guests, 1 bed. $78 night.

Photo placeholder

Barcelona, Spain

Private room. 3 guests, 2 beds. $92 night.

Photo placeholder

Galveston, TX

Entire house. 6 guests, 3 beds. $145 night.

05 / Forms

Form Elements

Default
Focus (dark ring)
Error
06 / Spacing

Spacing Scale

4
8
12
16
24
32
07 / Radius

Border Radius

8px
Buttons
14px
Badges
20px
Cards
32px
Large
50%
Controls
08 / Elevation

Depth

Flat
No shadow
Card
Three-layer warm
Hover
Interactive lift
Focus
Dark focus ring