Design System Analysis of Framer

A confident dark-canvas builder marketing site that treats the page like a working artboard — pure black surfaces, white display type set in GT Walsheim Medium with aggressive negative tracking, and a single confident blue (#0099ff) reserved for hyperlinks and selection states. The page rhythm is broken by oversized vibrant gradient atmosphere panels that act as living showcase tiles.

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

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

NameWidthKey Changes
Desktop1199pxDefault desktop layout
Tablet810pxCard grids 4-up → 2-up; nav becomes hamburger
Mobile-Lg809pxPricing comparison table becomes per-tier accordion
Mobile-XS98pxSingle-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.