Overview
A dense, calm, accessible design system for data-heavy B2B SaaS.
Purpose
This is my personal design system for data-heavy B2B products: dashboards, tables, filters and AI features. I built it to show how I work with systems, from tokens to tested components. No product team uses it yet, so treat it as a working sample.
Principles
Calm
The interface stays quiet so the data stands out. Color and motion only carry meaning.
Precise
Numbers line up, labels are exact, and every state is designed. Nothing is left to guess.
Efficient
Dense layouts and fast interactions for people who use the product all day.
Accessible
WCAG 2.2 AA is the minimum, tested in code in both themes and densities.
Data-first
Every decision starts from what people need to read, compare and act on.
What's inside
| Section | Contents |
|---|---|
| Foundations | 10 pages: color, type, spacing, density, radius, elevation, motion, icons, accessibility and content. |
| Tokens | 229 tokens, 88 of them semantic. Light and dark values for every semantic color. |
| Components | 18 components in three batches. 18 built so far. |
| Patterns | 3 patterns: risk alert table, AI provenance, and loading, empty and error states. |
Status legend
| Status | Meaning |
|---|---|
| Planned | Not built yet. |
| Beta | Built and tested. Not reviewed yet. |
| Stable | Built, tested and reviewed. Ready to use. |