SKAkash GherWeb Developer & HTML5 Game Specialist
HomeCase StudiesProjectsBlogWritingStudioStoreLabsAbout
All Case Studies

Creative case study

React Component Design System

14 September 2025
Sky
by sky2 min readDesign SystemReactStorybook

A production-grade, themeable component library built with React, TypeScript, and Storybook — covering 60+ components with full accessibility, dark mode, and design token support.

React 19TypeScriptStorybookRadix UICSS Variables
Case
Blogs
Writings
Studio
Labs
Home
Projects
Store
About

Client

Product Agency

Role

Design System Engineer

Year

2025

Discipline

React Web Application

React Component Design System
Doodle concept visual

Reduced UI development time across 4 product teams by an average of 40%, with zero design inconsistencies across products.

The hero image is loaded from the MDX coverImage field. Replace the demo URL with your own gameplay capture, PixiJS canvas screenshot, or rendered artwork.

60+

Components

4 product teams

Teams using it

~40%

Dev time saved

On this page

  • The Problem
  • Architecture
  • Token System
  • Dark Mode
  • Storybook Documentation
  • Result

Akash Gher

High-performance web experiences

Case StudiesProjectsStudioStoreLogin

© 2026 Akash Gher. All rights reserved.

The Problem

Four product teams were building their own button components, modals, and form inputs in isolation. The results were visually inconsistent, accessibility was an afterthought, and every team was solving the same problems repeatedly.

Architecture

The system is split into three layers:

  1. Tokens — CSS custom properties for color, spacing, radius, shadow, and typography. A single theme.ts file is the single source of truth that feeds both the CSS variables and a Tailwind config preset.
  2. Primitives — Unstyled, fully accessible base components using Radix UI for complex interactive patterns (Dialog, Select, Dropdown, Tooltip, etc.).
  3. Components — Styled, production-ready components built on top of primitives, consuming design tokens.

Token System

Tokens are defined in three tiers:

  • Global tokens: raw values (--color-blue-500: #3b82f6).
  • Semantic tokens: intent-mapped values (--color-primary: var(--color-blue-500)).
  • Component tokens: component-scoped overrides (--button-bg: var(--color-primary)).

This three-tier system means a brand theme change requires updating only the semantic layer — every component updates automatically.

Dark Mode

Dark mode is handled via a data-theme attribute on the root element. The semantic token layer has both light and dark values. There is no JavaScript class toggling — the entire system is CSS-native.

Storybook Documentation

Every component has:

  • An API table auto-generated from TypeScript prop types.
  • Interaction tests using @storybook/test to validate complex states (e.g., form validation, modal focus trapping).
  • Accessibility checks run automatically via the A11y addon on every story render.

Result

All four product teams adopted the system within a quarter. UI bug reports related to inconsistency dropped by 80%. New features that previously took two weeks now take three days.

More Case Studies

You might also like

View all
iGaming Math Config Architecture
9 June 2026

iGaming Math Config Architecture

A technical deep-dive into how production iGaming studios store, version, and serve complex game math configurations across operators, jurisdictions, and variants.

Remote Gaming Server (RGS) Architecture
8 June 2026

Remote Gaming Server (RGS) Architecture

A complete blueprint of an enterprise iGaming backend system: from the Seven-Layer Model and 48ms game transaction loops to GLI compliance and scaling pipelines.

Lish Programming Language
6 June 2026

Lish Programming Language

An educational compiler project translating academic Computer Science theory into a working plain-English general-purpose compiler that compiles directly to zero-overhead x64 assembly.