BUILD
- Build a complete Material-style SaaS product marketing homepage. Not a card, not an isolated navbar, not a dashboard, not a tabs widget.
- Domain: tonal product marketing where elevation and pill shapes carry the whole identity.
STYLE
- Material: tonal surfaces, filled pills, elevation instead of borders
- Page fill #FEF7FF, type #1D1B20, mute #49454F, primary #6750A4, primary container #E8DEF8
- Cards white, 12px radius, soft shadow 0 1px 3px rgba(0,0,0,0.12); hover deepens shadow, never translates
- Roboto for UI, tabular numerals for metrics. No serif
LAYOUT
- Top app bar as page chrome: wordmark North, links Product / Docs / Pricing, pill search field on container tint, CTA Get started (#6750A4 pill, white type)
- Centered container max-width 1120px, 12 columns, 24px gutter
- Finished homepage: split hero (copy + tonal product visual), three feature cards, mosaic (one large + two stacked), three-column footer
- Do not present the app bar as a standalone control sitting on an empty well
SECTIONS
1. Split hero: "Tonal surfaces. Pill actions." plus a tonal product 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 deepens elevation and adds a subtle 8% state layer. No glow, no translate, no second accent
TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to Material tokens - not default shadcn. One homepage route.
DON'Ts
- No gradients on surfaces. No hard 0px corners. No shadows heavier than 0 2px 10px
- 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
- Use the standard curves: enter 200ms decelerate, exit 150ms accelerate.
- Ripple expands from the exact touch point over 400ms.
- Elevation changes animate the shadow, 200ms.
- prefers-reduced-motion: no ripple, keep the state colour change.