Style guide

The system, before the pages

Colour, type, shape, rhythm and the signature moves of this project. Approve this first - everything on the site is assembled from it, so a change here changes every page.

Colour

Every fill has a readable foreground. The dark tone is its own family, so a section can invert without a single per-block rule.

Brand

--color-primary Primary - buttons, links, accents
--color-primary-strong Primary strong - hover / active
--color-primary-foreground On primary - text on a primary fill
--color-accent Accent - pretitles, marks (defaults to primary)

Semantic

--color-background Page background
--color-foreground Body text
--color-surface Cards, inputs, panels
--color-muted-foreground Secondary text
--color-line Borders
--color-line-muted Lighter dividers

Dark tone (canvas)

--color-canvas Dark tone fill
--color-canvas-foreground Text on dark
--color-canvas-muted-foreground Secondary text on dark
--color-canvas-line Subtle border on dark
--color-canvas-line-strong Visible border on dark
--color-canvas-primary Accent, lifted for dark ground

Type

Two faces, one fluid scale. Each size carries its own line-height and tracking, so the same step looks identical in a heading and in a utility class.

Headings - --font-heading

Aa

Body - --font-body

Aa

text-hero ·
Hero display - the quick brown fox
text-h1 ·
Heading 1 - the quick brown fox
text-h2 ·
Heading 2 - the quick brown fox
text-h3 ·
Heading 3 - the quick brown fox
text-h4 ·
Heading 4 - the quick brown fox
text-h5 ·
Heading 5 - the quick brown fox
text-h6 ·
Heading 6 - the quick brown fox
.subtitle
Lead paragraph - the sentence under a heading that carries the promise.
body
Body copy. The measure is capped for reading comfort, and the accent device is a single italic word rather than colour-and-bold.
.text-light
Small supporting copy - captions, notes, meta.

Shape & surfaces

One corner answer with per-role overrides, one card, three padding tiers.

--radius-base Base - the project's corner answer
--radius-card Cards
--radius-button Buttons
--radius-image Images
--radius-input Inputs

Tight

FAQ items, teasers, form panels - p-card-tight.

Default

Cards, testimonials, pricing - p-card.

Interactive

The whole card is the link, so the hover is honest - p-card-loose.

Primary action Secondary Inline action

Interactive states

Every state of every control, rendered without a pointer. Hover, active and focus are drawn by the same rules the site uses - a twin class beside the pseudo-class - so what is approved here is what ships. A control missing from this page has no agreed states yet.

Buttons

default

:hover

:active

:focus-visible

[disabled]

Primary

Secondary

Link

Sizes

Form controls

Email default

Email :focus

Email [aria-invalid] Please enter a full email address.

Email [disabled]

Message textarea

What do you do, who is the site for, and what should people be able to do there?

Links

Nav item default
Nav item :hover - the rule draws in
Nav item [aria-current] - the rule stays
Inline action default
Inline action :hover
Inline action :focus-visible

Card

Interactive card

Default - a hairline and the page's ground.

Interactive card

:hover - the hairline takes the brand, and it lifts.

Static card

No link, so no hover. A card that lifts but goes nowhere is a lie.

Section tones

An editor picks a tone per section; the semantic tokens remap locally, so text, borders, cards and buttons follow without a single per-block conditional.

Default - text, muted text, a bordered card.

Action

Muted - the quiet alternate.

Action

Dark - the canvas family.

Action

Primary - the brand fill.

Action