Design Systems2025–2026 · 6 months

Stride Design System

A multi-brand tokenized design architecture for scale.

Role

Lead Design Engineer

Client / Team

Stride Tech Labs

Timeline

6 months

Links

Live Code

Stride Design System typography tokens and component library preview

Contrast Compliance

100%

Zero AA violations across 4 multi-brand themes

Engineering Adoption

14 Teams

Standardized across 8 web products and 3 internal tools

Handoff Velocity

-65%

Reduction in design-to-code iteration cycles

The Challenge

Problem & Constraints

Stride operated multiple enterprise products across banking and logistics, resulting in fractured user experiences, redundant CSS bundles totaling over 400KB per page, and persistent contrast regressions that failed federal accessibility audits.

The Solution

Architectural Approach

Constructed a unified token pipeline where token changes originate in Figma and sync directly via GitHub Actions into CSS variables and TypeScript constants. Enforced zero-pill discipline and strict semantic color roles.

Engineering Stack

System Architecture

Technologies & Tools

Next.jsTypeScriptTailwind CSS v4Radix UIVitestPlaywright

Key Architectural Decisions

Used CSS custom properties instead of runtime CSS-in-JS to guarantee zero runtime overhead and instant theme switching.
Employed fluid typography math with CSS clamp() rather than per-breakpoint font classes.
Separated layout structural containers from presentational components to prevent unexpected horizontal overflow.

The Token Architecture

Bridging mathematical precision and visual restraint

Tokens are organized into three distinct tiers: Global Primitives (raw scales), Semantic Roles (bg, surface, line, ink, accent), and Component Variables. Developers only reference semantic tokens, preventing hardcoded hex strings.

Every color pair was run through automated contrast checks to verify a minimum 4.5:1 ratio for body copy and 3:1 for large text and interactive focus rings across all active themes.

Key Takeaways

✓Zero runtime overhead via pure CSS custom properties.
✓Mathematical typography scale using fluid clamp() functions.

Accessible Primitives

Keyboard navigation and screen reader parity

Every interactive component underwent manual keyboard testing and automated axe-core scanning. Dialogs enforce focus traps with immediate Escape closure, and state transitions respect prefers-reduced-motion unconditionally.

Interactive touch targets were enforced to meet or exceed 44×44px with 8px buffer margins.

Key Takeaways

✓Tested with VoiceOver and NVDA across Chrome, Firefox, and Safari.
✓Full focus retention on dialog mount and unmount.

Outcomes

Deliverables & Assets

Semantic Token Taxonomy

Three-tier token structure: primitive, semantic, and component-scoped variables.

Accessible Primitive Library

32 unstyled and accessible UI primitives with keyboard navigation traps and live regions.

Automated Contrast Validator

CI linter calculating WCAG 2.2 contrast ratios for any pull request modifying token values.

Next Project

Pulse Analytics Platform

High-throughput real-time telemetry with sub-second insights.

Coffee cup with brewing steam and rotating progress indicator

Loading content...

Fetching assets and initializing layout.

Back to all projects

Design Systems2025–2026 · 6 months

Stride Design System

A multi-brand tokenized design architecture for scale.

Role

Lead Design Engineer

Client / Team

Stride Tech Labs

Timeline

6 months

Links

Live Code

Contrast Compliance

100%

Zero AA violations across 4 multi-brand themes

Engineering Adoption

14 Teams

Standardized across 8 web products and 3 internal tools

Handoff Velocity

-65%

Reduction in design-to-code iteration cycles

The Challenge

Problem & Constraints

The Solution

Architectural Approach

Engineering Stack

System Architecture

Technologies & Tools

Next.jsTypeScriptTailwind CSS v4Radix UIVitestPlaywright

Key Architectural Decisions

Used CSS custom properties instead of runtime CSS-in-JS to guarantee zero runtime overhead and instant theme switching.
Employed fluid typography math with CSS clamp() rather than per-breakpoint font classes.
Separated layout structural containers from presentational components to prevent unexpected horizontal overflow.

The Token Architecture

Bridging mathematical precision and visual restraint

Every color pair was run through automated contrast checks to verify a minimum 4.5:1 ratio for body copy and 3:1 for large text and interactive focus rings across all active themes.

Key Takeaways

✓Zero runtime overhead via pure CSS custom properties.
✓Mathematical typography scale using fluid clamp() functions.

Accessible Primitives

Keyboard navigation and screen reader parity

Interactive touch targets were enforced to meet or exceed 44×44px with 8px buffer margins.

Key Takeaways

✓Tested with VoiceOver and NVDA across Chrome, Firefox, and Safari.
✓Full focus retention on dialog mount and unmount.

Outcomes

Deliverables & Assets

Semantic Token Taxonomy

Three-tier token structure: primitive, semantic, and component-scoped variables.

Accessible Primitive Library

32 unstyled and accessible UI primitives with keyboard navigation traps and live regions.

Automated Contrast Validator

CI linter calculating WCAG 2.2 contrast ratios for any pull request modifying token values.

Next Project

Pulse Analytics Platform

High-throughput real-time telemetry with sub-second insights.