Foundations define roles, not brands
The core system specifies the decisions every implementation must make. It does not prescribe an organisation's colours, fonts or CSS namespace. Those values belong to a named implementation theme.
Foundation contract
Semantic roles
Define what a token or treatment means and where it may be used.
Theme values
Assign brand-specific colour, type, radius, spacing and motion values.
Accessible behaviour
Preserve contrast, focus, keyboard, reading-order and reduced-motion requirements.
Semantic colour
| Role | Purpose | Constraint |
|---|---|---|
| Primary action | Links, primary controls and selected states. | Must meet contrast requirements in every state. |
| Accent | Small emphasis, markers and focus support. | Never communicates meaning alone or dominates large surfaces. |
| Surface | Page, card, panel and elevated backgrounds. | Maintains hierarchy without unnecessary decoration. |
| Text | Heading, body, muted and inverse content. | Supports sustained reading and clear information hierarchy. |
| Status | Success, warning, error and informational feedback. | Always paired with explicit text or another non-colour cue. |
Typography roles
| Role | Use | Required behaviour |
|---|---|---|
| Display | Course or major section openers. | Reserved for short, high-priority statements. |
| Heading | Page, section, component and activity hierarchy. | Logical levels remain clear independently of visual size. |
| Body | Explanations, instructions and feedback. | Readable measure, line height and responsive sizing. |
| Label | Eyebrows, metadata, status and control labels. | Concise wording with sufficient size and contrast. |
Layout and spacing
- Use a small, consistent spacing scale rather than arbitrary one-off values.
- Define narrow, standard, wide and full content measures by learning purpose.
- Allow components to reflow without changing their meaning or reading order.
- Use radius and elevation consistently and only where they clarify grouping or hierarchy.
Interaction foundations
- All operable elements expose a visible keyboard focus state.
- Controls use familiar labels and retain their meaning across implementations.
- Feedback appears close to the action that produced it and remains available to assistive technology.
- Motion supports orientation, state change or continuity and respects reduced-motion preferences.
Theme implementations
Each organisation or product maps these roles to its own governed values and technical namespace. Theme documentation records those values without redefining the shared learning purpose.
Implementation directory
AvailableBrowse governed organisational themes, platform expressions and production assets.
Future themes
AvailableAdditional organisational or product themes can be added without altering the core system.