Web design system
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.
System map
Eleven pages, organised foundations → primitives → composites → templates.
01 Foundations
Type pairings, headings, body styles, link states, color, spacing, radii, elevation, motion.
02 Buttons
Primary, secondary, ghost, text, danger. Four sizes. All states. Icon + loading.
03 Forms
Inputs, textareas, selects, checkboxes, radios, toggles. Validation states.
04 Boxes & Cards
Panels, cards, callouts, alerts, banners, modals, tooltips, popovers.
05 Navigation
Top nav, side nav, breadcrumbs, tabs, pagination, footer.
06 Data display
Tables, lists, badges, tags, stats, charts (placeholder spec).
07 Imagery, icons & motion
Image treatments, ratios, captions, iconography rules, motion principles.
08 Accessibility & voice
Contrast, focus, hit targets, ARIA. Tone, capitalisation, numbers, dates.
09 IA & grid
Site map, URL conventions, the 12-column grid, breakpoints, responsive rules.
10 Page templates
Landing, framework overview, self-assessment form, certified report.
Direction declared
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. |