01 — Color Palette

## Palette

Brand & Accent
Pure White
#ffffff
Brand primary — every CTA pill, every display headline.
Sky Blue
#0099ff
Single chromatic accent — links, focus rings, selection.
Surface
Canvas
#090909
Default page background — near-black with faint warmth.
Surface 1
#141414
Pricing cards, secondary buttons, mockup tiles.
Surface 2
#1c1c1c
Featured pricing card, selected pricing tab.
Hairline
#262626
1px borders on input groups, table dividers.
Hairline Soft
#1a1a1a
FAQ row separators and footer column rules.
Inverse Canvas
#ffffff
Surface of pill CTAs and a few light-mode template thumbnails.
Text
Ink
#ffffff
All headline and emphasized body type.
Ink Muted
#999999
Secondary type — meta, footer, deselected tabs.
Brand Gradient (signature)
Gradient Magenta
#d44df0
Spotlight card variant.
Gradient Violet
#6a4cf5
Spotlight card variant — most common.
Gradient Orange
#ff7a3d
Sunset wash spotlight card.
Gradient Coral
#ff5577
Coral / pink spotlight card variant.
Semantic
Success Green
#22c55e
Pricing comparison checkmark glyph.
02 — Typography Scale

## Typography

display-xxl110px · 500 · 0.85 · -5.5px · GT Walsheim
Build better sites
display-xl85px · 500 · 0.95 · -4.25px · GT Walsheim
Never start from scratch
display-lg62px · 500 · 1.00 · -3.1px · GT Walsheim
Scale without switching tools
display-md32px · 500 · 1.13 · -1.0px · GT Walsheim
Powering ambitious teams worldwide
headline22px · 700 · 1.20 · -0.8px · Inter
Pricing tier headlines
subhead24px · 400 · 1.30 · -0.01px · Inter Variable
Lead body next to display headlines
body-lg18px · 400 · 1.30 · -0.18px · Inter Variable
Hero subhead, lead paragraphs
body15px · 400 · 1.30 · -0.15px · Inter Variable
Default body — Framer leans hard into Inter's character variants for a bespoke voice.
body-sm14px · 500 · 1.40 · -0.14px · Inter Variable
Pricing comparison rows, dense data
caption13px · 500 · 1.20 · -0.13px · Inter Variable
Eyebrow caption
micro12px · 400 · 1.20 · -0.12px · Inter Variable
Disclaimer / footnote micro text
button14px · 500 · 1.0 · -0.14px · Inter Variable
Get started for free
03 — Button Variants

## Buttons

button-primary
button-secondary
button-translucent
button-icon-circular
button-primary-pressed
pricing-tab-default + pricing-tab-selected
04 — Gradient Spotlight Cards (signature)

## Spotlight

Each card is an oversized atmospheric tile dropped into otherwise monochrome card grids. They are individual cards, not section backgrounds. Use one or two per long page; three is a moodboard.

gradient-spotlight-card

### Workshop

Ship the latest courses and design tutorials, drawn from a community of designers, weekly newsletters, talks and more.

gradient-spotlight-card-magenta

### AI Translate

Let AI translate your content into 30+ languages.

gradient-spotlight-card-orange

### AI Plugins

Build any tool right inside Framer. Animate a number, generate a hero — Framer supports custom plugins.

gradient-spotlight-card · coral

### Get help from hand-picked experts

Designers and developers ready to help you ship.

05 — Cards & Containers

## Cards

pricing-card · Basic
Basic
$0

- Free with Framer branding
- Up to 1,000 visits
- Community support

pricing-card-featured · Pro
Pro
$XX

- Custom domain
- Up to 10,000 visits
- Priority support

pricing-card · Business
Business
$XX

- 5 staff seats
- Up to 100,000 visits
- Site analytics

template-card
Marketplace template
product-mockup-tile
Built-with-Framer site
comparison-checkmark
✓Custom domain
✓SEO settings
✓Site analytics
faq-row
What is included in Pro?
All site features, custom domains, advanced analytics, code components, and priority support.
06 — Form Elements

## Forms

text-input · default
text-input · focused
text-input · disabled
textarea
07 — Spacing Scale

## Spacing

hair · 1px
xxs · 4px
xs · 8px
sm · 12px
md · 15px
lg · 20px
xl · 30px
xxl · 40px
section · 96px
08 — Border Radius Scale

## Radius

xs · 4px
sm · 6px
md · 10px
lg · 15px
xl · 20px
xxl · 30px
pill · 100px
full · 9999px
09 — Elevation & Depth

## Elevation

Level 0 — flat
Level 1 — charcoal
Level 2 — light-edge
Level 3 — selected ring
10 — Responsive Behavior

## Responsive

Name | Width | Key Changes
--- | --- | ---
Desktop | 1199px | Default desktop layout
Tablet | 810px | Card grids 4-up → 2-up; nav becomes hamburger
Mobile-Lg | 809px | Pricing comparison table becomes per-tier accordion
Mobile-XS | 98px | Single-column everything

375
810
1199
1440
Touch Targets

- Pill buttons maintain ≥40px tap height — exceeds WCAG AA.
- Circular icon buttons grow from 40px to 44px on touch viewports.
- Pricing-tab pills hold ≥40px tap height; horizontal-scroll below 810px.

Collapsing Strategy

- Nav: links collapse to hamburger below 810px; primary pill stays.
- Card grids: 2-up on desktop → 1-up on mobile.
- Pricing comparison table: per-tier accordion below 810px.
- Display type scales 110px → 62px → 32px while preserving negative tracking.