search-pill
bespoke · fieldThe hero search field - fully rounded, softly lifted.
Warm hospitality made visible - airy whites, soft shadows, one coral light.
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
Pull this design system into any project - it follows the system's tokens, recipes and rules. Run the commands yourself, or let your coding agent set it up and build.
Make Cinnabar yours
Give it a name and it becomes a system in your account - with your dashboard, the checks your agent sends, and Autopilot. Then two commands bring it into your project.
Or pull the gallery version as it is, without an account:
npx synthesisui@latest init --styles tailwind --ds cinnabarnpx synthesisui@latest connectnpx synthesisui@latest connectUse the "Cinnabar" design system (slug: cinnabar) to: build the UI I describe next First make sure it's installed: run `npx synthesisui add cinnabar` if `_synthesisui/ds/cinnabar/` isn't in the project yet. Read these files first (highest authority first): - _synthesisui/ds/cinnabar/rules.md - project rules for this system (if present); obey them above everything else - _synthesisui/ds/cinnabar/philosophy.md - the mission, voice and principles (if present); let it shape every screen - _synthesisui/ds/cinnabar/v19/GUIDE.md - how to apply the system, the recipes and the token vocabulary Follow this contract (target framework: next): - First check whether this refers to UI that already exists in the project. If it does, modify only what's needed and keep the rest intact and on-system. If it doesn't, build it new. - Scope the markup with `data-ds="cinnabar"` (or rely on it at the app root). - Style with the design system only: reuse the `.ds-*` recipe classes and the DS-backed Tailwind utilities (`bg-primary`, `text-foreground`, `p-md`, `rounded-lg`, `font-display`…). Never use raw hex/px outside the system's scale. - Make sure `tokens.css` + `theme.css` are imported in the global CSS (see the GUIDE's "How to apply"). - Implement the behavior yourself (open/close, focus, routing) - the system ships the looks, not the JS. Composition (make it look composed, not just correct): - Cap page content with a max-width container and center it - this DS ships `max-w-app` for dashboards/wide UI and `max-w-prose` for text columns. Don't stretch content edge-to-edge. - Give the page a complete, intentional layout: clear vertical rhythm, sensible density and grouped sections. Never leave a single thin row floating on an empty screen. Deliver senior-level, production-quality code: clean structure, accessible (ARIA + keyboard), and responsive.
Paste into Claude Code, Cursor or any coding agent. From your project you can also run npx synthesisui use cinnabar "…".
What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.
The system ships token names, not the fonts. Load them (Google Fonts, next/font or Fontsource) or type falls back to a generic family and loses the system's identity.
npm i lucide-reactComponents reference Lucide icon names. Install it (or swap in your own icon set) to render them.
Color
Named scales forged by the synthesis; semantic roles only ever point at them.
color.sky
400#4a97d6
500#3d8fd4
700#2874b4
color.clay
400#cf4a3c
500#c0392b
color.fern
400#6aa86b
500#5c9e5e
700#487c4a
color.sand
50#ffffff
100#f7f7f7
200#f2f2f2
300#ebebeb
400#dddddd
500#b0b0b0
600#717171
700#484848
800#222222
900#111111
color.veil
500#1a1110b3
color.amber
300#ffe9b8
400#ffd57a
500#f5a623
700#976107
750#976107
color.rausch
300#ff8aa3
400#ff5a76
500#ff385c
600#e00b41
700#b80835
750#db0028
color.semantic - resolved live via CSS variables
info
{color.sky.700}
faint
{color.sand.500}
muted
{color.sand.600}
scrim
{color.veil.500}
accent
{color.amber.700}
border
{color.sand.400}
canvas
{color.sand.100}
danger
{color.clay.500}
raised
{color.sand.50}
overlay
{color.sand.200}
primary
{color.rausch.750}
success
{color.fern.700}
surface
{color.sand.50}
warning
{color.amber.750}
foreground
{color.sand.800}
color.series - categorical data-viz palette (bg-series-*)
series-1
series-2
series-3
series-4
series-5
series-6
series-7
series-8
Foundations
Corner radius, spacing rhythm and elevation - the physical feel of the system.
radius
spacing
shadow
Typography
Display: Airbnb Cereal VF · Body: Airbnb Cereal VF · Mono: ui-monospace
Motion
Every keyframe runs live below, dressed in the system's own colors - durations, easing curves and the interactions they power.
keyframes - 6 live
easings
durations
interaction patterns
Map price pins float gently to feel alive.
'Guest favorite' tags bounce in once a card settles.
Cards rise gently into place as they appear.
The wishlist heart pops when toggled - the signature delight.
Image placeholders shimmer while photos load.
Listing cards float a little higher on hover.
Components · 9
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.
The hero search field - fully rounded, softly lifted.
Soft listing card - extra-round corners, the lightest resting shadow, floats on hover.
padding
A card wearing this system.
A card wearing this system.
emphasis
A card wearing this system.
A card wearing this system.
Compact entity/filter token - a pill holding an avatar/icon, a label and an optional ds-chip-remove. Set data-active="true" for a selected filter (tints the primary); use a <button> or add ds-chip-remove for a dismissible chip.
active
Floating pill label - the 'Guest favorite' tag. White, softly shadowed, fully rounded.
intent
Pill-shaped search field - the centerpiece. Rounded all the way, lifts a dark focus ring.
Identity token - sized circle with initials or image.
size
Friendly action with soft corners. Primary carries the lone coral; the rest stay quiet.
intent
Field trigger that reveals a focus ring on interaction.
Zero-data placeholder. Compose ds-empty-state with ds-empty-state-icon, ds-empty-state-title and ds-empty-state-description.
No projects yet
Create your first project to get started.
Icons · lucide
Icons inherit the system: color via currentColor, a standardized stroke, sizing on the scale. Lucide by default; more libraries can be enabled per system.
Pages
Cinnabar has no ready-made page. It has 33 sections, and this is what 6 of them make together. Yours starts from the same pieces.
Your main colour buttons and links
Text on your buttons: 4.8:1 - readable.
The more you say about who it is for and what they should do, the less the agent has to guess.
How much can the agent invent?
In your project, install Cinnabar once
npx synthesisui@latest init --ds cinnabarYour agent reads Cinnabar's tokens and rules from the folder this creates.
Paste this into your agent Claude Code, Cursor, Codex…
Build a landing page with SynthesisUI in the system "cinnabar".
My request: "a landing page"
Before you start: if this project does not have the cinnabar design system yet, run `npx synthesisui@latest add cinnabar`. If any SynthesisUI command asks to sign in (or says the system does not exist), run `npx synthesisui@latest login`, tell me to sign in in the browser, and wait.
Fonts: `add` writes a `fonts.ts` that loads this system's type with next/font. Import it in the root layout and put each export's `.variable` on `<body>`, as `add` prints - the templates read those variables. Don't replace it with a Google Fonts link.
Top to bottom, write each section with its template, then render it in one page, with the content written from my request:
1. npx synthesisui@latest template cinnabar nav-top-bar
content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
phone menu: npx synthesisui@latest template cinnabar phone-menu, then pass it as <AppNav PhoneMenu={PhoneMenu} ... /> so the links stay on phones. Every link that starts with # points at a section of this page: give that section the id; if no section matches, leave the item out and tell me.
text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"brand":42,"items.label":60}
2. npx synthesisui@latest template cinnabar hero
content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"action.label":26,"line":46,"link.label":56,"name":8,"options.name":118,"specs.label":38,"specs.value":40}
3. npx synthesisui@latest template cinnabar pricing-lead
content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"compare.label":50,"plans.action.label":24,"plans.facts":80,"plans.name":18,"plans.price":7,"plans.who":39,"title":42}
4. npx synthesisui@latest template cinnabar testimonials-lead
content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"all.label":52,"title":42,"voices.detail":40,"voices.name":33,"voices.quote":118}
5. npx synthesisui@latest template cinnabar closing-band
content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"action.label":31,"fact":60,"title":40}
6. npx synthesisui@latest template cinnabar footer-columns
content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"address":98,"brand":29,"columns.links.label":24,"columns.title":35,"email":52,"legal.label":48,"line":112}
Text between asterisks is emphasis: render it as <em>. Keep my words as I wrote them. Where you write the text, stay within each section's text limits.
A button or link whose href is anything other than # goes exactly where I set it - use that address as written. An href of # is yours to point at the right page of this project.
You may go beyond the list: swap a section for another variant of the same kind (`npx synthesisui@latest landing cinnabar` lists them), reorder the body, or break one layout rule on purpose when my goal calls for it. Tell me which and why.