Best Design System Examples in 2026: Key Takeaways

ArticleAdham DannawayResource

Designer Adham Dannaway reviews top design systems, sharing practical lessons on colour hierarchies, elevation models, design tokens, and multi-device scaling to help teams improve their own UI systems.

Key points

  1. IBM's Carbon Design System indicates elevation via colour rather than shadows, alternating white and grey in light mode, and provides clear guidelines for broader UI patterns like data filtering.
  2. Atlassian Design System applies four elevation tokens with matching shadow and colour tokens, utilising semi-transparent alpha colours for consistent foreground contrast across varying surfaces.
  3. Adobe's Spectrum scales mobile UI components and typography by 25% (a 1:1.25 ratio) compared to desktop versions to accommodate touch targets, while also documenting interface copywriting.
  4. Other notable systems reviewed include Google's Material Design for theming, Shopify's Polaris for e-commerce patterns, and GitHub's developer-first Primer.

Why it matters

Building an effective design system requires balanced trade-offs. Examining how enterprise platforms structure design tokens, elevation, and cross-platform layouts prevents costly structural mistakes during early system architecture.

Analysis

Dannaway highlights that even mature design systems diverge on foundational technical decisions. IBM's shadowless elevation contrasts sharply with Atlassian's conventional shadow-token approach, while Adobe's separate scaling ratio introduces deliberate mobile-desktop divergence. The breakdown provides concrete reference points for product designers and frontend developers seeking the right balance between token complexity, usability, and maintainability.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • X post:Adham Dannaway

    Adham Dannaway Breaks Down Top Design Systems

    Designer Adham Dannaway reviews established design systems, including IBM Carbon and the Atlassian Design System, examining how they implement elevation tokens, colour palettes, and composite UI patterns.

    489bookmarks18.7kviews

    Web development· Resource

  • Video

    Video:The Design Project

    Comparing AI Design Patterns Across Major Design Systems

    Diane from The Design Project reviews how IBM, AWS, Atlassian, and GitLab incorporate AI patterns into their public design systems, focusing on trigger buttons, generated content, chat interfaces, and documentation.

    AI & LLMs· Discussion

  • X post:Adham Dannaway

    Design Token Naming Guide by Adham Dannaway

    Adham Dannaway has shared a dedicated guide on naming design tokens, aimed at helping teams establish structured token naming conventions and build design token systems.

    305bookmarks12.6kviews

    Web development· Resource

  • Repository:kielchang/dooping-design-book

    Dooping Design Book: Modular Design System and Pattern Guide for Admin Systems

    Dooping Design Book is an open-source design language, token collection, and component reference extracted from real-world internal backend systems. It decouples design tokens, copyable React components, and documented operational patterns to ensure reusable, domain-agnostic UI development.

    33starsTypeScript

    Web development· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.