Appearance
Shape and Size Tokens
In this section we shall consider the spatial anatomy of a rectangle. Design systems have many rectangles, but here we'll primarily be focusing on button-like components.
Here is our control again, with its different layout options:
We have a leading, central and trailing area, laid out roughly as follows:
Border width↓↑
↑Block padding↓
←Inline padding→
Leading
←Gap→
Central
←Gap→
Trailing
↥Line height
Border radius↶
This gives us five parameters to define the shape and size of our rectangle.
As with colour, many of these are linked, and it would make sense to encode these connections in the tokens through structure rather than implicitly in naming.
WARNING
Whilst in colours we were able to express complex patterns in ways compatible with design tools, in shape and size we will quickly exceed the expressiveness of design tools and have to resort to crude and limited pre-computations of the options.
This is why it is important to separate the source of truth (the definitions of the calculations used to generate tokens) and the record of truth (the result of those calculations).