# Framer Bold

## Overview
A dark-native, bold product-marketing aesthetic extracted from framer.com. Pure black dominates the canvas, pure white carries the type, and contrast is pushed to the extreme. Hierarchy is built from oversized GT Walsheim display type with signature ultra-tight tracking, white pill CTAs, and a single restrained Framer-blue accent. Energy comes from large product mockups floating over low-opacity gradient glows — not from decoration.

## Colors & Roles
The canvas is pure black (`background` oklch 0 0 0, measured dominant weight) with pure white `foreground`. Surfaces step up through neutral grays — `card` #242424 (oklch 0.26), `popover` #383838 (oklch 0.341) — and divide by a faint white 6% hairline, never by heavy shadow. The signature move: `primary` is a **white pill** on black (`primary` white, `primary-foreground` black) — the Get started / Sign up CTAs. A single Framer-blue `accent`/`ring` (oklch 0.669 0.184 248.8, #0099ff) is reserved for editor UI, borders, focus, and emphasis. Green (#00bb88), purple (#9869fd), and orange live only as chart/gradient signals. Light mode is synthesized: same blue brand on white, primary inverted to a black pill.

## Typography Rules
Dual family. Display and headings use **GT Walsheim Medium** (measured H1 54px/500/-2.16px, H2 44px/500/-1.76px — both ≈ -0.04em, an aggressively tight track that is the style's fingerprint). Body, sub-heads, and UI use **Inter Variable** (h3 18px/400, body 16/14px). GT Walsheim is commercial; the Google-Fonts fallback is **Manrope** (closest geometric grotesque), body stays Inter. Weights are only 400 (body) and 500 (display/headings/CTA). Mono is Input Mono for code/numeric badges only. Scale ratio ≈ 1.2.

## Layout Principles
Max content width 1200px on a 12-column grid with generous gutters. The hero is a left-aligned large display title above a full-width product-UI mockup (the editor canvas). Feature sections alternate left-copy / right-UI or full-bleed mockups, often in bento-style cards. Vertical rhythm is large: section gaps `clamp(6rem, 12vw, 10rem)`. Whitespace on the black canvas reads as dramatic tension.

## Depth & Elevation
Primary elevation is the neutral background step (background → card → popover) plus a faint white hairline. Soft drop shadows (measured `rgba(0,0,0,0.2) 0 4px 8px` up to `0 26px 41.6px`) are reserved for genuinely floating product mockups, cards, and panels — the pure-black canvas itself stays flat and shadowless.

## Shapes
Cards and inputs are 8px radius. The signature CTA is a **fully round pill** (border-radius 100px). Small controls ~6px. No sharp-corner rule — the mood is rounded-modern, not brutalist.

## Component Stylings
- **Button**: primary = white pill (radius 100px, black text, 16px/500, padding ~12px 20px). Hover = subtle scale 1.02 / translateY(-1px), 150–250ms. Focus = 2px blue ring. Secondary = dark gray surface (#242424/80%) with white text. Accent variant = Framer-blue fill for app actions (Publish).
- **Card**: `card` background (#242424), radius 8px, padding 24–32px; used in bento feature grids, floated with a soft shadow.
- **Input**: transparent or dark-gray fill, faint hairline border, radius 8px, padding ~11px 14px; focus goes to a blue ring.
- **Nav**: sticky, backdrop-blurred translucent black. Framer wordmark left, text links center (white 60% → hover 100%), `Log in` text + white `Sign up` pill right. Faint bottom hairline.
- **Badge**: pill or 6px, 12px text; status colors tint the chart hues; brand blue for New/version emphasis only.

## Motion
Expressive but smooth. Scroll-in = opacity fade + 12–20px slide; product mockups get subtle parallax/autoplay; pill buttons get a micro scale/background shift on hover. Avoid heavy bounce and spring overshoot, but give motion real presence — this is Framer.

## Do's and Don'ts
**Do:** keep pure black canonical and derive light from the same blue; set big display titles in GT Walsheim/Manrope at -0.04em, weight 500; make the primary CTA a white pill; reserve blue for accent/focus; add low-opacity blue/green/purple glow behind mockups.
**Don't:** flood the screen with brand blue; loosen the display tracking or use light weights; drop heavy shadows on the black canvas; use pastel/low-contrast palettes; treat a bright light background as canonical.

## Responsive Behavior
The 12-column grid collapses to a single column on mobile; display type scales via `clamp()` (down to ~2.5rem). The sticky nav condenses; product mockups scale full-bleed. The white-pill CTA and tight tracking hold at every breakpoint.

## Agent Prompt Guide
> Build this in the 'Framer Bold' style: pure black canvas (oklch 0 0 0), pure white text, oversized GT Walsheim (fallback Manrope) display type tracked to -0.04em at weight 500, white pill primary CTA (radius 100px, black text), a single Framer-blue accent (#0099ff / oklch 0.669 0.184 248.8) for editor UI/borders/focus, gray surface steps (#242424→#383838) with faint white hairlines, soft shadows only on floating product mockups, and low-opacity blue/green/purple radial glows for energy.

## Known Gaps / Confidence
Colors, typography sizes/weights, and radii are `computed-css` (Playwright walk of framer.com). Color **role** assignment (which measured color is primary vs accent vs surface), taxonomy, motion, layout, and effects are `vision-inferred` from the screenshots. The dark set is the real extracted site (`computed-css`); the **light set is synthesized** (`vision-inferred`) — Framer ships no light mode. GT Walsheim is a commercial typeface; **Manrope** is the practical Google-Fonts stand-in and will not match it exactly. The measured `#0000ee` blues in text samples are unstyled-anchor artifacts, not the brand — the true brand blue is the editor/#0099ff family confirmed by screenshot.