Alto Design System

Maturing a design system ecosystem, including components, patterns, and AI tooling

SageSure

Company

Tooling

Figma, Storybook, zeroheight, Claude

Role

Lead visual, UX + content designer, project + design manager, DS mentor

Team

1-2 designers (including myself) 4-5 engineers

Statistics

Based on 26 months of implementation

Usage has tripled, even with a smaller team

From 49k per designer to 73k, year-over-year

SUS score of 82 (A)

100% participation + 75% positive sentiment

233% increase in contributions

From both engineers and designers

Context

2022 – 2023: A System is Born. Before I arrived, a small team laid the groundwork — a Figma library, Storybook repository, and zeroheight.

2024: Growing the System. I joined with the mission of rapidly maturing the system: refactoring low-usage components, establishing qualitative and quantitative metrics, defining team processes, and building community. I also saw a rebrand implementation through to completion — and gave the system its own identity: Alto.

2025: Fix the Foundations. Team Alto turned its attention inward. We examined everything from color tokens to basic cards, rebuilding from the ground up to prepare for the demands of AI-assisted design and development.

2026: Automation & Intelligence. Team Alto is paving the road for company-wide adoption of emerging tools — including a new content plugin in Figma and an AI Playground in Storybook, giving designers and developers room to build consistently and experiment freely.

AI Tooling

Alto Foundry (prev. Playground)

A prototyping tool that is both AI and design system first

The Challenge

Off-the-shelf AI tools like Lovable and Cursor lower the bar for prototyping — but the output is disconnected from the brand, the codebase, the content guidelines and the design system. By mid-2025, our office hours were overrun with requests to make these incredibly verbose and diverse prototypes “look like SageSure.”

The Fix

I recommended we build an internal tool with a specific audience: folks who want to prototype as close to production code as possible. Built on top of our coded component library, this AI-driven sandbox is a space where anyone within the company can create proof-of-concepts using real components. No translation layer; no missing guardrails.

My Role

I lead the UX and UI design of the tool, as well as the foundational clean-up that made it possible: token refactor, template creation, and compound component patterns. I’m also running the AI rules initiative, ensuring the tool has the context it needs, when it needs it, and not before.

Deep dive into this case study...

Sage: Content Assistant

A Figma plugin that brings content guidelines into the design workflow

The Challenge

Content guidelines existed, living across numerous platforms and boasting numerous authors over the years. Unsurprisingly, they were not widely known or consistently applied. It was typical for designers to rely on memory, make ad hoc calls, and move on. With a content designer not in the budget, drift was widespread: inconsistent tone, terminology, and microcopy that quietly accumulates into debt.

The Fix

After learning about similar plugins from the design system community, I collaborated with my engineering counterpart to spin up a POC. I combed through the various peices of content guidelines, combining and consolidating them into a coherent guide that that I then taught rules engine to apply consistently. Over time, the output has grown sharper and more reliable.

My Role

I lead the UX and UI design of the tool. I also consolidated the content guidelines, then taught the AI rules engine to apply them consistently. Lastly, I work with users to understand how the tool can be improved.

AI Presence

How AI expresses itself across SageSure's products

The Challenge

Without a shared framework, AI was arriving across SageSure's 5 products and 20+ apps inconsistently — purple sparkles here, random chatbots there, altered components, and mounting debt. Every team was making independent visual and interaction decisions, and time that could have gone toward meaningful AI experimentation was being lost chasing inconsistencies.

The Fix

Several months were spent auditing existing implementations, gathering use cases (current and upcoming), and collaborating directly with the design team. Experimentations covered how to denote AI content, communicate uncertainty, handle beta states, support chatbot experiences, and manage disclaimers by audience type.

The Outcome

Alto’s AI documentation houses a shared language for how AI expresses itself across all 5 products and 20+ apps. The system gives FTE designers and design contractors a clear reference — reducing debt and freeing teams to focus on meaningful AI innovation.

AI Component Family

Contextual Search

Search in plain language instead of filtering manually
AI Text Area

Built for composing prompts and continuing conversations with AI
AI Actions Bar

Actions for interacting with AI output, ex: share feedback, copy, reload
AI Label

Signals when AI has generated or influenced something, ex: a summary or assessment
AI Popover

Explains what's happening with the AI technology in plain language.
Badge, Chip & Avatar

The components all impacted by AI, but don’t require a unique component