Toolabs DSM : Learn Modular Scales

Learn

Design Tokens - Modular Scales

"A modular scale, like a musical scale, is a prearranged set of harmonious proportions."

—Robert Bringhurst, The Elements of Typographic Style

Toolabs DSM lets you set up your text, spacing, and animation duration tokens based on modular scales, which generates structured and harmonious effects.

To create modular scales, you need a base value and a ratio. Then, each time you multiply or divide the base value with the power of ratio, you obtain a new value in the scale which is in resonance with the rest of the values in the scale.

You can define the base value and the scale for text, spacing, and duration tokens on the DSM tokens panel. Changing either the base value or the scale ratio will re-calculate the values of the font size, spacing, and duration patterns in this token set.

Define the base value and select the ratio from presets or provide a custom ratio.

Then, for each token, you can set which value from the scale to be used by giving the order in the scale.

Order 0 will be equal to the base value
Orders smaller than 0 will divide the base value, and
Orders bigger than 0 will multiple the base value

If you want a token to have a value with a ratio different than the global scale ratio, then you can use a custom one. You can also fine-tune the scaled value by giving a constant value to be added/subtracted.

For any pattern, you can break the scale and use a custom ratio and fine-tune the result.

➥ Themeable Scales: It is possible to define different base value and scale ratio for each theme, like all other tokens in the DSM.

Here are some good articles on modular scales for further reading :

"A modular scale, like a musical scale, is a prearranged set of harmonious proportions."

—Robert Bringhurst, The Elements of Typographic Style

Introducing Modular Scales

from Type & Music

Modular scale

from Every Layout

Getting Started with Toolabs DSM

Creating Themes with System States