Observable — Hero
Top nav (Notebooks, Resources, Pricing, Sign in, Get started) over a black band where the serif headline 'Not your typical notebook' sits beside live data-viz notebook thumbnails and JavaScript code. Two CTAs: 'Try it free' and 'Explore the docs'.
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/observable-black-hero-with-serif-headline-over-notebook-code-screenshots.
Measured spec
| Scheme | light |
| Background | #FFFFFF |
| Text | #1C1C1C |
| Accents | #7EDCCF |
| Contrast | 17.04 |
| Columns | 1 |
| Alignment | left |
| Whitespace | dense |
| Density | 0.561 |
| Measured size | 1600×940 px |
Palette
#000000#ffffff#2b6cf0
Fonts
Avenir NextInter
Page types
Detail
UX patterns
Dark Mode
UI elements
Navigation BarChartCode BlockBadge
Context
- Parent page: Observable data-notebook landing with serif hero and saturated-blue feature stack
- All of Observable
Other sections on this page
- Feature — 'Shortest path' three-column feature row
- Logo Wall — Customer logo strip
- Feature — Blue 'Collaborate and share' multiplayer block with chart + code
- Feature — Blue 'Batteries included' import block
- Feature — Blue 'Ready for production' embedding block
- Bento Grid — Eight-tile blue features grid
- Gallery / Showcase — 'Join the community' notebook card gallery
- Testimonial / Social Proof — Mint-green testimonial quote with portrait
- CTA / Sign-up — 'Get started today' serif CTA
- Footer — Dark multi-column footer