Design System
One system across products, themes and screen sizes
A shared design system that separates semantic colour, component structure and density, allowing complex financial software to adapt across themes, accessibility modes and product contexts without rebuilding the interface from scratch.
One system, two layers
One layer carries semantic colour, the other carries geometry and type. Both sit on the same components: every specimen below is identical markup, and the only difference between any two is data-theme or data-density on an ancestor.
Raw values. Nothing in a component points here.
Roles, not colours. The only layer a scope moves.
Families own their states, and never branch on theme.
Two attributes on an ancestor. Everything below inherits.
350 base tokens · 3 colour scopes · 2 densities
Colour changes. Meaning does not.
CVD replaces the red-green pair with blue and amber while keeping meaning explicit in text and state. Of the 210 tokens it redefines, only 103 differ from Dark. This portfolio preview strengthens the palette further to meet WCAG AA contrast.
| Symbol | Last | Change | Status |
|---|---|---|---|
| AAPL | 185.22 | +2.41 | Filled |
| TSLA | 241.08 | −1.08 | Partial |
| RY.TO | 168.44 | +0.37 | Open |
Density changes the interface without changing the component
Both sides are the same markup. Type scale, control height, row height and radius move together; not one semantic role changes.
| Symbol | Qty | Status |
|---|---|---|
| AAPL | 100 | Filled |
| TSLA | 50 | Open |
| Symbol | Qty | Status |
|---|---|---|
| AAPL | 100 | Filled |
| TSLA | 50 | Open |
Comfortable density currently carries light-specific surface values, so it is used in supported product contexts rather than combined with every colour scope.
Five families, same system
Each one is here because it proves something different about the system, not to fill a catalogue.
Hierarchy through semantic roles
Four states, no opacity tricks
Order-type semantics, one component
Text first, colour second
Same rows, different density
| Symbol | Last | Change | Qty | Status |
|---|---|---|---|---|
| AAPL | 185.22 | +2.41 | 100 | Filled |
| TSLA | 241.08 | −1.08 | 50 | Partial |
| RY.TO | 168.44 | +0.37 | 25 | Open |
Shared rules, different contexts
The same tokens and the same components, consumed at different settings.
Compact density, across all three colour scopes.
Comfortable density on the same semantic foundation, in a light-surface context.
Comfortable density where the responsive system documents it.