# Swiss grid pricing > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The pricing page for *Tessel*, a layout-engine SaaS. A 12-column grid is drawn as 1px hairlines across the content area (40px page margins, so each column is 100px at 1280). Everything snaps to it: a 64px header, an intro band with a 64px "Pricing." title, a 200px two-state switch, and three tiers each spanning exactly four columns. Prices are 96px tabular numerals; features are numbered `01`–`05` in a grey column. One red is used for the title's full stop, the "Save 20 %" caption, the highlighted tier's 4px top bar and its CTA. The detail worth copying is the switch: its black thumb slides across while every price counts from monthly to yearly over 420ms, so the page feels recalculated rather than swapped. ## Reference behaviour 1. Initial state: switch is on "Monthly" (`aria-checked="false"`), prices read $12 / $32 / $84, the "billed" line under each reads "Billed monthly". The middle tier ("Team") is highlighted: white background, 4px red top bar, red filled CTA. 2. Hover a nav link: colour `--ink-2` → `--ink`, 140ms. No underline. 3. Click the switch (or press Space/Enter while focused): the black thumb translates from the left half to the right half over 260ms with expo-out easing; label colours swap (the label under the thumb becomes `--bg`) over 140ms. 4. Simultaneously, each `.amt` tweens from its current value to the yearly value (12→9, 32→26, 84→68) over 420ms with cubic ease-out, rounding to integers each frame. The billed line changes instantly to "Billed **$108** yearly" (108 / 312 / 816). 5. Click again: thumb returns, prices tween back up, billed line returns to "Billed monthly". 6. Hover an outlined CTA: fills `--ink`, text `--bg`. Hover the red CTA: fills `--ink`. Arrow does not move. 7. Focus-visible on any control: 2px red outline, 3px offset. 8. Reduced motion: the thumb still moves (1ms), prices set instantly without tweening. ## Structure ``` 1280 × 800 · 40px margins · 12 hairline columns of 100px inside .page ┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐ │■Tessel │ Product / Pricing │ Docs Changelog Sign in │ 64 header ├─┴─┴─┴─┴─┴─┴─┼─┴─┴─┼─┴─┴─┤ │ Pricing. │ lede 30ch │ SAVE 20 % [Monthly│Yearly] │ ~130 intro │ (64px, cols 1–6) │ cols 7–9 │ cols 10–12 │ ├─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┤ │ 01 Starter ║ 02 Team (red top bar, white bg) ║ 03 Scale │ │ For one person… ║ For product teams… ║ For organisations│ │ $ 12 /seat/mo ║ $ 32 /seat/mo ║ $ 84 /seat/mo │ 96px numerals │ Billed monthly ║ Billed monthly ║ Billed monthly │ │ 01 3 projects ║ 01 Unlimited projects ║ 01 Everything… │ 13px rows, 1px rules │ 02 … ║ … ║ … │ │ [Start free →] ║ [Start 14-day trial →] (red) ║ [Talk to sales →]│ 48px CTAs └─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┘ cols 1–4 cols 5–8 cols 9–12 ``` - `.page` — `margin: 0 40px`, `position: relative`; `.page::before` paints the 12 hairlines (`linear-gradient` sized `calc(100%/12) 100%`, `repeat-x`) plus a 1px right border for the 13th line. - `

` — 12-col grid, 64px, 1px `--line-2` bottom rule. Brand (cols 1–2, with a 10px red square), breadcrumb (3–6), `