Framer — Hero
Full-width dark hero section with large sans-serif headline "Framer is the AI website builder for standout sites" positioned left, paired with two CTAs below (Get started for free, Download app). The right side embeds a live product interface screenshot showing the Framer design canvas with a blue-themed website preview, creating a compelling product-in-context visual.
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-editor-mockup-hero-with-ai-prompt-canvas.
Measured spec
| Scheme | dark |
| Background | #000000 |
| Text | #81745B |
| Accents | #00304E, #253B48 |
| Contrast | 4.58 |
| Columns | 1 |
| Alignment | left |
| Whitespace | dense |
| Density | 0.59 |
| Measured size | 1600×2433 px |
Palette
#000000#FFFFFF#1B4965#C4B5FD#4A5568
Fonts
GT Walsheim
Page types
Detail
UX patterns
Progressive Onboarding
UI elements
Navigation BarPricing Card
Context
Other sections on this page
- Gallery / Showcase — Dark bento grid with customer logos and hero cards
- Logo Wall — Customer logo grid on dark background
- Feature — Multi-feature showcase with agent-powered design system
- Bento Grid — Feature bento grid with modular platform sections
- Feature — Community-driven platform dashboard with sidebar navigation
- Gallery / Showcase — Customer stories in four-column grid with logos and CTAs
- Hero — Get started with Framer — dual CTA and product interface preview
- Footer — Multi-column footer navigation with product categories