Design system

The look is called "Warm Forest": warm paper backgrounds, ink text, forest green for actions and clay for decoration.

• styles/styles.css holds the tokens and the component classes. It is the source of truth.
• app/globals.css holds the screens built with them.

It is plain CSS: no framework and no build step of its own.

Colour

Token	Value	Use
--color-bg	#f8f5ee	Page background
--color-surface	#eee8dc	Cards, secondary buttons
--color-raised	#fdfbf7	Inputs and raised cards
--color-text	#1f1d1a	Text (ink)
--color-text-muted	#5e5a52	Secondary text
--color-accent	#355c3f	Actions and links (forest), with --color-on-accent text
--color-accent-soft, --color-accent-strong	#e3eadb, #23392a	The "in" pill
--color-clay	#c2734a	Decoration only: discs, borders, badges
--color-clay-text, --color-clay-strong	#9c4f28, #6e3a1e	Text that has to read as clay
--color-stone	#a39d90	The third brand disc, dashed outlines
--color-max	ink	Max's avatar

Three rules keep text readable:

• Use the semantic tokens rather than raw hex values, and never use opacity to mute text. Every text pair in the system reads at 4.5:1 or more.
• Clay is never a text colour. Use --color-clay-text or --color-clay-strong.
• The white numbers on the landing page's clay and stone discs are a deliberate exception, kept from the design.

Type

Headings are Fraunces at weight 600. Everything else is Figtree. Section labels are 12px, weight 700, uppercase: use an h6 or the .eyebrow class.

The fonts are self-hosted with next/font in app/[locale]/layout.tsx. The content security policy in next.config.ts only allows same-origin styles and fonts, so a font loaded from another site would be blocked.

Shape and spacing

• Spacing: --space-1 to --space-8, on a 4px scale (4, 8, 12, 16, 20, 24, 32).
• Radii: --radius-pill for buttons, inputs and tags, --radius-md (24px) for cards, --radius-lg (32px) for sheets.
• Icons come from Lucide, at a stroke width of 2.75.

Components

Class	What it is
.btn with .btn-primary, .btn-secondary, .btn-outline, .btn-ink, .btn-outline-clay, .btn-ghost	Buttons. .btn-lg and .btn-sm change the size, .btn-block fills the width
.icon-btn	A round button for back and close
.input, .field	Form fields with their label
.tag with .tag-in, .tag-maybe, .tag-out, .tag-pending, .tag-clay	Answer and state pills
.chip	Outlined pills for examples
.card, .card-raised	Cards
.brand, .brand-dots	The wordmark and its three discs

Layout

Screens are designed for a phone first. app/globals.css then widens them at three points: 600px (tablet), 900px (two columns) and 1200px (Max's column on the plan page).

Copy

• Never use em dashes. Use a comma or parentheses.
• Keep real brand names out of the copy. If one seems needed, ask first.