Kaizen Health Kaizen Health Design system

Kaizen Health · Product system v2.0

One system.
Every care moment.

The complete visual language for Kaizen Health and Kai—grounded in the production app, reconciled with Figma, and ready for designers, engineers, and AI-assisted workflows.

Explore the system Open mobile UI kit
Reassuring Clear Capable Human
Kaizen Health

Care, connected.

44Components
122Product icons
2Color modes
Reconciled with production

System architecture

From brand foundations to real product screens.

01 Foundations

Brand, color, type, spacing, radius, elevation, and motion.

02 Primitives

Buttons, forms, data display, feedback, navigation, and Kai.

03 Patterns

Mobile screens composed from the same tokens and components.

01 · Foundations

Shared decisions, made visible.

These specimens are generated from the canonical token layer. Open any specimen for a focused, full-size reference.

02 · Components

Production vocabulary, organized by role.

Forty-four reusable React primitives recreate the app’s Base* library for web prototypes and documentation.

Actions Button · IconButton · LabelButton · Favorite · File action
Forms Input · Picker · Search · Checkbox · Radio · Switch · Date
Data Cards · Lists · Charts · Tags · Badges · Progress
System Feedback · Navigation · Kai / AI · 122 icons

03 · Mobile UI kit

The system in motion.

An interactive recreation of the Kaizen app with working navigation across Home, Kai, Records, Health profile, and Groups. It uses the same component bundle, tokens, fonts, and icon registry documented above.

  • Real product component composition
  • Light and dark semantic tokens
  • Responsive, interactive screen flows
  • Health-forward content and Kai voice
Launch interactive kit

04 · Resources

Built to be used, not admired.

Use the complete package for design exploration, throwaway prototypes, production implementation guidance, or AI-assisted interface generation.

Documentation System reference Principles, architecture, component mapping, and usage. Open readme CSS entry point Global styles Fonts, tokens, semantic themes, and type utilities. View styles Machine readable Design manifest Components, specimens, tokens, themes, and font metadata. View manifest Product assets Icon registry All 122 production glyphs in a reusable JavaScript registry. View icons Prototype runtime Component bundle Browser-ready components under the Kaizen namespace. View bundle AI guidance Kaizen design skill Portable instructions for creating on-brand interfaces. View skill

Quick start

Link one stylesheet. Use one system.

<link rel="stylesheet" href="/brand-kit/styles.css">
<script src="/brand-kit/assets/kaizen-icons.js"></script>
<script src="/brand-kit/_ds_bundle.js"></script>
Open page