Style guide

Reference for typography, color tokens, and common UI patterns. Values follow CSS custom properties in src/styles/partials/_variables.scss and theme overrides in _colors.scss.

Typography

Body copy uses Manrope via Next.js font variables; monospace stacks are defined for code.

Eyebrow / overline

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph with an inline text link using default anchor styles. Muted supporting line below.

Small / muted paragraph using --muted.

Type scale (fluid sizes)

--fs-xsThe quick brown fox jumps over the lazy dog.

--fs-smThe quick brown fox jumps over the lazy dog.

--fs-mdThe quick brown fox jumps over the lazy dog.

--fs-lgThe quick brown fox jumps over the lazy dog.

--fs-xlThe quick brown fox jumps over the lazy dog.

--fs-2xlThe quick brown fox jumps over the lazy dog.

--fs-3xlThe quick brown fox jumps over the lazy dog.

Font stacks

--font-sans

Sans sample — Manrope, system UI fallbacks.

--font-mono

Mono sample — const theme = 'oklch';

Lists

Unordered list item one
Unordered list item two

Ordered list item one
Ordered list item two

Colors

Neutrals, brand, secondary, and tertiary ramps, plus semantic tokens (respect light / dark theme).

Ink (neutral ramp)

--ink-50

--ink-100

--ink-200

--ink-300

--ink-400

--ink-500

--ink-600

--ink-700

--ink-800

--ink-900

Brand

--brand-50

--brand-100

--brand-200

--brand-300

--brand-400

--brand-500

--brand-600

--brand-700

--brand-800

--brand-900

Secondary

--secondary maps to --secondary-600.

--secondary-50

--secondary-100

--secondary-200

--secondary-300

--secondary-400

--secondary-500

--secondary-600

--secondary-700

--secondary-800

--secondary-900

Tertiary

--tertiary maps to --tertiary-600.

--tertiary-50

--tertiary-100

--tertiary-200

--tertiary-300

--tertiary-400

--tertiary-500

--tertiary-600

--tertiary-700

--tertiary-800

--tertiary-900

Semantic

--bg

--text

--muted

--primary

--on-primary

--secondary

--on-secondary

--tertiary

--on-tertiary

--accent

--accent-2

--warning

--danger

--success

--info

--border

Gradients

--grad-brand

--grad-hero

--grad-brand-transparent

Buttons

Classes from src/styles/ui/_actions.scss.

Surfaces & shape

Elevation backgrounds and radius tokens.

Surfaces

--surface-0

Base / page-level

.surface-1

Elevated panel

.surface-2

Elevated panel

.surface-3

Elevated panel

Border radius

--radius-sm

--radius-md

--radius-lg

--radius-pill

Shadows

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xlg

Forms

Default control styles from global form partials.

Text input

Textarea

Focus visible uses --ring-color and --ring-width.

Motion

--dur-fast — 120ms
--dur — 180ms
--dur-slow — 260ms
--ease-out, --ease-in-out