Cinematic true-black product design: GT Walsheim display set tight, Inter UI, a deep-blue hero aurora and a glowing electric-blue AI prompt ring as the single light source.
Browse Framer in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: framer.com (live DOM, computed styles), 2026-07-09 (desktop 1512px). Coverage: marketing home + nav + hero (AI prompt) + embedded editor chrome. App/editor: needs-dashboard — projects editor is behind login; not captured. Responsive: breakpoints not captured (Framer canvas site, no media-query tokens exposed).
Pure-black, cinematic product design that stages the AI website builder as a glowing tool in the dark. The canvas is true #000000; the hero drops a deep-blue radial aurora behind a large, softly *glowing* prompt box — a blue neon ring is the single dramatic light source, and everything else recedes into near-black greys. Type splits duties cleanly: a rounded, confident display face (GT Walsheim) set tight for headlines, with Inter carrying all UI and body text. Chrome is monochrome; electric blue #0099ff (and a periwinkle publish accent) is rationed to the prompt, primary actions and links. The bottom of the page floats a real editor toolbar as a dark pill, blurring marketing and product. Feels: dark, cinematic, precise, product-forward.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #000000 | Page background |
| surface-1 | #111111 | Raised panels |
| surface-2 | #171717 | Cards |
| surface-3 | #1e1e1e | Higher panels, chips |
| surface-4 | #242424 | Buttons / toolbar fills |
| surface-5 | #303030 | Hover fills |
| text | #ffffff | Primary text, headings |
| text-60 | rgba(255,255,255,.60) | Muted headline second line, secondary UI |
| muted | #999999 | Secondary body |
| muted-2 | #666666 | Tertiary / captions |
| border | #767676 | Input/control borders |
| hairline | rgba(255,255,255,.06–.10) | Panel dividers |
| Token | Hex | Role / usage |
|---|---|---|
| blue (brand) | #0099ff | Prompt ring/glow, links, active, focus |
| periwinkle | #6373ff | Publish / primary pill; blue glow rgba(99,115,255,.14) |
| light-blue | rgba(212,226,255,.75) | Text on blue glow |
| green | #00bb88 | Success / status (#00ba89 at 10% wash) |
Rule: chrome is grayscale on true black; electric blue is reserved for the AI prompt, primary actions, links and focus. Green appears only as status.
"GT Walsheim Medium", sans-serif (rounded grotesque, weight 500)Inter, "Inter Variable", sans-serif"Input Mono Regular" / "Input Mono Bold", monospace#ffffff, letter-spacing -0.01px| Role | Size/Line | Weight | Tracking | Family |
|---|---|---|---|---|
| Display (h1) | 54 / 54 | 500 | -2.16px (-4%) | GT Walsheim |
| Section (h2) | 44 / 48.4 | 500 | -1.76px (-4%) | GT Walsheim |
| Subhead (h3) | 18 / 23.4 | 400 | -0.01px | Inter |
| Body / UI | 14 | 400 | -0.01px | Inter |
Patterns: GT Walsheim display with tight -4% tracking; large headlines are two-tone (first line white, continuation rgba(255,255,255,.60)). Inter for everything functional. Mono only for code/labels.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.