Paper

Paper is a magazine page for software: serif headlines on white paper, one peach note and product sheets floating in a warm, grainy haze. Headlines are a light serif that never goes bold, and everything else is a quiet grotesque in half-step weights. Cards are flat mist panels with no lines; only product pictures and overlays float. Every button is a pill.

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 white paper (#ffffff). Dark is Paper at night: the same page on graphite (#111214), with peach taking over as the accent.
Type	Source Serif 4 at 450 for h1, h2 and dialog titles, never bold, italic only for kickers and numerals. Archivo in half steps (400, 430, 480, 500 at most) for everything else. Source Code Pro for keys and code only.
Colour	Ink (#17191c) on white, mist (#f2f2f3) cards, slate (#676b75) quiet text. Peach (#fbe1d1) and sienna (#5d2a1a) are the only warm colours.
Shape	Pills for every button, badge, tab and switch; 24px corners for every card, stage and dialog; 16px for fields; 20px for menus.
Depth	Flat mist content. Only things that float cast a shadow (product sheets, the featured plan, the CTA, menus and dialogs), each with a 5% ring as its edge.
Signature	A grainy peach and lilac haze behind a 90px serif headline, with a white product sheet floating out of it and a collaborator's cursor on its button.

Principles

1. The serif names things (pages, sections, dialogs); the sans runs everything inside a card or a control.
2. Nothing is bold. The serif stays at 450 and the sans tops out at 500.
3. A card is made by its fill, not by a line. Lines only split rows.
4. Only things that float cast a shadow. Content lies flat on the page.
5. Peach is spent once per page at card size; sienna marks small things.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#ffffff	#111214	The page floor
surface-soft	#fafafb	#151618	Section bands, sidebars, table heads
surface-card (--muted)	#f2f2f3	#1b1c1f	Tinted fills: inactive tabs, hover rows, code
surface-strong	#e8e8eb	#2a2c31	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#202226	Menus, selects, toasts: always opaque
card	#ffffff	#202226	The card fill
surface-dark	#17191c	#0a0b0c	The inverted panel
hairline (--border)	#e4e4e7	rgb(255 255 255 / 0.09)	Every border and divider
ink (--foreground)	#17191c	#f4f4f5	Headings and primary text
body-strong	#26292e	#e6e6e9	Emphasised body text
body	#3f434a	#cbccd1	Running text
muted (--muted-foreground)	#676b75	#a1a4ad	Secondary text, captions
muted-soft	#8a8d96	#7d808a	Placeholders, disabled text, icons at rest
primary	#17191c	#f4f4f5	The action colour
accent (--accent-fill)	#5d2a1a	#f2b497	The saturated accent: links, the accent badge
accent-soft	#fbe1d1	#3a2119	The tint an accent label sits on
danger (--destructive)	#b42318	#f08b80	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #2b6a45, #8a5a0a and #b42318 in light, #7ccf98, #e6b45a and #f08b80 in dark.

Paper's own variables, read by the landing hooks and the kit: --header-glass (rgb(255 255 255 / 0.78) light, rgb(17 18 20 / 0.74) dark), --haze-peach (rgb(252 204 192 / 0.9) light, rgb(232 140 110 / 0.24) dark), --haze-lilac (rgb(232 220 238 / 0.85) light, rgb(150 120 196 / 0.2) dark), --haze-cream (rgb(250 240 222 / 0.9) light, rgb(214 176 120 / 0.12) dark), --haze-sky (rgb(226 233 246 / 0.6) light, rgb(110 140 196 / 0.14) dark), --grain (rgb(23 25 28 / 0.08) light, rgb(255 255 255 / 0.06) dark), --tint-blue (#e8f0fc light, #16202d dark), --tint-blush (#faeeeb light, #291c19 dark), --tint-mint (#e8f4ec light, #15231a dark).

How colour is used

• Ink (#17191c) carries text and the one dark fill, the black primary pill. At night paper white takes that role, with ink text.
• Mist (#f2f2f3) fills cards, fog (#fafafb) the one tinted band and the sidebar, and white the floating sheets, menus and fields.
• Peach (bg-accent-soft) is the first quote card, accent badges and the focus glow. Sienna (text-accent) is check marks, progress, the focus ring and text on peach. At night they swap: peach is the accent on a deep sienna fill.
• Green, amber and red mark status only, as soft fills with the status colour as text or icon.
• Pastel blue, blush and mint are mats under showcase pictures only, never under text.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six printed inks: sienna, navy, sage, ochre, mauve and graphite, lifted for the dark page. They read as ink on paper rather than a rainbow, ordered so neighbours stay distinct. 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 Paper is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Source Serif 4 (font-display): headings and display type (with italics).
• Archivo (font-body): running text and interface copy (with italics).
• Source Code Pro (font-mono): code, ids and tabular labels.

Source Serif 4 has sharp wedge serifs, a small x-height and a narrow calligraphic italic, and its optical size axis keeps a 90px headline crisp. Archivo is a tight grotesque whose variable weight gives the half steps (430, 480), and Source Code Pro is the serif's calm sibling 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	90px	1.12	-0.025em	450	The hero headline, desktop
text-display-lg	64px	1.12	-0.015em	450	The hero headline, tablet
text-display-md	44px	1.15	-0.015em	450	Section headlines, the hero on phones
text-display-sm	32px	1.2	-0.01em	450	Section headlines on phones, big numbers
text-title-lg	26px	1.25	-0.009em	450	Page titles in the app
text-title-md	20px	1.35	-0.005em	480	Card titles
text-title-sm	17px	1.4	0	480	Small headings, table titles
text-body-lg	20px	1.5	-0.005em	400	Lead paragraphs
text-body-md	16px	1.5	0	400	Running text
text-body-sm	15px	1.5	0	400	Interface copy, table cells
text-caption	14px	1.43	0	430	Metadata, helper text
text-caption-uppercase	12px	1.33	0.06em	480	Eyebrows above headings
text-button	15px	1	0	430	Buttons
text-nav-link	16px	1.5	0	400	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 Source Serif 4 at 450 with tracking that tightens with size: 90px at -0.025em in the hero, 64px and 44px for sections, 26px for page and dialog titles. Text is Archivo at 400, with 430 for captions, badges and buttons and 480 for titles and labels. Sentence case everywhere; italic belongs to the serif kickers, the step numerals and the brand initial.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 40px, xxl 64px, section 80px (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, 40, 64 and 80px.
• Sections sit 80px apart and are split by space, never by rules; a heading sits 64px above its content.
• Cards pad 16, 24 or 40px and sit 24px apart; stat tiles sit 16px apart.
• Marketing is spacious, one idea per band. The app is comfortable: 32 to 44px controls, 48px table rows, 15px interface text.

Shape and depth

Token	Value	Where
rounded-xs	6px	Breadcrumb, Checkbox, Kbd
rounded-sm	12px	Accordion, DropdownMenu, Select, the landing page
rounded-md	16px	Alert, Input, Skeleton, Tabs, the landing page
rounded-lg	20px	DropdownMenu, Popover, Select, Toaster, the landing page
rounded-xl	24px	AlertDialog, Card, 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

Two structural radii: pills for every control and 24px for every card, dialog and stage. Fields take 16px, menus and popovers 20px, list rows and menu items 12px, the checkbox and kbd 6px. Borders are 1px solid and split rows; they never frame a mist card. Shadows belong to floating things only: soft for menus, toasts and the hero chip, lift for product sheets, the featured plan and the CTA, overlay for dialogs and sheets.

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 Paper
Button	A full pill at every size in Archivo 15px at 430, sentence case, no shadow, with a 1px clear border on every variant so sizes match. Primary is the black pill (paper white with ink text at night); outline is the ink-ringed pill that sits beside it; secondary is a 5% ink wash that reads as mist on white and still shows on a mist card; ghost washes ink at 5% on hover; danger is red; link is ink text that underlines on hover. Small is 32px, medium 40px, large 44px at 17px, icon a 40px circle. Focus is a 2px sienna outline 2px out, a press nudges the pill down 1px, and disabled fades to 45%.
Badge	A 24px pill with 14px text at 430, no border and no shadow. Neutral is body grey on the strong surface, accent is sienna on peach, and status badges take their soft fill with the status colour as text. The uppercase mode (12px, 480, 0.06em) is the only tracked capitals in the system.
Card	24px corners and never a shadow. Default is a flat mist panel with no line; soft is fog with a hairline; strong is the strong grey; outline is a hairline on nothing; dark is ink. Padding is 16, 24 or 40px. Titles are the sans at 20px and 480; descriptions are slate.
Input, Textarea, Select	40px white fields with 16px corners, a 1px grey line, 15px ink text and grey placeholders. Focus turns the line sienna and adds a 4px peach glow in place of the outline; invalid turns it red, with a soft red glow on focus. Textareas start at 96px, and the file button is a small mist pill. Select keeps the sienna line while open; its list is a white sheet with 20px corners and the soft shadow, with 36px items that wash to mist (5% ink) and an ink check.
Checkbox, RadioGroup, Switch	Checkboxes are 16px with 6px corners and radios are circles; both sit white with a grey line and fill ink when on, with a white check or dot. The switch is a 44 by 24px pill, grey off and ink on, with a 20px knob and a tiny shadow. All three take the 2px sienna focus outline.
Tabs	Default tabs are 32px pills, 15px at 430 in slate, inside a 40px mist pill track (a 5% ink wash); the active one is a white chip with a hairline and a tiny shadow. Line tabs drop the track and mark the active tab in ink with a 2px ink bar.
Accordion	Rows split by hairlines, 17px questions at 480 in ink with no underline, and a soft grey chevron that turns ink on hover and turns over in 200ms. Answers are 16px body text.
Dialog, AlertDialog, Sheet	A frosted paper scrim (a graphite veil at night), never a black curtain. Panels are white with 24px corners and the overlay shadow, no border, and a 26px serif title. Dialogs pad 24px (32px from small screens) and close with a 36px round ghost button. Alert dialogs pair an outline cancel with a primary or danger action; sheets round only the edge that faces the page.
DropdownMenu, Popover, Select content, Tooltip	White sheets with 20px corners and the soft shadow, no border. Menu items are 36px with 12px corners and wash to mist (5% ink) when highlighted; destructive items turn red. Labels and shortcuts are quiet grey in sentence case. Tooltips are small ink pills (paper white at night) with no arrow and no shadow.
Table	No header band: 14px slate head cells over a hairline, then 48px rows split by hairlines, none after the last. Hover washes ink at 3% and selected rows at 5%. Figures are tabular and right aligned; ids and keys are Source Code Pro. The footer is fog at 480.
Alert	16px corners and 16px padding, no border and no shadow, with the icon in its own column. Info is mist with an ink icon; success, warning and danger take their soft fill with the icon in the status colour.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are circles with grey fallbacks and ink initials at 480, never peach; when stacked, give each a canvas ring (ring-2 ring-canvas). Progress is a 6px pill with a sienna fill (peach at night). Skeletons pulse at 6% ink with 16px corners; spinners spin in the current colour. Separators are 1px hairlines. Kbd is Source Code Pro 12px on mist with a hairline. Breadcrumbs are grey links split by a small chevron, with the current page in ink at 480; pagination items are 40px circles and the current page wears the ink ring. Labels are 15px at 480 in ink, 8px above their field. Toasts are white sheets with 20px corners and the soft shadow, with status shown only in the icon and a small black pill for the action.

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

• hero: extra air above the headline (24px, 56px on wide screens), so the page opens like a cover.
• hero-backdrop: a 56rem grainy haze, peach to the right, lilac to the left, cream below and a breath of sky top left, faded out at the top and bottom. The grain is SVG noise used as a mask over --grain.
• site-header: white glass with no rule, so the haze shows through on scroll.
• site-nav: ink links 36px apart with no fill and a thin underline on hover and on the current page; from 80rem the nav sits in the dead centre of the page.
• brand-mark: an ink circle holding an italic serif initial, beside the serif wordmark.
• section-eyebrow: an italic serif kicker at 20px in slate, sentence case, no tracking.
• hero-eyebrow: a white paper tag on the haze with a hairline, the soft shadow and a sienna arrow.
• hero-title and section-title: balanced lines. Section titles and the CTA title grow to 64px on wide screens; the FAQ title keeps 44px.
• hero-subtitle and hero-note: a 22px subtitle in soft ink and a note in body grey, both readable on the peach.
• showcase-copy: the row titles go back to the serif at 450.
• product-preview and product-preview-bar: a white sheet with no line and the lift shadow. On wide screens hero-visual adds an ink cursor and a round initials bubble over its New request button.
• showcase-visual: pastel mats (blue, blush and mint in turn) holding the picture as a white sheet with 20px corners and the lift shadow.
• feature-grid, feature-card and feature-icon: flat mist cards 24px apart, each opening with a 44px white coin and an ink icon.
• stat-grid, stat and stat-value: separate mist tiles 16px apart, each figure a 44px serif with lining tabular numbers.
• testimonial: mist quote cards with 18px quotes; the first is the page's one peach card, every word in sienna.
• section how-it-works: the one fog band, edge to edge, with no rules. Soft sections lose their rules too.
• step and step-marker: editorial columns with a hairline on top and a 44px italic serif numeral, no circle and no connector.
• section logos: the strip title becomes a 15px slate line in sentence case over the serif wordmarks.
• faq: hairline rows with 20px of air each way.
• cta-panel: the one dark block, graphite with the hero's haze laid twice so it glows, the same grain, a 64px title and a body grey line.
• site-footer: plain paper with a hairline on top, sentence-case sans column titles and links that underline on hover.
• The featured plan (card with data-highlighted): a white sheet with the lift shadow instead of an accent ring, the one plan that floats.

Everything else is type, space and the kit.

Signed-in screens

The dashboard and settings sit on white paper with a fog sidebar, 26px serif page titles, flat mist cards with 24px corners, hairline tables with no header band and one black pill per screen.

Sign-in is one mist card about 24rem wide with the soft shadow, a 26px serif title, white 40px fields with the peach focus glow, a full-width black pill and outline pills for social sign-in.

Do and don't

Do

• Set every h1 and h2 in the serif at 450, and let the big ones be big: 90px for the hero, 64px for section titles on wide screens.
• Pair every black primary pill with an ink outline pill on the same row, and keep one black pill per view.
• Use pills for every button, badge, tab and switch, and 24px corners for every card, stage and dialog.
• Keep content cards flat mist. Give the lift shadow only to things that float: product pictures, the featured plan, the CTA.
• Spend peach once per page at card size (the first quote), plus small accent badges and the focus glow.
• Write eyebrows in plain sentence case; the design turns them into italic serif kickers.
• Use the half-step weights: 430 for small text, 480 for titles and labels, 500 at most.
• Set stats and prices in the serif with lining tabular figures, and table figures in the sans with tabular-nums.

Don't

• Don't bold the serif, italicise body text, or set a paragraph in the serif.
• Don't add a chromatic colour beyond peach and sienna: no blue buttons, no green highlights outside a status.
• Don't put a shadow on a content card, a button or an input.
• Don't square a corner: nothing interactive goes below 12px, except the 6px checkbox and kbd.
• Don't put the peach card on a grey, tinted or dark band; it sits on white.
• Don't use sienna for paragraphs. It is for labels on peach, focus and small marks.
• Don't draw rules between sections or under the header; use space, or the one fog band.
• Don't use the haze or the grain anywhere but behind the hero and inside the CTA.

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.