Introduction

Stable

Welcome to the Design System — a token-based component library for building consistent B2B interfaces.

What is this design system?

This design system is a collection of design decisions, reusable components, and guidelines that help teams build consistent, accessible user interfaces at scale.

It is built on a token-first architecture: all visual decisions — colours, spacing, typography, radius, and elevation — are captured as named tokens before they reach any component.

Core principles

Token-driven: Every design decision is a named variable, not a hardcoded value.
Accessible by default: Components meet WCAG 2.1 AA standards.
Composable: Small, focused components combine into patterns.
B2B focused: Designed for enterprise-grade, data-dense UIs.

What's included

Layer	Contents
Tokens	Primitives (raw values) + Semantic (purpose-driven aliases)
Foundations	Color, typography, spacing, radius, elevation
Components	Button, Input, Textarea (more coming)
Patterns	Forms, filtering, empty states

Quick start

Using tokens

Always use semantic tokens in components — never primitive tokens directly. Semantic tokens communicate intent (background/brand/primary) rather than value (dark-cyan/80).

Import the Tokens Studio JSON into Figma via the Tokens Studio plugin, or reference the CSS variables generated by Style Dictionary.

/* Example: using a semantic token in CSS */
.button-primary {
  background-color: var(--color-background-brand-primary);
  color: var(--color-text-inverse);
}

System layers

The design system follows a strict layering model:

Primitives → Semantic tokens → Components → Patterns → Product

Primitives — Raw named values (e.g. dark-cyan/80 = #315e59)
Semantic — Purpose aliases (e.g. background/brand/primary = {dark-cyan/80})
Components — UI building blocks that consume semantic tokens
Patterns — Composed components solving specific UX problems
Product — The final application, built from patterns

Design Principles

→