BUILD
- Build a complete Minimal SaaS product marketing homepage. Not a card, not an isolated navbar, not a dashboard, not a tabs widget.
- Domain: quiet SaaS marketing. Docs and Settings are destinations in the nav and feature cells, not the homepage type.
STYLE
- Minimal: hairline borders, neutral surfaces, one accent
- Page fill #FFFFFF, type #1D1D1F, mute #6E6E73, hairline rgba(29,29,31,0.12)
- Feature cells 12px radius. One accent #0071E3 for pills only
- Plus Jakarta Sans for UI. IBM Plex Mono only for tiny meta. No Inter
LAYOUT
- Sticky top nav as page chrome: wordmark North, separate links Product / Docs / Pricing (not one middot string), search field, CTA Get started (#0071E3 pill, white type)
- Centered container max-width 1120px, 12 columns, 24px gutter
- Finished UIGrammer-like homepage: split hero (copy + product visual), three feature cards, mosaic (one large + two stacked), three-column footer
- Do not present the navbar as a standalone control sitting on an empty well
SECTIONS
1. Split hero: "Quiet surfaces. One action." plus a North workspace visual. CTA Start free
2. Three feature cards: Product, Docs, Settings
3. Mosaic: Analytics board (lead) + SaaS landing + Docs shell
4. Three-column footer: Product / Docs / Legal
INTERACTION
- Hover lifts the CTA and feature cells 2px. No glow, no second accent
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji icons. No kitsch illustration
- Do not output only a headline plus two empty cells
- Docs and Settings are destinations, not the homepage type
MOTION
- Almost none. Hover: colour or underline, 120ms. State change: 100ms.
- When in doubt, leave it out. Stillness is the style.
- No entrance choreography, no scroll reveals.
- prefers-reduced-motion: no change needed.