Astro — Hero
Purple gradient hero: 'The web framework for content-driven websites' with Get Started and 'npm create astro@latest' CTAs over a navbar (Documentation, Blog, Resources, Contents, Extension).
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/inspiration/astro-astro-hero.
Measured spec
| Scheme | dark |
| Background | #1D146F |
| Text | #9180B8 |
| Accents | #5418A3 |
| Contrast | 4.33 |
| Columns | 2 |
| Alignment | split |
| Whitespace | dense |
| Density | 0.504 |
| Measured size | 1600×806 px |
Palette
#060913#ECECEE#61DAFB
Fonts
ObviouslyInter
Page types
Detail
UX patterns
Dark Mode
UI elements
Navigation BarBadge
Context
Other sections on this page
- Logo Wall — Trusted-by logo wall
- Feature — What is Astro intro
- Stats / Metrics — Astro Islands performance bars
- Integrations — Zero Lock-in framework integrations
- Bento Grid — Fully Featured bento
- Gallery / Showcase — Themes showcase
- Logo Wall — Astro support partner agencies
- CTA / Sign-up — Start building CTA
- Integrations — Sponsors grid
- Footer — Footer