# Swiss grid wordmark hero > **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 top of a website for Raster, a fictional wayfinding and identity office in Zürich and Rotterdam. The 12-column layout grid is drawn on the page as 1px hairlines, and every element sits on it. The wordmark "RASTER" is set at 304px. Each of its six letters fills exactly two columns, and on load each letter slides up out of its own clipped cell with a 70ms stagger. Hovering any column tints it ultramarine, numbers it in blue and recolours the letter inside it. The detail worth copying: the grid is the interaction. Your pointer finds a column, and the column answers. ## Reference behaviour 1. Initial state: warm paper page (`#eeede7`) with 12 full-height column bands, each with 1px hairlines on both edges and a mono column number (`01`–`12`) 14px from the bottom. 2. On load, a 2px ink rule under the wordmark draws left to right (scaleX 0 → 1, 900ms, expo-out, 80ms delay). 3. At the same time, letters R-A-S-T-E-R rise from `translateY(105%)` to 0 inside cells with `overflow:hidden`. The cells are 2 columns wide and 237px tall. Each letter lasts 820ms on expo-out, with a 120ms base delay plus 70ms per letter. The last letter lands at about 1290ms. 4. Moving the pointer over any column (hit-tested against the column rect, gutters excluded) gives that column a `rgba(29,51,240,.07)` fill, turns its number `--blue`, and turns the wordmark letter that occupies it `--blue`. Columns 1–2 map to letter 0, columns 3–4 to letter 1, and so on. The tint changes over 200ms. Only one column is ever active. 5. When the pointer leaves the document or sits in a gutter, the tint clears. 6. Clicking anywhere except a link replays the full entrance (rule plus letters). The bottom-right "Replay" button does the same. Links `preventDefault` in the demo. 7. Nav links get a 1px ink underline and full-ink colour on hover. The black "Start a project" button turns `--blue` on hover. 8. The bottom "Recent" index has 5 projects, each spanning 2 columns with a 1px ink top rule that turns blue on hover. ## Structure ``` 1280 × 800, margins 40, 12 cols, gutter 16 (col ≈ 85.3px) ┌──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┐ │■ Raster │ │ Work Studio Index Journal │[Start a project →]│ nav 56, 1px rule ├──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┤ │OFFICE SINCE PRACTICE COORDINATES│ meta, mono 11 │ │ │ R │ A │ S │ T │ E │ R │ wordmark 304px, each letter = 2 cols │══════════════════════════════════════════│ 2px ink rule (draws) │ lede 26px (cols 1–5) │ 01 services (7–9)│ CURRENT plate (10–12)│ │ │ See all 148 projects →│ │ [Replay] │ │RECENT │ Kunsthaus │ Port of │ Stadtwerk │ Grotesk │ Rheinufer │ index, bottom 44 │01 02 03 04 05 06 07 08 09 10 11 12│ column numbers └──────────────────────────────────────────────┘ rotated side label at x=12, vertically centred ``` - `.cols` is `position:absolute; inset:0 40px`, a 12-column grid with 12 `.col` divs, `aria-hidden`, `pointer-events:none`. - `