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
OrganisationTypeGradeSubmittedScore
Visit StockholmDMOGrade 212 Apr 202682View →
Visit IcelandDMOGrade 304 Apr 202694View →
Hotel EsplanadeHospitalityGrade 128 Mar 202661View →
Tour CphOperatorGrade 015 Mar 202638View →
Visit HelsinkiDMOGrade 202 Mar 202678View →
02.

Lists

Use lists when each item has a primary identity (name, title) plus secondary meta.

List · members
VS
Visit Stockholm

DMO · Sweden · Submitted 12 Apr 2026

Grade 2
VI
Visit Iceland

DMO · Iceland · Submitted 04 Apr 2026

Grade 3
HE
Hotel Esplanade

Hospitality · Helsinki · Submitted 28 Mar 2026

Grade 1
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

G073 G198 G287 G325
LINE · TREND

Median score over time

Q1Q2Q3Q4Q1Now
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.