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.

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