Get started

Install the package, import the four stylesheets in order, and put the first component on a page.

Install

npm install @plus234feed/ds

Import, in this order

Order matters. Tokens must land before anything that reads them, and the fonts must be declared before the tokens name them.

@import "@plus234feed/ds/fonts.css";      /* Charter, self-hosted, 64KB */
@import "@plus234feed/ds/tokens.css";     /* the custom properties */
@import "@plus234feed/ds/type.css";       /* .p234-headline and friends */
@import "@plus234feed/ds/components.css"; /* .p234-story and friends */

Which tokens file

tokens.css drives the theme from a .dark class on the root element, which is what the app already does. Use tokens-auto.css only on a standalone page with no theme toggle: it adds an operating-system preference block. The app must not use it, because a reader who chose light has to get light on a dark laptop.

Preload the serif

Article pages are where readers arrive, so the headline font should not arrive late.

<link rel="preload" href="/fonts/charter_regular.woff2"
      as="font" type="font/woff2" crossorigin>

Your first component

A story card is a link wrapping a kicker, a headline, a standfirst and a meta line. Nothing else.

One story card

Business

UBA board approves nine-month unaudited financials

The filing closes the period and sets the date for the next board meeting.

NGX filing · 1 hour ago 3 sources

HTML

<a class="p234-story" href="#">
  <span class="p234-kicker" data-section="business">Business</span>
  <h3 class="p234-story__headline">UBA board approves nine-month unaudited financials</h3>
  <p class="p234-story__standfirst">The filing closes the period and sets the date for the next board meeting.</p>
  <div class="p234-meta">
    <span class="p234-meta__source">NGX filing</span>
    <span class="p234-meta__dot">&middot;</span>
    <span>1 hour ago</span>
    <span class="p234-coverage">3 sources</span>
  </div>
</a>

Working on the system itself

npm run build:tokens   tokens/*.json -> build/*.css, build/tokens.json
npm run build:docs     site/pages/** -> docs/**
npm run build          both
npm test               13 checks
npm run check          build + test, what CI runs

Change a colour in tokens/core.tokens.json, run the build, and if any of the 88 contrast checks fails the build stops and names the pair. Fix the token. Do not lower the ratio.