Clay

Clay is a warm cream page with saturated clay tiles. Feature cards cycle through six colours, each with its own paired text colour, and headlines are a chunky rounded face at 800. Buttons are soft pills with a pressable bottom edge, and surfaces round off at 16 to 32px. Nothing is cool grey: lines, quiet text and shadows all lean warm brown.

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 on a cream canvas (#fffaf0). Dark is Clay at night: the same page on espresso (#1b1613) with cream ink, where the six tiles turn bright and carry dark ink.
Type	Nunito at 800 for every headline, title, button, badge and eyebrow, with tight tracking on the big sizes. Nunito Sans for running text at 400, captions at 600 and labels at 700. Ubuntu Sans Mono for keys and code.
Colour	Warm ink (#1a1410) on cream, cream card panels (#f5f0e0) and warm brown greys for quiet text. Hot pink (#cc1e65) is the accent. The tiles are hot pink, deep teal, lavender, peach, ochre and mint.
Shape	Pills for every button, badge, tab, switch and eyebrow. 16px corners for fields, 20px for menus, 24px for cards, 28px for landing tiles, 32px for dialogs.
Depth	Colour first, shadow second. Buttons, tiles and the hero slab have a pressed bottom edge; only menus, dialogs, toasts and the product window cast a real shadow.
Signature	Six saturated feature tiles in rotation, a product window resting on a peach clay slab, coloured pill eyebrows and a hot pink CTA with clay confetti.

Principles

1. A tile carries its own text colour. Use the pair (--chart-N with --on-chart-N), never pick text for a fill by eye.
2. Warm, not grey: every line, quiet text and shadow leans brown, and the footer stays cream.
3. Headlines are chunky and rounded at 800; running text stays at 400.
4. Pills for actions, big round corners for surfaces. Nothing interactive is square.
5. Colour lives in tiles and pills on the landing page; the signed-in app stays cream and calm.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#fffaf0	#1b1613	The page floor
surface-soft	#faf5e8	#211b17	Section bands, sidebars, table heads
surface-card (--muted)	#f5f0e0	#2a231d	Tinted fills: inactive tabs, hover rows, code
surface-strong	#ebe4d2	#372e26	Pressed fills, progress tracks
surface-solid (--popover)	#fffdf8	#241e19	Menus, selects, toasts: always opaque
card	#fffdf8	#29221c	The card fill
surface-dark	#201914	#100c0a	The inverted panel
hairline (--border)	#e6dac3	#3e342b	Every border and divider
ink (--foreground)	#1a1410	#fbf3e4	Headings and primary text
body-strong	#2e251d	#f3e9d7	Emphasised body text
body	#4a3f35	#dacfbc	Running text
muted (--muted-foreground)	#6b5e50	#b0a18c	Secondary text, captions
muted-soft	#94867a	#8c7e6d	Placeholders, disabled text, icons at rest
primary	#1a1410	#fbf3e4	The action colour
accent (--accent-fill)	#cc1e65	#ff6b9d	The saturated accent: links, the accent badge
accent-soft	#ffe9f1	#46192c	The tint an accent label sits on
danger (--destructive)	#c21f1f	#ff7d73	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #137336, #9a4f00 and #c21f1f in light, #5fd68d, #f2b84b and #ff7d73 in dark.

Clay's own variables, read by the landing hooks and the kit: --on-chart-1 (#ffffff light, #1a1410 dark), --on-chart-2 (#fffaf0 light, #1a1410 dark), --on-chart-3 (#1a1410 light, #1a1410 dark), --on-chart-4 (#1a1410 light, #1a1410 dark), --on-chart-5 (#1a1410 light, #1a1410 dark), --on-chart-6 (#1a1410 light, #1a1410 dark), --clay-edge (rgb(26 20 16 / 0.14) light, rgb(0 0 0 / 0.24) dark), --header-glass (rgb(255 250 240 / 0.84) light, rgb(27 22 19 / 0.82) dark), --glow-1 (rgb(255 176 132 / 0.5) light, rgb(255 140 90 / 0.16) dark), --glow-2 (rgb(184 164 237 / 0.4) light, rgb(160 130 240 / 0.14) dark), --glow-3 (rgb(232 185 74 / 0.32) light, rgb(240 190 80 / 0.1) dark), --mat (#ffb084 light, #c4673f dark), --cta (#da226d light, #da226d dark), --on-cta (#ffffff light, #ffffff dark).

How colour is used

• Ink (#1a1410) carries text and the primary pill. At night cream (#fbf3e4) takes that role, with ink text on the pill.
• Cream card (bg-surface-card, #f5f0e0) fills cards, stat tiles, FAQ tiles and the How it works slab. Strong cream (bg-surface-strong, #ebe4d2) fills secondary buttons, the tab track and neutral badges.
• Hot pink (text-accent, bg-accent) is the underline on links, the progress fill, menu checks, the line-tab bar, stat figures and the CTA slab. It is never the focus ring: focus is ink by day and cream at night.
• The six tile colours (--chart-1 to --chart-6, utilities accent-1 to accent-6) each come with a paired text colour (--on-chart-1 to --on-chart-6). By day pink and teal carry white or cream, and lavender, peach, ochre and mint carry ink. At night all six are bright and carry dark ink.
• Green, amber and red mark status only, as soft fills 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. The six tile colours in order: hot pink, deep teal, lavender, peach, ochre and mint. Pink and teal lead because they read strongest on cream; at night all six turn bright, so every series reads on espresso. 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 Clay is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Nunito (font-display): headings and display type.
• Nunito Sans (font-body): running text and interface copy.
• Ubuntu Sans Mono (font-mono): code, ids and tabular labels.

Nunito has fully rounded stroke ends and a variable weight up to 1000, so headlines at 800 and 900 look chunky and soft, like rolled clay. Nunito Sans is its plain sibling: the same friendly shapes with flat ends, crisp at 15px. Ubuntu Sans Mono is a soft humanist mono for keys and code.

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.02	-0.035em	800	The hero headline, desktop
text-display-lg	56px	1.05	-0.03em	800	The hero headline, tablet
text-display-md	42px	1.08	-0.025em	800	Section headlines, the hero on phones
text-display-sm	32px	1.12	-0.02em	800	Section headlines on phones, big numbers
text-title-lg	24px	1.25	-0.015em	800	Page titles in the app
text-title-md	19px	1.3	-0.008em	800	Card titles
text-title-sm	17px	1.35	-0.004em	800	Small headings, table titles
text-body-lg	19px	1.55	0	400	Lead paragraphs
text-body-md	16px	1.6	0	400	Running text
text-body-sm	15px	1.55	0	400	Interface copy, table cells
text-caption	13px	1.4	0.005em	600	Metadata, helper text
text-caption-uppercase	12px	1.3	0.08em	800	Eyebrows above headings
text-button	15px	1	0	800	Buttons
text-nav-link	15px	1.4	0	700	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 Nunito at 800 with tracking that tightens with size: 72px at -0.035em in the hero, 52px for section titles on wide screens, 24px for page and dialog titles. Text is Nunito Sans at 400, with 600 for captions and 700 for labels. Buttons, badges, tabs and eyebrows are Nunito at 800 in sentence case; only the uppercase badge mode is tracked capitals.

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 runs on 4px: 4, 8, 12, 16, 24, 32, 48 and 96px.
• Sections sit 96px apart. Feature tiles sit 20px apart, stat and FAQ tiles 12 to 16px.
• Cards and tiles pad 24 to 28px. Fields are 44px tall; buttons are 32, 40 or 48px.
• Marketing is spacious with one coloured idea per band. The app is comfortable: 44px fields, 48px table rows, 15px interface text.

Shape and depth

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

Pills for every button, badge, tab, switch and eyebrow. Fields take 16px corners, menus and popovers 20px, cards 24px, landing tiles 28px, dialogs 32px and the CTA slab 40px; checkboxes take 6px. Lines are 1px warm hairlines, and fields, checkboxes, radios and alerts use 1.5px. Buttons, tiles and slabs have a pressed bottom edge (shadow-inset on buttons, --clay-edge in the hooks). Soft shadows sit under the switch knob and the active tab; lift goes to the product window and the featured plan; overlay goes to menus, dialogs, sheets and toasts.

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 Clay
Button	A soft pill at every size with a Nunito 800 label in sentence case. Primary is the ink pill (cream with ink text at night) with a pressable bottom edge; secondary is strong cream with the same edge; outline is a 2px ink ring with no fill; ghost washes ink at 6% on hover; danger is red; link is hot pink text that underlines on hover. Small is 32px, medium 40px, large 48px at 17px, icon a 40px circle. Focus is a 2px ink outline 2px out, a press nudges the pill down 1px, and disabled fades to 50%.
Badge	A chunky pill with 13px Nunito at 800 and no visible line. Neutral is body ink on strong cream, accent is hot pink on blush, and status badges take their soft fill with the status colour as text. The uppercase mode is 12px at 0.08em.
Card	24px corners. Default is a cream panel with a warm 1px hairline; soft is the lighter cream; strong is strong cream; outline is a 1.5px hairline on nothing; dark is espresso with cream text. Padding is 16, 24 or 32px, and titles are Nunito at 19px and 800. The saturated tiles are a landing page hook, not a card tone.
Input, Textarea, Select	44px fields with 16px corners, a 1.5px warm line and a fill a touch lighter than the page. Focus turns the line ink with a soft 3px ink halo; invalid turns it red with a red halo on focus. Placeholders are warm grey, textareas start at 96px, and the file button is a strong cream pill. Select keeps the ink line while open; its list is a cream sheet with 20px corners, firm 36px options with 12px corners and a hot pink check.
Checkbox, RadioGroup, Switch	Checkboxes are 18px with 6px corners and radios are 18px circles, both with a 1.5px warm grey line, ink when on with a cream mark. The switch is a chunky 52 by 28px pill, warm grey off and ink on, with a 24px knob and a soft shadow. All three take the 2px ink focus outline.
Tabs	Default tabs are 36px pills with Nunito labels at 700 in a strong cream pill track; the active tab is a raised cream chip with the soft shadow. Line tabs drop the track and mark the active tab with a 3px hot pink bar.
Accordion	Rows split by warm hairlines, with chunky Nunito questions in ink that turn hot pink on hover and a 20px chevron that flips in 200ms. Answers are 16px body text.
Dialog, AlertDialog, Sheet	A soft espresso scrim with a light blur. Panels are cream with 32px corners, no border and the overlay shadow, with a 24px Nunito title. Dialogs pad 24px (32px from small screens) and close with a 36px round strong-cream button. Sheets round only the edge that faces the page.
DropdownMenu, Popover, Select content, Tooltip	Cream sheets with 20px corners, a warm hairline and the overlay shadow. Menu items are 36px with 12px corners in a firm weight and wash with 6% ink when highlighted; checks and radio dots are hot pink, group labels are chunky and quiet, shortcuts are mono. Tooltips are small ink pills with chunky cream text and an arrow.
Table	Chunky Nunito head labels at 13px over a hairline, then 48px rows split by warm hairlines, with a 3% ink hover. Figures are tabular; ids and keys are Ubuntu Sans Mono. The footer is light cream in bold ink.
Alert	16px corners, a 1.5px line and 12 by 16px padding, with the icon in its own column and a chunky title. Info is the cream card with an ink icon; success, warning and danger take their soft fill, a tinted line and the status colour on the icon.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are round coins washed in lavender with chunky ink initials; a tint passed in replaces the wash. Progress is a chunky 10px pill with a hot pink fill on strong cream. Skeletons pulse at 8% ink with 16px corners; spinners spin in the current colour. Separators are 1px warm hairlines. Kbd is a 24px mono keycap on cream with a 2px bottom edge. Breadcrumbs are warm grey links that turn ink with a thick pink underline, with the current page in bold ink; the pagination ellipsis lines up with the 40px round page links. Labels are 15px bold ink and legends are chunky Nunito titles; errors are bold red. Toasts are cream sheets with 24px corners, a chunky title and small pill buttons.

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. Clay styles these:

• site-header: cream glass with no rule, so the glow shows through on scroll.
• site-nav: links are soft pills in body ink that fill with strong cream on hover and on the current page.
• brand and brand-mark: a chunky tight wordmark beside a hot pink clay tile tipped 8 degrees, with a pressed bottom edge.
• hero-backdrop: a warm glow, peach from the top, lavender left and ochre right. From 80rem it adds clay shapes in the side gutters (pink, lavender, mint and teal circles, an ochre and a peach pill), never under the words.
• hero-eyebrow: a lavender clay pill with chunky ink text; the arrow follows the text colour.
• hero-title and section-title: chunky rounded headlines that break into even lines. Section and CTA titles step up to 52px on wide screens in a 48rem column; the FAQ title keeps its size.
• hero-subtitle: warm body brown in a 40rem column.
• hero-visual, product-preview and product-preview-bar: the product window rests on a peach clay slab (terracotta at night) with 44px corners and a pressed bottom edge. The window is a cream sheet with 20px corners, no line and the lift shadow, and its three title-bar dots are pink, ochre and mint.
• section-eyebrow: chunky clay pills in sentence case. Features are pink, How it works ochre, Customers mint, Pricing peach and FAQ teal; showcase rows walk lavender, peach and mint.
• section-description: warm body brown.
• section logos and logo: the strip title is a quiet sentence-case line over chunky wordmarks in soft brown.
• feature-grid, feature-card and feature-icon: saturated clay tiles 20px apart with 28px corners, no line and a pressed bottom edge, cycling pink, teal, lavender, peach, ochre and mint. Every text colour inside follows the tile's paired foreground, and the icon sits in a coin of that foreground drawn in the tile's own colour. A tile lifts and tips a little on hover.
• showcase-visual: pictures sit on clay mats in the row's colour with 32px corners, each picture a cream sheet with 20px corners and the lift shadow.
• section how-it-works: one big rounded cream slab, inset from the page edges.
• step and step-marker: chunky 52px number coins in pink, ochre and teal, tipped like stickers, joined by a dashed warm rule.
• stat-grid, stat and stat-value: separate cream tiles 16px apart, each figure a chunky 52px number in hot pink.
• testimonial: cream quote tiles with 28px corners and no line; the middle quote of every three is the deep teal tile (bright teal at night), every word and the avatar in its paired colours.
• faq: separate cream tiles 12px apart with chunky 18px questions and no rules.
• cta-band and cta-panel: a hot pink clay slab with 40px corners, white words, a cream pill and a white outline pill, and clay confetti (ochre, lavender, mint and peach circles) in the corners.
• site-footer: stays cream, with no rule on top and chunky sentence-case column titles.
• The featured plan (card with data-highlighted): a 2px ink line and the lift shadow instead of the accent ring.

Everything else is type, space and the kit.

Signed-in screens

The dashboard and settings sit on cream with cream card panels at 24px corners, chunky Nunito page titles, bold labels, 44px fields and one ink pill per screen.

Sign-in is one cream card with a chunky title, 44px fields with the ink focus halo, a full-width ink pill and outline pills for social sign-in.

Do and don't

Do

• Cycle feature tiles through the six colours in order, and always pair --chart-N with --on-chart-N for the text.
• Set every headline in Nunito at 800 and let the hero be big: 72px with tight tracking.
• Use pills for every button, badge, tab and eyebrow, and 24px or larger corners for every card and stage.
• Keep one ink pill per view, paired with an outline pill or a quiet ghost.
• Write eyebrows in plain sentence case; the design turns them into coloured clay pills.
• Keep the signed-in app cream and calm: cream cards, warm hairlines, colour only in charts and badges.
• Give product pictures a coloured clay mat, not a grey frame.
• Check every new coloured surface in both themes before you ship it.

Don't

• Don't put a cool grey anywhere: no neutral greys for lines, text or shadows.
• Don't pick a tile's text colour by eye, or fade text on a tile with opacity.
• Don't use the pink as the focus ring; focus is ink by day and cream at night.
• Don't put two tiles of the same colour side by side.
• Don't square a corner: nothing interactive goes below 12px, except the 6px checkbox.
• Don't close the page with a dark footer; the footer stays cream.
• Don't set running text in the rounded display face or above weight 400.
• Don't add hard offset shadows or heavy outlines; depth is a soft pressed edge.

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.