Keirin Design System

I revamped Keirin’s core component system to make it accessible, cohesive, scalable, and easier for designers and engineers to work with.

Lead Product Designer, 2023

Context

Keirin is Stuart’s cross-platform design system. As the product suite expanded, its core components had drifted apart. Patterns that were meant to be consistent had split into multiple interpretations, often with unclear rationale.

Teams repeatedly encountered issues such as:

• conflicting spacing, stroke weights, and typography
• variants that weren’t needed (e.g. several checkbox sizes)
• inconsistent and low-contrast interaction states
• missing variants for placeholders and key behaviours
• lack of guidance around alignment, grouping, and spacing

As a result, screens built by different teams looked and behaved differently, and engineers often had to make design decisions on the fly. The system needed a more solid foundation before it could scale further.

Approach

I redefined the underlying system so that every component could scale consistently. I aligned designers and engineers around shared foundations: spacing, colour, radius, contrast, state behaviour, and naming conventions.

System audit and foundations

I partnered with designers and engineers to map visual, structural, and interaction inconsistencies. This allowed us to define unified rules for spacing, stroke, typography, colour usage, accessibility, and radius across the component library.

Redesign

Instead of patching individual components, I redesigned tokens and patterns and applied them consistently across buttons, inputs, checkboxes, radios, validation, and focus states. This created a predictable, scalable system.

Cross-team alignment

I facilitated multiple design critiques with the broader team to drive consensus on colour, radius, sizes, text hierarchy, and interaction patterns. This ensured that decisions scaled across all product teams.

Workflow testing

I ran usability tests with internal designers to understand how they assembled interfaces using the components. This surfaced systemic issues that were easy to miss in static review.

Key improvements

• High-contrast, accessible colour usage aligned with WCAG AA
• Rebuilt focus states with improved visibility and consistency
• Unified spacing, radius, and stroke rules across all core components
• Reduced grey palette and clearer semantic colour hierarchy
• Improved validation patterns, icon alignment, and disabled behaviour
• Simplified component sizes and removed unnecessary variants
• Cleaner, clearer component structure, in both Figma and code

These changes made components easier to understand, easier to maintain, and far harder to misuse.

Outcomes

The renewed component system meaningfully improved design and implementation consistency across the organisation.

• Consistent behaviour and visuals across all core interactive components
• Improved accessibility through contrast, typography, and state design
• Faster design workflows with fewer broken components in Figma
• Reduced ambiguity for engineers during implementation
• A shared visual and interaction language across product teams
• A stronger foundation for future expansion

Keirin became a system teams could rely on again: visually, structurally and operationally.