<southleft>
AI-powered design systems. Built by the people building the tools.
We audit, build, and evolve design systems for teams at Caterpillar, Novartis, UPS, and NASDAQ — and we build the open-source AI tooling the design systems community actually uses. We don’t just talk about this stuff. We build it.
<generative>
The system, playing itself.
Every composition below is generated from the same tokens this page runs on — the palette, the grid, the brackets. Click any cell to re-roll it. Find one you like? It has a permanent address.
Trusted since 2012 by teams who care what’s under the hood.
<why-now>
AI doesn’t replace your design system. It exposes it.
Systems built with structured context — clean tokens, typed components, real documentation — become force multipliers for AI-assisted teams. Systems without it become bottlenecks. We published a framework for getting from one to the other.
Read: Context-Based Design Systems →<services>
What we do
AI + design systems is our main practice — audits, workshops, embedded engineering, and ongoing research at the edge of MCP, agents, and generative UI.
AI + Design Systems
Your design system is about to become the most important API your company owns. AI-readiness audits, MCP integrations, discovery and research at the edge of what agents and generative UI make possible.
- AI-readiness audits
- MCP integrations
- Discovery & research
Design System Engineering
Build, scale, and govern systems from Figma to production. Component libraries, token architecture, Storybook and docs — everything typed, tokenized, tested.
- Component libraries
- Token architecture
- Storybook & docs
Workshops & Training
We teach what we practice — hands-on team workshops, conference talks, and the AI & Design Systems course with Brad Frost. No slideware theory; live demos from real client work.
- Team workshops
- Speaking engagements
- AI & DS course with Brad Frost
Team Augmentation
Senior design-system and front-end engineers embedded with your team. They slot into your codebase and ship — direct access to the people writing the code, no hand-offs to a B-team.
- Embedded engineers
- Front-end architecture
- Training & mentorship
<try-the-system>
Change one token. Everything agrees.
This is the entire argument for design systems: decisions live in tokens, not scattered across components. Flip a few — the product follows, instantly.
<q3-report>
Design decisions, compounding.
Every element on this card reads the same five tokens you're editing. No component was touched.
// --sl-accent: #f05735 · radius: 4px · space: 1 · mode: ink · wdth: 125
Or skip the sliders. Describe a vibe.
Claude art-directs all 44 tokens at once — personality, palette, typography, texture, elevation, motion — and our contrast solver keeps every combination WCAG AA. The entire site re-derives from a sentence. That's what a real token architecture buys you.
// your theme sticks until you reset it. yes, even the fonts.
Now hand those same tokens to an AI agent over MCP and it ships UI that matches your product on the first pass — no rogue styles, no drift. Making that work inside real organizations is the work we do. Already fluent? Take the aptitude test — we grade on conviction.
<open-source>
We publish our homework
If we recommend a workflow, it’s because we’ve already built and shipped it. Open-source, in production, used by real teams.
$ npx figma-console-mcp
AI-powered design system management inside Figma
$ npx story-ui init
AI layout generation for Storybook via MCP
$ figma → plugins → FigmaLint
Design linting for developer-ready Figma files
$ npx design-systems-mcp
A design systems knowledge base your AI can query
$ open /tools/altitude
Our in-house design system — and our AI testbed
// and the course
AI & Design Systems — a new online course from Brad Frost and Southleft. Grounded, practical, shaped by real work with large-scale teams.
get early access →<work>
Proof, not promises
Design systems and front ends shipped for enterprises, startups, and everything between.
PetSmart
Sparky, PetSmart's design system — accessible components, documentation, and governance that unified a fragmented web presence.
Design SystemsFront-End DevelopmentReact
Stanford d.school
A Fractal-powered component library and front-end architecture that brought the d.school's unconventional visual identity to the web on a tight deadline.
Component LibraryCraft CMSFront-End Development
IBM
Migrating IBM Investor Relations to Drupal while integrating the Carbon design system — trust-critical financial communications, modernized.
Design SystemsDrupal ThemingFront-End Development
They’re excellent! They make work seem easy — always on time and they communicate clearly along the way.
The team was very timely, often delivering even before the deadline and always being responsive.
Southleft was instrumental in helping us improve our user experience while simultaneously increasing traffic and revenue.
They go through a high level of detail to understand our needs and follow up to ensure their solutions meet them.
<insights>
Latest thinking
Design systems, AI, and the craft of building for the web — published as we learn it.
Business
Better, together: Southleft x Baseline, and a new CEO
Southleft is partnering with Baseline, and Nicole Hampton is stepping in as CEO. Two announcements, one story: the next chapter of this company.
Design Systems
Context-Based Design Systems, Revisited
A year into the AI-driven design systems era, the framework holds up. Here’s what’s changed, what’s clearer, and why context still beats autonomy.
Design Systems
Designers, You’re Not at the Kids’ Table Anymore
There’s never been a better time for designers to ship real code, and you don’t need to “learn to code” to do it.
<cta>
Is your design system AI-ready?
A 30-minute discovery call is the fastest way to find out where your leverage is.