Peach

Peach is cut paper on a peach desk. Heavy black Public Sans headlines sit on cream paper under a peach band, actions are black, and one ember orange marks eyebrows, links and focus. Its signature is the hard shadow: the product frame, the featured plan, the sign-in card and the closing panel cast a solid block with no blur. Menus, dialogs and toasts float on a soft shadow instead, so the blocks always read as print.

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: cream paper (#fff6ec) under a peach band (#ffe6c8). Dark is the same desk at night: espresso paper, cream type, peach buttons and ember blocks.
Type	Public Sans 850 for headlines (72px at -0.047em) and 800 for titles down to 24px. Inter 400 and 600 for everything you read or click. IBM Plex Mono for code, keys and ids only.
Colour	Ink (#212121) type, black actions, warm tan hairlines and one ember: #ee5a29 for marks, #bc3e10 for text. Status colours mark status only.
Shape	8px on buttons, inputs, cards and menus, 12px on large buttons, dialogs and frames, pills for badges, avatars, switches and progress.
Depth	Two kinds only: solid blocks with no blur (4px and 8px, black; ember in dark) for printed things, a soft two-layer shadow for things that float.
Signature	A peach masthead and hero band, and a white product frame with a 2px ink edge that drops an 8px block over the band's edge onto the cream.

Principles

1. Ember is punctuation: eyebrows, ticks, underlines, the focus halo and one badge. Never a fill.
2. Black is the only filled action in light, peach in dark. One primary button per view.
3. Two kinds of depth: a solid block for printed things, a soft shadow for things that float. Never a blurred offset.
4. Every block pairs with a line and falls down and to the right. One or two per view.
5. The heavy face stops at 24px. Everything you read or click is Inter.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#fff6ec	#150f0b	The page floor
surface-soft	#fff0dd	#1a140f	Section bands, sidebars, table heads
surface-card (--muted)	#fee9d2	#251c16	Tinted fills: inactive tabs, hover rows, code
surface-strong	#f7dabd	#372b22	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#1f1812	Menus, selects, toasts: always opaque
card	#ffffff	#1c1610	The card fill
surface-dark	#1a1511	#090604	The inverted panel
hairline (--border)	#e9dac9	#372d25	Every border and divider
ink (--foreground)	#212121	#fff6ec	Headings and primary text
body-strong	#333333	#eae1d8	Emphasised body text
body	#444444	#d7cec3	Running text
muted (--muted-foreground)	#616161	#b3a79b	Secondary text, captions
muted-soft	#8e8e8e	#81756a	Placeholders, disabled text, icons at rest
primary	#000000	#ffe6c8	The action colour
accent (--accent-fill)	#bc3e10	#ee5a29	The saturated accent: links, the accent badge
accent-soft	#ffe6dc	#39150b	The tint an accent label sits on
danger (--destructive)	#ba234c	#f3798b	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #267543, #945f0e and #ba234c in light, #63d18f, #f1bf5b and #f3798b in dark.

Peach's own variables, read by the landing hooks and the kit: --peach (#ffe6c8 light, #2f1b0e dark), --peach-line (#efceab light, #4d301f dark), --ember (#ee5a29 light, #ee5a29 dark), --block (#000000 light, #ee5a29 dark), --edge (#000000 light, #ffe6c8 dark).

How colour is used

• Ink (#212121) carries headlines and labels. Black (bg-primary) is the only filled button in light; in dark it turns peach with espresso text.
• Peach (--peach) is the band: the masthead, the hero, how it works, the footer, the showcase stages and the feature-icon discs. Its rules are --peach-line.
• Ember (--ember, #ee5a29) draws marks: the eyebrow squares, the brand-mark block and the window dot. As text it is text-accent (#bc3e10 in light), which clears 4.5:1 on cream and on peach.
• Reading text steps from text-body-strong (#333) to text-body (#444) to text-muted (#616161). muted-soft is for placeholders, disabled states and icons at rest.
• Green, amber and red mark status only, as soft tints with the strong 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 ember, then ink, blue, amber, green and plum (ember, cream, sky, gold, mint and pink in dark). Ember always goes first and ink is the quiet second series. 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 Peach is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Public Sans (font-display): headings and display type.
• Inter (font-body): running text and interface copy.
• IBM Plex Mono (font-mono): code, ids and tabular labels (weights 400, 500).

Public Sans is variable, so headlines sit at a true 850: heavy, tight and sturdy without turning round or wide. Inter carries every word you read or click at plain weights so the display face leads, and IBM Plex Mono gives keys and ids a quiet typewriter feel.

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	72px	1	-0.047em	850	The hero headline, desktop
text-display-lg	52px	1.1	-0.037em	850	The hero headline, tablet
text-display-md	38px	1.1	-0.027em	850	Section headlines, the hero on phones
text-display-sm	32px	1.1	-0.02em	800	Section headlines on phones, big numbers
text-title-lg	24px	1.2	-0.015em	800	Page titles in the app
text-title-md	18px	1.35	-0.01em	600	Card titles
text-title-sm	16px	1.4	-0.01em	600	Small headings, table titles
text-body-lg	20px	1.45	-0.01em	400	Lead paragraphs
text-body-md	16px	1.5	0	400	Running text
text-body-sm	14px	1.5	0	400	Interface copy, table cells
text-caption	13px	1.4	0	400	Metadata, helper text
text-caption-uppercase	13px	1.3	0.05em	600	Eyebrows above headings
text-button	15px	1	-0.01em	600	Buttons
text-nav-link	15px	1.4	-0.01em	600	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. Headlines are Public Sans 850 at 72, 52 and 38px with tight tracking (-0.047em to -0.027em), and 800 at 32 and 24px; the heavy face stops there. Titles, body, buttons, labels and nav are Inter 400 and 600 in sentence case, with caps only on caption-uppercase eyebrows. No type step renders in mono.

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).
• A 4px grid: 4, 8, 12, 16, 24, 32 and 48px, with 96px between landing sections.
• Comfortable density: cards pad 24px, controls are 40px tall and large calls to action 60px.
• Hero copy and section headings sit left on the content edge like a magazine page. The logo strip, pricing and the closing panel stay centred.

Shape and depth

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

Radii are 4px on checkboxes and keys, 6px on menu items, tabs and tooltips, 8px on buttons, inputs, cards and menus, and 12px on large buttons, dialogs and frames. Borders are always solid: a 1px warm hairline on cards and rows, a 1px tan line on fields, and a 2px ink edge only on frames that cast a block. Blocks are solid and never blurred: 4px on the sign-in card, 6px on showcase frames, 8px on the product frame, the featured plan and the closing panel, always down and to the right. Menus, dialogs, sheets and toasts float on a soft two-layer shadow.

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 Peach
Button	Inter 600 at 15px, sentence case, 8px corners, flat. Primary is black with white text and a 1.5px pressed-in edge (peach with espresso text in dark); secondary is a peach fill; outline is a white sheet with a tan line that turns ink on hover; ghost gets an ink wash on hover; link is ink with a 2px ember underline. Large is 60px tall with 12px corners and 18px type. Focus is a 2px ink ring with a 2px gap, and a press nudges the button down 1px.
Badge	A borderless pill with 13px 600 text. Neutral is a peach tint with dark text, accent is ember text on a pale ember tint, and status badges are soft tints with the strong colour as text.
Card	8px corners: a white sheet with a warm hairline and no shadow. Soft and strong step to peach tints, outline is a tan line on nothing, and dark is espresso with cream text. Titles are Inter 600 at 18px. A block appears only where the page asks for one: the sign-in card and the featured plan.
Input, Textarea, Select	White 40px fields with a tan line and 8px corners. Focus turns the line ink and adds a 3px ember halo; invalid turns the line red. Select content is a white menu with a hairline, a soft shadow and an ink check.
Checkbox, RadioGroup, Switch	16px boxes and circles with a 1.5px grey line on white. A checked box is black with a white tick; a chosen radio gets an ink ring and an ink dot. Switches are flat pills: a tan track when off, black when on (peach in dark).
Tabs	Default tabs sit in a peach-tint track and the active tab is a white chip with a hairline. Line tabs mark the active tab with a 2px ember bar.
Accordion	Rows split by hairlines, Inter 600 triggers in ink that underline in ember on hover, and a chevron that turns 180 degrees and goes ember when open.
Dialog, AlertDialog, Sheet	White panels with a hairline and the soft shadow over an espresso scrim; dialogs have 12px corners. Titles are Public Sans 800 at 24px. Alert dialogs pair a primary or danger action with an outline cancel.
DropdownMenu, Popover, Select content, Tooltip	White, a hairline, 8px corners and the soft shadow. Items highlight to a peach tint, group labels are caps and shortcuts are IBM Plex Mono. Tooltips are inverted and flat: black with white text, peach with espresso text in dark.
Table	A hairline frame with 8px corners, a soft header row in Inter 600 at 13px (not caps), hairline rows, tabular numbers, a peach-tint hover and a pale ember selected row. Right-align number columns.
Alert	8px corners and a 1px line. Info is a soft peach sheet with an ink icon; success, warning and danger are soft tints with a status line at 25% and an icon in the status colour.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are circles with a hairline ring, a peach fallback and ink initials. Progress is a pill with a black fill on a tan track. Skeletons pulse in a peach tint and spinners take the text colour. Separators are 1px hairlines. Kbd is IBM Plex Mono on a peach tint with a tan line and a 2px bottom lip. Breadcrumbs split with chevrons and the current page in pagination is a black square. Labels are Inter 600 at 14px. Toasts are white sheets with a soft shadow and a status 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. Peach styles these:

• site-header: peach, with no rule under it and no blur, so the masthead and the hero read as one sheet.
• site-nav: plain ink links with no hover wash; hover and the current page get a 2px ember underline.
• brand: the name in Public Sans 800 at 20px, tracked -0.04em.
• brand-mark: the ink square with 6px corners, a heavy letter and a 2px ember block.
• hero-backdrop: a flat peach band from the top down to about the middle of the product frame, closed by a peach-line rule. No wash, grid or gradient.
• hero-title, hero-subtitle, hero-actions, hero-note: left aligned on the content edge, with the two big buttons 16px apart.
• hero-eyebrow: a white chip with a 1.5px ink edge, 8px corners, a 3px block and an ember square; a linked chip lifts 1px on hover.
• hero-visual: lets the frame span the full content column and gives a hero image the same ink edge.
• product-preview: a white sheet with a 2px ink edge, 12px corners and an 8px block that hangs over the band's edge.
• product-preview-bar: stays white, with ember, amber and green window dots.
• section how-it-works: the middle peach band, with peach-line rules above and below.
• step-marker: black circles with heavy white Public Sans numbers (peach with espresso numbers in dark).
• section-eyebrow: ember text led by an 8px ember square, on cream and on peach.
• section-heading: left aligned in every section but pricing; section-description stops at 36rem.
• showcase-copy: puts the row titles back in Public Sans.
• showcase-visual: a peach stage in a 2px ink frame with 12px corners and a 6px block, always down and to the right.
• card with data-highlighted (the featured plan): a 2px ink edge and an 8px block in place of an ember outline.
• feature-icon: a 44px peach disc with a 1.5px ink ring and an ink icon.
• stat-grid and stat: one 8px frame of white cells split by hairlines; stat-value uses tabular numbers.
• logo: Public Sans 800 wordmarks tracked tight; image logos go grey at 75%.
• faq: the open chevron turns ember.
• cta-panel: an espresso sheet (the dark class) with a 2px peach edge, an 8px ember block and no wash.
• site-footer: peach again with peach-line rules; footer links get a 2px ember underline on hover.

Everything else is type, space and the kit.

Signed-in screens

The dashboard sits on the cream canvas with a soft sidebar, the active item on a peach tint in ink, Public Sans 800 page titles and white hairline cards with no blocks; ember shows only in links, the focus halo and accent icon tiles.

Sign-in is one white card centred on the cream with a hairline, 32px padding and the 4px black block (ember in dark), white inputs with the ember halo and a full-width black Continue.

Do and don't

Do

• Open every marketing page with the peach masthead and hero band, and let the product frame hang over the band's edge onto the cream.
• Set headlines in Public Sans 850, ink, at the scale's tracking, in two or three lines.
• Keep black (primary) as the only filled action in light and peach in dark. One primary button per view.
• Keep ember to small marks: eyebrows and their square, link underlines, the brand-mark block, the focus halo and one accent badge.
• Give a hard block (shadow-soft 4px, shadow-lift 8px) to at most one or two surfaces per view.
• Pair every block with a line: a 2px --edge on frames, a hairline on the sign-in card. Blocks fall down and to the right.
• Put white cards (bg-card) on the cream canvas with a warm hairline, 8px corners and 24px padding.
• Set buttons, labels, tabs and nav in Inter 600, sentence case, and running text in Inter 400 at 16px in text-body.

Don't

• Don't fill a surface with ember: no ember buttons, bands, cards or switches.
• Don't blur a block or lower its opacity.
• Don't put a soft drop shadow on a card that sits on the page. Soft shadows are for menus, dialogs, sheets and toasts.
• Don't set body copy, labels or card titles in Public Sans. The heavy face stops at 24px.
• Don't use pill corners on buttons or inputs: 8px, and 12px for large buttons.
• Don't put a white card on the peach band without a line or a block.
• Don't add a second accent. Blue, green and amber appear only in charts, status colours and the window dots.
• Don't use muted-soft for text people must read.

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.