Style guide

Tokens, typography and visual foundations.

A centralized reference for color, spacing, containers, grids, radius, shadows, motion and component defaults.

Color system

Semantic tokens instead of one-off values.

Change these variables in assets/css/base.css and verify both themes.

Primary
--primary

Accent
--accent

Text
--text

Surface
--surface

Muted surface
--surface-2

Typography

Fluid hierarchy with system-font performance.

Display heading

Section heading

Card heading

Lead copy explains a proposition in one or two readable lines.

Body copy supports scanning, documentation and product explanations.

const technicalAccent = "monospace";

Spacing

Eight steps for rhythm and density.

Space 1--space-1

Space 2--space-2

Space 3--space-3

Space 4--space-4

Space 5--space-5

Space 6--space-6

Space 7--space-7

Space 8--space-8

Layout

Containers and responsive grid.

The main container caps at --container, while long-form content uses --narrow.

123456789101112

Standard containerFluid side padding, fixed readable maximum.

Narrow containerArticles, forms and focused page heroes.

Shape and depth

Radius, borders and shadows.

Small radius

Base radius

Large radius

Extra large

Small shadow

Medium shadow

Large shadow

Border token

Motion

Short, purposeful transitions.

Timing and easing tokens are centralized. Reduced-motion preferences remove non-essential movement.

Fast--fast: 160ms

Normal--normal: 300ms

Slow--slow: 650ms

Easing--ease

Forms

Consistent input states.

Z-index

Predictable layers.

Base	`--z-base: 1`
Sticky	`--z-sticky: 20`
Menu	`--z-menu: 40`
Modal	`--z-modal: 60`
Toast	`--z-toast: 80`

Open component library

Ready to customize?

Use one coherent system across the complete product.

Edit centralized tokens and reusable components without a framework or build process.

Customization guide