PAGE 01 · FOUNDATIONS
Foundations
Type, colour, spacing, radii, elevation, motion. Everything downstream is built from these. Token names map 1:1 to CSS custom properties in web-system.css.
01.
Typography
Inter for UI, IBM Plex Serif for editorial, JetBrains Mono for labels.
Type pairings · 3 families
FONT-DISPLAY
Aa
IBM Plex Serif 600
Editorial H1s, pull quotes, framework headlines.
FONT-SANS
Aa
Inter 400 / 500 / 600 / 700
All UI text, body copy, navigation, buttons.
FONT-MONO
Aa
JetBrains Mono 400 / 500
Labels, codes, version stamps, data values.
Heading scale · 6 steps + display
DISPLAY · 64/72
Open governance
type/display
H1 · 48/56
A framework for AI transparency
type/h1
H2 · 36/44
The eight entities
type/h2
H3 · 28/36
Transparency Model
type/h3
H4 · 22/30
Self-assessment overview
type/h4
H5 · 18/26
Section heading
type/h5
Body styles
LEAD · 20/30
Open governance and intelligence for the tourism sector — a published framework that classifies the balance of human and AI contribution.
type/lead
BODY · 16/24
Disclosure is not the same as transparency. Transparency is the audience knowing how to read what was disclosed — at the level they can act on.
type/body
SMALL · 14/20
Helper text, captions, secondary information.
type/small
XS · 12/16
Footnotes, micro-meta.
type/xs
MONO · 12/16
DTTT · APRIL 2026 · v1.0
type/mono
Link states
02.
Colour
Reuses the brand framework tokens. See full scales in figma-handoff / 01-tokens.
Functional colours · 4 hues
success · #00703c
warning · #f4a100
danger · #c4001f
info · #1d70b8
03.
Spacing
8-pt grid. Use within components for padding, between for layout gap.
Spacing scale · 12 steps
| Token | Value | Use |
|---|---|---|
| --s-1 | 4px | Hairline gaps within icons or between very tight elements. |
| --s-2 | 8px | Tight inline gaps, badge padding. |
| --s-3 | 12px | Form field internal padding, inline button gap. |
| --s-4 | 16px | Default gap between siblings, card inner padding. |
| --s-6 | 24px | Card padding (default), grid gutter. |
| --s-8 | 32px | Section sub-divisions, large card padding. |
| --s-12 | 48px | Section breaks within a page. |
| --s-16 | 64px | Vertical rhythm between major sections. |
| --s-20 | 80px | Page outer margins (desktop), hero padding. |
| --s-24 | 96px | Hero vertical padding. |
04.
Radii
Web-flat. Pair with elevation to add lift.
Radius scale
xs · 4
md · 8
lg · 12
xl · 16
3xl · 24
pill · 999
05.
Elevation
Five levels. Combine drop shadow with hairline ring for crisp edges.
Elevation scale · light surface
e-0 · ring only
e-1 · card
e-2 · hover
e-3 · popover
e-4 · modal
06.
Motion
Three durations. One easing curve.
Motion tokens
| Token | Value | Use |
|---|---|---|
| --d-1 | 120ms | Hover, focus, button press. |
| --d-2 | 200ms | Tooltips, dropdowns, accordion open. |
| --d-3 | 320ms | Modals, sheets, page transitions. |
| --ease | cubic-bezier(.4,0,.2,1) | The single curve. Standard ease-in-out. |
Reduced motion. Wrap all transitions in
@media (prefers-reduced-motion: reduce) and shorten to 0–80ms or replace with cross-fades.