ds-card
Soft listing card — extra-round corners, the lightest resting shadow, floats on hover.
emphasis
default
A card wearing this system.
elevated
A card wearing this system.
Cinnabar
v4 · publishedWarm hospitality made visible — airy whites, soft shadows, one coral light.
warmwelcomingroundedairy
A re-reading of the world's hospitality marketplace. Where the source spends almost no color, this system follows suit: a white-first canvas with near-black text and a single coral reserved for the one action that matters. The personality lives in geometry — generously rounded corners on everything, from pill-shaped search fields to soft listing cards — and in shadows so light they read as a gentle lift off the page rather than a drop. Type is a friendly humanist sans at calm sizes. The result feels less like a screen and more like an open, welcoming room.
re-imagined from https://airbnb.com
Use in your project
Pull this design system into any project with the synthesisui CLI, then ask your coding agent to build components — it follows the system's tokens, recipes and rules.
1 · Authenticate
npx synthesisui login2 · Add this design system
npx synthesisui add cinnabar --version 43 · Import the tokens in your global CSS
@import "_synthesisui/ds/cinnabar/tokens.css";
@import "_synthesisui/ds/cinnabar/theme.css";4 · Ask your agent
Add a button using the cinnabar design systemColor
Primitives and roles.
Named scales forged by the synthesis; semantic roles only ever point at them.
color.sand
50#ffffff
100#f7f7f7
200#f2f2f2
300#ebebeb
400#dddddd
500#b0b0b0
600#717171
700#484848
800#222222
900#111111
color.amber
300#ffe9b8
400#ffd57a
500#f5a623
color.rausch
300#ff8aa3
400#ff5a76
500#ff385c
600#e00b41
700#b80835
color.semantic — resolved live via CSS variables
faint
{color.sand.500}
muted
{color.sand.600}
accent
{color.amber.500}
border
{color.sand.400}
canvas
{color.sand.100}
raised
{color.sand.50}
overlay
{color.sand.200}
primary
{color.rausch.500}
surface
{color.sand.50}
foreground
{color.sand.800}
Typography
The voice of the system.
Display: Airbnb Cereal VF · Body: Airbnb Cereal VF · Mono: ui-monospace
lgDesign, set free1.25rem / 1.4
smDesign, set free0.875rem / 1.43
xlDesign, set free1.375rem / 1.3
xsDesign, set free0.75rem / 1rem
2xlDesign, set free1.75rem / 1.2
baseDesign, set free1rem / 1.5
displayDesign, set free3rem / 1.08
Motion
How it breathes.
Every keyframe runs live below, dressed in the system's own colors — durations, easing curves and the interactions they power.
keyframes — 6 live
pop
rise
float
fade-in
shimmer
bounce-in
easings
smoothcubic-bezier(0.2, 0, 0, 1)
standardease
durations
base · 200msfast · 100msslow · 300msambient · 3s
interaction patterns
loopmap-pin
Map price pins float gently to feel alive.
enterbadge-in
'Guest favorite' tags bounce in once a card settles.
enterentrance
Cards rise gently into place as they appear.
pressfavorite
The wishlist heart pops when toggled — the signature delight.
loopskeleton
Image placeholders shimmer while photos load.
hoverhover-lift
Listing cards float a little higher on hover.
Components · 11
Recipes, rendered live.
Every value below is a token reference resolved by the renderer — hover, toggle and switch tabs to feel the states. Bespoke components are rendered from their anatomy hint.
ds-tabs
Segmented control; the active segment lifts onto a surface.
tone
ds-alert
Inline message. Tone maps onto the system's own semantic accents.
tone
accent
A message wearing this system.
neutral
A message wearing this system.
primary
A message wearing this system.
ds-badge
Floating pill label — the 'Guest favorite' tag. White, softly shadowed, fully rounded.
intent
accentneutral
ds-input
Pill-shaped search field — the centerpiece. Rounded all the way, lifts a dark focus ring.
tone
ds-avatar
Identity token — sized circle with initials or image.
size
MAMAMA
ds-button
Friendly action with soft corners. Primary carries the lone coral; the rest stay quiet.
intent
ds-select
Field trigger that reveals a focus ring on interaction.
tone
Choose an option
ds-switch
Binary toggle — the track wears the system, on flips primary.
size
ds-progress
Determinate track — the fill carries the primary.
tone
ds-search-pill
bespoke · fieldThe hero search field — fully rounded, softly lifted.
tone