CHICAGO
Case study
The design system SMB.co could actually build on.
SMB.co was scaling their product and building every screen from scratch. I built their first real design system. Token architecture, component library, handoff.
Role
Design Systems Consultant
Services
Design system architecture, component design, token structure
Platform
Figma
Link
B2B SaaS design system
SMB.co was building fast but didn't have a design system to keep up. Their product team was creating components from scratch for each feature, so screens drifted apart and everything took longer to ship.
I designed and built their first complete design system in Figma: a token structure and a core component library. The goal was a foundation they could own and extend without me after the project wrapped.
What I built
01
Token structure
Nearly 300 Figma variables in layered collections: a primitive palette feeding semantic tokens for backgrounds, text, and strokes. Alongside them, a responsive type scale in Archivo (six heading levels in desktop and mobile sizes, four body sizes) and a shadow system. Change a decision once and every component follows.
02
Component library
Core components with full variant coverage, not just the happy path. Buttons in 140 variants across styles, sizes, and states. Badges in 320. Avatars in 156. Plus inputs, selects, checkboxes, toggles, search, tooltips, and page-level pieces like navigation, pricing, testimonials, and profile cards, all built on the variables. Behind it, a 400+ glyph icon library in five styles (stroke, solid, duotone, twotone, bulk), wired into the system so icons swap without breaking layouts.
03
Handoff
A library organized so the team could own it from day one. Clear structure, clear naming, nothing that needs me to explain it. Their CEO called the handoff incredibly easy.
Delivered
Layered color variables: primitive and semantic collections
Responsive type scale and shadow styles
Core components with full variant and state coverage
400+ glyph icon library in five styles
Logo and brand asset components
Organized Figma library, ready to extend
The outcome
Their team took the system over at handoff and has been building on it since.
"Keara built our first real design system and gave us a foundation we could truly build on! It was exactly what we needed at that stage. She was great to work with (very communicative) and made the handoff incredibly easy."
Joe Brown
CEO & Co-Founder, SMB.co
Working on a system that's starting to slip?
Send me an email at hello@keara.design and let's chat about it.
hello@keara.design
Email Copied