--- title: Dimensions description: Appetite UI dimension tokens for Figma: a 4 pt spacing scale, eleven radii, four border weights, five icon sizes and the 44 pt and 48 dp touch targets. group: Foundations source: https://www.appetiteui.com/docs/dimensions dateModified: 2026-10-08 --- # Dimensions Updated: October 8, 2026. Spacing, radius, border weight and icon size are four scales of Figma variables, 45 in all. Pick a step and bind it to the layer. ## 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. Four pairs of nested corners: the outer radius token, the padding and the inner radius. | Token | Value | Outer radius | Inset | Inner radius | | --- | --- | --- | --- | --- | | radius/5xl around radius/2xl | 48 outside, 24 padding, 24 inside | 48 | 24 | 24 | | radius/3xl around radius/2xl | 32 outside, 8 padding, 24 inside | 32 | 8 | 24 | | radius/2xl around radius/xl | 24 outside, 8 padding, 16 inside | 24 | 8 | 16 | | radius/lg around radius/md | 12 outside, 4 padding, 8 inside | 12 | 4 | 8 | ## 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. The spacing scale, token name, value and a bar drawn at that width. | Token | Value | | --- | --- | | 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/30 | 120 | | spacing/32 | 128 | | spacing/40 | 160 | spacing/30 at 120 clears the content under a floating bar, so the last row stays visible. The default table column reads it. ## 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. The radius scale, token name, value and the corner it draws. | Token | Value | | --- | --- | | radius/none | 0 | | radius/sm | 2 | | radius/base | 4 | | radius/md | 8 | | radius/lg | 12 | | radius/xl | 16 | | radius/2xl | 24 | | radius/3xl | 32 | | radius/4xl | 40 | | radius/5xl | 48 | | radius/full | 9999 | radius/xl at 16 is the inner radius of a 24 card at 8 padding, and the Material large shape role maps to it. radius/4xl at 40 is for sheets, modals and full width surfaces, and radius/5xl at 48 holds 24 radius cards at 24 padding. ## 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. The border scale, token name, value and a rule drawn at that weight. | Token | Value | | --- | --- | | border/0-75 | 0.75 | | border/1 | 1 | | border/2 | 2 | | border/4 | 4 | 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 icon sizes, token name, value and a box drawn at that size. | Token | Value | | --- | --- | | icon/size/sm | 16 | | icon/size/md | 20 | | icon/size/base | 24 | | icon/size/lg | 32 | | icon/size/display | 96 | 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. In the Button set only the icons at 24 bind to dimensions/icon/stroke, so changing the variable moves them and leaves the rest. The icons at 22 carry a stroke of 2, the icons at 18 and 20 a stroke of 1.75 and the icons at 16 a stroke of 1.5, all plain numbers, so a small glyph does not read heavier than the label beside it. ## 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. | Variable | iPhone | Android | iPhone Duo | What it sets | | --- | --- | --- | --- | --- | | `platform/min-touch-target` | 44 | 48 | 44 | Smallest tappable square | | `platform/bar/top-height` | 44 | 64 | 44 | Top bar, below the safe area | | `platform/bar/bottom-height` | 49 | 64 | 0 | Bottom bar, a vertical rail on Duo | | `platform/list-row/min-height` | 44 | 56 | 44 | Shortest single line list row | | `platform/screen-padding` | 16 | 16 | 16 | Edge of the screen to content | The Platform collection has 20 variables on five modes. [Platform Bridge](https://www.appetiteui.com/docs/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. | Style | Screen | Columns | Gutter and margin | Safe area top and bottom | | --- | --- | --- | --- | --- | | `ios-md` | iPhone 16 and 16 Plus | 4 | 16 and 16 | 59 and 34 | | `ios-lg` | iPhone 16 Pro and 16 Pro Max | 4 | 16 and 16 | 62 and 34 | | `android` | Material 3 phone | 4 | 16 and 16 | 52 and 24 | | `ios-duo-outer` | iPhone Duo outer display, 370 pane and 96 rail | 4 | 16 and 16 | 24 and 24 | | `ios-duo-inner` | iPhone Duo inner display, 951 by 669: 855 of content beside the 96 rail. Apply it to the 855 content frame to keep the columns clear of the rail | 6 | 16 and 16 | 24 and 24 | 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. The two Duo grids keep the top and bottom safe areas at 24, because the device has no notch to clear. The trailing 96, the room of the rail, comes from grid/safe-area/trailing in the Platform collection. ## Tokens Every value in the collection. 45 variables in one mode across four scales, plus three table column widths that alias the spacing scale. | 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, table action column | | `dimensions/spacing/24` | 96 | Empty state | | `dimensions/spacing/30` | 120 | Scroll clearance under a floating bar, default table column | | `dimensions/spacing/32` | 128 | Hero spacing | | `dimensions/spacing/40` | 160 | Full bleed, table lead column | | `dimensions/radius/none` | 0 | Square corners | | `dimensions/radius/sm` | 2 | Inline marks and tiny chips | | `dimensions/radius/base` | 4 | Small controls and inline fields | | `dimensions/radius/md` | 8 | The Checkbox box, chart bars and tooltips, small icon tiles, and the small corner of the iOS and M3 shape scales | | `dimensions/radius/lg` | 12 | Inner surfaces, list highlights, small cards | | `dimensions/radius/xl` | 16 | Large cards, inner radius of a 24 card at 8 padding | | `dimensions/radius/2xl` | 24 | Cards and grouped containers | | `dimensions/radius/3xl` | 32 | Dialogs and large cards | | `dimensions/radius/4xl` | 40 | Sheets, modals and full width surfaces | | `dimensions/radius/5xl` | 48 | Containers that hold 24 radius cards at 24 padding | | `dimensions/radius/full` | 9999 | Pills, avatars and circles | | `dimensions/icon/size/sm` | 16 | Inline with small text | | `dimensions/icon/size/md` | 20 | Dense list rows and compact controls | | `dimensions/icon/size/base` | 24 | Default size | | `dimensions/icon/size/lg` | 32 | Empty states and feature tiles | | `dimensions/icon/size/display` | 96 | Display marks beside a logo | | `dimensions/icon/stroke` | 2 | Stroke of every bound glyph | | `dimensions/border/0-75` | 0.75 | Hairline | | `dimensions/border/1` | 1 | Inputs, cards and outline buttons | | `dimensions/border/2` | 2 | Focus ring and selected outline | | `dimensions/border/4` | 4 | Decorative rules only | | `table/column/lead` | 160 | Pinned first column of a Table | | `table/column/default` | 120 | Ordinary Table column | | `table/column/action` | 80 | Trailing actions column of a Table | Values and descriptions read from the Foundations collection of the Figma file on October 2, 2026. [iPhone screen sizes in Figma: 402 × 874 for iPhone 18 Pro, 440 × 956 for Pro Max](https://www.appetiteui.com/blog/iphone-screen-sizes-figma), [Android screen sizes in Figma: design by window size class, not by device](https://www.appetiteui.com/blog/android-screen-sizes-figma) and [Touch target size on iOS and Android: 44 pt, 48 dp and the WCAG minimum](https://www.appetiteui.com/blog/touch-target-size-ios-android). ## In the screens and the glossary - Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target) - Glossary: [Safe area](https://www.appetiteui.com/academy/glossary/safe-area) - Glossary: [Spacing scale](https://www.appetiteui.com/academy/glossary/spacing-scale) - Glossary: [Corner radius](https://www.appetiteui.com/academy/glossary/corner-radius) - Glossary: [Status bar](https://www.appetiteui.com/academy/glossary/status-bar)