Page type · 11 assets
Landing hero
The hero has one job and about three seconds to do it: say what this is, show that it works, and offer one thing to click. Most heroes fail by offering two.
What to get right
- One call to action with real emphasis; a secondary link may exist but must not compete.
- A headline set at a size the rest of the page never repeats.
- Proof close to the claim: a real screenshot, a real number, a real logo.
- Motion that reinforces the pitch rather than decorating it.
The archetype taken apart section by section, down to the tokens you rebuild it with.
Rendered layouts
Our own renders of the archetype, each wired to the palette, breakdown and template behind it.
Each is an installable shadcn/ui theme and a DESIGN.md for your agent.
npx shadcn@latest add https://csscreme.com/r/aurora.json 5 free templates in this archetype, each installable as a theme too.
Seen one in the wild?
Point the decoder at any live hero and pull its real type scale, spacing rhythm, radii and shadows, plus an accessibility read — then copy the whole thing as a DESIGN.md. Or drop a screenshot into the extractor if you only need the colours.