Components
Thirteen components. Each page says what it is, when to use it, when not to, and which tokens it reads.
Page chrome
Masthead
The top of every page. Replaces a 727 line Header.
Sub-nav
Section level navigation that scrolls rather than wraps.
Page hero
The header for every page that is not an article.
Footer
Link groups and the line saying what this site actually is.
Route progress
Two pixels of honesty about a slow connection.
Editorial
Story
One component, four densities. This is what replaces the 47 files that each re-implement an article card.
Kicker
The section label above a headline, and the only place a section colour appears.
Meta
Source, timestamp and byline. Always muted, never competing with the headline.
Coverage
How many outlets carry the story. The one thing an aggregator can say that a publisher cannot.
Prose
The article body, capped at a measure, with quotes and links.
Breadcrumb
Where this page sits. Navigation for readers who never saw the homepage.
Figure
An image with its caption and credit.
Avatar and logo
A person and an organisation, with initials when there is no photograph.
Poster
Portrait media for films and products. The one 2:3 shape.
Listing
Tabs
Switches a panel in place. Not to be confused with sub-nav.
Pagination
One button and the count that tells you whether to keep going.
Strip
A sideways row of cards, replacing 22 scroll containers.
Directory
A long index that is a real page, not a dropdown.
Link grid
Destinations as text with a count, not icons in boxes.
Data
Tile
A headline figure with its label and change.
Delta
A change figure. Direction carries a glyph, never colour alone.
Table
Tabular figures that line up, with a rule under the header.
Chart
The frame around a plot, including the source line.
Map
The states choropleth, with no-data treated as a real state.
Hemicycle
One dot per seat, with undeclared seats left undeclared.
Results list
Declared and pending seats, identity carried by the abbreviation.
Ticker
A row of figures that does not move, so it can be read.
Controls
Button
Two variants. There is no third.
Tag
Topics and filters. The only pill-shaped thing in the system.
Toggle
Save and follow. One control replacing three.
Share
The row under an article. Few options, real labels.
Subscribe
The newsletter block, with a line saying what actually arrives.
Focus
One focus style for the whole site, readable on every surface in both themes.
Forms and feedback
Field
Input, select, textarea, checkbox and radio. One control for the 34 files that style their own.
Toast
A short message about what just happened, announced as well as shown.
Empty state
What a page says when it has nothing. Always with a way out.
Skeleton
A placeholder shaped like what is coming, and the soft 404 trap.
Page furniture
Next step
The module the traffic data says is missing. Read this one.
Ad slot
Declared, labelled and bounded. Two per article, maximum.
Banner
One band for consent, push, daily brief and quick access.
What a component may do
- Read tokens for every colour, size, space and radius.
- Offer variants through a modifier class or a data attribute.
- Work in both themes without a
dark:override anywhere.
- Declare a raw colour or font size. The old frontend had 27 uses of one hardcoded green.
- Carry layout. Components size themselves to their container; the page positions them.
- Depend on a framework. These are plain CSS classes.