Framer — Hero
AI website builder for creating and publishing custom websites without coding. The screen shows a visual editor canvas with a left sidebar for page navigation, a center canvas displaying the site design with editable text and image sections, and a right panel with an AI agent providing real-time assistance and suggestions for content and design changes. The interface uses a tree-based page structure, live preview, and conversational AI guidance.
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 — Landing page with AI agent onboarding
- Feature — Platform Dashboard with Performance, CMS, and Analytics
- Feature — Community Dashboard
- Gallery / Showcase — Community Activity Feed with Featured Marketplace Item
- CTA / Sign-up — Get started with Framer - dual CTA with product preview