design system
A design system built for humans and AI tooling alike.
Shield keeps one design language coherent across squads and products, from Figma to production. Headless components, tagged releases, and a registry-and-audit backbone that both engineers and AI agents can read.
- Design System Lead
- React, Base UI, Tailwind v4, OKLCH tokens
- Figma library, Storybook, Registry
- Accessibility, Cross-platform, AI-legible
- Web, iOS & Android
@ch/ui · anatomyOrigin
From opinionated to headless.
Charlie Health was built on Ant Design. Heavy style overrides, breaking changes on updates, a widening gap between Figma and production. Ant had served the company well in its founding years, but it couldn't carry the fidelity the design team now needed. I made the case to leadership for a headless system based on ShadCN and Tailwind, packaged as an internal dependency. That proposal became Shield.
Figma Documentation
Origin
Figma was the source of truth. Components were tagged with Code Connect, built into real code with the help of MCPs. Once in code I could start the versioning which enabled us to begin the design-sync work needed to replicate Shield for Claude Design use.
Authored once, synced everywhere
Storybook documentation
Machine-readable docs
One system, every surface
What follows is Shield in production. The same tokens, components, and guidelines compose into real surfaces across every Charlie Health domain: client onboarding and portal, the provider workspace, and the referral center. One system behind many products, held together by a shared vocabulary so a date picker, a badge, or a dialog behaves the same wherever it appears, in light or dark.
Client Onboarding
Client Portal
Provider Portal
Referral Portal
The same system, on mobile.
Shield doesn't stop at the browser. The same tokens and components carry to iOS and Android, so the mobile apps feel like one product with the web, from onboarding through the everyday screens.
Onboarding on mobile
A short welcome walks a new client in, their group, how sessions work, and the team behind them.
Home, schedule, progress
The everyday surfaces, all Shield: a home that orients, a schedule to join from, and a progress view that grows with you.
The system on mobile
On mobile too. The client app's home rewrites itself for the moment, morning prep, a live group, the walk-away, an evening wind-down, all from the same Shield tokens and components.