📝 Articles
Linting Your Design Tokens, what and why.
I write about the importance of linting design tokens to maintain consistency and prevent errors within design systems. I highlight common issues, such as broken references and naming inconsistencies, that can arise when documentation is not kept up to date. By implementing a structured linting process, teams can ensure that their tokens remain reliable and effective. I outline critical, standard, and comprehensive linting rules, emphasising that design tokens, like code, deserve rigorous oversight to protect against failures and maintain user confidence.
Specific tokens at component level
Francesco explores when to use component-specific tokens in design systems, emphasising the importance of balancing simplicity and complexity. The three-tier token architecture guides decisions on whether to create additional layers. Component tokens are warranted when a unique value is needed, when variants use the same semantic value differently, or when supporting multiple themes. Clear naming conventions and thoughtful use of component tokens can enhance system clarity and maintainability.
Who Owns Your Design System?
Osmond discusses the various governance models for design systems: decentralised, centralised, and external. Each model has its advantages and disadvantages, impacting how effectively a design system is maintained and adopted. The piece emphasises that successful design systems require clear ownership, aligned incentives, and active sponsorship from leadership. Ultimately, the right governance model should reflect the organisation's needs, allowing the system to evolve and adapt over time.
Why your design system documentation goes stale (and how to fix it)
Murphy discusses why design system documentation often becomes stale and outlines strategies for maintaining its relevance. They emphasise the importance of integrating documentation updates into the development workflow, treating documentation as infrastructure rather than a one-time deliverable. Key recommendations include establishing task-based navigation, automating technical details, and addressing pain points first to ensure that documentation remains useful and accessible for teams.
👀 Interesting Reads
AI Doesn't Fix Accessible Systems. It Depends on Them.
Anna discusses how AI cannot resolve accessibility issues but instead inherits and amplifies existing structural problems within design systems. As organizations increasingly focus on AI, foundational accessibility work often gets neglected, leading to a regression in standards. Anna emphasises that accessible infrastructure is essential for both users and AI tools, advocating for systemic approaches that embed accessibility into every layer of the design system.
Component Examples as Data
Nathan explores the importance of creating meaningful examples for design system components, emphasising that these examples should illustrate composable potential rather than merely serve as variants. They discuss the challenges of maintaining examples alongside evolving tokens and components, advocating for a structured approach that captures the intent and flexibility of each component. By integrating examples into the design system as data, we can ensure they remain relevant and useful for both designers and machines.
🛠 Tutorials
Framework-agnostic design systems: a practical approach to web components=
Scott discusses building a framework agnostic component library using Elena, emphasising the importance of integrating documentation with the development process. They outline the steps for creating a button component, including setting up props for different variants and ensuring accessibility compliance. They advocate for documenting components as they are built, highlighting the need for a seamless workflow that combines component creation and documentation to foster a robust design system.
🧰 Tools / Resources
New Penpot demo template: Math functions in design tokens
Laura has created a new template to demonstrate math functions in design tokens, available for download from the Penpot Hub. This template features 10 demos, including functions like round(), ceil(), floor(), abs(), min(), max(), sqrt(), pow(), exp(), and log(). Each demo showcases a different token set and theme, illustrating practical use cases for these functions. For a complete list of available math functions, refer to the user guide, and Laura welcomes any insights on unique applications of these functions!
Sponsorship Message
The State of AI in Design Systems Report
zeroheight surveyed 100+ practitioners and found that 82% of design system teams use AI. Half say it's causing problems. Find out what's working, what's not, and what to do next. Read the report.