Shared with KFintech’s written OK. Fund-house logos and all data are placeholders. Happy to walk through the real files on a call.
Problem
I was the reference
Before this system, I was the design system. Developers asked me about everything before building it: padding, font sizes, colours, dark mode. Nothing live existed to learn from.
It showed across products, mine included. One primary button had at least seven heights and three hex values for one blue. Developers restyled MUI, their React component kit, by eye, so builds drifted further.
The goal was one set of rules for design and code, in both modes, for the products KFintech builds next. It also had to fit Indian finance data, like ₹12,40,000 (1.24 million rupees, grouped the Indian way).
One primary button, three products
IR portal#2058A6
KYC registry#2057A6
Dashboards#2563EB
The library: one token, three sizes
Crops at true size from three products: the main action in seven heights. The library has three sizes.
How I worked
My rules, the agent’s hands
I owned the architecture, the rules and every visual call, and reviewed every page in both modes. AI agents did the volume: variants, token binding, docs from my specs, and contrast maths.
- Aug 2026Foundations. Compared my two token systems; kept the simple one.
- Aug–Oct 2026Components. 94 components and 8 templates, in batches.
- 8–10 Oct 2026v1.0. Changelog dated in the Figma file.
- Oct 2026React. All 94 components on MUI.
- 13–20 Oct 2026Parity check. Figma Button against React, both modes.
What failed
The agent invented four tokens
The agent was fast and confidently wrong. When it bound colours, it once used four token names that did not exist, each plausible at a glance. Another AI check marked five chart tokens as verified that didn’t exist either.
So I wrote a rulebook: small batches, append and never rebuild, a count report after every prompt, exact token names pasted in. No AI report counts until I’ve opened the file.
- 01
Exact names
Token names pasted from the file, never guessed.
- 02
Small batch
20 to 30 variants. Append, never rebuild.
- 03
Count report
Built versus expected, after every prompt.
- 04
Check the file
A script reads what exists, not what the agent says.
- 05
My review
Every page by eye in Light and Dark; every prototype link clicked.
The loop every build prompt went through. Drawn for this case study from my written rules.
Decision 01
Modes are separate axes
Light or dark, desktop to mobile, standard or reduced motion, sidebar open or collapsed are four independent choices. A Figma variable collection switches along only one.
So each axis got its own collection, beside one for raw values. The sidebar mode reaches content inside a component’s slots (open areas), so one switch collapses every item and saves 6 variants.
Independent mode axes
- 26ResponsiveWidths, spacing, display typeDesktopTabletMobile
- 7MotionDurations and easingStandardReduced
- 3NavigationSidebar stateExpandedCollapsed
Because each axis is its own collection, one frame can be Dark, Mobile and Reduced motion at once.
Decision 02
Every rule has a number
I had every contrast ratio computed in both modes instead of judging by eye. WCAG, the accessibility standard, asks 4.5:1 for text.
Semi-transparent colours never carry text: their contrast shifts with what sits underneath. Green, yellow and teal fills take dark labels: green measures 2.91:1 with white and 6.17:1 with near-black.
The same maths found ten defects the eye missed, like input borders at 1.19:1.
Computed from the token values in the library, both modes. Pass marks: 4.5:1 for text, 3:1 for edges.
Decision 03
Fewer variants, more capability
I cut variants that added count without capability. Page header has none; properties carry it from desktop to mobile. Eleven vertical tab variants with no use case went. Button keeps 216, each a real mix of type, tone, size and state.
Into code
Same name in Figma and CSS
Developers asked for ready components, so the system went into React. I had never opened a code editor; it became the most fun part. Four developers set the stack and reviewed the components.
A script turns my Figma export into CSS variables with the same names, so both sides say var(--color-text-primary). I approved how tokens feed the MUI theme. An AI coding agent wrote the code; I checked every component against Figma.
Code caught something Figma missed. On inverted buttons in dark mode, the focus ring vanished. A script compared Button’s 216 variants in both modes against Storybook, the developers’ live component catalogue. The first run matched 423 of 432; the nine were that ring. After React took Figma’s dark ring, all 432 match.
Dark mode
Lift surfaces, drop tints
No black shadow shows on a near-black page. So in dark mode, surfaces get lighter as they rise, and floating menus get their own border at 3.81:1.
My dashboards used tinted metric cards, because my manager likes colour. In dark mode those tints sat up to 2.2:1 off the page and glowed. I kept the library’s cards neutral; colour goes only to the change and the warning.
Deep dive: nine more calls from the decision log
- Selection is never colour alone. A selected tint can sit 1.04:1 from its neighbours, too close to see. So a selected item in any set also turns semibold.
- Intent colours, fixed. Info was yellow and warning was rust, the reverse of convention. I moved info to teal and warning to yellow. Highlight stayed violet rather than rust, because rust sits only 26° from the new yellow warning and their palest tints blurred together in tables.
- Closing my own exception. After the first fix, field borders measured 2.51:1, under the 3:1 WCAG asks of control edges. I first documented it as a deliberate exception, then added one grey step, grey/450, and closed it at 3.35:1.
- Brand over taste. IBM Plex Sans came out ahead in a side-by-side type comparison in my design review. I kept Roboto, because it is KFintech’s brand typeface.
- A sign-in page that doesn’t move. My manager asked for a rotating carousel of fund-house (mutual fund company) logos on the sign-in page. Moving content needs a pause control and pulls attention from the one-time password (OTP). It would also show a fund house its competitors on its own sign-in. I proposed a still preview built from real components, and my manager agreed.
- Charts that work without colour. Seven series colours can’t all clear 3:1 against each other: even the two most different reach only 1.49:1 in lightness. So from the second series on, bars and slices also carry a pattern. Chart bodies stay templates, because their geometry is data.
- Prototypes that behave like the product. A Figma component can only change itself, so clicking a second tab left the first one selected. I built a recipe on variable modes that keeps one item selected at a time, and wired 313 items across 28 template frames.
- Two token systems, one kept. I had started a simple system (268 variables) and a three-tier one (615 tokens). The three-tier one had tokens pointing at values that didn’t exist and a radius scale where medium was smaller than small. I kept the simple one, ported what was good and archived the rest.
- Icons chosen on licence. Untitled UI’s free tier forbids publishing a company library built on its assets, and Remix Icon moved to a custom licence in January 2026. Tabler is MIT-licensed, so the library carries 6,166 Tabler icons, each coloured by a token.
Outcome
Ready, not adopted yet
Version 1.0 isn’t in a product yet, so there’s no adoption number.
What I’d measure after rollout: questions developers bring me per screen, Figma-to-build time, and drift found in testing.
“Amandeep worked out why our designs never fully made it into the final product. He didn’t argue. He proposed a fix and gave it everything he had. What we got was a working solution, not code handed over for us to rewrite and polish.”
Names left out for privacy. Happy to share references.
Deep dive: what ships beyond the components
| Area | In the library |
|---|---|
| Accessibility | Every text, icon and border pair computed in both modes and printed in the docs; a 2px focus ring outside a 2px gap; small buttons at the 24px minimum target |
| Dark mode | A designed elevation stack, its own floating border, state layers on the resting fill |
| Variants | Slots, properties and modes; variants only where structure changes |
| Domain | ₹ in Indian grouping, tabular figures, folio (an investor’s account with a fund house) and NAV (a fund’s price per unit) copy, fund-house co-branding, OTP sign-in |
| Charts | Chart templates, patterns from the second series, a sequential ramp where every step clears 3:1 |
| Documentation | 104 anatomy, layout and usage frames across 46 component pages, figures recomputed when tokens change |
| Design to code | Identical token names in Figma and CSS, generated from an export, never retyped |
| Motion | Duration and easing tokens, with a Reduced mode that makes transitions instant |
Retrospective
Check everything two ways
Next time I’d write the AI rulebook before the first prompt and bring developers in on day one.
A script once passed an avatar ring that never drew; one screenshot caught it. Since then, every computed check gets a rendered one. Next: release both libraries to the team and build from their feedback.