Helix · HDFC Life — Kushal Sharma

THE PROBLEM

↳ what wasn't working

Before Helix, HDFC Life shipped UI from a sprawl of inconsistent libraries — every app team had its own components, its own colors, its own button. Design-to-dev handoff was a forty-step PDF and a Slack thread, and every new screen reopened decisions the org had already made twice.

The mandate was to build an enterprise design system from scratch — one that worked across consumer web, mobile, and internal tooling, and stayed coherent as it landed in the hands of product teams who had never used a system before.

THE APPROACH

↳ how I tackled it

A core team of four built Helix end-to-end. I led the system design: defining the atomic theory (tokens → primitives → components → patterns), shipping the Figma library, and building the docs site that became the contract between designers and developers.

Tokens were the wedge. Once color, type, spacing, and shadow were captured as semantic + alias tokens, every downstream decision (button states, form validation, page templates) collapsed into a few config choices. The same tokens generated CSS variables, iOS/Android theme files, and the docs site's live previews — one source, every surface.

The docs site was the unlock. Built in code rather than as Storybook plugins, it let designers and engineers see usage rules, accessibility specs, and live examples in one place. New product teams could go from cold to shipping in a sprint instead of a quarter.

CONTRIBUTIONS
—Cut delivery from 4 weeks to 2; reduced handoff errors by 20%
—Drove ~20% reduction in design-to-dev timelines via AI-assisted tooling
—Mentored junior designers on the design system

◐ About — what Helix replaces and what it makes possible

◐ Atomic theory — the conceptual model behind every decision: tokens → primitives → components → patterns

◐ Colour overview — semantic + alias tokens with dark/light parity, accessibility-graded

◐ Typography — type ramp tuned for product, marketing, and internal tooling

◐ Spacing — the 4px grid, density modes, and rhythm rules

◐ Button — variants, states, and the composition rules behind them

◐ Text Field — input states, validation messaging, accessibility patterns

◐ Desktop templates — the system stitched into shipping patterns teams clone from

◐ Accessibility — specs codified per component so a11y survives handoff

THE OUTCOME

↳ what shipped

Helix is live at helix.apps-hdfclife.com and adopted across HDFC Life — the same tokens, components, and patterns power consumer web, mobile apps, and internal tooling. End-to-end delivery time on a new feature dropped from roughly four weeks to two — a 58% reduction — and design-to-dev handoff errors fell by another 20%.

Beyond the metric: a documented atomic-theory model that other org-wide initiatives now reference as the playbook, and a small core team that punched well above its size.

58%faster delivery