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.