Framer — Hero
Dark hero section with bold white headline, two-button CTA group, and a full-width product interface screenshot below showing the Framer canvas editor with sidebars and AI agent panel on the right.
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/framer-split-hero-with-ai-builder-canvas-mockup.
Measured spec
| Scheme | dark |
| Background | #161616 |
| Text | #3D474D |
| Contrast | 1.9 |
| Columns | 1 |
| Alignment | left |
| Whitespace | dense |
| Density | 0.576 |
| Measured size | 1600×1489 px |
Palette
#000000#FFFFFF#0066FF#1A3A52#CCCCCC
Fonts
GT Walsheim
Page types
Detail
UX patterns
Progressive OnboardingCommand Palette
UI elements
Navigation BarCardBadgeDropdown
Context
Other sections on this page
- Gallery / Showcase — Framer site showcase grid
- Feature — AI agents with multi-screen workspace showcase
- Feature — Platform features overview with nested navigation and metrics
- Feature — Community-powered feature showcase with sidebar navigation
- Gallery / Showcase — Customer stories grid with logo wall
- CTA / Sign-up — Get started with Framer - dual CTA with product preview