Shield Design System

Overview

The Shield Design System (SDS) was at a breaking point. What started as a set of shared files had become a bottleneck for the engineering team. Every update to a UI element required tribal knowledge and manual checks. Redesigns were slow, accessibility was an afterthought, and design debt was mounting. My role was to transform SDS from a collection of assets into a governed system.

What I Walked Into

• Scattered Figma files with inconsistent local styles.
• Hardcoded hex values everywhere in the codebase.
• No single source of truth for design decisions.
• Dev-to-design handoffs were riddled with "slack-based documentation."

The Audit

I spent the first few weeks auditing every single component and pattern. I cataloged:

• 15+ variations of the color "Blue."
• Overlapping spacing values.
• Buttons built with completely different architectures.
• Zero systematic approach to interactive states (hover, active, focus).

Building the Token Architecture

I designed a three-layer token system:

• Core (Primitives): The raw values (e.g., Blue-500, Space-16).
• Semantic (Alias): What the value does (e.g., Background-Primary, Border-Critical).
• Component (Override): Specific overrides for complex components (e.g., Button-Primary-Background).

I pushed for a taxonomy that even non-designers could understand. Instead of "Button-Blue," we used "Action-Primary-Background." This shifted the conversation from "what color is it?" to "what is its purpose?"

Hovers weren't just "lighter" — they were defined by a systematic adjustment (e.g., +10% emphasis). Focus states were consolidated into a single, high-contrast pattern across the entire platform.

Adoption and Evidence

• Resolved contrast gaps and achieved WCAG compliance.
• Global updates now occur through tokens, reducing regression risk.
• Shared tokens shortened design-to-dev handoffs and improved release cadence.
• Redesigned experiences consistently scored high on usability and customer satisfaction. Task success increased across complex workflows. User errors decreased. Onboarding improved as screens followed consistent patterns.

AI-Assisted Validation

I ran an experiment using AI to stress-test the token system's structure and naming logic. I prompted models to interpret and generate tokens from the established patterns. The results confirmed the taxonomy was predictable and machine-readable. AI could infer intent and hierarchy without documentation.

Business Impact

• Revenue protection: Stale accessibility documentation and inconsistent UI create disqualification risk during federal procurement reviews.
• Engineering time recovered: Every detach meant engineering building custom UI instead of using the system.
• Faster delivery: Surfaces that previously required weeks of custom component work now ship using system components.