Classes

A flat reference of every utility class in the system. Click any class, value, or token to copy it. For the full architecture and live demos see Typography, Color, Spacing, Border, and HTML Layout.

Every chip on this page follows the same convention so the markdown source matches what gets copied:

`.class-name` → utility class, copies
`var(--token-name)` → CSS variable, copies
`#abc123` → hex colour, copies and renders a swatch

Text Color

Semantic intent — never reach for primitive color tokens directly.

Class	Token	Description
		Default body text
		Supporting text
		Pure black
		De-emphasised text
		Accent / highlight
		Link color

Background Color

Class	Token	Description
		Off-white page background
		Warm white alternate
		Pure white
		Subtle tinted background

Section Spacing

Macro vertical rhythm — apply to a <section> to control the space above or below it. Values shrink on mobile.

Class	Token	Desktop	Mobile
		`32px`	`24px`
		`64px`	`32px`
		`96px`	`56px`
		`160px`	`80px`
		`32px`	`24px`
		`64px`	`32px`
		`96px`	`56px`
		`160px`	`80px`

Gap

Micro spacing for and — sets the gap between flex or grid children.

Class	Token	Value
		`0px`
		`4px`
		`8px`
		`12px`
		`16px`
		`24px`
		`32px`
		`40px`

defaults to (12px) when no gap class is added.

Padding

Class	Token	Value
		Edge-safe horizontal padding for every screen
		`8px`
		`12px`
		`16px`
		`24px`
		`32px`
		`40px`

Containers & Max-widths

Containers center their content with auto margins. Max-widths only constrain — no centering.

Containers

Class	Width	Description
	`640px`	Narrow centered container
	`1040px`	Default readable width
	`1200px`	Wide centered layouts

Max-widths

Class	Width	Description
	`640px`	Narrow constraint
	`960px`	Medium constraint
	`1200px`	Wide constraint
	`100%`	No constraint

Layout Primitives

Structural classes that compose the page hierarchy: → → → → → → .

Class	Behaviour	Description
	flex column,	Default content block — flex column with 12px gap
	semantic `<section>`	Vertical block, no special styling
	`width: fit-content`	Shrink an element to its content width

Flex & Grid Modifiers

These modify (flex column by default) or (2-column by default).

Flex direction & alignment

Class	Property	Description
	`flex-direction: row`	Switch a to horizontal
	`flex-direction: row-reverse`	Reverse horizontal order
	`align-items: flex-start`	Cross-axis start
	`align-items: center`	Cross-axis center
	`align-items: flex-end`	Cross-axis end
	`justify-content: center`	Main-axis center
	`justify-content: flex-end`	Main-axis end

Grid

Class	Property	Description
	`display: grid`	2-column grid by default with
	`grid-template-columns: 1fr 1fr 1fr`	3-column grid
	`grid-template-columns: 1fr 1fr 1fr 1fr`	4-column grid

Borders

The composable border system — combine one structural class with width, style, and color modifiers as needed. See Border for the full architecture.

Structural

Class	Description
	All four sides
	Top only
	Bottom only
	Left only
	Right only

Width

Class	Token	Value
		`1.5px` (default)
		`2px`
		`4px`

Style

Class	Style
	solid (default)
	dashed
	dotted

Color

Class	Token	Description
		Strong (default)
		Medium
		Subtle

Image Aspect Ratios

Lock an image to a fixed ratio. Use on the <img> element directly.

Class	Ratio	Description
	1:1	Square
	3:2	Standard photo
	4:3	Classic
	16:9	Widescreen
	21:9	Cinematic

Helpers

Class	Property	Description
	small uppercase label	Section eyebrows above headings
	`display: none !important`	Global visibility helper

Use tokens directly

A few things have tokens but no utility classes — apply the token via var(...) directly in CSS.

Concern	Tokens
Font weight	, , , , , ,
Line height	, , , , ,
Letter spacing	, , ,
Border radius	, , , , ,
Text alignment	use raw CSS `text-align`

Every token name above is still copyable — click to grab for your stylesheet.

Text Size

Semantic sizes

Granular scale