PAGE 06 · DATA DISPLAY
Data display
Tables for structured rows, lists for ordered/unordered items, badges for state, tags for categorisation, stats for headline numbers, charts for relationships and trends.
01.
Tables
Header sticky, rows hover, numbers right-aligned with tabular figures.
Public registry table
| Organisation | Type | Grade | Submitted | Score | |
|---|---|---|---|---|---|
| Visit Stockholm | DMO | Grade 2 | 12 Apr 2026 | 82 | View → |
| Visit Iceland | DMO | Grade 3 | 04 Apr 2026 | 94 | View → |
| Hotel Esplanade | Hospitality | Grade 1 | 28 Mar 2026 | 61 | View → |
| Tour Cph | Operator | Grade 0 | 15 Mar 2026 | 38 | View → |
| Visit Helsinki | DMO | Grade 2 | 02 Mar 2026 | 78 | View → |
02.
Lists
Use lists when each item has a primary identity (name, title) plus secondary meta.
List · members
VS
Visit Stockholm
VI
Visit Iceland
HE
Hotel Esplanade
03.
Badges & tags
Badges = state. Tags = categorisation (often removable).
Badge variants
BADGES · STATE
Default
Brand
Success
Warning
Danger
Solid
With dot
Live
TAGS · CATEGORY
DMO
Hospitality
Operator
Sweden
Grade 2+
04.
Stats
Headline numbers. Use IBM Plex Serif at 42–64px for the value.
Stat cards
REGISTERED
247
↑ 18 this month
AT GRADE 2+
112
↑ 7 this month
MEDIAN SCORE
68
↑ 4 vs Q1
AVG. TIME-TO-CERT
9d
↓ 2d slower
05.
Charts
Placeholder spec. Use teal-500 as the primary series; ink for context lines; the four functional hues for categorical splits.
Chart spec · placeholders
BAR · GRADE DISTRIBUTION
Submissions by grade
LINE · TREND
Median score over time
PROGRESS BARS · ENTITY SCORES
Visit Stockholm · entity-by-entity
Disclosure92
Process85
Reasoning76
Verification63
Chart rules. Always label axes. Use tabular figures for all numerical labels. Default series colour is teal-500. For categorical splits with >3 series, sample from the design-system palette in this order: ink-dark → teal-500 → info → warning → danger.