What Makes a Design System Worth Using

Design systems are meant to keep a brand consistent, encourage reusable components, and get teams aligned. In practice, many fall short. They end up as documentation graveyards — no one referencing them, no one contributing back to them. The systems that do succeed tend to combine thoughtfully documented patterns, practical accessibility work, and examples that translate design decisions into real implementation guidance.

There’s no single formula that works for every team, of course. But looking at some of the most thoughtfully built systems reveals common threads: clear naming conventions, genuine accessibility support, and heavy investment in visual examples of what to do (and what not to do). Here’s a look at several notable design systems and what they do well.

Real-World Systems and What They Get Right

Nordhealth — Accessibility First, Smart Naming

Nordhealth builds software for healthcare management, so the Nord design system puts accessibility at its core. The system provides a full CSS framework and substantial theme and customization options, but it really distinguishes itself in its guidance on naming conventions and localization. A dedicated system for naming makes it much easier for teams to stay consistent with tokens and components. However, its Figma Toolkit is not yet open source.

Gusto’s Workbench — Real Usage Contexts

Gusto supports over 200,000 businesses with payroll and HR automation, relying on Workbench, a system that covers design philosophy, tokens, assets, React components, and docs. What sets Workbench apart is its emphasis on comprehensive live examples. Every component shows visual context, implementation notes, and the right way to use it in different scenarios. There’s also a VS Code extension filled with UI component snippets, which lowers the friction for engineers.

Olympic Brand — Managing Global Identity

The IOC’s design system handles the visuals of the Olympic Games — a brand recognized worldwide. Working with a Canadian agency, they built a system focused on brand identity that tackles genuinely tricky parts of that job: multi-lingual design, typography setups, and illustration/graphic element usage. Its strength lies in showing and explaining the reasoning along the way, including examples of what reads as consistent versus disjointed.

Brand Estonia — Design Attributes That Tell a Story

Estonia’s country-branding system reflects its positioning — pure nature, digital state, independent spirit. Beyond standard templates and content guidance, the system depends on custom design attributes (wordmarks, boulders, etc.) paired with authentic imagery. They map big ideas to tangible visual expressions that hold up on the web as well as in print and social channels.

Audi — Do’s and Don’ts in Practice

Audi’s system is meant for a broad collection of touchpoints that span websites to in-vehicle service apps. Covering modules, animations, and an app-vehicle connection, its most useful feature is visual do’s and don’ts — concrete, side-by-side instances of how components work in the UI. It also ships with a Figma UI Kit and a Sketch library so designers are never left to drift from spec to handoff.

Deutsche Bahn — Content Governance Goes Open Source

The DB Digital Product Platform is another notable example, particularly because it serves developers, designers, and copywriters in one package. The railway company’s system covers accessibility, code samples, contextual examples, and UX writing standards — content principles that rarely get enough attention in system work. There are also complementary guides for both accessibility and logo usage. Notably, everything is open source on GitHub and distributed through NPM.

Data Visualization Patterns Worth Borrowing

Few systems do data visualization well — it’s a subset of UI that has unique rules about clarity, hierarchy, and scale. These four notably do:

  • Shopify’s Polaris defines five core traits of successful data visuals plus concrete do’s and don’ts for them.
  • Culture Amp wraps data visualization guidance in further-reading resources for each chart or graph type it defines.
  • If Design System focuses specifically on color logic in data visualization — a key area for accessibility.
  • Carbon Design System takes a very engineering-first approach with demos and code snippets ready for React, Angular, Vue, and vanilla JS.

Ready-Made Resources for Figma Work

Design Systems For Figma, put together by Josh Cusick, is a sizeable repository of free Figma kits. Systems from Atlassian, Uber, Shopify, and Slack live here in a browsable, searchable format. Another openly available kit from GOV.UK is worth studying for teams working with intricate user journeys and web forms.

Naming, Accessibility, and Brand

Naming is one of the least glamorous but most critical parts of a design system. The goal is terminology that any designer, developer, or product manager instantly understands. Several guides offer practical direction here. Ardena Gonzalez Flahavin explains why naming deserves deliberate attention, while Shayna Hodkin covers best practices across categories like colors, text styles, and components. Jules Mahe goes further, with tips for structuring and naming your design files to balance clarity, searchability, and consistency — three resources worth bookmarking for futureproofing a system.

Accessibility should be baked into a design system from day one, not added as an afterthought. Doing so eliminates repeated work retrofitting color palettes or focus states. Henny Swan’s article on accessible design systems details what such a system must include and how to keep it current. The AdHoc team’s Accessibility Beyond Compliance Playbook reframes accessibility from basic compliance to inclusive, human-centered design. IBM’s open-source Carbon Design System, another valuable resource, bases its guidance on WCAG AA, Section 508, and European standards. It explains how users with vision, hearing, cognitive, and physical impairments interact with interfaces, and what designers should do to make patterns operable. IBM’s Accessibility Requirements checklist extends this with detailed, component-level compliance tips.

Finding the sweet spot between brand identity and scalable visual systems is a common struggle. The team behind Design Systems For Figma devised a recipe for exactly that, which Elena Searcy summarizes. She starts with icons — the smallest visual elements — and explains how her team selects and creates them to align with brand and deliver user value. She then details their scalable approach to illustrations, covering anatomy, style, and color. It’s a strong example of how clear rules make visuals more meaningful.

Motion, Enterprise, and Metrics

Motion can reduce cognitive load, guide users, provide feedback, and improve perceived responsiveness. Salesforce’s design team built an end-to-end motion language — the Salesforce Kinetics System — to make full use of these benefits. Pavithra Ramamurthy, Senior Product Designer at Salesforce, explains the goal: evolving and scaling kinetic patterns across products using components pre-baked with motion. A companion case study dives into how teams actually use these artifacts, demonstrating the practical workflow from system to product.

Enterprise design systems demand serious effort but pay off when large teams juggle multiple platforms and interfaces. Adam Fard offers a comprehensive introduction, framing the enterprise system as a collection of reusable elements, processes, and best practices — a box of Lego where components are the blocks and guidelines are the instructions for seamless collaboration. It’s a useful primer if your organization spans many sites or apps.

Metrics might seem premature when you're launching a system, but they are essential for its longevity. Jules Mahe breaks down why measurement matters, how to define KPIs, and how to collect both quantitative data and qualitative input from surveys and interviews. His conclusion: measuring is challenging and time-consuming, but it drives growth and sustainability.

Need to win over a skeptical boss? The Design System ROI Calculator from Knapsack projects cost savings. It calculates total employee savings, time saved, and efficiency gains per component or UI element, letting you compare scenarios based on team size and product scope.

Case Studies and Practical Workbooks

Henry Escoto of FOX Corporation takes a contrarian view: the design system artifact is less important than the practice around it. His case study on FOX Tech Design’s Delta and Arches systems digs into how a system truly helps product design, what it takes to build one inside an organization, how to insert it into existing workflows, and what the payoff looks like. Jan Klever from Quero Educação offers a different angle, sharing how a dedicated Design System Ops role is crucial for long-term maintenance.

Many design systems fail not because they’re poorly built but because teams never adopt them. SuperFriendly’s workbook is a practical fix: a 130-page PDF with FigJam prompts and Figma templates, guiding cross-disciplinary teams of design, engineering, and product from zero to a durable system in 90 days. At $349 it’s a real investment, but the authors argue it saves 6–9 months of figuring out what to do.

Wrapping Up

If you've encountered a design system, resource, or case study that made a difference in your own work, the original piece welcomes sharing in the comments below.