Plus234Feed Design System

Editorial tokens, a named type scale and the components a news intelligence platform needs. Newspaper hierarchy, accessible colour in both themes, one component per job.

Start here

Get started

Install, import order, and the first component on a page.

Foundations

Colour, type, space and themes. Everything else is built from these.

Components

Thirteen components, each with when to use it and when not to.

Patterns

Whole pages: the article, the section front, the data page.

Where the widgets go

Every current component mapped to what it becomes, and what gets dropped.

Rules

The decisions the tokens cannot enforce on their own.

Why this exists

The frontend had 252 component files and 40,638 lines of TSX, but only 25 shared components. Measured on 4 November 2026:

`page.tsx` files bypassing the shared layout	92 of 108
Files re-implementing an article card	47
Radius variants in use	11	rounded-lg 447, rounded-xl 354, rounded-full 289
Ad-hoc text sizes in use	9	text-sm 1,019 and text-xs 720, so the site is mostly 12 to 14px
Hardcoded uses of one green	27
Variables used but declared nowhere	5	a live bug, not a matter of taste

That last row was real breakage. --text-muted (42 uses), --border (36), --bg-elevated (13), --bg-secondary and --bg-hover were referenced with no fallback and declared in no stylesheet, concentrated in the price and cost-of-living pages.

What the traffic said

Over the 28 days to 3 November 2026: 1,612 users, 1,602 of them new, 1.17 pages per session, 75 per cent bounce. Organic search visitors spent 114 seconds on the page and then viewed 1.18 pages. They read, and then found nothing to do next.

The homepage was 148 of 1,790 sessions, 8 per cent. Almost everyone arrives on an article. That is why the article template leads this work and the homepage does not, and why the next step component exists at all.

The shape of it

tokens/core.tokens.json          159 tokens, W3C DTCG format
tokens/themes/dark.tokens.json   colour only, enforced by a test
scripts/build-tokens.mjs         emits build/*.css, fails on unreadable colour
scripts/build-docs.mjs           site/pages/** -> docs/**
src/components.css               every rule reads a token
src/fonts/                       Charter, four faces, 64KB
test/tokens.test.js              13 checks

Forty-four colour pairs are checked in each theme, 88 checks in all, and the build exits non-zero on any failure. The first run caught three real problems, two of them dark-theme only.