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