VimUI, a design system in code

Problem

Vimocity ships a web app, iOS and Android apps, and a Windows desktop app. We had brand colors, fonts, and a style guide, but over time each drifted into its own patterns.

VimUI started in Figma, and for a while that worked: colors, typography, and component usage guidelines all lived in one file. The cost showed up in maintenance. Every change had to be made twice — once in the Figma file, then again in the component code — and the second half meant pulling a developer off their work to read the file, translate it, and cut a release. Designers had one source of truth and engineers had another, and the gap between them was measured in developer time.

What I did

• Built 50+ components organized as atoms, molecules, and organisms, on shadcn/ui's patterns and Radix primitives — some staying close to the original, some rewritten entirely for what we needed.
• Established tokens for color, type, spacing, and sizing, and removed hardcoded values from the frontend.
• Made accessibility a property of the system rather than a per-feature task: keyboard support, contrast in light and dark modes, minimum touch targets, and reduced-motion support built into the components themselves.
• Set up versioned releases so consuming apps can test changes before they land.
• Retired the Figma file. Once we started prototyping in real components rather than mocking them up, the design file was a second copy of something that already existed — so Storybook became the source of truth for what a component is, how it is used, and what it does.

Outcome

• Reusable component use went from about 10% to 80–90% of frontend code.
• Token use went from 0% to 99%. The remaining 1% is deliberate overrides.
• Changes are made once, in code, and released. There is no second artifact to update and no translation step between the two.
• Building a new page became assembly rather than construction.

What it does and doesn't cover

The component library is the web app's. React Native and Electron need entirely different components, and that library does not exist yet — the mobile and desktop apps carry their own equivalents.

What all four platforms share is the tokens. Color and type come from the same source everywhere, so the visual language is consistent even where the components are not.

The exception is login and account creation, which run in a webview on desktop and mobile — so those screens are running actual VimUI components on every platform. That was a side effect of building login as one flow, not a plan.

See it: the component library is public at vimui.vimocity.com.