Can Design Tokens help handle different system dimensions?

[gfellerph]

A primary button has a font size of 16px and a padding of 32px and a dark gray background. That's the default use case. Many factors (or dimensions) can influence this style. Maybe there's a dark mode or a theme with blue primary buttons. Maybe 32px padding are too much on mobile. Maybe the button is too small on large desktops.

These dimensions can influence how a component looks like:

• Theming (for different sub-brands, units or institutions)
• Dark mode (light or dark)
• High contrast mode
• Responsiveness (from small to large screens)
• Environment (customer facing, power users)
• Writing mode (left to right, right to left, top down)

In order to support these dimensions, a systemic approach is needed to handle the exponential variations of patterns. How can Design Tokens help us define values for all dimensions?

Example: We are using font-curves to handle responsive headings. Each heading level maps to a curve. One curve describes font-sizes across all viewports.

An alternative approach could use clamping values for a minimum and a maximum font-size and use a flexible scale in between.