𝜏:torquens

Appearance

Size Tokens ​

Border Width

Figma's box model has borders sitting inside the padding region; in HTML the borders sit between the padding region and margin region. We shall use the HTML box model here.

Inline Size ​

Inline size is a complicated value to describe. It may be externally fixed, with content overflow behaviour defined as needed (ellipsis or wrapping), or it may be that the content is let to grow as desired.

Either way, the inline padding defines the minimum gap between the edges and content:

Border width↓↑
↑Block padding↓
←Inline paddingβ†’
Leading
←Gapβ†’
Central
←Gapβ†’
Trailing
β†₯Line height
Border radius↢

With the gap separating content areas:

Border width↓↑
↑Block padding↓
←Inline paddingβ†’
Leading
←Gapβ†’
Central
←Gapβ†’
Trailing
β†₯Line height
Border radius↢

Plus the border width:

Border width↓↑
↑Block padding↓
←Inline paddingβ†’
Leading
←Gapβ†’
Central
←Gapβ†’
Trailing
β†₯Line height
Border radius↢

Block Size ​

The overall block size of a rectangle comes from its content (based on the line height).

Border width↓↑
↑Block padding↓
←Inline paddingβ†’
Leading
←Gapβ†’
Central
←Gapβ†’
Trailing
β†₯Line height
Border radius↢

Plus any block padding:

Border width↓↑
↑Block padding↓
←Inline paddingβ†’
Leading
←Gapβ†’
Central
←Gapβ†’
Trailing
β†₯Line height
Border radius↢

Plus the border width:

Border width↓↑
↑Block padding↓
←Inline paddingβ†’
Leading
←Gapβ†’
Central
←Gapβ†’
Trailing
β†₯Line height
Border radius↢

The border-width is usually a fixed value that does not need to respond to any external changesβ€”attempting a non-integer border width is likely to result in different appearances between different browsers and platforms.

Variables ​

With this established, we may consider a set of t-shirt sized containers:

Container Sizes
Name
Value
Sizing
Medium
Block Padding
12px
Inline Padding
12px
Gap
4px
Sizing
Large
Block Padding
16px
Inline Padding
24px
Gap
8px

As usual, we can use modes to ensure grouped usage of values (so that Sizing.Medium.Block Padding isn't accidentally used with Sizing.Large.Inline Padding):

Container Sizes
Name
Medium
Large
Sizing
Block Padding
12px
16px
Inline Padding
12px
24px
Gap
4px
6px

Units ​

As with typography, we should consider whether we want padding in our UI to follow the browser root font size, which can be achieved by switching to rem units:

Container Sizes
Name
Medium
Large
Sizing
Block Padding
0.75rem
1rem
Inline Padding
0.75rem
1.5rem
Gap
0.25rem
0.375rem

A further optional extension is to switch to using the lh unit:

Container Sizes
Name
Medium
Large
Sizing
Block Padding
0.75lh
1lh
Inline Padding
0.75lh
1.5lh
Gap
0.25lh
0.375lh

This now means that our containers will respond in size with changes to both the root font size, and the line height applied to the container.

This is delightfully simple to do in CSS, and near impossible in design tooling.