Framer Design System
Dark · Generated 15/04/2026 · 7 colors · 52 type tokens · 23 spacing steps · 5 breakpoints
v1.0.0
Color Palette
Background Colors
Black
#000000
White
#FFFFFF
Blue 2
#0099FF
Light Gray
#EEEEEE
Text Colors
Blue (link)
#0000EE
Dark Gray
#222222
Fill Color
Blue 3
#0055FF
Framer's extracted palette is intentionally minimal — only 7 tokens. The black/white dichromatic base with blue accent (`#0099FF` / `#0055FF`) represents Framer's high-contrast, monochromatic design language. No border colors were detected as separate tokens; borders are expressed as rgba(0,0,0,0.x) overlays in code.
Typography
Primary · GT Walsheim / Inter
GT Walsheim
Build websites that feel alive. Framer makes it easy to design and publish stunning sites.
Regular · 400 Medium · 500
Heritage · Times (legacy base token)
Times Serif
The extracted --font-family-base: Times token is a legacy artifact — the actual Framer UI runs on GT Walsheim with Inter as fallback.
Base token (legacy)
Build
font-size-84px · 84px · Medium · letter-spacing: −4.2px · line-height: 71.4px
Framer
font-size-62px · 62px · Medium · letter-spacing: −3.1px · line-height: 52.8px
No-code sites
font-size-6xl · 48px · Medium · letter-spacing: −1.8px · line-height: ~44px
Design with ease
font-size-5xl · 24px · Medium · letter-spacing: −0.5px · line-height: 28px
Framer gives designers the power to build production-grade websites without writing code.
font-size-3xl · 18px · Regular · letter-spacing: −0.25px · line-height: 28px
Start for free. Publish live sites. No credit card required.
font-size-lg · 14px · Regular · letter-spacing: −0.13px · line-height: 21.6px
Terms of Service · Privacy Policy · Cookie Preferences
font-size-sm · 12px · Regular · letter-spacing: +0.21px (only positive token) · line-height: 19.5px
Line Heights
tight
6.4px
snug
7px
normal
12px
relaxed
13px
loose
14px
lh-6
15px
lh-7
16.8px
lh-8
18.2px
lh-9
19.5px
lh-10
21.6px
lh-11
23.4px
lh-12
28px
lh-13
30px
lh-14
52.8px
lh-15
62px
lh-16
71.4px
Letter Spacing — 14 tokens (all negative except last)
Display
letter-spacing-tight
−4.2px · 84px hero display text
Heading
letter-spacing-wide
−1.8px · large headings 48px
Section
letter-spacing-wider
−0.5px · section headings 24px
CAPTION TEXT
letter-spacing-ls-14
+0.21px · only positive — captions, labels
Spacing
Spacing Scale
23 tokens — 1px → 100px
1
2
2.5
3
4
4.4
5
6
8
10
11
12
14
15
20
30
38
40
47
60
64
80
100
Borders
Border Radii
SM
4px
MD
8px
LG
10px
XL
12px
2XL
14px
Full
15px
R7
20px
R8
40px
R9
50px
R10
50%
R11
100px
R12
100%
Border Width
Hairline
2px · the only border width — used on focused inputs and outlines
Framer's sole border token is --border-width-hairline: 2px — notably 2px rather than the 1px common in most design systems. Thinner borders throughout the UI are handled via rgba(255,255,255,0.x) overlay values rather than as tokens.
Shadows / Elevation
Shadow Tokens
2 tokens
shadow-sm
Strong depth
rgba(0,0,0,0.5) 0px 20px 30px — heavy drop shadow for floating cards and hero elements
shadow-md
Layered card
rgba(0,0,0,0.1) 10px/20px + rgba(0,0,0,0.05) 1px inset — soft drop combined with inset highlight ring
Z-Index
LayerValueUsage
z-1 · Base1Default stacking context, base content layer
z-2 · Raised2Slightly elevated UI elements
z-3 · Navigation10Sticky navigation, headers, persistent toolbar
z-4 · Dropdown99Dropdowns, context menus, flyout panels
z-5 · Overlay100Modals, overlays, sidebars, dialogs
z-6 · Maximum2147483647Browser max integer — always-on-top system UI (tooltips, crash banners)
Breakpoints
📱
breakpoint-xs
809px
Mobile threshold — below this, mobile layout activates
📱
breakpoint-sm
809.98px
Fractional sub-pixel — Bootstrap-style to prevent 1px layout overlap at exactly 810px
💻
breakpoint-md
810px
Tablet/desktop threshold — 810px is the design canvas breakpoint in Framer
🖥️
breakpoint-lg
1199px
Wide desktop — max single-column content width
🖥️
breakpoint-xl
1199.98px
Fractional sub-pixel — pairs with 1199px to avoid overlap at exactly 1200px
The paired fractional values (809 / 809.98 and 1199 / 1199.98) are a classic Bootstrap-derived pattern: max-width queries use the .98 value to avoid a 1px gap where both queries would match simultaneously at the integer boundary.
Opacity
Opacity Tokens
5 tokens — 0.30 → 0.80
opacity-30
30% — disabled
opacity-40
40% — subtle UI
opacity-50
50% — dimmed
opacity-60
60% — secondary
opacity-80
80% — near-full
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-blue--color-black2.23:1Fail
--color-blue--color-white9.4:1AAA
--color-blue--color-blue-23.13:1AA Large
--color-blue--color-light-gray8.1:1AAA
--color-dark-gray--color-black1.32:1Fail
--color-dark-gray--color-white15.91:1AAA
--color-dark-gray--color-blue-25.3:1AA
--color-dark-gray--color-light-gray13.71:1AAA
CSS Variables Reference
Color Palette
Black--color-black#000000
White--color-white#FFFFFF
Blue 2 (brand)--color-blue-2#0099FF
Blue 3 (fill)--color-blue-3#0055FF
Blue (link text)--color-blue#0000EE
Dark Gray (text)--color-dark-gray#222222
Light Gray (bg)--color-light-gray#EEEEEE
Typography
Times (legacy base)--font-family-baseTimes
sans-serif (fallback)--font-family-2sans-serif
Inter Variable--font-family-3Inter Variable
Inter--font-family-4Inter
GT Walsheim Framer--font-family-5GT Walsheim Framer Medium
GT Walsheim Medium--font-family-6GT Walsheim Medium
Inter Framer Regular--font-family-7Inter Framer Regular
Regular--font-weight-regular400
Medium--font-weight-medium500
2xs (7px)--font-size-2xs7px
xs (8px)--font-size-xs8px
sm (12px)--font-size-sm12px
base (13px)--font-size-base13px
lg (14px)--font-size-lg14px
xl (15px)--font-size-xl15px
2xl (16px)--font-size-2xl16px
3xl (18px)--font-size-3xl18px
4xl (20px)--font-size-4xl20px
5xl (24px)--font-size-5xl24px
6xl (48px)--font-size-6xl48px
62px--font-size-62px62px
84px (hero)--font-size-84px84px
Letter Spacing (all negative except last)
tight--letter-spacing-tight−4.2px
normal--letter-spacing-normal−3.1px
wide--letter-spacing-wide−1.8px
wider--letter-spacing-wider−0.5px
widest--letter-spacing-widest−0.36px
ls-6--letter-spacing-ls-6−0.30px
ls-7--letter-spacing-ls-7−0.28px
ls-8--letter-spacing-ls-8−0.25px
ls-9--letter-spacing-ls-9−0.18px
ls-10--letter-spacing-ls-10−0.15px
ls-11--letter-spacing-ls-11−0.13px
ls-12--letter-spacing-ls-12−0.12px
ls-13--letter-spacing-ls-13−0.01px
ls-14 (only positive)--letter-spacing-ls-14+0.21px
Spacing
1 (1px)--space-11px
2 (2px)--space-22px
5 (4px)--space-54px
8 (5px)--space-85px
10 (6px)--space-106px
12 (8px)--space-128px
16 (10px)--space-1610px
40 (15px)--space-4015px
48 (20px)--space-4820px
64 (30px)--space-6430px
80 (38px)--space-8038px
96 (40px)--space-9640px
160 (60px)--space-16060px
192 (64px)--space-19264px
256 (80px)--space-25680px
23 (100px)--space-23100px
Borders & Radius
Hairline (2px)--border-width-hairline2px
SM--radius-sm4px
MD--radius-md8px
LG--radius-lg10px
XL--radius-xl12px
2XL--radius-2xl14px
Full (15px)--radius-full15px
R7 (20px)--radius-r720px
R8 (40px)--radius-r840px
R9 (50px)--radius-r950px
R10 (50%)--radius-r1050%
R11 (100px)--radius-r11100px
R12 (100%)--radius-r12100%
Motion, Opacity, Layers & Breakpoints
Transition--duration-instant0.3s
Easing--easing-ease-in-outease-in-out
Ghost--opacity-3030%
Subtle--opacity-4040%
Dim--opacity-5050%
Muted--opacity-6060%
Near-full--opacity-8080%
Base layer--z-11
Raised--z-22
Navigation--z-310
Dropdown--z-499
Overlay / Modal--z-5100
Maximum (int max)--z-62147483647
Mobile--breakpoint-xs809px
Mobile max (fractional)--breakpoint-sm809.98px
Tablet/Desktop--breakpoint-md810px
Wide desktop--breakpoint-lg1199px
Wide max (fractional)--breakpoint-xl1199.98px
Design System Preview · Framer · Generated 15/04/2026 · 7 color tokens · 13 font-size · 7 font-family · 2 font-weight · 16 line-height · 14 letter-spacing · 23 spacing · 12 radius · 1 border-width · 2 shadow · 1 duration · 1 easing · 6 z-index · 5 breakpoints · 5 opacity