Chemius

Chemius is the platform my client at Bens Consulting runs for chemical regulatory professionals. Authoring safety data sheets, building technical data sheets and labels, tracking legislation, distributing documentation to partners. It's the kind of product where a wrong field on a screen can mean a wrong field on a regulated document, so the surface has to stay calm and exact.

The frontend, though, was glued together with PrimeNG and it showed. Inconsistent spacing, random colors, components that looked like they belonged to different products that just happened to share an app shell. The team wanted to keep moving on features without burning another six months on every release refactoring around the bits that didn't fit. So I built them their own design system instead.

Before a single component was built, I designed the whole foundation in Figma. Color ramps, spacing scale, type scale, motion tokens, shadows and glows. Every primitive lives in Figma variables, so handoff is lossless and brand changes happen at the token layer instead of inside fifty different components.

That discipline was the unlock for everything that came later. With tokens settled, every Storybook component became a thin wrapper over decisions that were already made and signed off.

Around forty components and counting, across atoms, molecules and organisms. Buttons, inputs, dropdowns, menus, radios, toggles, sliders, tooltips, tabs, alerts, accordions, stepper, navbar, modal, table, page header, sidebar, plus the smaller pieces those are built from.

I worked with Claude Code to turn the Figma decisions into a real Angular library. I don't write the code, but I set the rules — token-first, no hardcoded values, accessibility as a hard requirement, motion that has to feel right before a component is called done. Every component ships with stories for every variant, size and state, so engineers see exactly what they're getting before they touch it.

References I respect: Linear, Vercel, Stripe. Spring curve for selection, expo-out for panels, exits that run faster than entrances. Press states that move instead of just changing color. Every animated component has a reduced-motion fallback so the system stays accessible the moment someone asks it to.

Most of my actual job ended up living in this layer — telling the model when an animation was too bouncy, when a focus state looked cheap, when a hover was doing too much, when a button's press depth was a single pixel off and made the whole thing feel mushy. The decisions are small. They stack.

WCAG 2.1 AA contrast checked with real numbers, not eyeballed. Keyboard paths working for every interactive component, in every state. ARIA where it belongs and only where it belongs. Reduced-motion fallbacks on every animated component, because a focus ring you can't see is just a focus ring that doesn't exist.

For a regulatory product whose audience includes people who use this software for eight hours a day, this isn't optional. It's the floor.

Every component lives next to documentation written for the developers who actually have to wire it in. A components reference, a token reference, a theming guide, install steps. A migration guide off PrimeNG, because that's what the team is moving away from. And a pitfalls page for the stuff I learned the hard way and would rather no one else relive.

The goal was always for the team to adopt the system piece by piece instead of doing one scary big-bang rewrite. Docs are how that actually happens.

The interesting part for me was realising how much of design work survives the handoff to AI, and how much doesn't. Claude can ship clean, accessible Angular code all day. It can't tell you that a 220ms ease feels lazy on a checkbox, or that your error state is shaking too aggressively, or that a card hover needs a subtle cursor-tracked glow instead of a flat shadow. That judgement is still the design job, and I sat in that seat for the whole project.

End result: a cohesive, accessible, properly themed Angular library the Chemius team can adopt at their own pace. Tokens are settled and forty components live in Storybook. Theming, motion and a11y are all baked into the foundation — no big-bang rewrite anywhere on the roadmap.