Ivory

Ivory is white panels floating on a warm ivory sheet, with one black pill per section. Every piece on the page is a brighter white shape with big round corners, and the step from ivory to white does the dividing, not lines or shadows. A white capsule header floats at the top, the hero sits in a warm tray, and coral is kept to links, the focus ring and one dot in each eyebrow.

Read this before you add a screen, a component or a colour. The tokens live in src/app/globals.css, the faces in src/app/fonts.ts, the kit in src/components/ui/.

At a glance

Theme	Light native: an ivory canvas (#f5f3f1) with white cards and panels. Dark is a warm near-black ramp (#181514 canvas, #262321 cards), not an inversion.
Type	Onest for everything: headings at 600 with no tracking, body at 400, labels at 500, all in sentence case. JetBrains Mono for code, keys and ids only.
Colour	Warm greys, one near-black primary (#0f0e0d) and one coral (#bf3400 for link text, #ed5930 for the ring and the dots). Status is deep green, amber and brick red on pale warm tints.
Shape	Big and round: 12px fields and menu items, 16px cards and menus, 20px trays and stat tiles, 24px page panels, and a full pill on every button, badge, tab and chip.
Depth	Flat. Fill steps carry the page. Shadows sit only on things that float: the header capsule, menus, popovers, tooltips, toasts, dialogs and sheets.
Signature	A white header capsule floating 12px under the top edge, a hero in one warm 20px tray, and eyebrow chips that lead with a coral dot.

Principles

1. White pieces on ivory: the fill step divides, never a line.
2. Every button, badge, chip, tab and switch is a full pill.
3. One black pill per view or section, beside a white outline pill.
4. Coral is a mark, never a fill: links, the focus ring, eyebrow dots and chart series 1.
5. Sentence case and zero tracking on every label.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#f5f3f1	#181514	The page floor
surface-soft	#fdfbf9	#1f1c1a	Section bands, sidebars, table heads
surface-card (--muted)	#f6f0ec	#1f1c1a	Tinted fills: inactive tabs, hover rows, code
surface-strong	#ebe3e0	#120f0e	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#2d2928	Menus, selects, toasts: always opaque
card	#ffffff	#262321	The card fill
surface-dark	#181514	#0f0e0d	The inverted panel
hairline (--border)	#ebe3e0	#34312f	Every border and divider
ink (--foreground)	#0f0e0d	#faf7f7	Headings and primary text
body-strong	#2b2a29	#ebe3e0	Emphasised body text
body	#44403b	#cabfbb	Running text
muted (--muted-foreground)	#665f5a	#a29793	Secondary text, captions
muted-soft	#928a85	#7a716d	Placeholders, disabled text, icons at rest
primary	#0f0e0d	#faf7f7	The action colour
accent (--accent-fill)	#bf3400	#f56138	The saturated accent: links, the accent badge
accent-soft	#fdede6	#2e1a13	The tint an accent label sits on
danger (--destructive)	#ad322d	#ef6f64	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #006d52, #944d00 and #ad322d in light, #00ac82, #d88035 and #ef6f64 in dark.

Ivory's own variables, read by the landing hooks and the kit: --stage (#efe9e5 light, #1f1c1a dark), --mark (#ed5930 light, #f56138 dark).

How colour is used

• Ink (#0f0e0d) fills the primary pill, the accent badge, checked controls and the progress bar. Near-white takes that role in dark.
• Coral text (text-accent, #bf3400) marks links. The brighter coral (#ed5930) draws the focus ring and the eyebrow dots.
• Text steps down a warm ladder: ink, body-strong, body, muted and muted-soft. Quiet a line by stepping down, never by lowering opacity.
• The warm sunken tone (bg-surface-card, #f6f0ec) lives only inside white: icon tiles, table heads, hover rows. On the ivory canvas it vanishes.
• Green, amber and brick red mark status only, as pale warm tints with the status colour as text or icon.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six series lead with coral, then blue, deep teal, violet, amber and rose. In dark they brighten to hold their edge on the near-black. Assign them in order; never let colour be the only way to tell two series apart.

Dark mode

The palette is declared twice in src/app/globals.css: light on :root, dark under @media (prefers-color-scheme: dark) and again on .dark, where the class wins in both directions. @theme inline points every utility at those variables, so bg-canvas is one class that follows the mode. src/lib/design.ts sets the theme a first visit opens in: light here, because Ivory is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Onest (font-display, font-body): headings and display type; running text and interface copy.
• JetBrains Mono (font-mono): code, ids and tabular labels.

Onest is a round, open grotesque that stays friendly at 60px and clean at 12px, so one face carries headings, labels and body. JetBrains Mono has a tall x-height that sits level with Onest, and it only shows up in code, keys and ids.

Every face loads through next/font/google in src/app/fonts.ts: downloaded at build time and served from this app. Change a face there and here, together.

Scale

Token	Size	Line	Tracking	Weight	Use
text-display-xl	60px	1.05	0	600	The hero headline, desktop
text-display-lg	48px	1.08	0	600	The hero headline, tablet
text-display-md	36px	1.12	0	600	Section headlines, the hero on phones
text-display-sm	30px	1.2	0	600	Section headlines on phones, big numbers
text-title-lg	24px	1.3	0	600	Page titles in the app
text-title-md	18px	1.44	0.01em	600	Card titles
text-title-sm	16px	1.5	0	600	Small headings, table titles
text-body-lg	18px	1.6	0	400	Lead paragraphs
text-body-md	16px	1.625	0	400	Running text
text-body-sm	14px	1.43	0	400	Interface copy, table cells
text-caption	12px	1.33	0	500	Metadata, helper text
text-caption-uppercase	11px	1.45	0.05em	600	Eyebrows above headings
text-button	14px	1	0	500	Buttons
text-nav-link	14px	1.43	0.02em	400	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. Onest 600 with no tracking for headings: a 60px hero on wide screens (36px on phones), 30 to 36px section titles, 18px card titles. Body is 16px at 400 and interface text is 14px. Emphasis is weight, never slant: Onest has no italic.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 32px, xxl 48px, section 96px (the gap between landing sections).
• Content sits in max-w-content (1280px) with px-md on phones and px-lg from sm up. Reading text stops at max-w-measure (672px).
• Spacing steps are 4, 8, 12, 16, 24, 32 and 48px, with 96px between landing sections.
• Marketing is generous: 64 to 80px inside a white panel, 12px ivory gaps between stat tiles and logo pills.
• The app is compact: controls 32, 40 and 44px tall, table rows 48px, 14px interface text.
• The header capsule, the hero tray and every page panel line up on one content column, 16px from the screen edge on phones.

Shape and depth

Token	Value	Where
rounded-xs	6px	Breadcrumb, Checkbox, Kbd
rounded-sm	8px	Accordion, the landing page
rounded-md	12px	DropdownMenu, Input, Select, Skeleton, Tabs, Tooltip, the landing page
rounded-lg	16px	Alert, Card, DropdownMenu, Popover, Select, Table, Toaster, the landing page
rounded-xl	24px	Card, the landing page
rounded-pill	9999px	Badge, Button, Dialog, Input, Progress, Sheet, Switch, Tabs, Toaster, the landing page
rounded-full	9999px	Avatar, RadioGroup, Switch

Radii are 6px on the checkbox and Kbd, 12px on fields and menu items, 16px on cards, menus and alerts, 20px on trays, stat tiles and the product window, 24px on page panels and sheets, and 28px on the dialog's outer tray. Borders are 1px solid warm lines that close a shape and never divide a page. Cards, panels, buttons and inputs carry no shadow; the header capsule, menus, popovers, tooltips and toasts take a soft lift, and dialogs and sheets a deeper one.

Components

Every component lives in src/components/ui/ and is written against the tokens above. Import from there; never restyle a kit component inline to make a one-off.

Component	In Ivory
Button	A full pill in Onest 14px/500, sentence case, with a transparent 1px border so every variant matches in size, and a 1px press. Primary is the near-black pill with white text; secondary is a warm quiet pill; outline is the white pill with a warm line; ghost gets a faint ink wash on hover; danger is soft at rest and solid on hover; link is coral text. Sizes are 32, 40 and 44px tall, and the icon button is a 40px circle; large sets its label at 600 and never grows past 14px. Focus is a 2px coral outline, 2px clear.
Badge	A 24px pill with a 12px/500 label and no shadow. Neutral is a warm well with body text; accent is the one solid chip, black in light and near-white in dark; success, warning and danger are pale tints with status text. The uppercase mode (11px/600, 0.05em) is the only tracked capitals the kit writes.
Card	16px corners and no shadow in any tone. Default is white with a warm hairline; soft is white with no line, carried by the step from ivory; strong is a warm well; outline is a stronger warm line with no fill; dark is warm charcoal. Large padding switches to 24px corners, because a big card is a panel.
Input, Textarea, Select	40px white fields with 12px corners, a 1px warm line and 14px ink text. Focus turns the line coral with a 3px coral halo. An invalid field takes the danger line, and the danger halo on focus. The file button is a small sunken pill. Select content is a white menu with 16px corners, 12px items that highlight to the warm sunken tone, and an ink check.
Checkbox, RadioGroup, Switch	A 16px checkbox with 6px corners and a 16px radio circle, white with a warm grey line; checked fills with the primary (black in light, near-white in dark) and shows a tick or a 6px dot. The switch is a 36 by 20px pill, warm grey when off and primary when on, with a 16px knob that carries a tiny shadow. All three take the coral focus outline.
Tabs	Default tabs are 32px pills in a 36px warm pill track; the active one is a white pill with a tiny shadow. Line tabs drop the track and mark the active tab with a 2px ink bar.
Accordion	Rows split by warm hairline seams, with none after the last. Triggers are 16px/500 ink with a muted chevron that turns 180 degrees; content is 14px body text.
Dialog, AlertDialog, Sheet	A dialog is a white body inside a 6px warm band with 28px outer corners, and its footer is split off by a 4px band of the same warm, so it reads as two white cards in one tray. The scrim is a light charcoal with a 4px blur. Alert dialogs pair the outline pill with the primary or danger pill. Sheets sit flush to the edge with 24px corners on the open side.
DropdownMenu, Popover, Select content, Tooltip	White surfaces with a warm hairline, 16px corners and a soft lift. Items are 12px rounded rows that highlight to the warm sunken tone; danger items are brick red. Tooltips are not inverted: a white chip with 12px corners, 12px/500 ink text and a white arrow.
Table	Sits on its own white surface. The head is a sunken warm band with 12px rounded ends and sentence-case 12px labels. Rows are 48px with seams inset 12px from both ends and none after the last. Figures use tabular numbers; ids and keys go in JetBrains Mono.
Alert	16px corners, no border and no shadow, with a 16px icon in its own column. Info is a faint ink wash with an ink icon; success, warning and danger are pale tints with the icon in the status colour.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are circles at 24, 32 and 40px with a faint ink ring inside. Progress is a 6px pill with a black fill, never coral. Skeletons pulse a faint ink wash with 12px corners, and spinners take the label colour. Separators are 1px warm hairlines. Kbd is JetBrains Mono at 11px on the sunken tone with 6px corners. Breadcrumbs split with a muted chevron; pagination items are 40px pills and the current page is the white outline pill. Labels are 14px/500 ink; field help and errors are 12px. Toasts are white with a hairline and 16px corners, and show status only in the icon.

The landing page

The landing page is the same in every design; the design decides how it looks. Its sections carry data-slot hooks (listed at the top of src/components/marketing/section-heading.tsx) that globals.css may style. Ivory styles these:

• site-header: a white capsule floating 12px under the top edge, inset to the content column, 56px tall, with the page's one soft shadow and no rule or blur.
• site-nav: links are pills in body text that fill with the warm hover tone, in ink, on hover and on the current page.
• brand-mark: a black circle at the capsule's left end.
• hero-backdrop: one flat warm tray with 20px corners, 12px under the capsule, holding the headline, the buttons and the product window; hero leaves 48px of bare ivory under it.
• hero-eyebrow and section-eyebrow: white sentence-case chips with muted 14px text, led by a 6px coral dot; inside a white panel the chip sinks to the warm sunken tone.
• hero-title and section-title: plain ink with balanced lines; hero-subtitle holds a 36rem measure.
• product-preview: a flat white window with 20px corners and a warm hairline, no shadow; a hero screenshot gets the same frame.
• section: no rules between sections; how it works and any soft section become a white 24px panel on the ivory.
• step and step-marker: the connector line goes, and markers are sunken circles with ink numerals.
• showcase-visual: each picture sits on the same warm 20px tray as the hero.
• feature-card and testimonial: white cards with no outline; feature-icon is a 12px sunken tile with an ink icon.
• stat-grid and stat: separate white 20px tiles with 12px ivory gaps and tabular figures.
• logo-cloud and logo: a quiet sentence-case title over a row of white 56px pills, 12px apart.
• card (the featured plan): a 1px ink edge in place of the coral ring, flat.
• faq: the questions sit in one white 24px panel split by warm seams, with none after the last.
• cta-panel: flat warm charcoal with 24px corners, the page's one dark moment, with no wash, glow or shadow.
• site-footer: the last white 24px panel, inset like the header and 16px off the bottom edge, with sentence-case column titles.

Everything else is type, space and the kit.

Signed-in screens

The dashboard sits on the ivory canvas beside a near-white sidebar, with white cards on warm hairlines, tables with a sunken head band and one black pill per screen.

Sign-in is one white card centred on the ivory, with 40px fields, a full-width black pill to submit, coral text links and social sign-in as white outline pills.

Do and don't

Do

• Put white bg-card boxes on the bg-canvas ivory and let the fill step separate them.
• Make every button, badge, chip, tab and switch a full pill (rounded-pill).
• Use 12px corners on fields and menu items, 16px on cards and menus, 20px on trays and stat tiles, 24px on page panels.
• Keep one black primary pill per view or section, beside a white outline pill.
• Keep coral to links, the focus ring, eyebrow dots and chart series 1.
• Write every label in sentence case: eyebrows, buttons, table heads, menu labels, footer titles.
• Step down the text ladder (ink, body-strong, body, muted, muted-soft) to quiet a line. Never lower the opacity.
• Use bg-surface-card only inside white surfaces (icon tiles, table heads, hover rows), where it reads as a warm sunken step.

Don't

• Don't put a shadow on a card, panel, button or input. Shadows belong to things that float: menus, popovers, tooltips, toasts, dialogs, sheets and the header capsule.
• Don't draw a rule between sections, under the header or above the footer. Use space or a fill step.
• Don't fill a button, band, icon or heading with coral. Coral text is for links.
• Don't uppercase or letter-space a label. The badge uppercase mode is the one exception in the kit.
• Don't use a cool grey (zinc, slate, gray, neutral). Every neutral here leans warm.
• Don't add a gradient, glow, blob, grid or pattern behind a headline.
• Don't square off a control. Fields and menu items take 12px, buttons, tabs and chips are pills, and the 6px checkbox is the one small corner in the kit.
• Don't outline a card in colour to feature it. Feature it with the black pill and the black badge.

Working in this design

Pasting from shadcn/ui. The token layer carries shadcn's variable names, so most snippets render unmodified. Two utility names mean something else here: bg-muted becomes bg-surface-card, and bg-accent / text-accent-foreground (a hover surface upstream) become bg-surface-card / text-ink. Here muted is a text colour and accent is the saturated accent.

Adding a token. Add it to all three palette blocks in globals.css (light, the dark media query, .dark), map it in @theme inline, and document it in the palette table above. Check contrast in both modes.

Adding a component. Check the kit first: most needs are a variant of Button, Card or Badge, or a composition on the page. A new component gets its own file in src/components/ui/, token classes only, a data-slot, and a row in the Components table here. The designer subagent owns this.