Self-initiated · 2026
The system that generates the screens
80+ components, semantic day/night tokens, WCAG-validated colour. Built to see how far a system can go when craft is the only constraint.
80+
components with full state matrices
11
step colour ramps per hue, contrast-checked per pair
2 × 2
platforms × themes from one token source
Client work shows what I shipped under constraints. This shows what I build when the only constraint is craft.
Banking as the target domain was deliberate: data-dense dashboards, trust-critical UI, accessibility obligations, and a real need for dark mode make it one of the hardest environments a system can serve.
Instead of designing screens first, I designed the system that would generate those screens.
Foundations — colour
Nine families, eleven steps each — fourteen for mono. Every swatch carries its measured contrast ratio, so choosing a pairing never needs a separate check.
Fig. 01 · Every pairing was validated against WCAG across both themes. Semantic variables assign each colour a role — primary, hover, active, disabled — rather than a hex, so switching theme is a toggle rather than a redesign.
States as first-class citizens
The gap between a stickersheet and a system is what happens on hover, focus and disabled. Every interactive component ships its full matrix.
Component
Enabled
Hover
Active
Focus
Disabled
Button / primary
Label
Label
Label
Label
Label
Input / text
Label
Value
Label
Value
Label
Value
Label
Value
Label
Value
Fig. 02 · Two rows shown. In Framer, extend to six or eight of your densest components — data table cell, date-range picker, file upload.
The library
From chips, avatars and breadcrumbs to data tables, statistic cards, charts, date-range pickers and file upload.
Tables built from reusable cell components — avatars, actions, ratings, dropdowns — so a new table is composition rather than construction.
Dashboard, calendar, upload and statistics pages composed entirely from system parts, with zero one-off styling. That composition is the whole promise of a system.
Dark mode is a token problem, not a paint problem
Every component’s colours, contrast, shadows and states resolve through the token layer. Solving it once at the variable layer beats solving it per screen forever.
Side by side at identical scale — the point is that nothing moved, only resolved differently.
What this does and doesn’t prove
Demonstrated
80+ components with full variant and state coverage across web and mobile. Complete light/dark theming from one semantic token source. Contrast validation on every colour pairing, with ratios documented. Four pages assembled from system parts alone.
Not demonstrated
No adoption data, because no team has used it. A production deployment would let me measure adoption rate, handoff time before and after, and drift caught in design QA. Those are the numbers that would make this a real case study rather than a craft exercise.
Next: publish the token JSON for code sync, add a contribution and versioning model, and pressure-test the whole thing by building a second product from the same foundations.
Next project
Get in touch