Case study 02 · 2025
Design System / Admin Component Cleanup
Role — Product design, system design
Product — Enterprise Admin platform
Scope — Components, templates, tokens
Context
An enterprise Admin panel had grown to roughly 100 pages without a shared foundation. As AI tooling made it clearer that teams need to produce consistent pages quickly regardless of who built them, I identified the Admin panel as a strong candidate for reusable, AI-assisted templates.
The problem
52 untracked shades of gray made the interface feel like it had no rules.
A Claude Code audit surfaced 52 undefined gray values in the codebase. Existing Storybook components applied tokens automatically, but new components often copied raw values from Figma. Because Admin pages were rarely compared side by side, small inconsistencies stayed invisible — while design and engineering absorbed the communication cost.
The decision
Make the cleanup visible — and make it part of the shared system.
A token assignment map alone did not create a visible product change. In response, I paired the cleanup with improvements to component color and contrast. I also migrated Admin-specific components toward the existing dashboard design system, which already met contrast requirements and aligned with a company-wide direction.
I established a defined 10-step gray scale, a global/semantic token architecture, and a process for discussing every new gray with the DS owner. New components could use only the defined scale; the rule was shared with the broader design team.
Execution
I rebuilt buttons with accessible color specifications, clarified frame borders, standardized reusable page and table patterns, and migrated component colors to DS tokens. Figma Slots now give elements dropped into templates a consistent 32px spacing rhythm.
AI as an audit partner
Claude Code made the 52-gray audit practical. Separately, Claude analyzed 30–40 deduplicated Admin screenshots and converged on three recurring page layouts — a result I cross-checked against two years of domain experience. I added two modal templates beyond that scope, based on my own structural analysis.
Outcome
Four fewer serious color-contrast issues, under identical audit conditions.
5 issues
Insufficient color contrast · before
1 issue
Insufficient color contrast · after
Under matched axe DevTools scans, total issues fell from 11 to 6 and serious issues fell from 6 to 2. The remaining contrast issue was identified and scheduled for resolution before release; unchanged missing form-label issues were tracked separately.
What I would do differently
I missed the baseline measurement window for the frame-border change, so that improvement is presented as a visual before/after rather than a quantified result. Since then, I have made baseline scans a standing practice before shipping comparable work.