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.

Thinking of a design system helps to improve its vision! Also it helps to sell it and shows its benefit.

How to make design tokens interoperable? With a format that describes their serialization and which metadata should be attached to it.

A good example is Amazon’s Basics range. Amazon buys white label products from multiple manufacturers and sells them under the Basics brand.

White label design services follow a similar concept. A creative agency builds tools, apps, and websites (templates) that companies can purchase and rebrand.

Challengs of White Label Design are multiple:

• white label products must be re-brandable: the design should fit everyone, and everyone should be able to customize it.
• flexible information architecture: the white label product provides many page layouts and navigational possibilities while maintaining the flexibility to adapt to the brand’s requirements.
• accessibility: UX designers must also consider accessibility, so products comply with WCAG (Web Content Accessibility Guidelines) standards.

In order to define a white label system, we can extend atomic design (atoms, molecules, organisms, templates, pages) with a new elements category: it contains colors, typefaces, grids, spacing, brand assets, etc... They are all the design tokens :)

Ready to use design tokens

This system makes it easy to build digital services that meet the needs of Californians.

From the https://design.wonderflow.ai/, here are the Stories of each component.

The design system of Goldman Sachs.