Kroma Multi-Brand Design Engine
High-Fidelity Component Architecture & Token Ecosystem
Problem Definition
Kroma managed 18 disparate client-facing web portals built across 5 separate teams over 6 years. Product inconsistencies, broken accessibility states, and weeks spent reproducing identical button states severely slowed cross-functional velocity.
Rekasandi engineered 'Kroma Engine': an automated tokenized design system syncing Figma variables directly to code repositories via GitHub Actions, accompanied by 85+ production-grade accessible React components with zero runtime overhead.
Battle-tested with 100% keyboard accessibility and WAI-ARIA compliance.
Engineers ship new feature interfaces twice as fast with pre-built primitives.
High-contrast editorial palettes and accessible focus rings across all portals.
A single version-controlled package powering the entire corporate suite.
Tokens as the Source of Truth
01 / Token Pipeline & CI Automation
We established an automated pipeline where designers update colors, radii, or spacing in Figma, and a headless GitHub Action parses JSON token payloads, runs automated WCAG contrast calculations, and publishes versioned npm packages in under 90 seconds.
02 / Restrained Visual Hierarchy
Every component was stripped of extraneous embellishments. Using subtle borders, precise typography, and purposeful micro-interactions, Kroma gives enterprise applications the feel of bespoke editorial products.
“The design system Rekasandi delivered was a game changer for our 60+ engineering organization. We reduced UI bugs by 80% and finally have a unified, award-winning visual language.”
Production Implementation Stack
React 19 & TypeScript
Polymorphic props, ref forwarding, and strict accessibility contracts.
Radix UI Primitives
Unstyled keyboard-navigable accessible dropdowns, dialogs, and tabs.
Tailwind CSS Token Engine
CSS variables mapped to semantic design tokens.
Zero-runtime design token transformation pipeline and accessible component interfaces validated across WCAG 2.1 AAA standards.
Component hierarchy and mathematical typographic scale
[01]
Token tree architecture and dark-mode CSS variable matrix
[02]
Atomic interactive badge and micro-interaction states
[03]