What is #DesignSystems?
#DesignSystems are comprehensive collections of reusable components, guidelines, and standards that enable teams to build consistent digital products at scale.
Origins
While IBM and NASA had design standards in the 1960s-1970s, the modern tech industry’s design systems movement began around 2014-2016 with:
- Google’s Material Design (2014)
- Apple’s Human Interface Guidelines (updated 2014)
- Salesforce Lightning Design System (2015)
- Airbnb’s Design Language System (2016)
The hashtag gained traction as companies shared their systems publicly and design teams advocated for systematic approaches.
Components of Design Systems
Foundation:
- Design tokens: Colors, typography, spacing values
- Grid systems: Layout structure and breakpoints
- Accessibility guidelines: WCAG standards, contrast ratios
- Motion principles: Animation timing, easing curves
UI Components:
- Buttons, inputs, dropdowns, modals
- Navigation patterns (tabs, menus, breadcrumbs)
- Data display (tables, charts, cards)
- Feedback elements (alerts, toasts, loading states)
Documentation:
- Component usage guidelines
- Do’s and don’ts
- Code snippets and examples
- Brand voice and copywriting standards
Notable Design Systems
Public Systems:
- Material Design (Google): Most documented system ever
- Carbon (IBM): Enterprise-focused, open source
- Polaris (Shopify): E-commerce patterns
- Atlassian Design System: Collaboration tools focus
- Primer (GitHub): Developer-friendly components
- Fluent (Microsoft): Windows and Office UI
Why Companies Build Them:
- Consistency: Same UI across products
- Efficiency: Reusable components save dev time
- Scalability: Onboard new designers/developers faster
- Accessibility: Bake in standards from the start
- Brand coherence: Unified visual language
Cultural Impact
Industry Shift:
- Design went from “make it pretty” to “build the system”
- Senior roles emerged: “Design Systems Designer,” “Design Technologist”
- Cross-functional teams (designers, engineers, writers)
Tools Evolved:
- Figma: Auto-layout and components made design systems accessible
- Storybook: Component library documentation
- Zeroheight: Design system documentation platform
- Supernova.io: Design-to-code automation
Open Source Movement:
- Companies open-sourced their systems (IBM Carbon, Shopify Polaris)
- Community-contributed components and plugins
- Inspired startups to build better systems faster
Challenges
Maintenance:
- Systems require dedicated teams
- Components become outdated without governance
- Balancing flexibility vs. consistency
Adoption:
- Designers resist constraints (“kills creativity”)
- Engineers ignore system, build custom solutions
- Product teams want exceptions for “unique” needs
Documentation:
- Systems die without good documentation
- Keeping docs in sync with codebase
- Onboarding new team members
Legacy
Design systems transformed how digital products are built. They proved design could scale systematically, not just through hiring more designers. The best systems balance structure with flexibility, enabling creativity within guardrails.
Related: #MaterialDesign, #ComponentLibrary, #UIDesign, #Figma
Sources:
- Design Systems Repo: https://designsystemsrepo.com/
- Brad Frost Atomic Design: https://atomicdesign.bradfrost.com/
- Material Design: https://material.io/design