prismdinstrument

EXTRACTED · 10 SECTIONS · 12 COLORS · GRADE B

airbnb.com

Accent #ff385c · Airbnb Cereal VF — every value below measured via getComputedStyle(), not asserted by hand.

colors

face

shadows

200

keyframes

DESIGN.md tokens.json

real render · source of truth

airbnb.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(255, 56, 92) as the high-saturation accent for primary actions. Generously rounded CTAs (32px) suggest approachable, content-first design alongside Airbnb Cereal VF as the primary typeface. A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 200 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

12 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 15.91:1

Ink

#222222

AAA 15.91:1

Accent

#ff385c

AA·lg 3.52:1

Line

#6a6a6a

AA 5.41:1

Semantic states

error#b32505success#008a05warning#e07912info#428bff

4 semantic roles found.

12 colors mined from the live renderexpand

Type — the ladder, in the real face

3 roles · rendered live in the real Airbnb Cereal VF (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl72px · 600

display md

display-md22px · 500 · ×3.27

body

body16px · 400 · ×1.38

Depth — elevation is extracted, not invented

4 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1

shadow-2

shadow-3

shadow-4

Motion — easings, transitions & live keyframes

7 easing curves · 200 keyframes · hover a tile to preview

Easing & transitions

transition-2cubic-bezier(0.2, 0, 0, 1)

transition-3cubic-bezier(0, 0, 1, 1)

transition-5linear

motion-standard-curve-animation-timing-functioncubic-bezier(0.2,0,0,1)

motion-exit-curve-animation-timing-functioncubic-bezier(0.4,0,1,1)

motion-linear-curve-animation-timing-functioncubic-bezier(0,0,1,1)

motion-enter-curve-animation-timing-functioncubic-bezier(0.1,0.9,0.2,1)

200 keyframe animations extracted

dot-xefpb8

dot-kkmion

dot-pulse-18sbrvj

fadeEnter-14e8nj2

dls_sheets_fadeIn-14e8nj2

dls_sheets_slideUp-14e8nj2

fadeLeave-1f0cb0c

dls_sheets_fadeOut-1f0cb0c

dls_sheets_slideDown-1f0cb0c

dls_sheets_slideDownOut-1f0cb0c

overlayEnterLinaria-pxdfzy

overlayLeave-16a97i2

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 4px

sm · 8px

md · 12px

base · 16px

lg · 24px

xl · 32px

2xl · 48px

3xl · 64px

Radius

none
0px

xs
4px

sm
8px

md
14px

lg
20px

xl
32px

full
9999px

Components — the closed vocabulary

9 component families · 37 variants counted on the live DOM

Component	Variants found
links	×10
buttons	×7
tabs	×7
nav Links	×6
footer Links	×2
heading H2	×2
inputs	×1
search Bar	×1
heading H3	×1

Component style specs (§4)expand

Buttons

Pill

Background: transparent
Text: #222222 {colors.primary-focus}
Padding: 0px
Radius: 40px 4px 4px 40px
Border: 1px solid rgba(0, 0, 0, 0)
Font: 14px weight 400
Use: Status pills, tags, chips
Focus: boxShadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgb(34, 34, 34) 0px 0px

Ghost

Background: transparent
Text: #222222 {colors.primary-focus}
Padding: 0px
Radius: 32px
Font: 14px weight 400
Use: Subtle action, toolbar, nav button
Focus: boxShadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgb(34, 34, 34) 0px 0px

Pill

Background: transparent
Text: #222222 {colors.primary-focus}
Padding: 0px
Radius: 50px
Font: 14px weight 400
Use: Status pills, tags, chips
Focus: boxShadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgb(34, 34, 34) 0px 0px

Inputs & Forms

Text Input

Background: transparent
Text: #222222 {colors.primary-focus}
Padding: 0px
Radius: 0px
Border: 0px none rgb(34, 34, 34)
Font: 14px weight 500
Use: Text fields, search inputs

Navigation

Main Nav

Background: transparent
Padding: 0px 48px
Radius: none
Font: 14px weight 400
Use: Static flex nav — N/A items

Search Bar

Search Bar

Background: transparent
Text: #222222 {colors.primary-focus}
Padding: 0px 48px
Radius: 0px
Font: 14px weight 400
Use: Inline search form

Layout — structure & dimensions

4 layout metrics measured

max Width1920px

header Height96px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

51 media-query stops read from the live CSS

23px

320px

330px

375px

376px

395px

403px

412px

420px

429px

431px

440px

474px

475px

479px

480px

481px

499px

500px

550px

551px

568px

650px

667px

700px

743px

744px

768px

800px

880px

895px

949px

950px

1024px

1028px

1127px

1128px

1194px

1200px

1238px

1240px

1280px

1348px

1440px

1600px

1735px

1760px

1880px

1920px

2120px

2560px

Do's & Don'ts

19 enforceable rules pulled verbatim from the spec

Use Hof (`#222222`) for text — not pure black, it's warmer and more readable

Use Airbnb Cereal VF as the primary typeface — it defines the brand personality

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use Rausch (`#ff385c`) as the primary accent — it's the brand's signature interactive color

Use 32px border-radius on primary buttons — the brand uses generously-rounded CTAs

Maintain nav height at 80px — consistent vertical space for the navigation bar

Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room

Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar

Build the hero as a split layout with media on the right — text and visual share equal weight

Include exactly 15 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose

Each card includes a top image — imagery is part of the card identity, not optional

Place 2 pricing tiers side-by-side on desktop — direct comparison is the value prop

Don't

Don't use pure black (`#000000`) for text — the near-black adds warmth

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't invent new shadow values — use only the extracted shadow levels

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't use sharp-cornered or pill buttons — 32px is the CTA border-radius standard

Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Don't make the nav sticky — this design lets it scroll away to maximize content focus

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the airbnb.com design system. Canvas #ffffff · ink #222222 · accent #ff385c. Type: Airbnb Cereal VF — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add airbnb

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press