Design system
The pieces this site is built from.
Tokens and components in one place, so anything added later stays consistent with what is already here.
Foundations
Colour
- Octet Navy
--navy-900#102A43Navigation, headings, dark sections, footer - Navy 700
--navy-700#334E68Secondary headings and strong body text - Navy 600
--navy-600#486581Body copy on light surfaces - Warm White
--bg#F8F7F4The main page background - Soft Grey
--bg-muted#E9ECEFSecondary sections and supporting panels - Octet Green
--green-500#19A974Highlights, indicators, rules - Green 600
--green-600#0F7A55Primary buttons and links - Digital Blue
--blue-600#2563EBCybersecurity accents only
Foundations
Typography
Manrope carries everything. IBM Plex Mono appears only in small labels, metadata and category indicators.
- Human technologyDisplay · Manrope 800
- Human technologyHeading 1 · Manrope 800
- Human technologyHeading 2 · Manrope 800
- Human technologyHeading 3 · Manrope 700
- Human technologyLead · Manrope 400
- Human technologyBody · Manrope 400
- Human technologySmall · Manrope 400
Foundations
Spacing, radius and elevation
Spacing, an 8px system
--s-1 · 4px--s-2 · 8px--s-4 · 16px--s-5 · 24px--s-6 · 32px--s-8 · 48px--s-9 · 64px--s-11 · 96px
Radius
8pxInterface elements12pxPanels and previews16pxImagery24pxFeature containers
Elevation
- xs
- sm
- md
- lg
Components
Buttons and links
Every control is at least 44px tall and carries a visible focus ring.
Components
Labels and status
Default tagLight tagAccent tagLiveComing soon
Components
Form fields
Components
Photography slot
Every image on the site is a slot declared in the manifest. If a photograph is missing, the slot falls back to a designed frame carrying the brief for the shot that belongs there, so the layout never breaks.
