Ardent WordDesign system

Design system

One token file, four products, no exceptions

Every colour, size, weight and duration in the iPhone app, the Android app, the admin app and this website resolves to the same file. This page set is generated from that file, so it cannot drift from what actually ships.

Where the numbers come from

Tokens
886
Colour families
12
Type roles
18
Contrast pairs measured
478
Contrast failures
0
Colour vision failures
0

Source of truth: packages/design-tokens/tokens.json. This site reads dist/tokens.css and dist/tokens.ts, both generated by build-css.mjs, and CI fails if either is stale.

The rules the system enforces

Each of these is checked by a script rather than trusted to discipline.

  1. 01No raw hex may appear in component code on any platform. A literal is a build failure, not a style choice.
  2. 02A semantic colour token always resolves to a primitive colour token, never to a literal.
  3. 03Highlight colours are persisted by semantic token name, never by hex value.
  4. 04Generated platform files are committed and are never edited by hand.
  5. 05There are no decorative gradients in this system, and there is no purple at any step.
  6. 06haven teal belongs to the safety help card and may never carry a marketing or navigation meaning.
  7. 07scarlet belongs to the words of Christ and to nothing else, ever.

How the pipeline runs

tokens.jsonThe single source of truth. Two layers: primitive values, semantic purposes.
build-css.mjsResolves every alias and writes CSS custom properties and a typed mirror.
tokens.cssThe only file on the web allowed to contain a literal colour.
@theme inlineBinds Tailwind utilities to those properties, so bg-canvas is a variable.
contrast-check.mjsMeasures every declared pair against WCAG 2.1 and exits non zero on a failure.

In this system

One thing this system will not do

Rule

It will not let a marketing page borrow a reserved colour. Teal means the crisis help card, and red letter means the words of Christ. If either appeared on a landing page to look attractive, the meaning would be spent by the time it mattered.