Design system · design-as-code · 2026
Votee Design System
Two opposite design languages, one discipline — and a deck system that regenerates itself.
UI
- 2
- Design languages specced end to end
- 129
- Slides rendered in both systems
- 300
- Soft-3D marks across six products
- 12
- Point quality gate every mark must pass
01Project overview
- Role
- Design system owner — UI, tokens, logo system
- Timeline
- 2026
- Platform
- HTML decks · SVG mark library · build scripts
- Scope
- Spec, artefacts and pipeline
A design system for how six AI products explain themselves. It carries two complete design languages — Vivid Spectrum, warm and multi-colour, and Monolith Precision, cool and monochrome — each specced to the token and proven by shipping the same 129-slide showcase in it.
Design-as-code — one deck becomes two systems
01
Token spec
Colour roles, type scale, radii, elevation
02
Deck A
129 slides authored in Vivid Spectrum
03
Re-theme script
Swaps the language, keeps the content
04
Deck B
The same 129 slides in Monolith Precision
Render gate — Every slide and every mark screenshotted before it ships
02Target user
One system, two rooms — and the rooms want opposite things.
The authors
Sales, engineering and product people who need a deck by Thursday.
They copy the nearest file. Make the nearest file the right one.
The warm room
Enterprise buyers being told a product story — they respond to energy.
Vivid Spectrum: warm canvas, one decisive orange, friendly radii, soft depth.
The cold room
Leadership and institutional partners who read a deck as a document, not a brochure.
Monolith Precision: black on cool near-white, one glacier accent, flat by conviction.
03The status
Every deck started as a copy of the last deck. Type scales drifted a few pixels per generation, six products used six oranges, and any slide with a chart was rebuilt by hand. The brand guideline was a PDF nobody opened at 11pm.
04Core problem
The honest constraint: one house style could not serve both rooms.
Warming up the investor deck made it look like marketing. Cooling down the product story made it look like a compliance document. A "formal" variant of one system produces two half-committed looks.
And the second failure mode
A design system that lives only as a template dies the first time someone edits it. It had to be regenerable, not just documented.
05Existing gaps
Corporate template decks
One master file, locked layouts.
Break within two edits; nothing enforces the tokens once copied.
Figma slide libraries
Beautiful, componentised, reviewable.
Every export is manual, and the design never becomes the artefact people send.
AI deck generators
Fast, endless, plausible.
Generic by construction — they have no opinion, and opinion is the point.
06UX solution & features
Two specs, written as opposites on purpose, then held to it.
Vivid Spectrum
Warm near-white canvas, Space Grotesk over Inter, generous radii, soft optimistic depth.
Restraint rule: one accent dominates per surface — three hues may share a chart, never a screen.
Monolith Precision
Pure black on a cool sheet, Hanken Grotesk throughout, tight radii that read as cut, flat by conviction.
Restraint rule: there is no second brand hue. Emphasis is scale, weight and space.
What both systems share
- An 8px unit, a 12-column grid, a 1440px container — identical skeleton, different surface.
- Named colour roles rather than hex values, so a re-theme is a token swap.
- One type scale from 200px display to 12px caption, with CJK pairings for bilingual slides.
- Diagrams too: brand hues in one system, a grayscale ramp in the other.
The comparison is the proof
Both decks carry the same 129 slides, so any slide reads side by side in both languages. That is what turns two mood boards into two systems.
Vivid Spectrum
Same component, other rules
One accent dominates per surface.
Monolith Precision
Same component, other rules
There is no second brand hue.
Same three components, same 8px rhythm — only the colour roles, radii and depth change.
07Final prototype
Two decks, 300 marks, and the scripts that keep both honest.
The logo system
300 marks across six products on one soft-3D language: a single recognisable subject, volume from gradients, light always upper-left, occlusion in a darker tone of the brand hue. Colour codes the product; geometry codes the family.
How 300 marks stay consistent
- Golden reference marks define the target; everything else is judged against them.
- A 12-point checklist gates each mark — centring, gradients, light direction, palette, id namespacing.
- Final gate is a render test: obvious in one second at 32px, or simplify.
- A gallery reviews all 300 on white, grey and dark, with per-mark scores.
08Impact & results
- Two languages that can be defended, not just liked — every choice traces to a written rule.
- A deck stopped being a file to copy and became a system to instantiate.
- The mark set scaled to 300 without diluting — the checklist outranked taste.
- What I would change: the rules live in a document. The next version enforces them in the editing surface.
09AI-native execution
Design-as-code end to end: the spec is a file, the deck is a file, and the second design language is a build step.
Claude Code — The studio — specs, deck markup, the re-theme transform and the logo pipeline all authored here.
Playwright — Renders every mark at 256px and 32px, so the quality gate runs on pixels rather than opinion.
Mermaid — Diagrams themed per system through one shared variables block — a diagram inherits its language.
Figma — Where marks and type scales were judged by eye before being committed to the spec.
Storybook — The component-level companion, keeping product UI on the same tokens.
