The 4 px scale, first eight steps. Dark mode on the left, light mode on the right (stacked on a phone).

Developer guidelines

Spacing and layout

Spacing does most of the work. Give things room, line them up, and let nothing hang off an edge.

The scale

Every gap comes from one scale on a 4 px base: 4, 8, 12, 16, 24, 32, 48, 64, 96 and 128. Most gaps land on multiples of 8; 4 and 12 are for tight pairs inside one block.

Margins and taps

Phones. 20 px from each side of the screen to the content.
Taps. Everything people press is at least 44 by 44 pt. A small icon keeps a 44 pt tap area around it.
Room between controls. About 12 pt around a control with a visible edge, about 24 pt around one without.
Safe areas. Keep clear of the notch, the Dynamic Island and the home indicator.

Nothing hangs off an edge

No fixed widths on words. Rows that run out of room wrap or stack, label on top, control full width under it.
Check both ends. Look at every screen at 390 px and at 1440 px, and with text zoomed to 200%.
Group with space. Use empty space or a thin line to group things, not boxes inside boxes.
No chips. Information is never boxed into small pills, and there are no capsules. Buttons are rounded rectangles with 12 px corners, like the Generate button in Switch Studio, sized to their words.

Do and don’t

Your video is ready to download now

Download

Your video is ready to download now

Download

Do. Keep 20 px margins and let the button fill the width inside them.

Your video is ready to download now

Download

Your video is ready to download now

Download

Don’t. Let words or buttons run past the edge of the screen.

NextTypographyThe system font stack, the sizes and the weights.

The 4 px scale, first eight steps. Dark mode on the left, light mode on the right (stacked on a phone).

Developer guidelines

Spacing and layout

Spacing does most of the work. Give things room, line them up, and let nothing hang off an edge.

The scale

Every gap comes from one scale on a 4 px base: 4, 8, 12, 16, 24, 32, 48, 64, 96 and 128. Most gaps land on multiples of 8; 4 and 12 are for tight pairs inside one block.

Margins and taps

Phones. 20 px from each side of the screen to the content.
Taps. Everything people press is at least 44 by 44 pt. A small icon keeps a 44 pt tap area around it.
Room between controls. About 12 pt around a control with a visible edge, about 24 pt around one without.
Safe areas. Keep clear of the notch, the Dynamic Island and the home indicator.

Nothing hangs off an edge

No fixed widths on words. Rows that run out of room wrap or stack, label on top, control full width under it.
Check both ends. Look at every screen at 390 px and at 1440 px, and with text zoomed to 200%.
Group with space. Use empty space or a thin line to group things, not boxes inside boxes.
No chips. Information is never boxed into small pills, and there are no capsules. Buttons are rounded rectangles with 12 px corners, like the Generate button in Switch Studio, sized to their words.