JL
Design systems

Airbnb

White canvas, one Rausch pink-red action

Design SystemLight theme

Color

  • primary

    #ff385c

  • primary-active

    #e00b41

  • primary-disabled

    #ffd1da

  • primary-error-text

    #c13515

  • primary-error-text-hover

    #b32505

  • luxe

    #460479

  • plus

    #92174d

  • ink

    #222222

  • body

    #3f3f3f

  • muted

    #6a6a6a

  • muted-soft

    #929292

  • hairline

    #dddddd

  • hairline-soft

    #ebebeb

  • border-strong

    #c1c1c1

  • canvas

    #ffffff

  • surface-soft

    #f7f7f7

  • surface-card

    #ffffff

  • surface-strong

    #f2f2f2

  • on-primary

    #ffffff

  • on-dark

    #ffffff

  • legal-link

    #428bff

  • star-rating

    #222222

  • scrim

    #000000

Typography

sans
"Airbnb Cereal VF", Circular, Inter, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif

Display

  • rating-display

    64px / 1.1 · 700 · -1px

    rating-display

  • display-xl

    28px / 1.43 · 700 · 0

    display-xl

  • display-lg

    22px / 1.18 · 500 · -0.44px

    display-lg

  • display-md

    21px / 1.43 · 700 · 0

    display-md

  • display-sm

    20px / 1.2 · 600 · -0.18px

    display-sm

Text

  • title-md

    16px / 1.25 · 600 · 0

    title-md

  • title-sm

    16px / 1.25 · 500 · 0

    title-sm

  • body-md

    16px / 1.5 · 400 · 0

    body-md

  • body-sm

    14px / 1.43 · 400 · 0

    body-sm

  • caption

    14px / 1.29 · 500 · 0

    caption

  • caption-sm

    13px / 1.23 · 400 · 0

    caption-sm

  • badge

    11px / 1.18 · 600 · 0

    badge

  • micro-label

    12px / 1.33 · 700 · 0

    micro-label

  • uppercase-tag

    8px / 1.25 · 700 · 0.32px

    uppercase-tag

  • button-md

    16px / 1.25 · 500 · 0

    button-md

  • button-sm

    14px / 1.29 · 500 · 0

    button-sm

  • link

    14px / 1.43 · 400 · 0

    link

  • nav-link

    16px / 1.25 · 600 · 0

    nav-link

Spacing

  • space-xxs

    2px

  • space-xs

    4px

  • space-sm

    8px

  • space-md

    12px

  • space-base

    16px

  • space-lg

    24px

  • space-xl

    32px

  • space-xxl

    48px

  • space-section

    64px

Radius

  • radius-none

    0px

  • radius-xs

    4px

  • radius-sm

    8px

  • radius-md

    14px

  • radius-lg

    20px

  • radius-xl

    32px

  • radius-full

    9999px

Elevation

  • shadow-none

    none

  • shadow-float

    rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0

Components

  • Buttons

    Buttons are 8px-radius rectangles in four kinds (the Rausch primary, the white secondary with an ink outline, the plain text link, the pill) plus the circular search orb and icon buttons.

    • Do use abn-btn--primary (primary, on-primary label, radius-sm, size-button-height) for the single main action. Its pressed fill is primary-active; disabled is primary-disabled.
    • Do pair it with abn-btn--secondary (canvas, ink label, 1px ink outline); its padding is 13px 23px so it matches the primary's outer size.
    • Do use abn-btn--pill (radius-full, 10px 20px, button-sm) only for a featured cell such as Become a host.
    • Do keep abn-orb (primary, radius-full, size-button-height) as the end of the search bar.
    • Do set button labels in button-md (16px, weight 500) and keep them one short phrase.
    • Don't add a second brand colour or a drop shadow to a button.
    • Don't expect a hover colour: the source documents none. Pressed and disabled are the states; abn-btn--text underlines on hover.
    • Known failing pairs kept exact: the on-primary label on primary is 3.52:1, and on primary-disabled is 1.37:1 (see the token notes).

  • Cards

    Cards are photo-first: a rounded 14px photo, a floating badge and save button, and a short meta block, plus the host card, the sticky reservation card and the large rating figure.

    • Do clip every photo with radius-md (14px) and keep property photos 1:1 and experience photos 4:5.
    • Do float the Guest favorite abn-badge top-left (badge, canvas, radius-full, shadow-float) and the save button top-right.
    • Do set the title in title-md and the meta lines in body-sm in muted.
    • Do pad host-card and reservation-card with space-lg (24px) on canvas with a radius-md corner; give reservation-card shadow-float.
    • Do set the nightly price in display-md and the fee breakdown in body-sm, and make Reserve the full-width primary button.
    • Do set a rating in rating-display (64px, 700) and in ink, never gold.
    • Don't add a second shadow; shadow-float is the only tier.
    • Don't use luxe or plus on mainline cards.

  • Inputs

    Inputs are a 56px text field with a 1px hairline that thickens to a 2px ink border on focus, the pill-shaped search bar with Where, When and Who segments, and the 40px circular date-picker day.

    • Do set a text-input at size-input-height (56px) with radius-sm, a 1px hairline outline and a muted label above it in caption.
    • Do show focus as a 2px ink border with no glow and no ring. The focus indicator is 15.91:1 on canvas.
    • Do show errors in primary-error-text with a word, not colour alone.
    • Do fill a disabled field with surface-soft; its muted-soft text fails contrast, kept exact from the source.
    • Do build the search bar as abn-search (canvas, radius-full, size-search-height, shadow-float) divided by 1px hairline rules, ended by the primary orb.
    • Do mark a selected date with ink fill and an on-dark label (15.91:1), and connect a range with a surface-soft lozenge.
    • Don't add a ring or glow on focus.
    • Don't colour the field border primary.

  • Navigation

    Navigation is the 80px white top bar with three icon tabs and an underline on the active one, a category strip, and a white three-column footer with a legal band.

    • Do keep the bar at size-nav-height (80px) on canvas with a 1px hairline underneath.
    • Do set tab labels in nav-link (16px, 600): active in ink with a 2px ink underline, inactive in muted.
    • Do mark the newer products with a new-tag in uppercase-tag, set uppercase.
    • Do set category tabs in button-sm, muted when inactive and ink with an underline when active.
    • Do keep the footer on canvas (there is no contrast footer), with title-sm column heads and body-sm links, space-xxl by 80px padding.
    • Do set the legal band in caption-sm and muted; links inside it may use legal-link, which is 3.30:1.
    • Don't add a dark footer or a shadow to the bar.
    • Below 744px collapse the tabs into a hamburger sheet.