Skip to content
Components
/
Dimensions
Dark

Dimensions

Dimensions holds the four scales every measurement in the system comes from: spacing, radius, icon size and border weight. Reach for a step, never a number.

Preview

The spacing ramp, every step at its real width. Read the rhythm before the numbers.

The ramp starts at spacing/px. spacing/0 is a real step and draws nothing, so twenty two bars stand for twenty three steps.

Spacing

23 steps, from one pixel to 160. The step number is the value divided by four, so spacing/4 is 16 and spacing/12 is 48.

spacing/0
0
spacing/px
1
spacing/0-5
2
spacing/1
4
spacing/1-5
6
spacing/2
8
spacing/2-5
10
spacing/3
12
spacing/4
16
spacing/5
20
spacing/6
24
spacing/7
28
spacing/8
32
spacing/9
36
spacing/10
40
spacing/11
44
spacing/12
48
spacing/14
56
spacing/16
64
spacing/20
80
spacing/24
96
spacing/32
128
spacing/40
160

Half steps stop at spacing/2-5 and the ramp thins above spacing/12: 14, 16, 20, 24, 32, 40. There is no spacing/13, spacing/15 or spacing/18, and that is the point of a scale.

Radius

Nine steps on one identical square, so the corner is the only thing that changes. The scale is named, not numbered: a radius is a shape decision.

radius/none
0
radius/sm
2
radius/base
4
radius/md
8
radius/lg
12
radius/xl
18
radius/2xl
24
radius/3xl
32
radius/full
9999

radius/full stores 9999, not 50 percent, so a tall box keeps semicircular ends instead of becoming an ellipse. It gets a wider swatch because full on a square is only a circle. radius/xl sits at 18, off the doubling the steps below it follow.

Icon

Five sizes and one stroke. dimensions/icon/stroke is 2 at 16 and 2 at 96, so icons of different sizes in one row still read as one family.

icon/size/sm
16
icon/size/md
20
icon/size/base
24
icon/size/lg
32
icon/size/display
96

All 1,667 Lucide icons run off dimensions/icon/stroke. Change that one variable and every icon changes weight together. The marks are drawn to Lucide geometry at each size, not exported art.

Tokens

Every value in the collection. 42 variables in one mode, across four scales. None is an alias; each is a raw number the rest of the system points at.

Token
Value
Used by
dimensions/spacing/0
0
No gap
dimensions/spacing/px
1
Hairline
dimensions/spacing/0-5
2
Icon to label
dimensions/spacing/1
4
Tight gap
dimensions/spacing/1-5
6
Chip padding
dimensions/spacing/2
8
Label to control
dimensions/spacing/2-5
10
Compact row
dimensions/spacing/3
12
Field padding
dimensions/spacing/4
16
Card padding
dimensions/spacing/5
20
Row gap
dimensions/spacing/6
24
Card to card
dimensions/spacing/7
28
Header padding
dimensions/spacing/8
32
Block gap
dimensions/spacing/9
36
Wide block gap
dimensions/spacing/10
40
Section padding
dimensions/spacing/11
44
Tap target
dimensions/spacing/12
48
Section gap
dimensions/spacing/14
56
Wide section gap
dimensions/spacing/16
64
Screen block gap
dimensions/spacing/20
80
Screen padding
dimensions/spacing/24
96
Empty state
dimensions/spacing/32
128
Hero spacing
dimensions/spacing/40
160
Full bleed
dimensions/radius/none
0
Flush edges
dimensions/radius/sm
2
Badge, tag
dimensions/radius/base
4
Input, small chip
dimensions/radius/md
8
Button, field
dimensions/radius/lg
12
Card
dimensions/radius/xl
18
Sheet, modal
dimensions/radius/2xl
24
Large card
dimensions/radius/3xl
32
Large surface
dimensions/radius/full
9999
Pill, avatar
dimensions/icon/size/sm
16
Inline with text
dimensions/icon/size/md
20
List row, tab bar
dimensions/icon/size/base
24
Default size
dimensions/icon/size/lg
32
Feature row
dimensions/icon/size/display
96
Empty state art
dimensions/icon/stroke
2
Every Lucide icon
dimensions/border/0-75
0.75
Sub pixel hairline
dimensions/border/1
1
Default border
dimensions/border/2
2
Focus ring, selected
dimensions/border/4
4
Emphasis rule

Border weight is the fourth scale and gets no section of its own. dimensions/border/0-75 is the only fractional value in Dimensions. The third column is guidance for picking a step, not a usage index read out of the file.