📄️ Design system overview
The theme uses a design system so layout, colour, typography, and spacing stay consistent and maintainable. The foundations are:
📄️ Colours
The theme uses an accessible, brand-matched palette with clear roles. All pairings are chosen to meet WCAG AA where text or UI is involved.
📄️ Typography
The theme uses IBM Plex Sans for body and IBM Plex Serif for headings. Sizes and spacing follow the design SOP and are implemented via CSS custom properties in typography.css.
📄️ Spacing
Spacing uses a single scale (no arbitrary values). All margins, padding, and gaps should use these tokens so the layout stays consistent and hierarchy is clear.
📄️ Composition (layout primitives)
The theme’s composition layer (CUBE CSS) provides layout-only primitives. They don’t set colours or typography — use them for structure, then add blocks and utilities.
📄️ Responsiveness
The theme uses mobile-first, intrinsic layout with a small set of breakpoints. Layout adapts by default using fluid sizing and composition primitives; breakpoints are used when layout actually needs to change.
📄️ Accessibility
The theme builds in accessibility by default: contrast, focus, motion, and tap targets are part of the design system.