Overview
Framer's design system is a premium dark-mode-first aesthetic that pairs pure black backgrounds with crisp white typography and vivid cyan (#0099ff) accents to establish authority and modernity. The system uses tightly controlled spacing scales, superellipse corner shapes, and layered transparency masks to create depth without traditional elevation shadows. UI components mimic the Framer product itself — dense code-editor panels, floating overlays, and grid-based feature showcases — reinforcing the brand's identity as a professional builder tool.
Signature traits: pure-black dark-mode base, cyan-blue interactive accent, superellipse corner shapes, mask-based gradient fade effects, product-UI-as-marketing-component, monospace code typography.
Colors
| Role | Token | Hex | Usage |
|------|-------|-----|-------|
| Background | --color-background | #000000 | Page backgrounds, section fills |
| Surface | --color-surface | #111111 | Card panels, sidebar backgrounds |
| Surface Raised | --color-surface-raised | #171717 | Elevated inner panels |
| Surface Muted | --color-surface-muted | #242424 | Inactive rows, toolbar chips |
| Text Primary | --color-text-primary | #ffffff | Headings, body copy |
| Text Secondary | --color-text-secondary | #999999 | Captions, labels, placeholders |
| Text Tertiary | --color-text-tertiary | #666666 | Dimmed metadata, sub-labels |
| Border | --color-border | #ffffff1a | Dividers, card outlines |
| Border Strong | --color-border-strong | #141414 | Grid cell separators |
| Accent | --color-accent | #0099ff | CTAs, active states, highlights |
| Accent Lime | --color-accent-lime | #cbff00 | Brand logo mark, special callouts |
| Success | --color-success | #4cd963 | Status badges, positive indicators |
| Overlay Dark | --color-overlay | #0000000d | Hover scrim, subtle tints |
Typography
| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | Inter Tight | clamp(32px,5vw,64px) | 700 | 1.2em | 0em | Hero headlines | | Heading | Geist | 24px | 600 | 1.2em | 0em | Section titles | | Body | Inter Variable | 16px | 400 | 1.2em | -0.01px | Paragraph text | | Caption | Inter | 12px | 500 | 1.2em | 0em | Labels, metadata | | Mono | JetBrains Mono | 12px | 500 | 1.2em | 0em | Code, data, editor UI |
Layout
| Token | Value | Context | |-------|-------|---------| | Spacing XS | 5px | Icon-to-label gaps, badge padding | | Spacing SM | 10px | Component internal padding | | Spacing MD | 20px | Section side padding, card gaps | | Spacing LG | 40px | Between component groups | | Spacing XL | 60px | Between major sections | | Spacing 2XL | 120px | Hero top padding, large section gaps | | Spacing 3XL | 160px | Footer and bottom-of-section padding | | Max Width | 1200px | Primary content container | | Max Width Wide | 1500px | Full-bleed hero images | | Nav Height | 64px | Fixed navigation bar |
Responsive strategy: Three breakpoints are observed — desktop (≥1200px), tablet (810px–1199.98px), and mobile (≤809.98px). At tablet, hero sections reduce top padding from 120px to 80px and content widths narrow. At mobile, aspect ratios shift, gradient fade overlays narrow, and navigation collapses to a hamburger/drawer pattern. Utility classes like .hidden-qc3obw, .hidden-1cmadv5, and .hidden-1ovtzaf enforce per-breakpoint visibility toggling.
Elevation & Depth
| Level | CSS Value | Usage |
|-------|-----------|-------|
| sm | box-shadow: 0 1px 2px #0000001a | Keyboard key badges, small chip elements |
| md | box-shadow: 0 10px 20px #0000000d | Tooltip cards, floating annotation overlays |
| lg | box-shadow: 0 1px 2px #0099ff26, 0 2px 4px #09f3 | Accent CTA buttons (cyan glow effect) |
| mask-fade | mask: linear-gradient(#000 55%, #0000 100%) | Bottom-fade on product UI screenshots |
| side-fade | mask: linear-gradient(270deg, #0000 0%, #000 57%) | Horizontal fade on wide panel content |
Shapes
| Token | Value | Applied To |
|-------|-------|-----------|
| none | 0px | Raw layout containers, full-bleed sections |
| sm | 5px | Status badges, small tag pills |
| md | 8px | Toolbar buttons, chip rows, icon containers |
| lg | 15px | Feature cards, panel inner containers |
| xl | 25px | Major feature bento cards, modal panels |
| 2xl | 30px | Large hero pill buttons |
| full | 9999px | Avatar circles, progress bars, toggle pills |
| superellipse | corner-shape: superellipse(1.5) | Premium card containers (requires CSS support) |
Components
Navigation Bar: Fixed 64px tall, z-index: 10, transparent over hero with full-width stretch. Contains logo (16×24px grid mark), primary nav links in Geist 600, and CTA buttons. Collapses to hamburger at ≤809.98px with a full-viewport-height drawer.
CTA Buttons (Primary): background: #09f, border-radius: 8px, height: 30px, padding: 0 10px, Geist 600, with box-shadow: 0 1px 2px #0099ff26, 0 2px 4px #09f3 for cyan glow. Secondary buttons use background: #242424 with no shadow.
Bento Feature Cards: border: 1px solid #ffffff1a, border-radius: 25px, background: #000, padding: 10px, height: 640px. Inner panels use background: #171717, border-radius: 15px.
Code Editor UI Panels: background: #050505 or #111, border-right: 1px solid #ffffff12, row height 30px, item padding 0 10px, border-radius 8px per row. File tree uses 26px left indent for nested items.
Tooltip Overlays: border: 1px solid #ffffff1a, border-radius: 10px, background: #111, backdrop-filter: blur(5px), padding: 15px, width: 190–200px, box-shadow: 0 10px 20px #0000000d.
Progress Bars: background: #ffffff14, border-radius: 50px, height: 8px. Fill uses absolute positioning with percentage width.
Gradient Masks: Sections fade out using CSS mask: linear-gradient(#0000 0%, #000 100%) both vertically (bottom-fade for screenshots) and horizontally (side-fade for scrolling ticker rows).
Ticker / Logo Rows: Horizontal overflow clip, flex row, gap: 10px, masked with linear-gradient(270deg, #0000 0%, #000 28%) on each side for seamless loop effect.
Do's and Don'ts
| Do ✓ | Don't ✗ |
|------|---------|
| Use #000000 as the true page background with #111111 for surface panels | Use white or light backgrounds — this system is dark-mode only |
| Apply #0099ff accent exclusively for interactive, actionable elements | Use the cyan accent decoratively or for non-interactive text blocks |
| Use border-radius: 8px for all small UI controls (buttons, chips, rows) | Mix arbitrary border-radius values outside the defined scale |
| Use mask: linear-gradient(...) to fade content edges rather than hard clips | Abruptly clip content — always fade with masks for polished transitions |
| Set borders to 1px solid #ffffff1a for subtle card outlines | Use opaque borders or high-contrast outlines that break the dark aesthetic |
| Use Inter Variable or Geist for all UI text; JetBrains Mono for code | Mix display fonts (EB Garamond, VT323) into functional UI — they are accent/display only |
| Maintain 64px nav height and 1200px max-width container consistently | Exceed 1200px for text content containers or break the centered layout rhythm |
| Apply superellipse(1.5) corner shape with 15–25px radius on feature cards | Use circular or pill shapes on rectangular content cards |
Agent Prompt Guide
You are working within the Framer design system. Key constraints:
- —Colors: background #000000, surface #111111, surface-raised #171717, surface-muted #242424, text-primary #ffffff, text-secondary #999999, border #ffffff1a, accent #0099ff, accent-lime #cbff00
- —Typography: "Inter Tight" 700 for display/hero headlines, "Geist" 600 for headings, "Inter Variable" 400 for body, "Inter" 500 for captions/labels, "JetBrains Mono" 500 for code
- —Spacing scale only: 5px / 10px / 20px / 40px / 60px / 120px / 160px — no arbitrary values
- —Border radius scale: 0px / 5px / 8px / 15px / 25px / 9999px — prefer 8px for controls, 15–25px for cards
- —Buttons: primary uses #0099ff bg + cyan box-shadow glow; secondary uses #242424 bg; both 30px height, 8px radius
- —Always use mask: linear-gradient() to fade content edges — never hard-clip
- —Navigation: fixed 64px height, z-index 10, max-width 1200px centered
- —Dark mode only — never use light backgrounds or light surfaces
- —Borders: always 1px solid #ffffff1a (subtle) or #141414 (structural grid lines)
- —Elevation via box-shadow is minimal; prefer layered backgrounds and opacity for depth