Design system

The visual language used across Cornwall Political Watch — the colour tokens, typography, and components that the site is actually built from. This page documents what is shipped today.

Style

Modern editorial. High-contrast serif headlines borrowed from the broadsheet tradition, a restrained palette, and a flat, structured layout. The aim is legibility and trust: serious engagement and informed confidence, not decoration.

Colour tokens

Defined as CSS custom properties in the Tailwind theme. Each swatch renders from its live token, with the hex stated for reference.

primary
#1D4ED8
Links, focus rings, primary actions
charcoal
#111827
Dark surfaces, featured blocks
red-flag
#B91C1C
Red flags, alerts, card stripe
amber
#D97706
Warnings, highlights
positive
#047857
Good metrics, success
warm
#FFFBEB
Tinted callout backgrounds
offwhite
#F8F8F8
Page / footer background
border
#E5E7EB
Dividers, card outlines
muted
#4B5563
Secondary text

Typography

Playfair Display for headings, Inter for body text and interface labels.

Display heading

Playfair Display · text-4xl / bold

Section heading

Playfair Display · text-2xl / bold

Subheading

Playfair Display · text-xl / semibold

Body copy — the quick brown fox jumps over the lazy dog.

Inter · text-base (16px)

Secondary / muted text.

Inter · text-sm / muted

Label / tag

text-xs font-semibold uppercase tracking-wider

Drop cap

Long-form investigations open with a serif drop cap to anchor the opening paragraph and signal a considered, editorial read.

Spacing, radius & depth

Conservative and architectural: soft 2px corners, 1px outlines, and a flat “paper on stone” depth model — white content on an off-white page, separated by borders rather than heavy shadows.

Card

White surface · 1px border · rounded-sm · no shadow

Page surface

bg-offwhite — the stone the paper sits on

Callout

bg-warm — tinted highlight block

Components

Red flag badges

Low AttendanceConflict of InterestCode of ConductTravel Expense OutlierSlim MajorityDeclining Majority

Buttons & chips

Class conventions rather than a single component.

Primary actionAlert / secondaryTertiaryCategory chip

Empty state

No records match these filters.

Clear filters

Data-driven components

These render from live records and so are documented by name rather than shown here.

PersonCard: — Councillor / person profile summary card
MediaCard: — News article card with source and date
AttendanceScorecard: — Embeddable per-councillor attendance KPI
AttendanceLeaderboard: — Ranked attendance table
VoteBadge: — Decision outcome pill (Approved / Deferred / …)
TweetCard: — Embedded X / Twitter post
CornwallMap: — Interactive ward / constituency map