# Framer — DESIGN.md

A pure black canvas where dark product mockups, hairline borders and one bright blue accent carry the page.

Independent reference guide from headless-browser captures and computed styles. Not an official brand guide. Values describe the captured desktop marketing pages; responsive rules below are implementation recommendations.

Captured: 2026-09-27

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **GT Walsheim Medium**. A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback.

## Marketing — Dark, product-led

### Observed palette
- Canvas: `#000000`
- Card surface: `#111111`
- Raised surface: `#171717`
- Primary text: `#ffffff`
- Secondary text: `rgba(255, 255, 255, 0.6)`
- Muted UI text: `#999999`
- Accent blue: `#0099ff`
- Secondary button fill: `rgba(255, 255, 255, 0.1)`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero and closing heading (GT Walsheim Medium) | 54px / 54px | 500 | −2.16px |
| Section heading (GT Walsheim Medium) | 44px / 48.4px | 500 | −1.76px |
| Stat figure (99.99%) | 54px / 43.2px | 500 | −2.16px |
| Card title and body (Inter Variable) | 18px / 24.3px | 400 | −0.2px |
| Table and feature description (Inter Variable) | 14px / 19.6px | 400 | −0.1px |
| Mockup UI text (Inter) | 13px / 20.8px | 500 | normal |
| Button label | not measured | not measured | not measured |

### Layout & hierarchy
- Content sits in a 1200px column centred in the 1440px viewport (120px side margins); the headline, logo strip and cards all align to it.
- The navigation bar (logo, Platform, Solutions, Resources, Enterprise, Pricing, Log in, Sign up) is pinned to the top of the viewport and sits directly on the black page with no visible band or border.
- Section headings are left-aligned with a small action button aligned right on the same row; about 240px of empty black separates the end of one section from the next heading.
- Home and CMS end with the same centred 'Your next idea starts here' prompt box, suggestion chips and a six-column footer.

### Components & behavior
- Buttons: 34px high, 8px radius, 10px / 14px padding; the primary has a white fill with a dark label, the secondary a rgba(255, 255, 255, 0.1) fill with a white label; the Pro plan button is filled #0099ff.
- Feature cards: a dark rounded card holding a product mockup, with a title, a 60% white description and a 'Start with Agents →' link; the first card has an agent-chat panel beside it (prompt, 'Thinking…', a changes list and a follow-up box).
- Bento grids: cells separated by hairline borders inside one rounded outline, each labelled at the bottom left, some with an arrow link.
- Pricing: plan columns in one bordered row with a credits dropdown and tick list; a comparison table with a sticky plan header row, ticks and crosses; the FAQ shows every answer open.

## Scope
The product interface was not captured: this collection covers logged-out marketing pages only, so there is no product context.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and page structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, stack multi-column sections on small screens and let comparison tables scroll horizontally.
- Recommended: give every CTA a real destination and implement hover, focus and disabled states; the capture shows resting states only.
- Use the observed font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Page inventory
- Homepage: A left-aligned two-line headline with white and translucent buttons sits above a full-width video frame of a glowing 'Ask Framer…' prompt, followed by a two-row logo strip. Four large feature cards each pair a product mockup with a short description, with an agent-chat panel to the right of the first and a terminal-style 'framer-agent' window beside the last, followed by a bento grid of platform features (Performance, CMS, SEO, Hosting, Analytics, A/B Testing), a horizontally scrolling site showcase, customer story cards and an embedded community feed. Each section heading is left-aligned with a small grey action button on the right, and the page closes on a centred prompt box with suggestion chips above a six-column footer. Screenshot: `captures/framer-marketing-home.jpg`.
- Pricing: Four plans (Free, Basic, Pro, Enterprise) share one bordered row of columns, each with a price, a credits dropdown, a checklist and a full-width button; only Pro's button is filled in blue, and a yearly billing toggle sits right of the headline. A logo strip leads into a comparison table for Basic, Pro and Enterprise with a sticky plan header, grouped under Agents, Live collaboration and Add-ons, using ticks, crosses and short values. The FAQ is a narrow centred column with every answer shown open, not collapsed. Screenshot: `captures/framer-marketing-pricing.jpg`.
- CMS: The hero puts a full CMS editor mockup (collections sidebar, article table with toggles, agent panel) directly under the headline. Five stacked cards each show one agent task, from creating a collection to bulk edits, with the prompt and its result shown in an agent panel beside the first card. Hairline-divided grids then cover team features, detail features and a three-row icon list, before the same closing prompt box and footer as the homepage. Screenshot: `captures/framer-marketing-cms.jpg`.