# Landing Page β Build Rules
Load this file when the user wants to **build / create a landing page, marketing site, one-pager, product page, app launch page, SaaS sign-up page, or event page**. For slide decks see `models/html-presentation.md`; for dashboards / games / charts / widgets see `models/visual-code.md`.
**Kobi Code routing:** write the artifact as a single HTML block in your reply. Kobi Code's panel renders it as a previewable artifact card. After approval, call `publish_html_artifact({ title, content })` to get a public `sites.kolbo.ai` URL.
## π― Design Thinking β Commit Before You Code
Before writing CSS, lock these four answers:
1. **Purpose** β what problem does this page solve, for whom?
2. **Tone** β pick an EXTREME and execute it. Brutally minimal Β· maximalist chaos Β· retro-futuristic Β· organic / natural Β· luxury / refined Β· playful / toy-like Β· editorial / magazine Β· brutalist / raw Β· art deco / geometric Β· soft / pastel Β· industrial / utilitarian. **There are dozens of flavors β never default to the same one.**
3. **Constraints** β framework, performance, accessibility.
4. **Differentiation** β what's the ONE thing someone will remember 5 minutes after closing the tab?
**Bold maximalism and refined minimalism BOTH work.** The killer is timid middle-ground. Intentionality, not intensity.
## π¨ Anti-AI-Slop Mandates
- β NEVER use `Inter`, `Roboto`, `Arial`, `-apple-system`, or any default system font.
- β NEVER ship the "purple-to-violet gradient on white background" look. It's the #1 LLM tell.
- β NEVER default to `Space Grotesk` everywhere β it's a tired LLM clichΓ©. Use it occasionally for genuinely fitting briefs.
- β NEVER ship "centered card with rounded corners + medium-weight type" on every section.
- β NEVER use placeholder lorem ipsum unless explicitly asked. Invent plausible specific copy.
## Typography β DISTINCTIVE FONTS ONLY
Pull from Google Fonts or Fontshare. Pair a distinctive display font with a refined body font.
- Editorial / luxury: `'Fraunces'`, `'Playfair Display'`, `'DM Serif Display'`, `'Instrument Serif'`, `'Cormorant Garamond'` + `'Source Sans 3'` or `'Inter Tight'` body
- Bold modern: `'Bricolage Grotesque'`, `'Boldonse'`, `'Archivo Black'`, `'Anton'`, `'Familjen Grotesk'` + `'Manrope'` body
- Technical / brutalist: `'JetBrains Mono'`, `'Geist Mono'`, `'IBM Plex Mono'`, `'Space Mono'`
- Playful / display: `'Bagel Fat One'`, `'Climate Crisis'`, `'Caprasimo'`, `'Bungee'`
- Hebrew: `'Heebo'`, `'Rubik'`, `'Frank Ruhl Libre'`, `'Assistant'`. Arabic: `'Cairo'`, `'Tajawal'`, `'IBM Plex Sans Arabic'`, `'Reem Kufi'`.
Set them up correctly: `` + `` + ``.
## Color & Theme
- Commit to a cohesive palette. **Dominant color with sharp accents** beats timid evenly-distributed palettes. Use CSS variables (`:root { --bg: ...; --fg: ...; --accent: ...; --accent-2: ...; --muted: ...; }`).
- Draw inspiration from IDE themes, cultural aesthetics, art movements β not Tailwind defaults.
- Vary between light and dark themes across briefs. Dark default for: technical / startup / dev-tools / luxury / cinematic. Light default for: consumer / wellness / education / food / fashion.
## Backgrounds & Visual Details β Atmosphere, Not Solid Colors
- Gradient meshes (multiple radial gradients with low opacity)
- Noise textures (data-URI SVG noise overlay at `opacity: 0.04β0.08`)
- Geometric patterns, dot grids, line grids
- Layered transparencies and blur (`backdrop-filter: blur()`)
- Dramatic shadows (large soft shadows + sharp colored accent shadows)
- Decorative borders (offset borders, dashed accents, hand-drawn SVG borders)
- Grain overlays for film / editorial feel
- Custom cursors when they fit the aesthetic
## Spatial Composition β Break the Grid
- Asymmetry. Overlap. Diagonal flow. Grid-breaking elements.
- Generous negative space OR controlled density β pick one with intent.
- Variations: split-screen, sidebar layouts, masonry, overlapping cards, full-bleed sections alternating with constrained ones.
- **β Never** ship "8 stacked centered sections, each with the same padding".
## Motion β High-Impact, Not Scattered
- One well-orchestrated page-load with staggered reveals (`animation-delay` ladder) creates more delight than scattered micro-interactions everywhere.
- Scroll-triggered fade-in / slide-in for sections: vanilla `IntersectionObserver` + CSS transitions, OR Framer Motion CDN if React.
- Hover states on EVERY interactive element. Cursor: pointer. Subtle lift / color shift / underline-reveal.
- Custom-easing animations (`cubic-bezier`), not linear.
- Always include `@media (prefers-reduced-motion: reduce) { ... }`.
## Section Architecture (pick what fits; never ship all 10 generically)
1. **Sticky nav** β logo + 3β5 links + primary CTA, top-right.
2. **Hero** β bold headline + 1-sentence subhead + primary CTA + hero visual (mockup / abstract / 3D / image). Above the fold.
3. **Social proof strip** β "Trusted by X" + logo row or "1,000+ users" β small, just under hero.
4. **Features / benefits** β 3 or 6 features in a grid, each with Lucide icon + headline + 1β2 sentences. Group by benefit, not feature dump.
5. **How it works** β 3-step numbered flow.
6. **Testimonials** β 2β4 quote cards with name / role / company. Real-sounding, specific.
7. **Pricing** β 2β3 tiers, highlight the recommended one.
8. **FAQ** β accordion of 4β8 common questions.
9. **Final CTA** β repeat primary CTA in a bold full-width section.
10. **Footer** β minimal: brand mark + 2 columns + copyright.
Skip sections that don't fit (no pricing for a waitlist page, no testimonials for a brand-new launch). Don't pad with filler. **Drop sections rather than dilute the page.**
## Hero Patterns (pick one based on the brand mood β DON'T always do centered)
- **Centered hero**: huge headline center-aligned, subhead, CTA pair, hero visual below.
- **Split hero**: text left, visual right (or reverse). Visual can be product mockup, abstract gradient, 3D scene.
- **Editorial hero**: big serif headline, generous negative space, single CTA, optional pull-quote.
- **Bold-statement hero**: solid color or textured background, ultra-large display font, single sentence, prominent CTA.
- **Asymmetric hero**: offset headline, decorative shapes / typography overlap, rule-breaking layout.
## Conversion Patterns
- **One page, one goal.** Pick ONE primary CTA (Sign up / Buy / Book demo / Download / Join waitlist) and make every section pull toward it.
- Above-the-fold CTA must be unmissable.
- Sticky CTA on scroll (button appears in nav after hero scrolls past).
- One value prop, three angles: hero / features / final CTA β same promise, different framings.
- Social proof early β directly under hero, not buried at the bottom.
- Buttons: max TWO styles β primary (filled, brand color, generous padding, hover lift) and secondary (ghost / outline). Never more.
## Real Copy, Not Lorem Ipsum
- Infer brand voice from the request: playful for consumer, precise for B2B, bold for DTC, refined for luxury, technical for dev-tools.
- Write 2β3 punchy headline variants internally and pick the strongest.
- Numbers and specifics beat vague claims. "10Γ faster" beats "Super fast". "$8.7M raised" beats "Well-funded".
## Mobile-First & Responsive
- Stack columns to single-column on mobile. Reduce font sizes proportionally. Hide non-essential decoration.
- Test mentally at 375px width β would a thumb easily tap each CTA?
- Use `clamp()` for fluid typography. Use `min()` / `max()` for constraints.
## RTL / Multilingual
- Detect language. Set `` correctly. For Hebrew / Arabic, flip nav alignment, use Tailwind logical properties (`ms-*`, `me-*`, `ps-*`, `pe-*`, `text-start`, `text-end`).
## Output Discipline β HTML Artifact (NON-NEGOTIABLE)
- Reply MUST contain exactly ONE ` ```html ... ``` ` fenced code block with a COMPLETE, self-contained HTML document.
- Document must start with `` and include ``, `` (with `` + ``), and ``.
- Embed ALL CSS inside `