Skip to content
Zowork
Foundation · Design Systems

A healthcare design system engineered for the clinic.

Tokens, type, motion, theming and accessibility: the foundation a healthcare team builds on, ready for web and mobile.

See the components
Foundation

Six pillars. One source of truth.

Color

Surface, ink, brand and clinical status: one accessible near-monochrome dark token layer.

Typography

Display / body / mono scale tuned for clinical density and long reading sessions.

Space

A 4px-baseline scale that holds form, table and chart density predictably.

Radius

A small radius vocabulary for chips, controls and cards, consistent everywhere.

Elevation

Soft layered shadows in place of borders: surfaces and depth, never ornament.

Motion

Premium-minimal easing and durations; nothing animates against the user.

Color

One token layer. Every surface.

Surface
3 tokens
--color-bg
--color-bg-2
--color-bg-3
Ink
3 tokens
--color-ink
--color-ink-2
--color-ink-mute
Brand
3 tokens
--color-cyan-300
--color-cyan-400
--color-cyan-500
Clinical status
3 tokens
--color-status-active
--color-status-onboarding
--color-status-leave
Secondary accents
3 tokens
--color-coral-500
--color-violet-500
--color-mint-400
Typography

A scale tuned for clinical density.

display-xl
Empathy at scale.
display-l
A decade in healthcare.
display-m
Clinical-grade by default.
heading
Built for the clinic, not the demo.
body-l
A foundation a healthcare team builds on: tokens, type, motion, theming and accessibility.
body
Tokens flow from Figma to code with semver guarantees.
mono
BAA-ready · HIPAA-aligned · WCAG 2.2 AA
Motion

Premium-minimal motion. Nothing distracts.

standard
300ms
cubic-bezier(0.2, 0.8, 0.2, 1)
Daily actions, hovers
emph
450ms
cubic-bezier(0.16, 1, 0.3, 1)
Reveals, entrances
snappy
180ms
cubic-bezier(0.4, 0, 0.2, 1)
Toggles, selects
Space & elevation

Rhythm and depth, predictably.

Spacing scale
4px baseline
4
8
12
16
24
32
48
64
Elevation
3 layers
L1
L2
L3
Brand accent

Change one variable. The interface follows.

One accessible near-monochrome dark surface, driven by tokens. Swap the brand accent and every control follows, the same mechanism a white-label build would use.

Brand accent
Live preview
Built on tokens.

Change one variable. The whole interface follows.

bg
bg-2
ink
accent
Active
Accessibility

WCAG 2.2 AA. Tested, not assumed.

Contrast

Tokens pre-pair with AA body and large-text floors. Verified, not guessed.

Keyboard

Every primitive reachable; visible focus rings by default.

Screen reader

Semantic labels first; ARIA only where the platform falls short.

Motion

Respects prefers-reduced-motion; nothing moves against the user.

Governance

Built to last. Versioned, documented, owned.

The system ships with semantic versioning, living documentation and Figma↔code parity. When a token changes, everyone (designers, engineers, clinicians reviewing UI) sees the same thing.

SemverLiving docsFigma libraryToken syncVisual regressionStorybook
See the components

Built by the team behind clinical platforms at Netsmart, eVisit and The Change Companies.

A 30-minute call. We map the clinical workflow and the compliance bar, then walk through how our healthcare AI fits, so the next decision is easy.

See the work

hello@zowork.com·+1 302 600 3184·+81 80 1444 1599·+91 80166 89265