Vidhunnan Murugan

A design system your productaims for.

I'm Vids, a design systems specialist. I work with design and engineering teams to build systems that product teams reach for by default - and that hold up past the launch party (the easy bit).

Book a callSee selected work
Scroll
Previously consulted with
HyperVergeLokalFi MoneyDelhiveryDreamMoneyJani.aiSilver Fern DigitalSarvam AIHyperVergeLokalFi MoneyDelhiveryDreamMoneyJani.aiSilver Fern DigitalSarvam AI
Manifesto

A design system that lives only in Figma is a style guide. I build the bridge between design and code - converters, Code Connect, prompt-aware components - and the governance behind it: what stays shared, what forks, who owns it six months later. Because the next reader of your system isn't just an engineer. It's a model.

What I help with

Three things teams
usually come for.

Most engagements start in one of these zones. Some stay there, some pull in all three.

01

DS architecture & tokens

Token systems, multi-brand and multi-product theming, mode strategy, foundation vs semantic vs component-level tokens, Figma variables vs Token Studio trade-offs.

02

AI tooling & design systems

LLM-ready design systems, Claude + Code Connect for Figma-to-code pipelines, DS as instruction sets, prompt-aware components, internal DS chatbots and doc tooling.

03

Adoption & governance

Coverage measurement, design-to-development handoff, branching workflows, snowflake component management, office hours and showcase rhythms, rollout sequencing.

Selected work

Recentengagements.

Each card flips for the approach. Most engagements are framed as a problem and a sequence of decisions — not a sales pitch.

Expert callApr 2026

Sarvam AI

Five products launched under one DS, each serving distinct audiences with no user crossover. The system created uniformity where differentiation was needed.

Multi-brand DSProduct differentiationSnowflake componentsAI startup
Hover to read approach
Approach

Reframed from 'how do we differentiate visually' to 'brand architecture inside a design system'. Walked through multi-brand patterns (Grab, Instagram/Threads), semantic-layer differentiation strategy, and snowflake component governance for product-specific UI.

Topics covered
  • ·Multi-brand DS patterns
  • ·Semantic layer differentiation
  • ·Snowflake component governance
  • ·Brand-positioning as upstream dependency
Team consultationMar 2026

DreamMoney

The design team wanted to figure out where Claude actually helps the DSM workflow — not 'should we use AI' but 'given AI is here, where does it earn its keep?'

ClaudeCode ConnectAI tooling
Hover to read approach
Approach

Walked through Code Connect for Figma-to-code, internal DS chatbots, and concrete prompts the team could use. Filtered AI use cases against the maintenance overhead each would create.

Topics covered
  • ·Code Connect setup
  • ·DS chatbots
  • ·Prompting strategy for components
Expert callMar 2026

Jani.ai

Two designers managing three products with shared DNA, building a platform that's itself LLM-driven. They wanted a DS approach legible to LLMs.

LLM-ready DSCode-design mappingCoverage
Hover to read approach
Approach

Discussed LLM-ready DS principles: legible naming, predictable structure, machine-parseable docs. Mapped a coverage approach scaled to a 2-person team.

Topics covered
  • ·LLM-ready conventions
  • ·Coverage at small team scale
  • ·Code-design parity
Team consultationJan 2026

Delhivery

Enterprise logistics org standing up a more formal DS function. Multiple product lines, uneven coverage. What does the right DS posture look like?

DS strategyEnterpriseWorkshop planning
Hover to read approach
Approach

Strategy-level discussion on DS scope, sequencing, and team structure for an enterprise platform. Talked through coverage sequencing, governance models, and how to plan workshops for cross-team alignment.

Topics covered
  • ·DS posture for enterprise
  • ·Coverage sequencing
  • ·Cross-team workshops
Expert callDec 2025

Fi Money

Tens of thousands of color values, no semantic layer governing how they mapped to UI surfaces. New designers couldn't tell which color was for what.

TokensColor systemsReference architecture
Hover to read approach
Approach

Started with 'how do we reduce this?' and moved into broader architecture. Mapped reduction strategy to semantic naming, walked through a reference color system at scale, and discussed migration patterns.

Topics covered
  • ·Color reduction
  • ·Semantic token layers
  • ·Migration sequencing
Team consultationOct 2025

Lokal

Two consumer apps sharing near-identical components, but each with hard-coded values. The team came asking for a 'central design system'. The framing was the first thing we revisited.

Token StudioMulti-modeReact Native
Hover to read approach
Approach

Reframed the ask from 'central DS' to 'shared token layer + product-specific surfaces'. Worked through Token Studio multi-mode setup, semantic vs foundation token split, and a rollout sequence that didn't require freezing product work.

Topics covered
  • ·Token architecture
  • ·Multi-mode strategy
  • ·Component sharing across apps
In-person team sessionJul 2025

HyperVerge

Internal team experimenting with AI for screen generation, running into the gap between 'AI generates UI' and 'AI generates UI that fits our system'.

AI toolingPrompt-aware componentsUI generation
Hover to read approach
Approach

Connected DS strategy with AI prompting. Discussed how to shape components so they're prompt-friendly, and how to close the gap between generated screens and system fidelity.

Topics covered
  • ·Prompt-aware components
  • ·AI-to-system fidelity
  • ·Internal generation tooling
Hands-on team sessionMay 2025

Silver Fern Digital

Agency team wanting a repeatable DS approach across client projects. Less theory, more 'show us how this works'.

FoundationsToken systemsDS introduction
Hover to read approach
Approach

Hands-on session through foundation tokens, component patterns, and a repeatable kickoff kit they could adapt per engagement.

Topics covered
  • ·Foundation token kit
  • ·Component pattern library
  • ·Agency kickoff process
How to work with me

Four streams,
one starting point.

Every engagement starts with a discovery call. We figure out the actual problem first - then I propose the right stream and what it costs. No fixed price list up front, because the fit matters more than the format.

How it works
01

Discovery call

A 30-min call with one or two of you. We dig into the actual problem you're trying to solve - not the format, not the fee, just the problem.

02

Proposal

Based on that call, I propose a path: which stream fits, what the sessions cover, and the costing involved. Written, within 2 days.

03

Sessions

We run the work in whichever stream we agreed on. Each session ends with a written follow-up - recommendations and references.

04

Wrap-up

A final summary with next steps. If it makes sense to keep going, we scope the next stretch from there.

The four streams

Expert call

A focused 1:1 on a specific decision you're stuck on.

30–60 min, 1:1

What you get
  • Pre-call brief or doc you want feedback on
  • Live call, no slides
  • 3–5 line written summary with the recommendation
Best for
  • Sounding board on a specific decision
  • Quick scoping questions
  • Second opinion on architecture
Most common

Team consultation

A diagnostic-led working session with your design or DS team.

1–3 hrs, up to 7 people

What you get
  • 30-min scoping intake
  • Live session, diagnostic-led
  • Written follow-up with recommendations + references
Best for
  • DS strategy alignment across the team
  • Architecture review of an existing system
  • AI tooling exploration for your DS
  • Multi-product or multi-brand planning

In-person workshop

A day on-site, mixing teaching with hands-on working sessions.

Half or full day, up to 15 people

What you get
  • Pre-workshop scoping call
  • Facilitation + deck + reference materials
  • Written summary with next steps
Best for
  • New DS team kickoffs
  • Cross-functional alignment (design + eng + product)
  • Hands-on token architecture sessions
  • AI-assisted DS workflow training

Monthly engagement

Ongoing advisory for a DS initiative or transition.

2–4 sessions per month

What you get
  • Bi-weekly / weekly working sessions
  • Async Slack & email support
  • Document reviews + direct involvement in DS decisions
Best for
  • DS rebuild or migration projects
  • New DS team building capability
  • Multi-quarter accessibility / adoption initiatives
  • Fractional DS leadership for orgs without a DS lead
About

Built in thetrenches.

By day, I lead design systems, accessibility, and AI-assisted design patterns at Keka HR - spanning core system, adoption, and AI tooling.

The advisory work is what I do independently - drawing on years of building, scaling, and occasionally rebuilding design systems. The deepest of those was a token system supporting multi-brand theming, mode strategy across 15+ products, and an in-house Token Studio to Flutter converter pipeline.

Being an active practitioner means I know which problems are theoretical and which ones actually block teams at 2pm on a Thursday.

Background
  • Keka HRCurrent — Lead Product Designer, DS 3.0
  • FlipkartB2B enterprise design + data viz systems
  • BigbasketToken-driven multi-brand DS across 15+ products
  • RocketiumVisual content generation tools
Three principles
  • 01

    Diagnose before prescribing

    Teams often ask for a specific solution when the actual problem is upstream. The first 30 minutes are usually about reframing the problem.

  • 02

    Smallest defensible change first

    Token systems, governance models, adoption sequences should start with one or two components, not the full library. Run a POC, prove the workflow, then scale.

  • 03

    Design and engineering, together

    A DS that lives only in Figma is just a style guide. The interesting work is in the bridge — converters, naming, code-design parity, dev mode workflows.

Community

Teaching keeps me sharp. Mentoring keeps me humble. Community is why I build systems - to empower others.

Decode Design Systems

A design systems community I run in Bangalore. We hold workshops, meetups, and hands-on sessions covering token architecture, theming models, governance, and workflows - all grounded in real-world product challenges.

Mentorship

Mentored 200+ designers and career switchers across ADPList, 10K Designer, and Designers Academy. Sessions cover breaking into design systems roles, portfolio storytelling for systems work, and shifting from "designing screens" to enabling design at scale. Someone gave me time when I was figuring this out - these sessions are how I keep that going.

Speaking

Friends of Figma (Bangalore, Chennai, Hyderabad), ADPList Conference, NID Bangalore. Talks on systems thinking, design tooling, and collaborative workflows.

Get in touch

Ready to start?

Pick a time for a 25-min discovery call - we'll figure out the actual problem and whether we're a fit. If your situation needs a longer intro, send a note instead. I reply within 24 hours.

Fraunces & InterBangalore2026
PortfolioLinkedInInstagramDecode Design Systems