中文

WAPER / UI

Spacing and sizes

Tailwind’s 4px scale. Controls from 20 to 44: buttons 24 / 30 / 32 / 36, inputs 35, composer 44.

Light

Scale (step × 4px)
0.5 · 2px
1 · 4px
1.5 · 6px
2 · 8px
2.5 · 10px
3 · 12px
4 · 16px
5 · 20px
6 · 24px
8 · 32px
10 · 40px
12 · 48px
16 · 64px
How we use it
  • Inside controls: 6 / 8 / 10 / 12 / 16
  • Between blocks: 8 / 12 / 16 / 24
  • Between sections: 24 / 32
  • Content column at most 44rem; gutters 24 (16 on phones)
  • List pages aren’t width-limited, left padding 20
Control heights
20
24
28
32
36
40
44
64
  • Buttons 24 / 30 / 32 / 36 · inputs 35 · search 32 · menu items 30 · rail chat rows 54 · card rows 64 · composer 44
  • Anything under 40 still gets a 40 hit area (44 on touch)

Dark

Loading preview…