The webring has a homepage https://design-system.club/

I like the distinction between Components and Patterns.

A direct effect of Trump politics: the inclusion pages were removed from the U.S. Web Design System Documentation.

Removed content related to the January 20, 2025 Executive Order, "Ending Radical And Wasteful Government DEI Programs And Preferencing".

The officiel design system is hosted at https://designsystem.digital.gov/

Randomize design tokens value :)

The writing and designing guidelines for the Australian Government.

Maybe because the design system should be built into HTML?

More HTML elements that matches the need. Every styles or brand-guides can then be applied to it.

There are 4 current design systems for Germany. Why not build one and use it everywhere instead? That's the question of the author and how they envision it for long-term 2029

The Washington Post Design System

1. Consider mixing kebab-casing with camelCasing: --system-color-controlAccent: blue;
2. Using namespaces can help to avoid collision. In the upper example: system is a namespace.
3. Value typing hints to the use cases of the variable. In the upper example: color. It could be fontSize for example
4. Descriptive names can use 2 patterns: icyBlue which is value-based or accent which is usage-based.
5. Dark mode is simpler with usage-based variables

When to use between value- and usage-base?

Variables with value-based names can be useful for restricting the number of values in your interface. Using numbers can be useful, but sometimes overkill.

Usage-based tend to be useful to describe scopes of capability and utility within the project. The utility of a usage-based name comes in how it guides a developer or designer in its use.

There are often 3 levels of abstractions:

• defining the values
• different property for custom controls such as --color-accentColor
• the CSS variable of use in the component such as --button-color

L'officiel de l'État français

Using numbers for the spacing token names improve flexibility.

For example, adding a token between space-100 and space-200 can be space-150. This has an advantage compared to the xs, s, m, ... variant.

A typical pattern describes the problem, the chosen solution, the rationale behind that solution, related patterns that the designer should be aware of, and other relevant details, such as the results of usability testing.– Jared Spool

Die größte Gefahr für Pattern Libraries und Design Systeme ist, nicht mehr aktuell zu sein.

für ein Design Pattern Aktualität viel wichtiger ist, als gründliche Dokumentation

Spart eine Pattern Library keine Zeit oder erzeugt sogar dauerhaft zusätzlichen Aufwand, wird sie automatisch Akzeptanzprobleme bekommen.

Iterationen für Abbildung eines Pattern Library (bei OTTO):

1. 2012: Getreu nach Lehrbuch
2. 2012-2013: Modularer Ansatz
   3, 2013-205: Code Pattern Library = Pattern Library
3. 2014-2016: Basierend auf den Atomic Design Prinzipien von Brad Frost; responsive patterns, komponenten, templates (bottom-up) oder Grid & breakpoints, content refertence Wireframes, Layout (top-down)
4. 2016-heute: ein komplettes tool

A typical pattern describes the problem, the chosen solution, the rationale behind that solution, related patterns that the designer should be aware of, and other relevant details, such as the results of usability testing.– Jared Spool

Another public design system. This one is more complete with micropatterns and token generator.

The design System of Mailchimp is public. Thanks to them.

Another public design system

A tool to handle a design system. From documentation to code generation.