Design System

A visual reference for all design tokens used throughout the site. Colors follow the system colour scheme preference.

Color Palette

Brand Colors

Accent

--accent

Primary brand color used for links, buttons, and highlights

Accent Light

--accent-light

Lighter accent shade for backgrounds and subtle elements

Black

--black

Rich black for high contrast text and elements

Gray Scale

Gray 400

--gray-400

Medium gray for secondary text and icons

Gray 600

--gray-600

Lighter gray for subtle backgrounds

Gray 900

--gray-900

Very light gray for minimal backgrounds

Semantic Colors (Theme-Aware)

Background Primary

--bg-primary

Main background color - changes with theme

Background Secondary

--bg-secondary

Secondary background color - changes with theme

Background Highlight

--bg-highlight

Highlight background color

Text Primary

--text-primary

Primary text color - changes with theme

Text Secondary

--text-secondary

Secondary text color - changes with theme

Border Color

--border-color

Border and divider color - changes with theme

Accent Contrast

--accent-contrast

Text color on accent backgrounds

Typography Scale

Font sizes use fluid typography with clamp() for responsive scaling.

Heading 1 - Page titles and main headers

h1--font-size-h1

Heading 2 - Section headers and major topics

h2--font-size-h2

Heading 3 - Subsection headers and article titles

h3--font-size-h3

Heading 4 - Minor headers and card titles

h4--font-size-h4
Heading 5 - Small headers and labels
h5--font-size-h5

Body text - Main content and paragraph text

p--font-size-base
Small text - Captions, metadata, and fine print
small--font-size-sm

Line Heights

Tight (--line-height-tight: 1.2)

This text uses tight line height, typically used for headings and titles where we want compact vertical spacing between lines. Great for impactful headers.

Base (--line-height-base: 1.7)

This text uses the base line height, which provides comfortable reading spacing for body text. It offers good readability for longer paragraphs and content blocks.

Spacing Scale

Consistent spacing values based on a harmonic scale for padding, margins, and gaps.

Extra Small

--space-xs0.25rem (4px)

Small

--space-sm0.5rem (8px)

Medium

--space-md1rem (16px)

Large

--space-lg1.5rem (24px)

Extra Large

--space-xl2rem (32px)

2X Large

--space-2xl3rem (48px)

Component Examples

Common UI elements using the design tokens.

Card Component

This card uses --bg-primary background, --border-color border, --space-md padding, and --box-shadow.

Form Elements

Helper text using --font-size-sm and --text-secondary