Observable: Observable data-notebook landing with serif hero and saturated-blue feature stack
The hero pairs a wide serif headline ("Not your typical notebook") set against a black band layered with live scatter-plot notebook screenshots and raw JS code, signaling the reactive-notebook product immediately. The signature element is the oversized literary serif typography (used for every section title like "Collaborate and share" and "Batteries included") combined with a dense, fully saturated cobalt-blue mid-page where white-stroke icon feature tiles and inline highlighted code snippets sit edge-to-edge. A mint-green testimonial band and a final black serif CTA close the rhythm before a dark footer.
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-observable-data-notebook-landing-with-serif-hero-and-saturated-blue-feature-stack.
Palette
Fonts
Page types
UX patterns
UI elements
Context
More from Observable
- Hero — Black hero with serif headline over notebook + code screenshots
- Feature — Blue 'Batteries included' import block
- Feature — Blue 'Collaborate and share' multiplayer block with chart + code
- Feature — Blue 'Ready for production' embedding block
- Logo Wall — Customer logo strip
- Footer — Dark multi-column footer
- Bento Grid — Eight-tile blue features grid
- CTA / Sign-up — 'Get started today' serif CTA
- Gallery / Showcase — 'Join the community' notebook card gallery
- Testimonial / Social Proof — Mint-green testimonial quote with portrait
- Feature — 'Shortest path' three-column feature row