Framer Design System Reference

No-Code & Developer Platform

Framer Design System

Bold, futuristic, and unapologetically digital — a premium minimalist aesthetic with electric blue accents designed for creators and developers.

12 Color tokens 8 Type styles 4 Shadow levels 7 Radius tokens Inter & GT Walsheim

Foundation

Color Tokens

The complete color palette for Framer, featuring primary blues, semantic status colors, and a sophisticated neutral scale with semi-transparent overlays.

Primary CTA Blue

#0000EE

Buttons · Links · Active states · Primary accent

Bright Accent Blue

#0099FF

Hover states · Highlights · Secondary emphasis

Black Primary

#000000

Background · Primary text · Base surface

White Primary

#FFFFFF

Text on dark · Secondary text · Surfaces

Charcoal Dark

#242424

Card backgrounds · Elevated surfaces · Panels

Charcoal Medium

#303030

Borders · Dividers · Secondary containers

Gray Tertiary

#666666

Input borders · Subtle dividers · Borders

Gray Quaternary

#999999

Disabled text · Tertiary text · Muted content

Success Green

#4CD963

Success states · Confirmations · Positive actions

Warning Lime

#CBFF00

Warning states · Caution · Alerts

Typography

Type Scale

GT Walsheim for authoritative display, Inter for accessible body and UI. A three-tier hierarchy drives clarity and visual distinction.

Display GT Walsheim Medium Headings · Titles · Premium messaging

Body / UI Inter Body text · Buttons · Form fields

Code JetBrains Mono Code blocks · Technical content

Display XL Hero title 160px · 500 · 1.0

Display Build the future 74px · 500 · 1.0

H1 Section heading 54px · 500 · 1.0

H2 Subsection title 44px · 500 · 1.09

H3 Card heading 24px · 400 · 1.3

Body The quick brown fox jumps over the lazy dog 15px · 400 · 1.35

Body Small Secondary text content 14px · 400 · 1.0

Button Click me 16px · 500 · 1.0

Layout

Spacing & Shapes

4px base grid throughout. Border radii range from sharp corners to fully rounded pills, matching component context and visual intent.

Spacing Scale

4px xs

8px sm

12px sm+

16px md

24px lg

32px xl

60px 2xl

100px 3xl

Border Radius

None 0px

SM 4px

MD 6px

LG 8px

XL 10px

2XL 15px

Pill 24px

Shadows

Level 0 Flat · no elevation

Level 1 Buttons · cards · interactive

Level 2 Hovered buttons · dropdowns

Level 3 Modals · overlays · top-level

Border Widths

Thin 1px

Medium 2px

Opacity

Full 100%

Strong 66%

Medium 60%

Disabled 50%

Light 30%

Subtle 20%

Z-index / Layering

Base 1

Elevated 2

Interactive 3

Dropdown 4

Sticky 5

Modal 6

Modal Content 8

Toast 9

Elevation

Depth & Surfaces

Black-and-white foundation with carefully layered grays. Surfaces use charcoal dark for cards, charcoal medium for borders, creating visual hierarchy through subtle depth.

Page Background

Base layer — the dominant background color

L0 · #000000

Card Surface

Elevated containers, cards, and panel backgrounds

L1 · #242424

Border & Divider

Borders, dividers, and secondary accents

L2 · #303030

Base #000000

Card #242424

Border #303030

White #FFFFFF

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, typography, shadows, and interaction states.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #0000EE bg · #FFFFFF text · 8px radius · 12/20px padding · 40px height · box-shadow. Secondary: rgba(34,34,34,0.8) bg · #000000 text. Ghost: #FFFFFF bg · #000000 text · 8px radius. All buttons feature consistent shadows and hover states.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · 2px #666666 border · 10px radius · 40px height · 15px text. Focus: 1px #0000EE border · #0099FF inset shadow (2px).

Card

Content container — elevated surface with shadow

.card

Feature name

A compelling description of this feature or product showcase.

#242424 bg · 1px #303030 border · 8px radius · L1 shadow. Title: 14px/500/#FFFFFF. Body: 13px/#999999. CTA: primary blue button with shadow.

Badges

Status indicators — Success, Warning, Info

.badge

Success Error Info

12px/500 · 4/8px padding · 4px radius. Success: #4CD963. Error: #CF222E. Info: #0000EE.

Guidelines

Do's & Don'ts

Principles for consistent application of the Framer design language — bold, futuristic, and developer-first.

Do — Embrace

Use primary blue (#0000EE) for all primary CTAs and interactive elements
Maintain high contrast — black text on white or white on black
Apply generous spacing (24px–60px) between major sections
Use GT Walsheim for display and Inter for body/UI — never mix serif
Round button corners at 8px consistently across all components
Apply the standard shadow (rgba(0,0,0,0.2) 0px 2px 6px 0px) to interactive elements

Don't — Avoid

Use bright blue for non-interactive elements — reserved for buttons and links only
Mix opacity levels carelessly; stick to 20%, 30%, 50%, 60%, 66%, or 98%
Center-align long body text blocks; reserve center alignment for titles only
Use fonts outside the core three (GT Walsheim, Inter, JetBrains Mono)
Nest more than two levels of containers without scaling padding proportionally
Create clickable elements smaller than 36px × 36px (44px × 44px preferred)

framer.com

Preview