# DESIGN.md · Framer (WR-007)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web
- Color theme: Monochrome dark · Layout pattern: Stacked product hero · Mood: Futuristic, motion-heavy
- License / terms: Screenshots: fair-use reference captures; site content © Framer
- Industry: SaaS
- Patterns: Product-as-hero, Pricing table, Sign-up entry

Dark, motion-heavy site; pricing with site-plan cards; sign-up entry redirects to a minimal login/sign-up page.

### Analysis (ours)
Framer (our capture) is pure black (#000000, ESTIMATED) with a left-aligned two-line white headline, a white ‘Get started for free’ button beside a dark ‘Download app’, and a ‘New: Framer MCP →’ link right-aligned on the same line. Instead of a static screenshot, the hero is a large dark editor frame with a glowing electric-blue canvas outline and an agent panel showing a prompt, a design plan and its ‘Thought’ steps, so the demo reads as live. Pricing is a four-column bordered table on black with a yearly-billing toggle, each plan paired with a one-line audience (‘Creative personal sites’, ‘Mission critical sites’), a credits dropdown per plan, and the Pro button as the only blue fill. In our capture the Pro price had not rendered (only ‘per month’ shows), a reminder to server-render prices. Sign-up leaves the dark theme entirely for a small centered white card: Google first, an ‘OR’ divider, a work-email field and Continue. Lesson: a one-line audience per plan helps people choose faster than a feature list; pitfall: the cookie banner covers the lower-left of both hero and pricing in our captures.

### Best practices (ours)
- Pair every plan name with a one-line audience description.
- Show the product working (an agent panel mid-task) rather than a static screenshot.
- Server-render prices so they never appear blank while scripts load.
- Keep cookie banners compact and away from primary content and buttons.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#000000` ~42%
- `#FFFFFF` ~34%
- `#01102C` ~3%
- `#23304C` ~2%
- `#5B768C` ~1%
- `#E4E5E6` ~1%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Top nav
- Glow hero
- Pricing cards
- Login card

## Layout rules
- Observed layout pattern: **Stacked product hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://www.framer.com/) → Pricing (https://www.framer.com/pricing) → Sign-up entry (https://framer.com/login)

## Do’s and don’ts
- Do: Use a near-black canvas with high-contrast white text and at most one accent.
- Don’t: Don’t add multiple saturated accents or light-mode shadows.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.framer.com
- Capture: https://www.framer.com/
- Capture: https://www.framer.com/pricing
- Capture: https://framer.com/login
- Library entry: https://design-library-byt.pages.dev/entry/WR-007