<design-system-development>
Design system development
Southleft specializes in design systems engineering: structured tokens, component libraries, and documentation ecosystems that align design and engineering, reduce redundancy, and speed up delivery. Whether you’re starting from scratch, auditing a system that’s drifted, or scaling one across brands and platforms, we build systems your team — and your AI tooling — can actually use.
<who-its-for>
Three situations we see most
Design system engagements rarely start from zero context. They start from one of these.
01
Building or rebuilding
Product organizations starting a design system from scratch — or replacing one that never earned adoption.
02
Design and code have drifted
Teams whose Figma library and code components no longer agree, and who need parity restored before anything else can improve.
03
One system, many brands
Multi-brand organizations that need a single system — tokens, theming, governance — to serve many products.
<what-you-get>
Deliverables, not decks
Every engagement produces working artifacts — libraries, tokens, docs, and the governance to keep them honest.
- Component library development
- Storybook-based, built on Atomic Design methodology. Everything typed, tokenized, tested.
- Design token architecture
- Clear, well-scoped tokens mapped to real system behavior — not a color dump with aspirational names.
- Design system audits
- Parity checks across the three pillars: design artifacts, component library, and end products.
- Documentation ecosystems
- ZeroHeight and Storybook, wired together so docs stay true to the code they describe.
- Multi-brand & theming architecture
- Theming strategy and native Web Components where framework-agnosticism matters.
- Governance & contribution models
- Guidance on how the system grows after we leave — intake, review, versioning, adoption.
<three-shapes>
Scoped to where your system is
[build]
System builds
Typically 2–6 months in agile sprints, with weekly updates and direct access to the developers doing the work.
[audit]
System audits
Typically 3–4 weeks: a structured parity check across design, code, and product, ending in a prioritized findings report.
[scale]
Scale & theming
Multi-brand and theming engagements scoped per brand — one architecture, extended deliberately.
Our own system, Altitude, seeds client builds — it’s the internal accelerator and AI testbed we introduced in 2024, and it means engagements start from proven architecture rather than a blank repo.
<proof>
Systems in production
PetSmart’s Sparky system (with Big Medium), ALPS for the Seventh-day Adventist Church’s global presence, and Carbon integrated into IBM Investor Relations (with Lullabot).
PetSmart
Sparky, PetSmart's design system — accessible components, documentation, and governance that unified a fragmented web presence.
Design SystemsFront-End DevelopmentReact
Seventh-day Adventist Church
ALPS: a global design system and WordPress theme balancing brand consistency with customization for thousands of institutions.
Design SystemsFront-End DevelopmentWordPress
IBM
Migrating IBM Investor Relations to Drupal while integrating the Carbon design system — trust-critical financial communications, modernized.
Design SystemsDrupal ThemingFront-End Development
<related-insights>
How we think about systems
Tokens, theming, and multi-brand architecture — written from the build, not the sidelines.
Design Systems
Building Multi-Brand Design Systems: The Developer’s Perspective
Discover how developers can create scalable, multi-brand design systems that seamlessly bridge design and code for consistent, adaptable, and efficient front-end workflows.
Design Systems
Token Naming Conventions: The Key to a Scalable Design System
Discover the power of structured token naming conventions in building a scalable, consistent, and collaborative design system across all tiers.
Design Systems
The Value of Design Tokens in Modern Web Development
Design tokens are the secret to building consistent, maintainable websites – discover their power and how to implement them in your workflow.
<cta>
Let’s talk about your design system.
Building, auditing, or scaling — a 30-minute call with the engineers who’ll do the work is the fastest way to scope it.