Apr 10, 2025
Design tokens are the connective tissue of design systems—bridging design and code to ensure consistency, scalability, and accessibility. If you’re looking to learn how the pros do it, studying established design systems is a great place to start.
Here are 5 design systems that offer outstanding documentation and practical examples of design tokens in action:
1. Nord by Nordhealth

🔗 nordhealth.design/tokens
Nord’s token documentation is clean, minimal, and well-structured—an excellent reference for scalable token usage.
2. GitLab Pajamas

🔗 design.gitlab.com/product-foundations/design-tokens-reading
GitLab’s Pajamas system offers a practical and approachable take on design tokens for both designers and developers.
3. U.S. Web Design System (USWDS)

🔗 designsystem.digital.gov/design-tokens
With strong accessibility and flexibility principles, the USWDS token approach is transparent, practical, and well-documented.
4. Adobe Spectrum

🔗 spectrum.adobe.com/page/design-tokens
Spectrum illustrates how tokens can power adaptive, cross-platform design systems with deep theming capabilities.
5. Atlassian Design System

🔗 atlassian.design/tokens/design-tokens
Atlassian provides a structured token system that supports a wide product ecosystem with consistent UI foundations.
✨ Happy Learning! ✌️
Screenshot taken from: Nord Design System
📚 Want to learn Design Tokens from industry-leading experts?
Join our practical 3-day Design Systems Conference:
👉 Learn to master Design Tokens