# Framer Bold 순수 검정 캔버스 위에 GT Walsheim의 크고 촘촘한 디스플레이 타입과 흰색 알약형 CTA, 그리고 프레이머 블루 액센트를 얹은 극적인 다크 프로덕트 마케팅 스타일. - taxonomy: cinematic-dark · dark-native, product-marketing, pure-black, high-contrast, expressive-display-type, gt-walsheim, white-pill-cta, framer-blue, gradient-glow, bold · complexity=medium - page types: landing, marketing, app - best for: 프로덕트·SaaS 랜딩과 런치 페이지, 디자인·크리에이티브 툴 마케팅 사이트, 대담한 히어로가 필요한 스타트업 브랜드, 제품 목업을 앞세운 다크 마케팅 페이지 - avoid for: 따뜻하고 여백 많은 라이프스타일·리테일 브랜드, 인쇄 편집(에디토리얼) 감성의 밝은 사이트, 파스텔·장난스러운 소비자 앱, 텍스트 밀도가 높은 문서·읽기 중심 사이트 - provenance: website (Framer: AI website builder for professional sites) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred, effects=vision-inferred, dark=computed-css, light=vision-inferred ## Design rules # 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. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Framer Bold — theme.css (generated, do not edit) */ :root { --radius: 8px; --radius-selector: 6px; --radius-field: 8px; --font-sans: "Inter", "Inter Variable", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Input Mono", "Input Mono Regular", ui-monospace, "SF Mono", Menlo, monospace; --font-display: "GT Walsheim", "GT Walsheim Pro", "Manrope", "Inter", -apple-system, "system-ui", sans-serif; --spacing: 8px; --shadow: 0px 4px 8px 0px color-mix(in oklab, oklch(0 0 0) 20%, transparent); --ks-display-weight: 500; --ks-display-tracking: -0.04em; --background: oklch(0.99 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.145 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.96 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.51 0 0); --accent: oklch(0.669 0.184 248.8); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.585 0.22 27); --destructive-foreground: oklch(1 0 0); --border: oklch(0.92 0 0); --input: oklch(0.92 0 0); --ring: oklch(0.669 0.184 248.8); --chart-1: oklch(0.60 0.20 248.8); --chart-2: oklch(0.62 0.147 165.1); --chart-3: oklch(0.601 0.237 291.2); --chart-4: oklch(0.674 0.123 38.8); --chart-5: oklch(0.51 0 0); } .dark { --background: oklch(0 0 0); --foreground: oklch(1 0 0); --card: oklch(0.26 0 0); --card-foreground: oklch(1 0 0); --popover: oklch(0.341 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(1 0 0); --primary-foreground: oklch(0 0 0); --secondary: oklch(0.26 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.26 0 0); --muted-foreground: oklch(0.683 0 0); --accent: oklch(0.669 0.184 248.8); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.62 0.23 27); --destructive-foreground: oklch(1 0 0); --border: oklch(0.32 0 0); --input: oklch(0.26 0 0); --ring: oklch(0.669 0.184 248.8); --chart-1: oklch(0.669 0.184 248.8); --chart-2: oklch(0.702 0.147 165.1); --chart-3: oklch(0.642 0.211 294.3); --chart-4: oklch(0.674 0.123 38.8); --chart-5: oklch(0.683 0 0); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

The AI website builder for standout sites

Design, publish, and scale — pure black canvas, oversized type, one blue accent.

Get started for free Framer 3.0 — Everything we shipped →

Canvas

Design with an agent

Bento surfaces step up from the black canvas.

CMS

Run your CMS with an agent

Faint hairlines divide, not heavy shadow.

Publish

Ship in one click

Blue is the accent — reserved for action.

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/framer.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `