Tokens · REN Data design system

Tokens

Every value is a CSS custom property, read on this page from tokens/*.css. Click a name to copy it as var(--name).

Colour

Brand and neutral colours for UI. Data colours only on data, in a fixed order.

<p style={{ color: "var(--muted)", borderTop: "1px solid var(--line)", paddingTop: 8 }}>
  Source: ACAPS, March 2026
</p>

Ramps

Light (1) to dark (10). Step 6 is the base colour. Use for sequential and diverging scales.

Semantic

Use these in UI, never the raw palette. Each has a light and a dark value.

Type

Serif for the voice, sans for reading, mono for facts about facts.

<h2 style={{ fontFamily: "var(--font-serif)", fontSize: "var(--fs-h2)", letterSpacing: "var(--tracking-display)" }}>
  Incidents fell by a third after the ceasefire
</h2>
<p style={{ font: "var(--fs-meta)/var(--lh-small) var(--font-mono)", color: "var(--muted)" }}>
  14 October 2026
</p>

Spacing

Rhythmic, not uniform: related things sit tight, groups breathe, sections get real air.

<section style={{ display: "grid", gap: "var(--gap-related)", marginTop: "var(--gap-section)" }}>
  <SectionHead title="Latest writing" moreLabel="All posts" moreHref="/blog/" />
  <PostList posts={posts} />
</section>

Shape & motion

3px is the maximum radius. Hairlines instead of shadows.