ReBank
Token-driven design system: from Figma to production code
ReBank DS is a token-driven design system for a mobile banking product. From raw color values in JSON to documented React components in Storybook. Every visual decision in the product UI traces back to a token. Every token compiles into a CSS variable that lives in the code.
Three-layer model
Tokens are structured in three layers — if the brand color changes, a single primitive is updated. All semantic tokens that reference it are automatically updated across the entire product.
Button Component
All states in one place — default, hover, disabled, filled and ghost. Sizes and colors are controlled by tokens.
Card Component
A bank card as a component: balance, payment system, gradient built from semantic tokens.
Token Pipeline
Tokens live in JSON and are compiled through Style Dictionary into CSS and JS — no manual value transfers.
Storybook Docs
Each component is documented in MDX: props, states and edge cases right in the browser.
Comment Component
Contextual notifications with dynamic content — from cashback to spending warnings.
Tokens are not static — they compile. Style Dictionary reads JSON from Primitives/, Semantic/ and Typography/, and builds CSS variables and a JS object into the build/ folder. A watch script rebuilds on every file change.
$themes.json defines Light and Dark as separate configurations, both referencing the same semantic layer. Switching themes requires no changes to component code — only the active theme changes.
Components are documented in Storybook using MDX stories. The configuration includes @storybook/react-vite and @storybook/addon-docs — not just a sandbox, but a living specification. Each story imports CSS variables from build/variables.css — Storybook renders the same token values as the product.
The result is a complete pipeline from design tokens to product UI: tokens structured in three layers, compiled through Style Dictionary into CSS variables, and connected in Storybook. Built on the system are five screen flows with Light and Dark theme support — Auth, Onboarding, KYC with document verification and face scan, account setup, and the main banking screen. All component states are covered, and the handoff between design and code is automated.
See also
