Overview

How to use

The swatches, scales, and components below are read live from tokens.css and utilities.css — if one of those looks wrong, the source file is wrong (or this page is stale). Everything else on this page — this text included — is the style guide's own fixed UI chrome, defined independently in style-guide.css, so importing new tokens can never make the guide itself unreadable. Follow CLAUDE.md's build order before replacing any of this with real project values.

Foundations

Color palette

Every swatch below is a token from tokens.css — all placeholders, replaced with real values pulled from Figma once this template becomes a real project.

Primary

--color-primary:

Ink-level UI, primary buttons

Secondary

--color-secondary:

Muted text, secondary UI

Accent

--color-accent:

Links, CTAs, focus states

Alternate

--color-alternate:

Secondary accent, alternate CTAs

Ink (text)

--color-ink:

Default body text color

Background

--color-bg:

Default page background

Background — secondary

--color-bg-secondary:

Secondary section background

Background — tertiary

--color-bg-tertiary:

Tertiary section background

Background — alternate

--color-bg-alternate:

Alternate section background

Background (alt)

--color-bg-alt:

Alternating sections (existing)

White

--color-white:

Text/surfaces on dark backgrounds

Black

--color-black:

Raw black, rarely used directly

text-color-primary text-color-secondary text-color-alternate text-color-accent

background-color-primary

background-color-secondary

background-color-tertiary

background-color-alternate

background-color-alt

Foundations

Typography

Heading style overrides, the text-size scale, text styles, and font weights — every heading-style-, text-size-, text-style-, and text-weight- utility.

H1 — heading-style-h1 (--text-h1-size: )

H2 — heading-style-h2 (--text-h2-size: )

H3 — heading-style-h3 (--text-h3-size: )

H4 — heading-style-h4 (--text-h4-size: )

H5 — heading-style-h5 (--text-h5-size: )

H6 — heading-style-h6 (--text-h6-size: )

text-size-large (--text-large-size: )

text-size-medium (--text-body-size: )

text-size-regular (--text-regular-size: )

text-size-small (--text-small-size: )

text-size-tiny (--text-tiny-size: )

text-style-allcaps — the quick brown fox

text-style-italic — the quick brown fox

text-style-link — the quick brown fox

text-style-muted — the quick brown fox

text-style-quote — the quick brown fox

text-style-strikethrough — the quick brown fox

text-weight-light (--font-weight-light: )

text-weight-normal (--font-weight-normal: )

text-weight-semibold (--font-weight-semibold: )

text-weight-bold (--font-weight-bold: )

text-weight-xbold (--font-weight-xbold: )

Foundations

Spacing

Two scales: --space-* drives layout rhythm (containers, sections); --space-cf-* is the finer-grained scale behind the margin-/padding-/spacer- combo-class utilities.

--space-2xs

--space-xs

--space-sm

--space-md

--space-lg

--space-xl

--space-2xl

--space-3xl

margin-tiny

margin-xxsmall

margin-xsmall

margin-small

margin-medium

margin-large

margin-xlarge

margin-xxlarge

margin-huge

Foundations

Radius

Four steps — kept restrained on purpose. Confirm against real component specs before adding a fifth.

4px

--radius-sm

Buttons, inputs

8px

--radius-md

Cards

16px

--radius-lg

Large cards

full

--radius-full

Avatars, tags, pills

Foundations

Containers

Three max-widths cover most layouts, but Figma files rarely stay that tidy. Check every distinct frame width via the design-to-code tool before assuming one of these applies — if a real frame doesn't match any of them, pull its exact value and add a new --container-* token and .container-* class rather than stretching the closest one or hardcoding a one-off max-width in a component. Pair every container with padding-global so edge padding still applies inside it — that combination is what keeps a section's content from ever running edge-to-edge or off-screen on a narrow viewport.

container-small ()

Narrow content — blog posts, forms

container-medium ()

Standard section width

container-large ()

Wide marketing sections, full layouts

Note

Placeholder scale — confirm against real Figma frame widths before treating these three as final. Projects commonly need a narrower tier too (long-form text, a form column) or a fourth, wider one; don't force a real frame into the closest existing value.

Components

Button

Buttons are a component, not a utility class — global/Button.astro is the only place button styling lives. Add new variants there, keeping the same token-only shape.

Components

Image placeholder

Use global/ImagePlaceholder.astro wherever a section needs an image but no real asset exists yet — never leave an empty box or a broken image tag. Swap it for the real, manually-exported asset as soon as it's available.

ratio="1 / 1"

ratio="4 / 3" (default)

ratio="16 / 9"