Dark Mode

# Design System
Inspired by Framer

A complete visual catalog of design tokens, components, and patterns extracted from Framer's marketing site and documented in DESIGN.md.

Explore Tokens View Components

## Color Palette

Every color from Framer's dark-first identity — pure black void, electric blue accent, and frosted white surfaces.

### Primary

Void Black
#000000
Primary background, void canvas
Pure White
#ffffff
Primary text, button fill
Framer Blue
#0099ff
Accent — links, borders, focus rings

### Secondary & Accent

Muted Silver
#a6a6a6
Secondary text, descriptions
Near Black
#090909
Elevated dark surface, card background

### Surface & Background

Frosted White
rgba(255,255,255,0.1)
Glass-effect buttons, translucent surfaces
Ghost White
rgba(255,255,255,0.6)
Tertiary text, placeholders

### Semantic

Blue Glow
rgba(0,153,255,0.15)
Focus ring shadow, blue halo
Default Link Blue
#0000ee
Browser default links (rare)

## Typography Scale

GT Walsheim for compressed display headlines, Inter for refined body and UI text with extensive OpenType features.

Display Hero — 110px / 500 / 0.85 / -5.5px
Build better sites
GT Walsheim Framer Medium (shown in Inter fallback) — extreme negative tracking, compressed impact
Section Display — 85px / 500 / 0.95 / -4.25px
Scale without limits
GT Walsheim Medium (shown in Inter fallback) — OpenType: ss02, tnum
Section Heading — 62px / 500 / 1.00 / -3.1px
Create, collaborate
GT Walsheim Medium — OpenType: ss02
Feature Heading — 32px / 500 / 1.13 / -1px
Powering ambitious sites
GT Walsheim Medium — tightest of the smaller headings
Card Title — 24px / 400 / 1.30 / -0.01px
Interactive components that respond
Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07
Feature Title — 22px / 700 / 1.20 / -0.8px
Visual canvas meets code precision
Inter — OpenType: cv05
Body Large — 18px / 400 / 1.30 / -0.01px
Framer brings together the power of a visual canvas with the flexibility of code to create stunning, production-ready websites.
Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07
Body — 15px / 400 / 1.30 / -0.01px
Design and publish performant sites. Framer handles layout, interactions, and responsive behavior so you can focus on creativity.
Inter Variable — OpenType: cv11
Caption — 14px / 400 / 1.40
Responsive breakpoints with automatic layout adjustments across all devices.
Inter Variable — OpenType: cv01, cv06, cv09, cv11, ss03, ss07
Label — 13px / 500 / 1.60
Component interaction settings
Inter — OpenType: cv06, cv11, ss03
Micro Code — 10.4px / 400 / 1.60
npx framer-motion@latest
Azeret Mono — OpenType: cv06, cv11, ss03

## Button Variants

All pill-shaped — no sharp corners on interactive elements. 40px–100px radius range.

Start for Free Primary / White Pill
Learn More Frosted / Glass
Ghost / Outline
Blue / Accent
Sign Up Small / Nav CTA

## Card Examples

Dark surface cards with Framer Blue ring borders and multi-layer floating shadows.

Visual Canvas

### Design Freedom

Build layouts with a true visual editor that outputs clean, production-ready code. Drag, resize, and animate with precision.

Interactive

### Smart Components

Create reusable components with built-in variants, interactions, and responsive overrides that scale across your project.

Performance

### Lightning Fast

Sites built on Framer's infrastructure load instantly with optimized assets, code splitting, and edge delivery.

## Form Elements

Dark inputs with Framer Blue focus rings and minimal chrome.

Full Name
Email Address (Focus State)
Project URL (Error State) Please enter a valid URL
Description

## Spacing Scale

8px base unit system with fine-grained sub-8px values for micro-adjustments.

2px
4px
6px
8px
10px
12px
15px
20px
30px
35px

## Border Radius Scale

From nearly-squared micro edges to full pill shapes — radius grows with element importance.

1px
Micro
5px
Thumbnails
8px
Components
12px
Cards
15px
Large cards
20px
Containers
40px
Nav pills
100px
Full pill

## Elevation & Depth

Inverted elevation system — blue ring shadows for containment, white edge highlights for floating elements.

Level 0 — Flat
No shadow. Pure black surface. The void baseline that everything else rises from.
Level 1 — Ring
Framer Blue glow ring (rgba(0,153,255,0.15) 1px). Card borders, interactive outlines.
Level 2 — Contained
Near-black ring (rgb(9,9,9) 2px). Subtle containment on dark surfaces.
Level 3 — Floating
White top-edge highlight + deep ambient shadow (30px spread). Elevated cards, modals, dropdowns.