Dimensions

Preview

A corner inside a corner, drawn from the radius tokens. The inner radius is the outer radius minus the padding, so the two curves stay parallel.

What spacing scale does Appetite UI use?

A 4 pt scale in 24 steps, from spacing/0 to spacing/40 at 160. The step number is the value divided by four, so spacing/4 is 16 and spacing/12 is 48.

Half steps fill the gaps below 12, such as spacing/1-5 at 6 and spacing/2-5 at 10. Above spacing/12 the scale widens to 14, 16, 20, 24, 30, 32 and 40, because you rarely need 52 when 48 and 56 exist. Bind spacing to gaps and padding in Auto Layout instead of typing a value.

Which radius goes inside a rounded container?

Subtract the padding from the outer radius. A 24 card with 8 padding holds a 16 image, and a 12 card with 4 padding holds an 8 control.

The scale has eleven steps, and each one is a shape decision. radius/full stores 9999 instead of 50 percent, so a tall box keeps semicircular ends and never becomes an ellipse.

Which border weight should I use?

Four stroke widths: a 0.75 hairline, a 1 default, a 2 for focus and selection, and a 4 for decoration.

border/4 is for decorative rules only. Never use it as the boundary of something a person can tap.

Which icon sizes and stroke are there?

Five sizes and one stroke. dimensions/icon/stroke is 2, and every glyph bound to it changes weight together when you change that one variable.

The library holds 1,667 Lucide icons drawn on the 24 box, the default size. SF Symbols and Material Symbols both express weight as an axis, which is why stroke is a variable.

What is the minimum touch target?

44 pt on iOS and 48 dp on Android. The Platform collection stores both in platform/min-touch-target, so setting the mode on a frame switches the number a control is checked against.

A control may draw smaller than its target, as a switch track does, but the frame a finger can hit must not. spacing/11 is the 44 step of the spacing scale.

The Platform collection has 20 variables on five modes. Platform Bridge explains how a mode switches a whole screen.

Which grid style fits which screen?

Five grid styles apply a column count, a gutter, a margin and the two safe areas to a frame in one click.

The inner Duo grid has six columns because four columns across the 855 beside the rail would give columns nothing uses. If you design for both platforms, apply the grid of the target device and let Auto Layout handle the rest.

Tokens

Every value in the collection. 45 variables in one mode across four scales, plus three table column widths that alias the spacing scale.

Values and descriptions read from the Foundations collection of the Figma file on October 2, 2026.