Framer — Hero
An AI-powered website builder for creating standout sites. This screen shows the core design editor interface with a three-panel layout: left sidebar containing a hierarchical page navigation tree, center canvas displaying a live preview of a website being edited (showing a dark blue design studio hero section), and right sidebar with an AI agent panel that provides real-time design suggestions and change history. The editor includes toolbar controls at the top for canvas manipulation and publishing.
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 — Landing page with featured case studies
- Logo Wall — Customer logo grid on dark background
- Feature — AI Agents Feature Overview
- Bento Grid — Feature bento grid with modular platform sections
- Feature — Community Feed & Marketplace
- Gallery / Showcase — Customer stories in four-column grid with logos and CTAs
- Hero — Get started with Framer — dual CTA and product interface preview
- Footer — Navigation footer with product, community, resources, tools, and business links