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).

Scroll
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.

Previously consulted with
HyperVergeLokalFi MoneyDelhiveryDreamMoneyJani.aiSilver Fern DigitalHyperVergeLokalFi MoneyDelhiveryDreamMoneyJani.aiSilver Fern Digital
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.

In-person sessionMar 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 formats,
scoped for different problems.

All prices are starter rates. Most engagements begin with a short scoping call so we can pick the right format.

Expert call

₹5K – 10K

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

₹20K – 50K

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

₹50K – 1L

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

₹1L – 2L / mo

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

The day jobinforms the practice.

By day, I lead Design System 3.0 at Keka HR — a four-lane initiative spanning core system, adoption, accessibility (WCAG 2.2 AA), and AI tooling.

This consulting practice is what I do off-work, advising other teams on the patterns and trade-offs I'm working through in real time.

The Bigbasket work is what most informs the consulting — building a token system that supported multi-brand theming, mode strategy across 15+ products, and an in-house Token Studio to Flutter converter pipeline.

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
Community

I run Decode Design Systems, a designer community in Bangalore. 160+ mentees on ADPList. Speaking at AI BuildCon 2026 and VizChitra 2026.

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.

Get in touch

Ready to start?

Send a short note about what you're working on. Most engagements start with a 30-min call to figure out scope and decide if we're a fit. I usually reply within 24 hours.

Built in Bangalore · 2026