All screen guides Star on GitHub
Screen guide
Landing page design
The job: In one screen: say what it is + why it matters + one next action.
Structure
Hero (headline + subhead + a single primary CTA) → proof (features / social proof) → CTA again. One conversion goal per page.
Hierarchy
Headline dominates; the CTA is the single brightest element; supporting text recedes. The accent belongs to the CTA.
Mobile
Stack everything, keep the CTA reachable, don't shrink the headline into mush.
Signature patterns
- Hero with one CTA
- Feature grid
- Social proof (logos / stats / quotes)
- Before/after, comparison
- Closing CTA
- Tasteful entrance motion — one flair accent max
Avoid
- multiple competing CTAs
- a wall of text
- every section the same rhythm
- autoplaying noise
- motion that delays the headline
- six accent colors
Build it with StyleSeed
This is the screen-typehalf of design judgment — cross it with your app’s domain and you get the actual decisions. StyleSeed bakes both into 74 rules your AI reads automatically; for a landing / marketing, reach for the silk motion seed.
Make your AI design a landing / marketing right
Open-source design engine for Claude Code, Codex & Cursor. MIT.