Skip to content

Design · Foundations

Colour, type, and tokens.

Foundations are the bedrock decisions every component inherits. CSS values live here — in the token layer — and nowhere else. Everything below renders with the live tokens.

Open the design portal

Colour

The Five African Minerals.

Each mineral ships as a triad — the base tone, a soft container tone, and an on-container tone for text. The container pairs are contrast-checked so they hold up in sunlight.

  • Container

    On-container text reads here.

    Cobalt

    Democratic Republic of the Congo

    Primary actions, links, active states.

  • Container

    On-container text reads here.

    Tanzanite

    Tanzania

    Brand identity, premium features, purple accents.

  • Container

    On-container text reads here.

    Malachite

    Congo

    Success states, positive indicators, growth.

  • Container

    On-container text reads here.

    Gold

    Ghana and South Africa

    Achievements, warmth, premium badges. Nyuchi's own primary.

  • Container

    On-container text reads here.

    Terracotta

    Pan-African

    Community features, grounding, heritage.

Canonical hex values live in the registry. Never hardcode them — reference the CSS variables or the bg-* / text-* tokens.

Typography

A fluid type scale.

Headings and body resize fluidly with the viewport — no abrupt breakpoint jumps. Samples below use the live scale.

  • Aa Display
  • Aa Heading 1
  • Aa Heading 2
  • Aa Heading 3
  • Aa Heading 4
  • The quick brown fox Body large
  • The quick brown fox Body
  • The quick brown fox Caption

Noto Serif

Headings and display

Noto Sans

Body and UI text — carries African-language diacritics

JetBrains Mono

Code and tabular data

Tokens

One layer for every value.

Tokens are the only place raw CSS values are allowed to live. Every other layer — primitives, brand components, pages — consumes them through variable references, so a single change to a token re-themes the whole ecosystem.

  • Colour

    The Five African Minerals plus semantic tokens — background, foreground, card, border, ring, and the status set. Each has a light and a dark value.

  • Typography

    A fluid type scale from caption to display, built on Noto Serif for headings, Noto Sans for body, and JetBrains Mono for code.

  • Spacing & radius

    A spacing scale and a radius scale. Buttons, inputs, badges, and avatars resolve to the pill radius by mandate.

  • Touch & motion

    A 56-pixel comfortable touch target, a 48-pixel small target, and a soft cubic-bezier easing curve shared across transitions.

Foundations become components.

See how the token layer composes into the building blocks teams actually ship with.

See components Back to Design