Establishing an AI-Based Design System

Overview

Revamping our product: a new visual theme and the design system behind it

After the leadership announced a differentiated market strategy, I led the redesign of our product’s visual identity and implemented a design system with Claude Code that enabled the team to move quickly while maintaining consistency and polish.

Impact:

• New product brand delivered and implemented

• AI-based design system that improved team’s speed and quality

PROBLEM

A generic product that wasn’t standing out in a competitive market

Our product UI had felt outdated and clunky—components lacked definition, and engineers built independently after a basic theme rollout.

With support from leadership, our team operated like a standalone startup, experimental and bold in our approach, to better enable the company’s strategy.

Theme

Creating a terminal-inspired theme for modern security workflows

Our product empowers security teams with real-time visibility into agentic activity and remediation—which we felt was best served by a futuristic, terminal, HUD-like personality.

Key elements include a minimal color palette to avoid visual noise for better monitoring, monospace font matching user mental models of logs/terminals, and data-dense layouts that optimize security workflows, prioritizing information hierarchy over whitespace to highlight insights.

Design system Architecture

An AI-powered design system for rapid theme adoption and scalability

With the new theme defined, the real challenge was implementation: how to roll it out across the engineers, while maintaining consistency as we ship weekly.

I partnered with engineering define token architecture for type, colors, and spacing, and built core page layouts and components. I planned a phased roll-out that met the company’s needs for a quick turnaround while ensuring we build a strong foundation for ongoing consistency.

accessiblity

Accessibility as a foundatiional theme requiremnt

From initial design, accessibility was embedded into the design system. I ensured WCAG 2.1 AA compliance while designing the theme and components by embedding a11y checks into the process.

governance

Embedding governance into engineer workflows

I designed agentic workflows for developers that generated compliant pages along with pre-commit hooks for better enforcement.

This process seamlessly integrated with the developer workflow to enable a smooth transition to the new theme and improved team velocity while maintaining our visual identity and polish.

results & learning

Embrace new processes and workflows for bigger impact

The new theme garnered positive feedback and attention, but the strength lies in the system to maintain it.

AI governance proved essential for maintaining quality at velocity—engineers are adopting it naturally because it lives in their workflow. Leaning into AI and working in code was key to the success of this initiative.