Framer — Hero
Top nav with Framer logo, login and Start buttons sits above a two-line headline 'Framer is the AI website builder for standout sites'. A full-width screenshot of the dark Framer editor (layers tree, canvas, and a prompt box typing 'creative studio specializing in digital experiences') forms the visual anchor.
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#1C1C1F#2B7FFF#E8E8E8
Fonts
GT Walsheim
Page types
Detail
UX patterns
Dark Mode
UI elements
Navigation BarSidebarCardBadge
Context
Other sections on this page
- Gallery / Showcase — 'Shipped with Framer' site gallery
- Logo Wall — Customer logo strip
- Feature — 'Agents that work alongside you' scroll narrative
- Bento Grid — 'Not just vibes, a full platform' product bento
- Gallery / Showcase — 'Built on a community' showcase
- Testimonial / Social Proof — 'Trusted by teams' case-study logo wall
- CTA / Sign-up — 'Get started with Framer' neon-toolbar CTA
- Footer — Multi-column dark footer