From a static Figma file to 4.7M variable inserts across 23 projects.

A design system that nobody could rely on.

When I joined ICICI Lombard, what existed wasn't a working system—it was aimed at marketing website use cases, outdated and rigid, with broken structure and weak implementation discipline. Patterns didn't hold up against real product UX, and downstream teams rightly avoided it. The flagship IL Take Care app didn't reference it at all.

Across internal tools, customer apps, and partner surfaces, interfaces kept diverging — each shipping its own buttons, forms, colour, typography, and copy. There was no shared language, no reuse at scale.

No principles. No tokens. No truth.

The cost of drift was concrete and accelerating:

• 12+ inconsistent color palettes across products, none mapped to brand
• Typography scales that disagreed between web, app, and partner portals
• Components rebuilt from scratch in every new sprint, every team
• No documentation — handoff happened via Slack screenshots
• Brand violations shipping to production with no review surface

Align two flagships. Earn the rest.

My first ask was scoped: align the IL Take Care app and the ICICI Lombard website on a shared visual language. But the moment I started looking, it was clear the rot ran deeper — and a two-product fix would not survive contact with the other teams.

I rescoped: instead of patching two products, I'd build a system that could earn the rest of the company's adoption on its merits. To do that, I needed evidence — not opinion — to justify the scope to leadership.

Benchmarked 28 dimensions. Across 7 industry leaders. Plus ours.

I built an evidence grid—same dimensions documented in mature systems—against Adobe Spectrum, Google Material, IBM Carbon, Shopify Polaris, Salesforce Lightning, Atlassian, and Microsoft Fluent. The goal wasn't applause; it was to show exactly what ICICI Lombard already had versus what serious design systems routinely ship, so gaps were undeniable.

The legacy artefact landed at 19.9% coverage versus that benchmark set—not a KPI to celebrate, but proof the old approach was uncompetitive alongside structural and UX-logic failures. Combined with stakeholder pressure on the two flagship products, that deficit is what earned a green light for central ILDS, budget, and a compact core team within two weeks.

Foundations before pixels. Phases before promises.

I split delivery into three time-boxed phases so value compounded without open-ended commitments. Each phase had closure criteria before the next started. Since launch we've kept shipping variable and component updates whenever product teams surfaced real requirements—releases never stayed frozen; they matured on a rhythm.

Brand-led anchor. Designer-owned logic.

Phase 1 ran 1.5 months, June through mid-July 2024. Marketing provided brand guardrails; we owned product-grade colour logic. We defined five principle groups (Primary, Black/White, Secondary, Neutral, Semantic/State), then translated them into 50-900 ramps, semantic tokens, and mode-aware surface tokens. The outcome was a scalable colour engine teams could ship with, not a static style reference.

We enforced one colour contract across products: raw spectrum → semantic tokens → surface tokens → light/dark modes. Contrast decisions were validated through APCA checks and WCAG baselines, while OKLCH exploration kept lightness/chroma behaviour perceptually stable across states and surfaces.

Design tokens shipped in parallel — Figma variables on the design side, a JSON schema on the dev side, with a single Style Dictionary build to keep them aligned. Engineering didn't wait for the system to be "done"; they integrated tokens the week we published them.

Login first. Logic before logos.

Components were prioritised by the journeys every product needed first. Login and onboarding were universal — every new and legacy product needed Button, Text Field, Checkbox, Radio, and Dropdown — so we built that cluster end-to-end before touching anything else.

Each component was anchored to international benchmarks. Before a single pixel moved, the team documented behaviour against Material, Polaris, and Atlassian — anatomy, states, slot rules, accessibility, and motion. Only then did variants ship.

After the three phase closures, upkeep stayed continuous: whenever adoption teams filed gaps, we extended variables, patched component states, or published library revisions—with change notes in our shared Slack contract so downstream files never woke up to surprises.

Two design teams. One source of truth.

ILDS bridged ICICI Lombard's central PMT design org and Digital—different reporting stacks and Figma rituals. The core programme stayed intentionally small: myself plus two embedded designers, each representing one tribe, aligning through a shared component intake, build checklist, and documentation bar before anything entered the canonical library.

We stood up a single Slack channel as the contract: every release, every breaking change, every bug ticket lived there. Adoption teams got SLAs. Bugs were triaged within 24 hours. The channel became the single signal for whether the system was healthy.

From two products to twenty-three projects.

Within a year, ILDS moved from fragile artefacts to measurable infrastructure. The summary tiles below track variable throughput (inserts / week, style volume, etc.). The adoption bars use ILDS Master → Analytics → Components, duration Year, and intentionally show only ranked top-team insertions from production Figma reporting.