Mark Learst | Lead Design Engineer (Design Systems, React, Accessibility, DX + AI Tooling)

The Challenge

Hailstorm is the Abusix design system. The original system shipped real UI, but the stack had fallen behind modern React patterns, token workflows, and accessibility expectations. The goal was not a rewrite for its own sake. It was to modernize the foundation without breaking product teams.

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 upgrading the stack to a 2026-ready baseline: React 19, Tailwind v4 tokens, Storybook 10, and consistent automated tests.

The Solution

I rebuilt the Hailstorm foundation as a React 19 component library with token-driven styling, Storybook-first documentation, and accessibility defaults baked into every primitive. This fork is maintained by Mark Learst and focuses on long-term system health.

Token-Driven Foundations

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

Storybook as Source of Truth

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

Accessibility-First Primitives

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

Technical Implementation

Modernized Build + QA

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

Core Workflow

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

pnpm storybook
pnpm test
pnpm run build

Token Location

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

Impact & Outcomes

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

Modern stack with React 19, Tailwind v4 tokens, and Storybook 10
Accessibility defaults aligned to WCAG 2.2 AA patterns and keyboard-first interactions
Testable workflows with Vitest, Testing Library, and browser-level checks
Clear documentation that reflects real component usage and design guidance

The system is positioned for long-term governance and faster iteration without sacrificing design or accessibility quality.

Hailstorm Design System

Impact