# Framer — Marketing Site Design Spec

> 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).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Neutrals (dark theme)
| 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 |

### Accent
| 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.

## 3. Typography Rules

- Display stack: `"GT Walsheim Medium", sans-serif` (rounded grotesque, weight 500)
- Body/UI stack: `Inter, "Inter Variable", sans-serif`
- Mono stack: `"Input Mono Regular" / "Input Mono Bold", monospace`
- Body: 14px / 1.0–1.4 / 400 / `#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.

## 4. Component Stylings

### Buttons
- **Sign up (primary nav)**: bg `#ffffff`, text `#000`, radius 8px, ~30–34px tall, 12–14px, padding `8–10px 10–14px`.
- **Publish (product pill)**: periwinkle/blue fill `#6373ff`, white text, radius 8px, subtle blue glow.
- **Log in / ghost**: transparent, text `rgba(255,255,255,.6)`→white on hover.
- **Prompt suggestion chips**: translucent dark fill `rgba(255,255,255,.08)`, radius 8px, ~34px, muted text.

### AI prompt box (signature)
- Large rounded field (radius ~20px) on near-black, wrapped in a bright blue neon ring/glow (`#0099ff` border + soft outer glow). Contains placeholder, a model selector (mono), and a round send button. It is the page's focal light.

### Cards / panels
- bg `#111111`/`#171717`, hairline `rgba(255,255,255,.06)` or inset ring `rgba(255,255,255,.07) 0 0 0 1px inset`, radius 15px, soft dark drop shadow when floating.

### Editor toolbar (embedded)
- Dark pill bar, radius 15px, `#242424` controls, avatar stack, blue Publish pill — a live slice of the product chrome anchored to the page bottom.

## 5. Layout Principles

- Centered hero, single column; content max ~1000–1100px.
- Nav: transparent over black, logo left, center links (Product/Community/Resources/Enterprise/Pricing), right Log in + white Sign up.
- Generous vertical rhythm; hero = display → subhead → glowing prompt → suggestion chips → "Explore our canvas" scroll cue.
- Floating editor toolbar fixed near the viewport bottom.

## 6. Depth & Elevation

- Radii: controls/cards `8px`, larger buttons & panels `15px`, prompt `~20px`, pills `100px`, small `4–6px`, avatars `50%`.
- Shadows: inset hairline ring `rgba(255,255,255,.07) 0 0 0 1px inset`; floating drops `rgba(0,0,0,.2) 0 26px 41.6px` (and `0 2px 6px`, `0 4px 8px`); signature blue glow `rgba(99,115,255,.14) 0 0 2px 1px` on the prompt/publish.
- Elevation combines a hairline ring with a soft dark drop; the blue glow is the only colored shadow.

## 7. Motion

- The hero prompt ring animates (a travelling blue glow around the border) — the primary motion moment.
- Framer Motion powers entrances and hover states (this is Framer's own library); smooth spring/ease transitions, content reveals on scroll.
- Micro-transitions on color/opacity/transform for hover; the floating toolbar and canvas previews animate subtly.

## 8. Backgrounds, Effects & WebGL

- True-black `#000000` canvas with a deep-blue radial aurora behind the hero (blue → black falloff).
- Signature neon blue glow ring around the AI prompt box (box-shadow + border, animated).
- `backdrop-filter` blur on floating chrome (toolbar, translucent chips).
- No background video; depth is aurora gradient + neon glow, otherwise flat near-black surfaces.

## 9. Do's and Don'ts

### Do
- Use true black `#000000` with a near-black grey ladder (`#111111`/`#171717`/`#242424`) for surfaces.
- Stage a single deep-blue radial aurora + a glowing electric-blue `#0099ff` ring as the hero focal point.
- Set display headlines in GT Walsheim (weight 500) with tight -4% tracking; make long headlines two-tone (white → `rgba(255,255,255,.6)`).
- Use Inter for all UI/body at 14px; mono (Input Mono) only for code/model labels.
- Primary nav CTA is a white pill (`#fff` on black); product primary is the periwinkle/blue Publish pill.
- Elevate with a hairline inset ring + soft dark drop; reserve the blue glow for the prompt/publish.
- Radius 8px controls, 15px panels, ~20px on the prompt.

### Don't
- Don't lift the canvas off true black — surfaces stay in the near-black greys.
- Don't spread blue across large fills; it's a focal glow/accent, not a background.
- Don't set display type in Inter or use a light display weight — GT Walsheim Medium is the headline voice.
- Don't add a second bright accent beyond blue/periwinkle; green is status only.
- Don't replace the hairline-ring + soft-drop elevation with heavy flat shadows.

## 10. Responsive Behavior

- Not captured — Framer canvas site exposes no media-query tokens; captured at desktop 1512px only.
- Nav collapses to a menu on mobile; hero stacks single-column (observed pattern, not verified).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#000000` · Surface `#111111`/`#242424` · Text `#ffffff` · Muted `#999999` · Border `rgba(255,255,255,.06)` · Accent `#0099ff`
- Display: GT Walsheim Medium (500, -4% tracking) · Body: Inter 14px · Mono: Input Mono · Radius: 8px control / 15px panel / 20px prompt
- Primary CTA: white pill `#fff`/black · Publish: `#6373ff` · Prompt: blue `#0099ff` ring + glow `rgba(99,115,255,.14)`

<framer_design_language>
Use the Framer design language: true-black #000000 canvas with a near-black grey ladder (#111111, #171717, #242424, #303030) for surfaces, white text, muted #999999 / rgba(255,255,255,.60). Display headlines in GT Walsheim Medium (weight 500) set tight at -4% tracking, with long headlines rendered two-tone (first line white, continuation rgba(255,255,255,.6)); Inter for all UI and body at 14px (-0.01px tracking); Input Mono for code/model labels. The signature is a cinematic hero: a deep-blue radial aurora behind a large rounded (~20px) AI prompt box wrapped in a glowing electric-blue #0099ff neon ring — the single dramatic light source. Electric blue is rationed to the prompt, links, focus and active; the primary Publish pill is periwinkle #6373ff; green #00bb88 is status only. Nav CTA is a white pill (#fff on black). Elevate with a hairline inset ring rgba(255,255,255,.07) plus a soft dark drop rgba(0,0,0,.2) 0 26px 41.6px, and a blue glow rgba(99,115,255,.14) on the prompt/publish. Radius 8px controls, 15px panels; a dark editor toolbar pill floats at the page bottom. Motion is Framer Motion springs with an animated glow travelling the prompt ring. Feels: dark, cinematic, precise, product-forward. Avoid: lifting surfaces off true black, blue on large fills, Inter or a light weight for display type, a second bright accent beyond blue/periwinkle, or heavy flat shadows replacing the ring+drop.
</framer_design_language>