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
DEFAULTRead the framework
HOVERRead the framework
VISITEDRead the framework
FOCUSRead the framework
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
TokenValueUse
--s-14pxHairline gaps within icons or between very tight elements.
--s-28pxTight inline gaps, badge padding.
--s-312pxForm field internal padding, inline button gap.
--s-416pxDefault gap between siblings, card inner padding.
--s-624pxCard padding (default), grid gutter.
--s-832pxSection sub-divisions, large card padding.
--s-1248pxSection breaks within a page.
--s-1664pxVertical rhythm between major sections.
--s-2080pxPage outer margins (desktop), hero padding.
--s-2496pxHero 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
TokenValueUse
--d-1120msHover, focus, button press.
--d-2200msTooltips, dropdowns, accordion open.
--d-3320msModals, sheets, page transitions.
--easecubic-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.