# 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

Where
Default
Check in
Focus (dark ring)
Guests
Error
Message host

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