SolisReach
← Journal
Brand & UI/UX5 min read

Building a design system that survives contact with a real development team

Written by the SolisReach team

We've personally inherited more than one design system that looked genuinely impressive as a polished Figma file and fell apart almost immediately the moment an actual developer tried to implement it faithfully: components built with inconsistent internal spacing logic, color values that didn't cleanly map to any real underlying token system, distinct states that existed clearly in the design tool but were never actually specified in enough detail for real production code.

Design tokens genuinely come first, individual components come second

A design system deliberately built around named, reusable tokens, a defined spacing scale, clear color roles, a proper type scale, rather than a collection of one-off pixel values scattered across different files, translates directly and cleanly into code variables a developer can actually use immediately. Building out individual components before properly establishing the underlying token system first usually means having to rebuild those same components again later, once the tokens finally get defined correctly and consistently.

Every component needs every state fully specified, not just the happy path

A button's default resting state is genuinely easy to design and specify. Its hover, focus, disabled, and loading states are what actually consume real implementation time during development, and they're consistently the states most often left completely unspecified in a typical design handoff document. We now require every relevant state to be fully documented before any component officially counts as "done" within the design system, rather than discovering the gap mid-build when a developer hits it unexpectedly.

The system needs to genuinely live in code, not just inside Figma

A design system that only ever exists as a design tool file inevitably drifts away from the real, actually implemented version almost immediately, as developers make small, necessary adjustments during the real build process that never get reflected back. We now push for a genuinely living, code-based component library, something like Storybook or a similar tool, that becomes the actual, authoritative source of truth once real implementation begins, with the original design file treated properly as the origin point, not as the ongoing reference of record.

Who actually owns the design system once a project wraps up

We assign explicit ownership of the design system to a specific named person on the client's side before handoff, not just to "the team" generally, because a system with no clear individual owner tends to drift out of sync within a few months as small ad hoc changes accumulate without anyone tracking them centrally.

That named owner doesn't need to be a designer. They need to be someone with the authority and the habit of asking "does this fit our existing system" before a new pattern gets added, which is often more of an organizational habit than a design skill.

How we handle the inevitable exception request that doesn't fit the system

Every design system eventually meets a genuine, legitimate exception, a specific marketing campaign or product feature that has a real, defensible reason for needing something the existing component library simply doesn't cover. We don't treat every exception request as an automatic violation to reject on principle, since a system rigid enough to allow zero exceptions eventually gets quietly worked around anyway, usually in a way that's harder to track than a formally approved and documented one.

Instead we run a lightweight approval process: a genuine business reason gets a documented, deliberate exception rather than a silent one, and if the same kind of exception gets requested more than a couple of times, that's usually a signal the system itself has a real gap worth formally addressing, not a rule that needs stricter enforcement against future requests.

Every design system eventually meets a genuine, legitimate exception, a specific marketing campaign or product feature that has a real, defensible reason for needing something the existing component library simply doesn't cover.

Versioning the design system so breaking changes don't quietly break production

A design system component updated in place, with no versioning at all, can silently break every single instance of that component currently live across a client's product the moment the update ships, with no warning to any of the teams actually depending on the old behavior. We now version design system releases explicitly, the same way a software library would be versioned, with clear release notes describing exactly what changed and, critically, what might break as a result of adopting the new version.

This has meaningfully reduced the number of "why did this suddenly look different" surprises that used to show up regularly on client teams with multiple product squads all pulling from the same shared component library independently, each on their own release schedule.

Onboarding a new designer or developer onto an existing system

A design system is only as useful as how quickly a brand-new team member can actually learn and correctly apply it, and a system documented only in scattered Slack threads and tribal knowledge fails this test almost immediately once the original team members who built it move on to other things. We build a genuinely dedicated onboarding document for every design system we hand off, covering not just what each token and component is, but the actual reasoning behind key decisions, so a new team member understands the why, not just the what.

Clients who've invested in this onboarding documentation consistently report new hires reaching real, independent productivity with the design system considerably faster than teams that rely purely on informal knowledge transfer from whoever happens to still be around from the original build.

How accessibility gets built into the system rather than checked at the end

Retrofitting accessibility onto an already-built design system after the fact is consistently more expensive and more incomplete than building it in from the start, since color contrast ratios, focus states, and proper semantic markup all need to be genuine, foundational decisions baked into each component's original specification, not a separate audit pass tacked on right before launch. We now include specific accessibility requirements directly in every component's documentation, contrast ratios, keyboard navigation behavior, screen reader labeling, as a required part of what makes a component officially complete.

This has meaningfully reduced the number of accessibility issues we find during final QA on projects using a properly built design system, compared to older projects where accessibility was treated as a separate late-stage review rather than a built-in property of the components themselves from day one.

Start a project

Want this applied to your site?

We run a Core Web Vitals and SEO audit before quoting any performance marketing engagement, and we're happy to share what we'd find on yours.