The brand framework, applied to the web. A spec-grade catalogue of foundations, components, page templates, and content rules — built on the brand's tokens but with a web-native register: Inter for UI, IBM Plex Serif for editorial moments, flat radii, real elevation, a 12-column grid.
Eleven pages, organised foundations → primitives → composites → templates.
Type pairings, headings, body styles, link states, color, spacing, radii, elevation, motion.
Primary, secondary, ghost, text, danger. Four sizes. All states. Icon + loading.
Inputs, textareas, selects, checkboxes, radios, toggles. Validation states.
Panels, cards, callouts, alerts, banners, modals, tooltips, popovers.
Top nav, side nav, breadcrumbs, tabs, pagination, footer.
Tables, lists, badges, tags, stats, charts (placeholder spec).
Image treatments, ratios, captions, iconography rules, motion principles.
Contrast, focus, hit targets, ARIA. Tone, capitalisation, numbers, dates.
Site map, URL conventions, the 12-column grid, breakpoints, responsive rules.
Landing, framework overview, self-assessment form, certified report.
The choices behind this register, up front.
| Decision | Choice | Why |
|---|---|---|
| UI & body type | Inter 400 / 500 / 600 / 700 | Free, OS-rendered, excellent at small sizes, neutral. |
| Editorial type | IBM Plex Serif 600 | For framework page H1s and quotes — adds gravitas without going stuffy. |
| Mono | JetBrains Mono | Labels, codes, version stamps. Open licence. |
| Radii | 4 / 8 / 12 / 16 / 24 / pill | Web-flat. Squircles dropped for the web register. |
| Elevation | Real drop shadows + hairline ring | Web users expect lift on cards/menus. Hairline alone reads flat-print. |
| Grid | 12-col, 1280 max, 24 gutter | Industry standard, plays nicely with marketing + product surfaces. |
| Brand spine | Teal scale + ink + grade scales | Unchanged from the brand framework — same DNA. |