Swiss / International Typographic Style

1. Select your frame, open the Layout Grid section in the right panel, and click + to add a grid.
2. Add a Columns grid: set the count (e.g. 12), a fixed gutter, and margins, then set type to Stretch for responsive columns.
3. Add a second grid set to Rows, or a fine 8px Grid, to act as your baseline grid.
4. Save both as a shared Grid Style (the four-dot icon), named e.g. Swiss / 12-col, so every frame reuses it.

Toggle grid visibility with Ctrl/Cmd + Shift + 4 while you compose.

1. Select your elements and press Shift + A to wrap them in Auto Layout.
2. Set alignment to top-left, direction to vertical, and spacing to a multiple of your 8px baseline.
3. Set horizontal resizing to Fill container so blocks lock to the column widths.
4. Use consistent spacing tokens (8 / 16 / 24 / 32) so vertical rhythm matches the baseline.

Define spacing as Variables so the whole system updates from one place.

1. Choose one neutral sans (Helvetica Now or Inter) for every text style.
2. Create Text Styles for Display, H1, H2, Body, Caption, and Label on a consistent ratio (e.g. 1.25).
3. Set body to flush-left and leave the text box auto-width or fixed-width, never justified.
4. Encode weight contrast (Regular vs. Bold) into the styles instead of switching fonts.

Keep line-height a clean multiple of 8 so text lands on the baseline grid.

1. Create a Variable Collection named Swiss Palette.
2. Add only: ground (#FFFFFF), ink (#0F0F0F), accent (#E2231A), and one neutral grey.
3. Apply colors only through these variables, never raw hex on shapes.
4. Spend the accent on a strict budget, reserved for emphasis and signal.

Set up light and dark modes on the same variables so the system inverts cleanly.