# Frontend — Constraint-First You are designing a single-file HTML landing page. Before you write any code, you must commit to a set of hard constraints, written as HTML comments at the top of the file. You cannot change them once written. Return ONE complete `` document. No markdown fences, no explanation outside the file. ## Step 1 — Commit to a direction Pick exactly ONE from each row and write it in a comment block. No "balanced", no "modern", no hedging. ``` DIRECTION --------- aesthetic: [editorial | brutalist | utilitarian | luxury | artisanal | archival | cinematic | technical-maximalist | quiet-minimal | playful-toy] era: [pre-web-print | early-2000s-web | 1970s-manual | 1990s-zine | modernist-swiss | postmodern-memphis | contemporary-japanese | nouveau-riche | industrial] surface feel: [matte paper | glossy poster | terminal phosphor | linen tag | ceramic | newsprint | chalkboard | folded map | hand-stitched | vellum] pace: [calm | urgent | deliberate | playful | ceremonial] ``` Then write TWO sentences describing what this page specifically does NOT do. ("Does not use rounded icon cards. Does not have a centered hero.") ## Step 2 — Type constraint Pick ONE sentence that describes the voice: "The headlines should read like ___." Examples: "a museum wall label", "a 1970s repair manual", "the caption on a botanical illustration", "a pit wall timing board", "a handwritten recipe card". Then pick fonts that serve THAT sentence. Hard rules: - **Banned** (instant rejection): Inter, Roboto, Arial, DM Sans, DM Serif, Outfit, Plus Jakarta, Instrument Sans/Serif, Space Grotesk/Mono, IBM Plex (any), Fraunces, Newsreader, Lora, Crimson (any), Playfair, Cormorant (any), Syne. - **You must use at most 2 font families**. One is fine if weights carry the hierarchy. - System font stack (`-apple-system, BlinkMacSystemFont, system-ui`) is a legitimate, often correct choice — especially for tools and dashboards. Use it without shame. - Hero scale uses `clamp()`. Body uses a fixed rem. 5-step scale, minimum 1.25 ratio. ## Step 3 — Color constraint - `oklch()` only for color definitions. No `#000`, no `#fff`. Tint neutrals toward the brand hue by chroma 0.005–0.015. - Pick ONE accent hue. Use it in <10% of the visible surface. - **Banned palettes**: cyan-on-black, purple→blue gradients, neon-on-dark, "AI violet" (~hue 280, chroma >0.15). - Light vs dark is a decision from context, not a reflex. Morning product → light. Night product → dark. Read the brief. - For any text on a colored background, use a shade of THAT background color, not gray. ## Step 4 — Layout constraint Pick ONE grid structure and stick with it: - **Asymmetric 12-col**: content pinned to cols 2–8 with captions in 9–12, or similar. - **Editorial baseline grid**: real baseline math where every block snaps to a 24 or 32px rhythm. - **Single-column long-form**: like reading a magazine feature; width-capped at 65ch. - **Dense dashboard grid**: fixed gutters, many small modules, tabular numbers. - **Poster**: one huge hero, one supporting block, huge negative space. Commit. Do not mix. ## Step 5 — The forbidden layout You may NOT build any of these: - Centered hero → "Features" three-column → "Pricing" → CTA → footer. - Rounded icon cards above headings. - Logo-row "Trusted by". - Gradient blob backgrounds. - `

` starting with "The future of", "Meet", "Introducing", or ending with "reimagined". - Emoji in body copy. - Gradient text. - Glassmorphism. If you find yourself building any of these, stop and pick a different structure. ## Step 6 — The memorable detail Every page must have ONE thing a visitor would describe to a friend. Examples: - A running counter or ticker with actual (plausible, non-placeholder) numbers. - A sidebar index with page anchors that tracks as you scroll. - Marginalia / footnotes in a smaller typeface down the outside column. - A single oversized numeral (a section number, a year, a count). - An ASCII diagram, a hand-labeled schematic, a tiny inline map. - A horizontal rule that's a real illustration, not just `
`. Decide what this detail is BEFORE writing layout code. ## Content rules - Every string on the page must be written for THIS brief. No "Your tagline here", no lorem ipsum. - Numbers should be plausible and specific ("since 2019", "batches of 60 loaves", "p99 <800µs"). Vague superlatives ("fastest", "best-in-class") are banned. - The page should answer: who is this for, what does it do, why should you care, what's next. - Nav, hero, at least two supporting sections, footer. More is fine. ## Output Emit one complete HTML file. Inline CSS in `