PAGE 09 · IA & GRID
Information architecture & grid
The site map, URL conventions, and the 12-column responsive grid that all templates are built on. One canonical layout system; everything snaps to it.
01.
Site map
Five top-level sections. Maximum depth: 3.
Information architecture · v1
/ Home
/framework
/overview
/entities
/methodology
/glossary
/assess
/start
/[step]
/review
/submit
/registry
/[org]
/[org]/cert
/resources
/papers
/templates
/news
/about
/dttt
/contact
02.
URL conventions
Lowercase, kebab-case, no trailing slashes, no .html.
URL rules
| Pattern | Example | Notes |
|---|---|---|
| Section root | /framework | Plural where natural ("/resources", "/entities"). |
| Detail | /framework/entities/reasoning | Slug derived from canonical name. No IDs in URLs. |
| Registry | /registry/visit-stockholm | Org slug. Stable forever — never re-used. |
| Certificate | /registry/visit-stockholm/cert/2026-04 | Year-month for versioning. |
| Assessment step | /assess/disclosure | Entity name in URL — survives reload + share. |
03.
The 12-column grid
Max content 1280, gutter 24, outer margin 80 desktop.
12-column grid · desktop
1
2
3
4
5
6
7
8
9
10
11
12
Common spans. Hero text: 8 cols. Editorial body: 7 cols (with 5-col gutter for marginalia). Cards in a 3-up: 4/4/4. Cards in 4-up: 3/3/3/3. Sidebar layouts: 3 + 9.
04.
Breakpoints
Mobile-first. Five breakpoints; layout simplifies progressively.
Breakpoints
NAMEMIN-WIDTHCOLS / GUTTER / MARGIN
xs
04 cols · 16 gutter · 16 marginsm
640px4 cols · 16 gutter · 24 marginmd
768px8 cols · 20 gutter · 32 marginlg
1024px12 cols · 24 gutter · 48 marginxl
1280px12 cols · 24 gutter · 80 margin2xl
1536px12 cols · 24 gutter · auto (max-width 1280)05.
Layout templates
Three canonical column compositions.
Column patterns
FULL · 12 col
Hero, full-bleed media, dashboards.
EDITORIAL · 7+5
Article body + marginalia, framework explainer.
PRODUCT · 3+9
Side nav + content (assessment, dashboard).