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
PatternExampleNotes
Section root/frameworkPlural where natural ("/resources", "/entities").
Detail/framework/entities/reasoningSlug derived from canonical name. No IDs in URLs.
Registry/registry/visit-stockholmOrg slug. Stable forever — never re-used.
Certificate/registry/visit-stockholm/cert/2026-04Year-month for versioning.
Assessment step/assess/disclosureEntity 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
xs04 cols · 16 gutter · 16 margin
sm640px4 cols · 16 gutter · 24 margin
md768px8 cols · 20 gutter · 32 margin
lg1024px12 cols · 24 gutter · 48 margin
xl1280px12 cols · 24 gutter · 80 margin
2xl1536px12 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).