A universal, inclusive design system for building coherent digital systems.
Coherence is not a UI kit.
It is a system layer that brings together design principles, semantic tokens, accessible components, and product patterns into a single, scalable foundation for modern digital products.
Most design systems standardise interfaces.
Few address the deeper problem:
Systems drift, interfaces diverge, accessibility becomes inconsistent.
Value is lost between layers.
Coherence exists to solve that.
It ensures that:
- Design decisions remain aligned across products and teams
- Accessibility and inclusion are built in from the start
- Systems behave consistently, not just visually, but structurally
Coherence is a token-driven, accessibility-first design system, made up of:
The rules that guide how systems should behave.
Colour, typography, spacing, motion, layout, and interaction standards.
Semantic design tokens that scale meaning across themes, platforms, and products.
Accessible, production-ready React components for real-world product use.
Reusable product flows such as forms, dashboards, tables, and navigation.
Clear contribution, versioning, and release processes to maintain system integrity over time.
Coherence is built as a layered system:
Principles
↓
Foundations
↓
Design Tokens (Style Dictionary)
↓
CSS Variables + TypeScript Maps
↓
React Primitives → Components → Patterns
↓
Storybook (development + validation)
↓
Next.js (documentation + system interface)
- Next.js — documentation site and system interface
- React — component library
- Storybook — component development and testing
- Style Dictionary — design token pipeline
- Tailwind CSS — implementation layer (token-driven)
- TypeScript — type safety across the system
- pnpm workspaces — monorepo management
-
Semantic over visual naming
Tokens express meaning, not appearance. -
Accessibility by default
WCAG compliance, keyboard navigation, and contrast are built into every layer. -
System over surface
Coherence focuses on how systems behave, not just how they look. -
Consistency through structure
Tokens, components, and patterns are aligned and interdependent. -
Scalable by design
Built to support themes, platforms, and evolving product ecosystems.
pnpm install
pnpm dev:docs
pnpm dev:storybook
apps/
docs/ # Next.js documentation site
storybook/ # Storybook environment
packages/
tokens/ # Design tokens + Style Dictionary
primitives/ # Layout and text primitives
components/ # React component library
patterns/ # Product patterns
themes/ # Theme definitions
utils-a11y/ # Accessibility helpers
- Phase 1 — Foundations and token system
- Phase 2 — Core primitives and components
- Phase 3 — Accessibility hardening
- Phase 4 — Patterns and documentation
- Phase 5 — Governance and public release
Coherence is designed to evolve through structured contribution.
All changes must:
- Follow token and component standards
- Meet accessibility requirements
- Pass automated checks
- Include documentation updates