Helix Design System Build
Architecting a multi-brand, highly accessible design system for Helix Labs to scale their digital ecosystem.
Services
Key Results
60%
Productivity Gain
100% AA
Compliance Rating
The Challenge
Helix Labs managed six separate product lines, each built by different engineering teams. This caused design divergence, high technical debt, and accessibility inconsistencies across their clinical and public portals.
Strategy & Vision
We architected a unified design token system based on Tailwind CSS custom properties, defining standard spacing, colors, and responsive typographic scales using fluid clamps.
Design Approach
Our design focused on building modular components. We utilized DM Sans for body copy and JetBrains Mono for clinical readings, ensuring optimal legibility. Interactive states were reinforced with visible focus rings.
Engineering & Implementation
We built the component library using semantic, native HTML. We avoided heavy framework wrappers to keep the footprint light, ensuring that each component is self-contained and highly compatible.
The Outcome
Engineering teams integrated the system within weeks, reducing time-to-market for new features and establishing full WCAG 2.2 AA compliance across all six digital properties.
A Design System for Scale
Helix Labs operates in the biopharmaceutical space, where clarity, reliability, and precision are vital. Scaling six distinct products required a framework that could support diverse user profiles—ranging from clinical researchers to public patients.
Structuring design tokens
We defined a strict hierarchy of tokens in the configuration, separating global values from alias values:
- Legibility First: DM Sans provides a clean, neutral typeface for reading dense clinical tables.
- Mono Accents: JetBrains Mono is utilized for scientific data, ensuring numbers align perfectly and remain legible down to 12px.
- Focus State Discipline: Every interactive item contains a 2px solid focus ring in Electric Blue or Acid Lime, ensuring keyboard users never lose their place.
The design system Noel built changed our entire development velocity. We now launch features in days instead of weeks, fully compliant by default.Dr. Elena Rostova VP of Engineering, Helix Labs