Ignite Design System

I was the only Senior Design Technologist on Ignite, which meant three jobs at once: designer, front-end engineer, and de-facto product owner.

The inherited design system had stagnated. Teams operated in silos, the component library was underused, and the foundations needed a full rebuild.

Almost every part of the design system needed either an overhaul or a brand-new foundation. Beyond the system itself, the teams using it needed a baseline education on what design systems are and why they exist.

The bones of a design system were already in place, but I needed to understand the goals, the team culture, and the existing processes before I could prioritize anything. I ran a six-track discovery to map the current state.

1. 1

   Survey

   Open-ended Google Form sent to design and engineering. Asked about wins, pain points, and top priorities.

2. 2

   Interviews

   Qualitative deep-dives with senior designers and engineers to pressure-test the vision for the system.

3. 3

   Audit

   Inventory of the Ignite app and CSS. Catalogued patterns, candidate tokens, and atomic component coverage.

4. 4

   Culture

   Mapped buy-in across designers, engineers, PMs, and leadership. Found both the gaps and the champions.

5. 5

   Roadmaps

   Pulled PM roadmaps and pending design work so system releases could ride alongside shipping priorities.

6. 6

   Allies

   Built relationships across product, design, and engineering. The system needed champions outside the system team.

The UI inventory and interviews fed a new process built around open communication. Stakeholders from every team got pulled in, and a design technologist was always in the room when system decisions were happening.

We framed the design system as a tool that supported product work, not one that overrode it. Product design and engineering came into every conversation where it mattered, so ownership felt shared instead of imposed.

Prioritization started with easy wins. Tokens and atomic components were the most obviously missing pieces, and also the fastest to get into designers' and engineers' hands.

Tokens and atomic components are how a design system stays consistent without becoming brittle. The inherited system had the bare minimum of both.

I catalogued the gaps, wrote documentation for what already existed, and broke down the most over-engineered foundational components into reusable pieces. Patterns engineering had been implementing as one-off styles got promoted into real components and looped back to the engineering team.

The updated color system added shades (darkened with black) and tints (lightened with white) for each primary and secondary hue. The palette still reads like the old one visually, but the new range gives you enough pairings to actually clear WCAG 2.1 AA contrast. Semantic aliases sit on top of the raw colors so designers know which one to grab instead of guessing.

Read more about how I built the color system.

I rebuilt the Figma UI kit from scratch, using the old Sketch library and the actual code components as reference. The new library has three layers: design tokens as Figma styles, foundational components, and the complex components in use across Ignite.

The component library update wasn't just new components. It also brought in the new tokens, the foundational components built on those tokens, and the tooling to actually publish everything. I added Lerna so the monorepo could ship versioned packages, and upgraded Storybook to v6 to get in-browser controls for component testing. The Storybook a11y addon runs basic accessibility checks on every component and surfaces a report next to the docs.

Design systems are never done. A handful of initiatives stayed on the roadmap after my time on the team: