Crayon
DS
Crayon DS is the design system I built from scratch for Curative AI — ABA Technology's end-to-end healthcare platform. It covers foundations, tokens, atoms, molecules, components, and patterns.
The name Crayon reflects the platform's warmth: a system for a product that serves everyone, including younger patients. Blue is the primary color; all type and color combinations pass WCAG 2.1 AA.
Inconsistency multiplying faster than the product could grow
With multiple product surfaces — billing, dashboards, patient views, pipelines — each being designed independently, visual and behavioral inconsistencies were multiplying fast. There were no shared tokens, no component standards, and no accessibility baseline. Every new feature meant reinventing decisions that should have already been made.
Foundations first, then atomic design up
I started with foundations: defined the color system, typography scale, and spacing tokens first — all with WCAG contrast ratios validated from day one. From there I built up through atomic design: atoms → molecules → components → patterns. Every component was documented with variants, states, usage rules, and the reasoning behind key decisions.
100–200 components backed by fewer than 50 design tokens
A complete Figma component library backed by fewer than 50 design tokens. The system gave every surface in Curative AI a shared visual language, made accessibility compliance automatic at the component level, and significantly reduced design-to-engineering handoff friction.
