+234 Design System

Rules

The decisions the tokens cannot enforce on their own. These are the ones that caused the mess this system replaces.

1. Two ad slots on an article, and no mobile sticky

The old template carried six AdSense units plus a sticky mobile unit around a 147-word summary, with mobile at 64 per cent of search traffic. The page read as an ad wrapper and readers left after one page. Agreed 4 November 2026. See Ad slot.

2. Every article ends with a next step matched to intent

Organic readers spend 114 seconds on the page and then view 1.18 pages. They are reading and then finding nothing to do. A visa reader gets visa stories, not the general feed. See Next step.

3. No raw hex, ever

If a colour is missing, add a token. The old frontend had 27 uses of a single hardcoded green and dozens more one-off values.

4. No undefined tokens

Five variables were used in the frontend and declared nowhere, with no fallbacks: --text-muted (42 uses), --border (36), --bg-elevated (13), --bg-secondary and --bg-hover. They were concentrated in the price and cost-of-living pages, which are the strongest SEO asset on the site. A prebuild check fails on any --p234- variable this package does not declare.

5. Pick a type role, never a font size

Seventeen roles cover the whole site. Reaching past them means a role is missing, which is a conversation rather than a one-off override. The old site used nine ad-hoc sizes, dominated by 14px and 12px. See Type.

6. Running text never drops below 16px

caption and kicker are the only roles allowed at 12px, and both are labels rather than prose. Two tests enforce this.

7. Direction is never colour alone

Gainers and decliners carry an arrow glyph as well as a colour. See Delta.

8. Section colours are text and rules, never backgrounds

A front carries five sections at once. Five filled colour blocks is the fastest way to make a news page look like an admin dashboard. See Kicker.

9. One lead per page

If two stories both look like the lead, neither is. A reader should be able to rank a page without reading a headline.

10. Date and attribute every figure

NBS data lags about four months and live reporting does not. A number with no date is the specific way this product misleads people. See Data page.

11. Both themes, every time

A colour with no dark value fails a test. Two of the three failures on the first build were dark-only, which is exactly the class of bug that ships when dark mode is eyeballed at the end.

12. No em dashes in anything a reader sees

This is a house rule across the product, enforced by a prebuild check in the frontend and by a filter in the services. It applies to component copy, placeholder text and documentation examples.

13. The build is the gate

Forty-four contrast pairs, two themes, 88 checks, and the build exits non-zero on any failure. When it fails, fix the token. Do not lower the ratio.