My Design System Dreams

21 November 2021

These are some of my dreams for a great design system.

The best design system would be the one that was already made, cost nothing additional, and fit my needs perfectly. But in the case of a company making a custom design system that meets their specific needs, here are some value targets that I think would be worth pointing toward. Of course, some are quite aspirational, even pie. in. the. sky.

  1. Have a real design standard. Flows from design group. Designers committed to it. Designs are made so-as to follow it.

  2. A design language. A ubiquitous language. Well defined. Consistently used. Increases efficiency and effectiveness of conversations between design and development.

  3. Product designers and developers are made more co-equal partners — in DS design and dev and in daily frontend work. Largely enabled by the transparency of a shared standard. Help each other push toward that standard.

  4. It's authoritative. Singular. Found in one accessible location. Up to date. True, and reliable.

  5. It's prepared for evolution. Fits the needs of a changing business and product. Never becomes the ball and chain that simply slows us down. Or the design police. Or the thing that always says "no" to change.

  6. It's delightful. Hopefully fun. Something we can be proud to work on and show to our users.

  7. Uses 3rd-party assistance. Doesn't suffer from "not made here" syndrome. Gains efficiency, but keeps user-facing company personality.

  8. Open source. Work showcase. Frontend recruiting tool

  9. WCAG 2.1 AA compatible

  10. Server-renderable

  11. Used as native modules. Outside of app bundles. CDN-served. Cached. Shared network resource

  12. Easy upgrades. Avoids breaking changes. Backwards compatibility. Slick versioning scheme.

  13. Long term vision. Practical first steps. Always eats down technical debt. Never overwhelmed.

  14. Clearly defines what is out of scope. Doesn't become the dumping ground for anything potentially reusable or actually reused. Clear product definition. Other places for other things.

  15. Framework agnostic. Or universally compatible. Web native.

  16. No duplication in design assets and code implementation. One begets the other. Always in sync