Framer pairs an AI design agent with a full website builder — idea to launch on one canvas, with hosting, CMS, analytics, and SEO built in. Its style sits on a pure black void (#000000), sets GT Walsheim at -5.5px tracking at 110px, uses electric Framer Blue (#0099ff) as the sole accent, keeps interactive shapes pill-rounded (40–100px), and lets product screenshots be the hero art.
DeveloperBold
Prompt Template
Base Template
Design a Framer-inspired interface. - Pure black (#000000) void canvas — absolute dark, not warm or gray-tinted; - GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px); - Framer Blue (#0099ff) as the sole accent color — cold, electric, precise; - Pill-shaped buttons (40px–100px radius) — no sharp corners on interactive elements; - Product screenshots as hero art — the tool IS the marketing. Colors: #000000, #ffffff, #0099ff, #a6a6a6 with #0099ff accent. Typography: Azeret Mono.
Variant Prompts
📱 Mobile
Design a mobile app with Framer aesthetics. Use Framer color identity with #0099ff accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Framer style. Use Framer color identity with #0099ff accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Framer design language. Use Framer color identity with #0099ff accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Framer visual identity. Use Framer color identity with #0099ff accents. Compelling, conversion-focused.
Usage Examples
Framer App
WebBuild a web app with Framer design language and #0099ff color system.
Framer Dashboard
DashboardCreate a dashboard using Framer style with data visualization and Azeret Mono typography.
✅ Best For
- Design
- Designer sites and portfolios
- Motion-rich marketing pages
❌ Avoid For
- Dense data back offices
- Nostalgic paper-style sites
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.