Carbon Ink
#222222Primary text, filled CTA buttons, nav bar, footer background, hairline borders, icon strokes — the only chromatic-acting color in the system; its near-black weight gives the page its editorial authority
Airbnb
airbnb.orgWebsite preview
The design language
Airbnb.org is a stripped-down editorial system: pure achromatic canvas, oversized type, and dark-on-white CTAs that feel more like a nonprofit annual report than a tech brand site. Every color decision is denied except a single near-black action button — the page trusts typography and photography to carry emotion, never decoration. Surfaces alternate between stark white and a quiet warm gray (#f7f7f7), creating soft newspaper-like bands rather than dramatic light/dark shifts. Components are flat: no shadows, no gradients, no rounded pill buttons — just 8px-radius rectangles and 12px-radius media frames. The result reads as earnest, restrained, and institutional without feeling corporate.
Color palette
neutral
Paper White
#ffffffPage canvas, card surfaces, button text, icon fills on dark backgrounds — the dominant surface and the foil against which all type sits
Newsprint Gray
#f7f7f7Alternate section backgrounds, footer surface, subtle banding to separate editorial blocks without visual noise
Pebble
#ebebebSection divider washes, faint background blocks that fade further into the page than Newsprint Gray
Fog
#6a6a6aMuted helper text, secondary heading weight reduction, low-priority borders
Ash
#a6a6a6Disabled or low-emphasis button fills, de-emphasized UI elements
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
72px · 700 · 1.13 · -0.03px trackingThe quick brown fox jumps
text-52
52px · 700 · 1.19The quick brown fox jumps
heading
48px · 700 · 1.18 · -0.02px trackingThe quick brown fox jumps
heading-sm
26px · 400 · 1.29 · -0.01px trackingThe quick brown fox jumps
subheading
22px · 400 · 1.33 · -0.01px trackingThe quick brown fox jumps
body
18px · 500 · 1.56The quick brown fox jumps
body-sm
16px · 500 · 1.56The quick brown fox jumps
caption
14px · 400 · 1.43 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Airbnb Cereal VF
- Weights
- 400, 500, 700
- Sizes
- 14, 16, 18, 22, 26, 48, 52, 72
- Line height
- 1.13–1.56 (tight at display, breathing at body)
- Letter spacing
- -0.03em at 72px, -0.02em at 48–52px, -0.01em at 22–26px, normal at 16px and below
- Fallback
- Inter, or Söhne if available; the rounded geometric proportions and tight tracking are signature
- Features
- Use default features; Cereal VF handles weight axis interpolation natively
Single-family system for everything from 14px body to 72px hero headlines. Weight 500 dominates body and UI, weight 700 anchors headlines, weight 400 appears in long-form copy. Negative tracking tightens at scale (-0.03em at 72px, -0.02em at 48–52px, -0.01em at 22–26px) — the letters huddle closer as they grow, giving display text a compressed, authoritative feel typical of editorial design.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 8px
Border radius
cards
12pxlinks
4pximages
12pxbuttons
8pxSpacing scale
4px6px7px8px12px14px16px24px32px40px48px64px80px96pxGuidelines
Do
- Use #222222 as the only button fill color; the system's power comes from the contrast of one dark rectangle against pure white
- Set headlines at 48–72px with negative letter-spacing (-0.02em to -0.03em) to match the compressed editorial feel
- Center all hero and section text within a max-width of 1200px; keep body copy at ~640px max-width for readability
- Alternate sections between #ffffff and #f7f7f7 to create editorial banding — no drop shadows needed
- Use 12px radius on all images, video embeds, and media blocks; use 8px radius on buttons and nav links
- Set body text at 18px with line-height 1.56 — the generous leading makes long-form copy feel unhurried
- Let photography and video carry all emotional content; never decorate with gradients, illustrations, or color washes
Don’t
- Never introduce a chromatic accent color into the UI — the airbnb pink-magenta logo is the only color moment in the system
- Never apply drop shadows, glows, or blur effects to cards or buttons; depth comes from surface contrast, not elevation
- Never use border-radius larger than 12px; the system is angular and editorial, not soft or playful
- Never use display weights (800–900) — Airbnb Cereal tops out at 700, and most headlines sit at 500
- Never break the centered text alignment for hero and section headers; left-aligned text breaks the masthead metaphor
- Never place text directly over photography without a scrim or contained card — the page is too restrained to tolerate busy backgrounds
- Never use more than one body size (18px) for explanatory copy; variation breaks the editorial rhythm
Components
Filled Dark CTA
Primary action button — the only colored interactive element8px radius, 14px vertical / 24px horizontal padding, background #222222, text #ffffff in Airbnb Cereal VF weight 500 at 16px. No border, no shadow, no hover lift. Used for 'Donate now' and 'Donate' in nav.
Nav Text Link
Secondary navigation actionsNo background, no border. Airbnb Cereal VF weight 500 at 14–16px, color #222222. 8px horizontal spacing between items. Sits on white nav bar.
Logo Wordmark
Brand identity in top-left of every screen'airbnb.org' in Airbnb Cereal VF weight 700. The 'airbnb' portion renders in brand pink-magenta (#b30057 from contrast data), '.org' in #222222. The chromatic logo against an otherwise fully achromatic page is the single moment of color in the system.
Hero Headline
Opening editorial statementCentered, 72px, weight 500, line-height 1.13, letter-spacing -0.03em, color #222222. Max-width container ~800px. No gradient, no background imagery behind it — pure type on white.
Body Subtext
Supporting paragraph under hero headlineCentered, 18px, weight 400, line-height 1.56, color #222222. Max-width ~640px. Restrained line length for readability.
Media Block (Video/Image)
Full-width embedded visual storytellingContained within page max-width, 12px radius corners. Videos include a 1px #222222 hairline border (visible as frame). Plays full-bleed within the radius mask. Represents the system's only departure from text — photography is the emotional register.
Section Headline
Mid-page editorial titleCentered, 48px, weight 500, line-height 1.18, letter-spacing -0.02em, color #222222. Same centering and weight logic as hero, but at smaller scale.
Section Subtext
Explanatory copy under section headlinesCentered, 18px, weight 400, color #222222, max-width ~640px. Identical to hero subtext — the system reuses one body style for all long-form copy.
Map Visualization Container
World reach data displayLight gray (#ebebeb or #f7f7f7) rounded panel, 12px radius, contained within page width. Countries labeled in small (12–14px) Airbnb Cereal VF weight 500, #222222, in a flat geographic style with no color fill on landmasses.
Top Navigation Bar
Persistent headerWhite background, no border or shadow, full-width. Logo left, 2–3 text links right ('Get help', 'Get involved'), filled dark CTA ('Donate') far right. 64px vertical padding. Hairline 1px #222222 bottom border optional.
Footer Band
Page closureBackground #f7f7f7 or #222222, full-width. Text #ffffff on dark or #222222 on light. 64px vertical padding. Minimal content — links, legal, small logo.
Surfaces & elevation
Level 1
Canvas White
#ffffffDefault page background; hero, primary text blocks
Level 2
Band Gray
#f7f7f7Alternate section background; footer; visual separation between editorial blocks
Level 3
Wash Gray
#ebebebTertiary surface; faint dividers or background containers
No shadows. The system relies entirely on surface color contrast (white → #f7f7f7 → #ebebeb) and 1px hairline borders at #222222 to create separation. Components sit flat on the canvas; depth comes from photography and type scale, never from drop shadows.
Layout & imagery
Layout
Single-column centered layout within a 1200px max-width container. The page reads top-to-bottom as an editorial sequence: white hero with centered headline → subtext → filled dark CTA → embedded media block (video or photo) → centered section headline → subtext → alternate gray band → next media block → centered text → gray band → map visualization → footer. No multi-column grids, no sidebar, no card grids. Navigation is a minimal top bar (logo left, 2–3 text links right, dark CTA far right) with no sticky behavior beyond standard scroll. The rhythm is: text, image, text, image — alternating as in a magazine spread. Section gaps are generous (64px) with no visual dividers between bands; the #f7f7f7 gray sections serve as the only breaks. No hero with background image — the hero is text-only on white, with media appearing below the fold.
Imagery
Photography and video are the sole emotional carriers of the page — no illustrations, no abstract graphics, no icons beyond simple utility UI. Treatment is full-bleed within the 1200px container, clipped to 12px radius corners with an optional 1px #222222 hairline frame on video. Photography style is documentary and intimate: dimly lit interiors, natural light from windows, people in their own spaces, slightly underexposed to feel candid rather than staged. No lifestyle gloss, no product shots. The world map is flat, monochrome line work with no color fills — data as restraint. Image density is moderate: one large media block per editorial section, never more, allowing type to dominate.
Design notes
Agent Guide
**Quick Color Reference** - text: #222222 - background: #ffffff (canvas) / #f7f7f7 (alternate band) - border: #222222 (1px hairline) / #6a6a6a (muted) - accent: #b30057 (logo only — never use in UI) - primary action: #222222 (filled action) - disabled: #a6a6a6 **3-5 Example Component Prompts** 1. Create a Primary Action Button: #222222 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. *Section Band*: Alternate #f7f7f7 background, 64px vertical padding. Centered section headline at 48px weight 500, letter-spacing -0.02em, color #222222. Subtext at 18px weight 400, max-width 640px. No buttons in this section. 3. *Media Block*: 1200px max-width, 12px radius corners, 1px #222222 border on video embeds. Sits on white background with 48px vertical margin above and below. No caption or overlay text inside the media block. 5. *Map Container*: 1200px max-width, #f7f7f7 background, 12px radius, 48px padding. Flat monochrome world map with country labels in 12px weight 500 #222222. No color fills on landmasses, no interactive markers.
Editorial Rhythm
The page follows a strict pattern: **text → media → text → media**, alternating between white and #f7f7f7 surfaces. Every section is centered. Never place two text blocks back-to-back without a media block between them — the photography is the pacing device that gives the reader a breath. Section vertical padding is always 64px; element spacing within a section is 24px between headline and subtext, 8px between subtext and CTA.
Similar brands
charity: water
Same oversized centered headlines on white, full-width photography as emotional anchor, monochromatic UI with color reserved for logo only
Wikipedia / Wikimedia Foundation
Identical editorial restraint — pure achromatic surfaces, tight typographic hierarchy, no decorative elements, information-first layout
The New York Times homepage
Same masthead metaphor — large confident serif/sans headlines, centered text blocks, gray band separators between articles, photography as the only color
Patagonia (responsibility pages)
Same documentary photography style (underexposed, candid interiors), full-bleed media at 12px radius, monochromatic type-first layout, no decorative gradients
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
