Chemius
A token-first Angular design system for a chemical-compliance platform: safety data sheets, labels and regulatory documents. I designed it in Figma and shipped it with AI in the loop, themed across four regulatory domains and accessible by default.
A regulated product whose UI was a patchwork of PrimeNG defaults: inconsistent, slow to extend, fighting itself every release.
A token-first Angular design system, architected in Figma and shipped with AI in the loop, themed across four regulatory domains and accessible by default.
One coherent library the team adopts screen by screen, off PrimeNG, with no big-bang rewrite.
A regulated product running on borrowed parts
Chemius is a chemical-compliance platform: safety data sheets, technical data sheets, labels, legislation tracking. A domain where a wrong field on screen becomes a wrong field on a regulated document, so the interface has to stay calm and exact.
Its frontend didn't. It was a patchwork of PrimeNG defaults: inconsistent spacing, ad-hoc colours, parts that looked like four different products sharing one shell. Every release lost time fighting it. So instead of patching it again, I built the team a system of their own.
How I actually worked on it
The method is the same every time: map the domain, architect every primitive in Figma, then direct AI to ship it as production Angular while I hold the craft bar.
Domain and flow mapping, the token architecture, every design and motion call, the accessibility bar, and the final say on whether a component felt right.
Writing the Angular and Storybook code, scaffolding every variant and state, and the repetitive implementation, fast and under the rules I set.
It has to feel alive, not bouncy
References I trust: Linear, Vercel, Stripe. Spring for selection, expo-out for panels, exits faster than entrances, press states that move, and a reduced-motion fallback on everything. The decisions are tiny; together they decide whether the product feels considered or thrown together.
Tokens before components
A real token system, not a colour list: 10 colour families on a full 50 to 950 ramp, a 4px spacing grid, eight type sizes. Every value is mirrored in CSS and TypeScript, kept in sync by hand so design and runtime never drift.
Primary Chemius Blue, a Circuit-Green accent, a soft-graphite neutral ramp, semantic success, error and warning, plus four domain palettes, all addressable as --color-{family}-{step}. A brand change ripples from one token instead of fifty components.
Three easings, seven durations, written down as rules: spring is for selection only, exits always run faster than entrances, and every animated component ships a reduced-motion fallback.
Four regulatory domains, one component library
Chemius spans four content types (SDS, TDS, Materials, Formulations) and each has to feel distinct without forking the library four ways.
Each domain owns a colour: SDS teal, TDS lime, Material purple, Formulation indigo, applied through one theming wrapper. A button stays one button; it just knows which world it's in. Headers, badges, steppers and tables all pick the context up, with no forks to maintain.
One table under every data-heavy screen
Most of this product is dense, regulated data, so the table is the system's heaviest and highest-leverage organism. Built once, it powers every materials list, SDS register and formulation grid identically.
- Sorting, column management and saved views
- Filtering, bulk actions and pagination
- Row expansion, instruction and total rows
- Empty, loading and error states
- URL-synced state and CSV / XLSX export
Storybook as the source of truth
Every component lives in Storybook, documented across every variant, size and state, so engineers see exactly what they're getting before they wire it in.
- 69 components: 24 atoms, 11 molecules, a deep organism layer, 7 page templates
- 44 Storybook stories covering every state and variant
- 144 icons in tree-shakeable sets: core, editor, regulatory, brand
- 9 GHS pictograms plus REACH / RoHS / SVHC regulatory marks
Accessibility as the floor, not a polish pass
- Contrast documented per shade: every 950 clears AAA on white
- Saturated brand colours flagged UI-only, barred from body text
- Full keyboard paths and correct ARIA on every component, every state
- Reduced-motion honoured across the whole system
For software used eight hours a day to produce legally binding documents, this is the floor, not a polish pass.
Documented for the people consuming it
The system isn't a big-bang rewrite. It ships with a migration guide off PrimeNG, a component and token reference, a theming guide and a pitfalls page, so the team adopts it one screen at a time, old and new UI coexisting until it's done.
What survives the handoff to AI, and what doesn't
The lasting lesson: how much of design survives the handoff to AI, and how much doesn't. Claude ships clean, accessible Angular all day. It won't tell you a 220ms ease feels lazy on a checkbox, or that a card hover wants a cursor-tracked glow instead of a flat shadow. That judgement is still the job, and I held it for the whole build.
Next: a semantic token layer over the raw palette, and analytics surfaces built from the same parts.