Meadow

Meadow is a sunlit greenhouse on cream paper. Heavy Playfair Display headlines in black ink name every page, and round Rubik does all the reading and clicking. Every control is a pill, nothing casts a shadow, and sage leaves drawn by hand grow from behind the product picture. Dark mode is the same greenhouse at night: olive black paper, a bone pill and leaves drawn in mint.

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 first, on a sunlit bone canvas (#fffff3). Dark is olive black (#131410) with bone ink.
Type	Playfair Display 600 to 650 for headlines from 36px up. Rubik for everything else. Red Hat Mono for code, keys and ids.
Colour	Black ink and a black pill, white paper, linen bands, fern (#2e6b3c) for links and focus, sage (#beedc0) as a wash only.
Shape	A pill for every control. 10px cards and menus, 14px dialogs and textareas, 24px showcase stages and CTA panel.
Depth	Flat. White paper on cream drawn with a charcoal ink line. The only shadow is the 3px sage focus halo.
Signature	Hand-drawn sage leaves behind the hero picture, a black announcement pill with a sprout, and a leaf before every eyebrow.

Principles

1. The serif names things. Rubik does the reading and the clicking.
2. Every control is a pill: black for the one main action, an ink outline for the rest.
3. No shadows. White paper sits on cream, drawn with an ink line.
4. Sage is a wash, never an action and never a band.
5. Leaves grow in four fixed spots and never sit behind text.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#fffff3	#131410	The page floor
surface-soft	#edede2	#1a1b16	Section bands, sidebars, table heads
surface-card (--muted)	#f6f6ea	#181914	Tinted fills: inactive tabs, hover rows, code
surface-strong	#e2e2d4	#2c2d26	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#20221c	Menus, selects, toasts: always opaque
card	#ffffff	#1c1d18	The card fill
surface-dark	#000000	#070806	The inverted panel
hairline (--border)	rgb(0 0 0 / 0.15)	rgb(247 246 231 / 0.13)	Every border and divider
ink (--foreground)	#000000	#f7f6e7	Headings and primary text
body-strong	#1c1c18	#ebeadb	Emphasised body text
body	#333333	#d3d2c2	Running text
muted (--muted-foreground)	#5a5b4f	#a7a898	Secondary text, captions
muted-soft	#86877a	#7e7f71	Placeholders, disabled text, icons at rest
primary	#000000	#f7f6e7	The action colour
accent (--accent-fill)	#2e6b3c	#beedc0	The saturated accent: links, the accent badge
accent-soft	#beedc0	#203626	The tint an accent label sits on
danger (--destructive)	#b42318	#f08a74	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #1d6b45, #8a5300 and #b42318 in light, #8fdba5, #efc063 and #f08a74 in dark.

Meadow's own variables, read by the landing hooks and the kit: --leaf (#beedc0 light, #22402b dark), --leaf-line (#0f2414 light, #beedc0 dark).

How colour is used

• The page is sunlit bone (#fffff3). White (#ffffff) is paper on the page, never the page itself. Linen (#edede2) makes the bands.
• Black ink (#000000) sets headlines and fills the main pill. Body copy is charcoal (#333333) and secondary text is olive grey (#5a5b4f).
• Fern (#2e6b3c) is the only coloured text besides the status colours: link underlines, focus outlines, eyebrow leaves and check marks.
• Sage (#beedc0) is a wash: accent badges, selection, avatar and icon halos, the focus halo and the checked box.
• At night the canvas is olive black (#131410), ink and the pill turn bone (#f7f6e7), fern turns mint (#beedc0) and sage turns moss (#203626).

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. The six series are meadow flowers: fern, cornflower, marigold, heather, poppy and bark. Neighbours differ in hue and in lightness, and every light series clears 3.6:1 on the canvas. 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 Meadow is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Playfair Display (font-display): headings and display type (with italics).
• Rubik (font-body): running text and interface copy.
• Red Hat Mono (font-mono): code, ids and tabular labels.

Playfair Display is a high-contrast serif that stays crisp and heavy at 74px, so a headline reads like a magazine cover. Rubik's round corners and big x-height are the friendly counterweight, and Red Hat Mono is round and open like Rubik, so a key or an id sits calmly in a sentence.

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	74px	1.1	-0.035em	650	The hero headline, desktop
text-display-lg	60px	1.1	-0.03em	650	The hero headline, tablet
text-display-md	44px	1.15	-0.025em	600	Section headlines, the hero on phones
text-display-sm	36px	1.2	-0.02em	600	Section headlines on phones, big numbers
text-title-lg	23px	1.35	-0.01em	600	Page titles in the app
text-title-md	19px	1.45	-0.005em	600	Card titles
text-title-sm	17px	1.45	0	600	Small headings, table titles
text-body-lg	19px	1.9	0	400	Lead paragraphs
text-body-md	17px	1.75	0	400	Running text
text-body-sm	14px	1.6	0	400	Interface copy, table cells
text-caption	13px	1.5	0	400	Metadata, helper text
text-caption-uppercase	12px	1.4	0.08em	500	Eyebrows above headings
text-button	16px	1	0	500	Buttons
text-nav-link	17px	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. Playfair Display at 650 for the hero (74px) and 600 for sections (44px, 54px on desktop), tracked -0.035em to -0.02em, always with lining figures. Rubik 400 at 1.75 to 1.9 leading for text, 500 for buttons and labels, 600 for titles. Sentence case everywhere; caps only on the uppercase badge.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 32px, xxl 56px, 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).
• Airy. Sections pad 80px top and bottom on desktop, with no rules between them.
• Controls are 36px, 44px and 56px tall. Cards pad 20px and dialogs 28px.
• Body text leads at 1.75 to 1.9 and holds a 38rem to 40rem measure.
• The only bands are the linen how-it-works section, the linen footer and the ink CTA panel.

Shape and depth

Token	Value	Where
rounded-xs	5px	Breadcrumb, Checkbox, Kbd
rounded-sm	7px	Accordion, Tabs, Tooltip, the landing page
rounded-md	10px	Alert, Card, DropdownMenu, Popover, Select, Skeleton, Toaster, the landing page
rounded-lg	14px	AlertDialog, Dialog, Input, the landing page
rounded-xl	24px	The landing page
rounded-pill	9999px	Badge, Button, DropdownMenu, Input, Progress, Select, Switch, Tabs, Toaster, the landing page
rounded-full	9999px	Accordion, Avatar, Dialog, RadioGroup, Sheet, Switch

Pills for buttons, fields, badges, tabs, switches, menu items, pagination and avatars. 5px checkboxes and keys, 7px tooltips, 10px cards, menus, toasts and the product frame, 14px dialogs and textareas, 24px showcase stages and the CTA panel. There are no shadows: a 1px charcoal ink line draws paper, a 1.5px full ink line draws what you press, and a hairline divides.

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 Meadow
Button	A Rubik pill in sentence case. Primary is black with a white label (a bone pill at night), outline is a 1.5px ink line, secondary is linen and draws the ink line on hover, ghost is charcoal text, link is ink with a fern underline. Sizes are 36px, 44px and 56px, icon is a 44px circle, and focus is a 2px fern outline.
Badge	A 24px pill with a 1px border, so sizes never jump. Neutral is white paper with the ink line, accent is sage with ink text, and status badges use their soft fill. Uppercase is 12px caps, used sparingly.
Card	White paper on cream with a 1px ink line, 10px corners and no shadow. Soft is linen, strong is deep linen, outline is the ink line alone, dark is ink. Titles are Rubik 600 at 19px, never the serif.
Input, Textarea, Select	Pill fields 44px tall, white paper with the ink line. Hover darkens the line to ink and focus adds a fern line inside a 3px sage halo. Textareas keep 14px corners. Select content is white paper with pill items that highlight in sage.
Checkbox, RadioGroup, Switch	Checkboxes are 20px with 5px corners; checked is a sage fill with an ink check. Radios fill sage around an 8px ink dot. A switch is a pill: linen when off, black with a sage thumb when on.
Tabs	A linen pill track with pill triggers; the active trigger is white paper with the ink line. The line variant uses a hairline and a 2px ink bar.
Accordion	Rows split by the hairline, with 20px of padding and Rubik 500 triggers. The chevron sits in a 28px ink circle that fills ink when its row opens.
Dialog, AlertDialog, Sheet	An ink scrim at 40% with a light blur. Panels are white paper with 14px corners and the ink line, no shadow, 28px padding and Rubik 600 titles at 23px. The close button is a 36px ghost circle. Sheets pad 24px and keep the line and the corners on the inner edge only.
DropdownMenu, Popover, Select content, Tooltip	White paper, 10px corners, the ink line and no shadow. Menu items are pills that highlight in sage, with shortcuts in Red Hat Mono. Tooltips are ink with bone text and 7px corners, in both modes.
Table	A linen head row in sentence case, 14px by 16px cells, hairlines between rows and tabular numbers. Rows hover in faint cream and select in sage. Set ids and hashes in Red Hat Mono and align numbers right.
Alert	10px corners and no border. Info is sage with a fern icon; success, warning and danger use their soft fills with the icon in the status colour.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are circles on sage with a 1.5px ink ring. Progress is an 8px deep linen pill with an ink fill, skeletons pulse in deep linen, and separators are the hairline. Kbd is Red Hat Mono on white paper with a 2px bottom edge. Pagination marks the current page with the black pill. Labels are Rubik 500 in ink, and toasts are white paper with the ink line.

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

• hero-backdrop: no wash and no grid; the cream is the light.
• hero-eyebrow: a black announcement pill with bone text and an underlined label, with a two-leaf sage sprout growing out of its top edge.
• hero-title, hero-subtitle, hero-actions, hero-note: a balanced serif headline up to 62rem, an ink subtitle, more air above the buttons, and a bold Rubik proof line in ink under them.
• hero-visual: two clusters of sage leaves drawn in forest ink rise from behind the picture's top corners and bleed into the cream. They rest below 40rem.
• product-preview, product-preview-bar: white paper with a 1.5px ink line, 10px corners and no shadow, a linen title bar, outlined window dots (the first one sage) and a white pill address field.
• section-eyebrow: sentence case Rubik 600 in ink after a small fern leaf. Not a pill, not caps.
• section-heading, section-title, section-description: balanced serif titles that grow to 54px from 64rem, charcoal descriptions, and showcase titles kept in the serif.
• feature-grid, feature-card, feature-icon: open columns with no box or border, centred from 40rem. Each icon sits on a 56px sage halo drawn in ink.
• showcase-visual: a linen stage with 24px corners and a small leaf cluster growing from behind its outer top corner, switching sides with the rows.
• section (how-it-works), step, step-marker: the one linen band. Numbers are black stadiums with a bone serif numeral, joined by a 1.5px ink line.
• stat-grid, stat, stat-value: separate white stadiums drawn in ink, each with a 44px serif number in lining figures.
• testimonial: quotes at 19px in ink on white kit cards.
• faq: ruled in ink like a notebook, questions in 19px Rubik 500. The chevron sits in an ink circle that fills black when its answer opens.
• cta-panel: flat ink with 24px corners and a fine bone edge, a bone serif headline, and moss leaves with mint lines reaching in from two corners.
• site-header, site-nav: a 72px header with ink nav links that underline on hover, a 2px fern underline on the current page, and outline pills that fill black on hover.
• brand, brand-mark: the name in Playfair 650 and a small sage stadium drawn in ink with a serif initial.
• site-footer: a quiet linen band with Rubik 600 sentence case titles in ink and charcoal links that underline on hover.
• logo-cloud, logo: a bold Rubik title in ink, then customer names as heavy serif wordmarks in olive grey, or greyscale images at 70%.

Everything else is type, space and the kit.

Signed-in screens

The dashboard and settings sit on the bone canvas with a linen sidebar, white cards drawn in ink, Playfair page titles and serif lining numbers on stat tiles. Sign-in is one white card centred on bone with a serif title, pill fields with the sage focus halo, a full width black pill and no leaves.

Do and don't

Do

• Put every page on the sunlit bone canvas and lift content onto white paper drawn with a 1px ink line.
• Set headlines in Playfair Display from 36px up: 650 for the hero, 600 for sections.
• Set everything else in Rubik: 400 for text at 1.75 to 1.9 leading, 500 for buttons and labels, 600 for titles.
• Make every control a pill: buttons, fields, badges, tabs, switches, menu items and pagination.
• Keep black for the one main action in a view. The second action is the ink outline pill.
• Use sage as a wash only: accent badges, selection, halos, the focus halo and the checked box.
• Keep leaves in their four spots: behind the hero picture, the eyebrow sprout, one corner of each showcase stage and two corners of the CTA panel.
• Set numbers in lining figures, and add tabular-nums where columns line up.

Don't

• Don't add shadows. Elevation is paper colour plus the ink line.
• Don't set kit titles, labels or body copy in the serif.
• Don't fill a button, a link or a wide band with sage.
• Don't add a second accent hue or a gradient.
• Don't use square or small-radius controls. Only textareas and checkboxes are not pills.
• Don't use pure white as the page. White is paper on the page.
• Don't use dashed lines, or grey text lighter than muted for anything a reader needs.
• Don't scatter leaves as a pattern or put them behind text.

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.