Design on Reality — Poster Modernist — Référence de design web et prompt

# SUPERDESIGN — "DESIGN ON REALITY" POSTER-MODERNIST LANDING PAGE

BUILD A PIXEL-FAITHFUL RECREATION OF THE **SUPERDESIGN** LANDING PAGE: A SINGLE-SCREEN, SCROLL-DOWN MARKETING PAGE FOR A DEVELOPER TOOL THAT "DESIGNS ON REALITY, NOT MOCKUPS." THE AESTHETIC IS **POSTER MODERNIST / REALITY-FIRST** — A STRICT 12-COLUMN GRID, MONOCHROMATIC CREAM BASE WITH A SINGLE COBALT-BLUE ACCENT, HEAVY TYPOGRAPHIC CONTRAST, HARD 1PX DIVIDERS, ZERO BORDER-RADIUS, AND ZERO SHADOWS. REPRODUCE THE EXACT COPY, LAYOUT, AND STYLING BELOW SAME-TO-SAME.

## GLOBAL SHELL & TOKENS

- PAGE BACKGROUND: CREAM `#E3E2DE`. WRAP THE WHOLE PAGE IN A CENTERED CONTAINER `max-w-[1600px] mx-auto` WITH A 1PX VERTICAL BORDER ON ITS LEFT AND RIGHT EDGES (`border-x`, COLOR `#C7C7C7`). EVERYTHING SITS INSIDE THIS FRAMED COLUMN.
- COLORS: BACKGROUND `#E3E2DE` (CREAM) · ACCENT `#1351AA` (COBALT BLUE) · PRIMARY TEXT `#141414` (JET BLACK) · SECONDARY TEXT `#444343` · MUTED/LABELS `#7A7A7A` · BORDERS/DIVIDERS `#C7C7C7`.
- TYPOGRAPHY: **GENERAL SANS** (LOAD VIA FONTSHARE CDN) FOR EVERYTHING; USE A MONOSPACE STACK (`ui-monospace, SFMono-Regular, Menlo, monospace`) ONLY FOR TINY INDEX NUMBERS (`01`, `02`...).
- HARD RULES: `border-radius: 0` EVERYWHERE · NO SHADOWS, NO GRADIENTS · ALL SECTION-TO-SECTION SEPARATION IS A 1PX SOLID `#C7C7C7` BORDER-BOTTOM · TRANSITIONS ARE FAST LINEAR `0.3s` COLOR CHANGES ONLY (NO BOUNCE/SPRING).
- SIDEBAR LABEL STYLE (REUSED IN EVERY SECTION'S LEFT COLUMN): 12PX, FONT-BOLD, UPPERCASE, `#7A7A7A`, `letter-spacing: 0.2em`; POSITIONED IN THE 3-COL LEFT COLUMN, `sticky top-32` SO IT STAYS VISIBLE WHILE ITS SECTION SCROLLS.