Design system overview

The theme uses a design system so layout, colour, typography, and spacing stay consistent and maintainable. The foundations are:

• Design tokens — Spacing, typography, colours, breakpoints, and z-index live as CSS custom properties. Use them everywhere; avoid magic numbers.
• CUBE CSS — Layers are applied in order: Global → Composition → Utilities → Blocks → Exceptions. This keeps specificity predictable and styles reusable.
• Design SOPs — Written standards for spacing, responsiveness, and accessibility (see the repo docs/ for the full SOPs). The theme implements them in code.

Principles (from the design SOP)

• Design for clarity first — Readability over decoration; every element has a purpose.
• Mobile-first — Smallest viewport first; scale up progressively.
• Content-driven layout — Let content determine layout; use flexible components.
• Consistency over novelty — Reuse patterns; avoid new UI styles unless they solve a real problem.
• Spacing creates hierarchy — Use the spacing scale; section padding and vertical rhythm are structural, not decorative.
• Accessibility is default — Contrast, focus states, reduced motion, and tap targets are built in.

What's in this section

Doc	What it covers
Colours	Palette, safe pairings, section rhythm, CSS variables.
Typography	Fonts, sizes, line-height, max width, heading scale.
Spacing	Scale (4–96px), section padding, vertical rhythm.
Composition	Layout primitives: container, stack, cluster, grid, split, switcher.
Responsiveness	Breakpoints, mobile-first, fluid sizing, testing.
Accessibility	Contrast, focus rings, reduced motion, tap targets.

These docs describe how UI stays coherent and accessible as the theme evolves. For tone and copy (brand voice, messaging, do's and don'ts), see the repo docs/brand-voice.md.