PT Praisindo Teknologi builds an investment management platform for retail and institutional users — a product where trust, clarity, and precision are table stakes. When I joined, the design system had grown organically and painfully.
Every screen had its own hardcoded color values. Components were copy-pasted and modified slightly — creating a maze of near-duplicates. Developers couldn't trust the Figma files. Every handoff became a long clarification conversation about which version was "real."
The core constraint: The product couldn't stop shipping. I had to rebuild the entire design system in parallel with ongoing feature development — without creating regressions, blocking the team, or missing sprint deliverables.
The old system had no token layer — every value was hardcoded directly in components. The new architecture follows a deliberate two-layer system: Primitive → Semantic.
Core principle: Components consume Semantic tokens only — never Primitives directly. A theme change or brand refresh requires updating exactly one alias, not hunting through every component in the file.
I audited every legacy component against the new token system, identified inconsistencies, and rebuilt where needed. The process: reference → audit → rebuild → document → release.
The original had zero variant consistency. The rebuilt component creates a single, extensible foundation with all interaction states fully implemented.
6 interaction states — each with label, helper text, and optional icon variants. Standardized error states across the entire product.
🔒 Specific UI screenshots are masked due to NDA. All structural decisions and token references are fully documented in the internal Figma system.
Adding full light/dark mode support required zero component changes. Every component already consumed semantic tokens — switching themes meant updating token values at one layer only.
The new structure follows a numbered, layered convention any team member can navigate within seconds of opening the file.
| Area | Result | Meaning |
|---|---|---|
| Total token coverage | 472 tokens | Fully named, organized, and documented |
| Component states | Complete | Hover, focus, active, disabled, error, loading |
| Theme support | Light + Dark | Zero component changes needed |
| Designer velocity | ~3× faster | Finding and applying components is now structured |