../work

Hailstorm Design System

Modernized Abusix's Hailstorm design system to a React 19, Tailwind v4, Storybook 10 stack with WCAG 2.2 AA patterns, token governance, and automated QA.

GitHubDesign System

Modernize the foundation of an existing library

Hailstorm is the Abusix design system. I maintain a fork focused on its component foundation. The original system shipped real UI, but the stack had fallen behind modern React patterns, token workflows, and accessibility expectations. I wanted to upgrade those foundations while preserving the APIs product teams used.

  • Legacy tooling made it hard to evolve components safely
  • Tokens existed but lacked a clear, enforceable workflow
  • Storybook docs did not reflect the actual production APIs
  • Accessibility defaults needed to align with WCAG 2.2 AA
  • QA coverage was fragmented and hard to trust

The modernization had to keep API stability while moving to React 19, Tailwind v4 tokens, Storybook 10, and consistent automated tests.

My role
Design Systems Engineer, Open Source Modernization
Timeline
2025 - Present
Built with
React 19TypeScriptTailwind CSS v4Storybook 10Headless UIVitestTesting LibraryPlaywrightRollup
In this case study

Review tokens, states, and components together

I rebuilt the Hailstorm foundation as a React 19 component library with token-driven styling, Storybook-first documentation, and accessibility defaults in the primitives.

Token definitions

Tailwind v4 tokens now define the visual system, keeping themes consistent and changes predictable.

  • Semantic token naming for color, spacing, and typography
  • Single source of truth for component styling
  • Token pipeline designed for long-term governance

Component examples alongside the API

Storybook 10 + MDX docs are the canonical reference for component usage, variants, and accessibility behavior.

  • MDX docs aligned with actual component APIs
  • Visual QA and interaction states documented in one place
  • Design token guidance lives alongside component examples

Keyboard and focus behavior

Hailstorm uses Headless UI primitives and WCAG 2.2 AA defaults to ensure keyboard, focus, and ARIA patterns are correct out of the box.

  • Keyboard interactions and focus management baked in
  • Semantic HTML first, ARIA only when needed
  • Accessible patterns documented and tested

Test the same components the documentation renders

The system now ships with Rollup builds, Vite for local development, and a modern test stack that covers logic and interactions.

  • React 19 + TypeScript for stable component contracts
  • Rollup for library builds, Vite for local dev speed
  • Vitest + Testing Library + Playwright browser mode for QA
  • Storybook 10 for docs, visual QA, and design review

Docs, tests, and builds

The repo ships with a predictable loop for docs, tests, and builds.

bash
pnpm storybook
pnpm test
pnpm run build

One token source

Tokens live in src/styles/index.css and are referenced in component styles so updates stay centralized.

Maintaining the fork

Hailstorm now runs on a modern, stable foundation while preserving the existing component APIs teams rely on.

Project notes

Modernized

Upgraded legacy stack to React 19, Tailwind v4 tokens, and Storybook 10

WCAG 2.2

Accessibility-first patterns with keyboard and ARIA defaults

QA

Vitest + Testing Library + Playwright browser coverage