Example / Components

① Typography Scale

Display Heading (--text-2xl)

Page Title (--text-xl)

Section Heading (--text-lg)

Body text at --text-base. Readable, comfortable, 16–18 px range. This is what all body copy looks like across every page on the site.

Small text (--text-sm) — used in nav links, card CTAs, and captions.

Tiny label (--text-xs) — metadata, demo labels, badges.

② Colour Tokens

--color-bg

--color-surface

--color-surface-2

--color-accent

--color-text

--color-text-muted

Toggle dark/light with the button in the header to see how tokens adapt automatically.

③ Card Blocks — use class="card-block" on an <a> tag

This is the card description. Keep it to 1–2 short sentences.

Cards stretch to equal height inside the grid. The arrow animates on hover.

Grid collapses to 1 column on mobile, 2 on tablet, 3 on desktop.

④ Back Button & Tag Pills

Design Networking Minecraft Cats

⑤ Theme Toggle

The sun/moon icon in the header toggles dark ↔ light mode. The preference is saved in localStorage so it persists across page loads and all pages.

← Also works as a standalone button

⑥ Prose / Article Layout — wrap content in <main class="prose">

This is body text inside a prose container. It has a comfortable max-width of 640 px, generous line-height, and the muted text colour automatically.

This is an italic-note — used above a list.

An inline accent link inside prose text. Hover to see the colour shift.

⑦ Token Quick Reference

Token	Purpose
`--color-bg`	Page background
`--color-surface`	Card / header surface
`--color-text`	Primary body text
`--color-text-muted`	Secondary / description text
`--color-text-faint`	Metadata / placeholder text
`--color-accent`	Brand orange — links, CTAs, pills
`--color-border`	Subtle dividing lines
`--space-1` → `--space-20`	4 px spacing scale
`--radius-sm/md/lg/full`	Border-radius tokens
`--transition`	Standard easing curve
`--shadow-sm/md/lg`	Box-shadow levels
`--font-body`	Body typeface (Inter)

🧩 Component Showcase