Figma Design System
Dark · Generated 15/04/2026 · 20 colors · 17 type tokens · 12 spacing steps · 6 breakpoints · 7 motion tokens
v1.0.0
Color Palette
Background Colors
Black
#000000
Black 2
#000102
Dark Gray 2
#1E1E1E
Dark Gray
#2C2C2C
White
#F5F5F5
White 2
#FFFFFF
Light Gray
#E6E6E6
Blue 2
#0D99FF
Blue 3
#007BE5
Text Colors
Blue (link)
#0000EE
Accent & Brand Colors
Blue 4
#4D49FC
Purple
#9747FF
Pink
#FF24BD
Orange
#FF5C16
Light Blue
#E5F4FF
White 3
#F2F9FF
White 4
#F4F3FE
White 5
#FAFAFA
No border colors detected in the extracted token set. Figma uses a programmatic border color system via --color-border → --ramp-grey-200 semantic aliases rather than raw hex tokens at the surface level.
Typography
Base · Inter (--font-family-default)
Inter
Where great design is made. Collaborate, prototype, and ship — together.
Regular · 400 Default · 450 Medium · 500 Strong · 550
Display · Whyte (--font-family-display)
Whyte Display
The collaborative interface design tool. Build products, together.
Regular · 400
Display
--text-display · 48px (3rem) · Regular · Whyte · letter-spacing: −0.09rem · line-height: 3.5rem
Heading Large
--text-heading-large · 24px (1.5rem) · Strong 550 · letter-spacing: −0.025rem · line-height: 2rem
Heading Medium — Figma unifies design and engineering
--text-heading-medium · 15px (0.9375rem) · Strong 550 · letter-spacing: −0.005rem · line-height: 1.5625rem
Heading Small — Build together in real time
--text-heading-small · 13px (0.8125rem) · Strong 550 · letter-spacing: −0.002rem · line-height: 1.375rem
Body Large — Figma connects everyone in the design process so teams can deliver better products, faster.
--text-body-large · 13px (0.8125rem) · Default 450 · letter-spacing: −0.002rem · line-height: 1.375rem
Body Medium — Start for free. Build anything.
--text-body-medium · 11px (0.6875rem) · Default 450 · letter-spacing: 0.003rem · line-height: 1rem
Body Small — Caption and micro-copy at the smallest scale
--text-body-small · 9px (0.5625rem) · Default 450 · letter-spacing: 0.003rem · line-height: 0.875rem
Line Heights
tight
16px
snug
22px
normal
24px
Letter Spacing
Display
letter-spacing-tight
−0.032px · display, large headings
Heading
letter-spacing-normal
−0.003px · body text default
Body Wide
letter-spacing-wide
0.005px · body copy
LABELS
letter-spacing-wider
0.055px · small labels, caps
Spacing
Spacing Scale
12 tokens — 2px → 138.188px
2
4
6
8
10
12
16
24
28
32
34
138.2
Borders
Border Radii
MD
2px
LG
3px
XL
4px
2XL
4.5px
Full
5px
R7
6px
R8
8px
R9
13px
R11
100%
R12 / Pill
9999px
Border Widths
Hairline
1px — standard UI borders, panels, inputs
Thin
4px — focus rings, selection handles
The 1px hairline is used universally throughout the Figma UI. The 4px thin width appears on selected component frames and focus indicators.
Shadows / Elevation
Shadow Tokens
6 levels
shadow-sm
Inset ring
rgb(230,230,230) 1px inset — panel borders rendered as inset shadows
shadow-md
Floating elements
rgba(0,0,0,.15) 1px/3px + rgba(0,0,0,.3) 0.5px — dropdowns, popovers
shadow-lg
Outer ring
rgb(230,230,230) 1px — card outline drawn as a shadow (not border)
shadow-xl
Modals
0.15 2px/5px + 0.12 10px/16px + 0.12 hairline — dialog elevation
shadow-5
White inner ring
rgba(255,255,255,.4) 1px inset — white glow ring on dark toolbar buttons
shadow-6
Context menus
0.18 hairline + 0.1 3px/8px + 0.1 1px/3px — layered context menu depth
Z-Index
LayerValueUsage
z-1 · Behind-1Elements placed behind the main content layer
z-2 · Base1Default content — canvas nodes, base layer (canvas-base: 0)
z-3 · Canvas pin2Canvas modifier overlays and pin elements
z-4 · Cursor3Multiplayer cursor positions on canvas
z-5 · Pin active4Active canvas pin state / cursor emote
z-6 · Sidebar6Left/right sidebars, panels, property inspector
z-7 · Toolbar8Toolbar widgets, nav, context-editing UI
z-8 · Overlay11Modals, visual bell, assistant overlay, user cursor
Note: The full z-index taxonomy is richer. Named semantic layers in the CSS include --z-index-canvas-base: 0, --z-index-dropdown: 13, --z-index-modal: 12, and --z-index-scrub-cursor: 2147483647 (browser max int — always on top).
Breakpoints
📱
breakpoint-xs
645px
Compact — single-column layout threshold
📱
breakpoint-sm
832px
Small tablet — navigation collapse point
💻
breakpoint-md
849px
Medium — minor layout shift (17px from sm)
💻
breakpoint-lg
1000px
Desktop — standard widescreen layout
🖥️
breakpoint-xl
1023px
Wide desktop (23px from lg — granular shift)
🖥️
breakpoint-2xl
1440px
Full HD — maximum content width, large monitors
Opacity
Opacity Tokens
5 tokens — 0.30 → 0.92
opacity-30
30% — disabled overlays
opacity-59
59% — secondary content
opacity-60
60% — muted text
opacity-89
89% — near-full focus
opacity-92
92% — frosted overlays
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-white8.62:1AAA
--color-blue--color-white-29.4:1AAA
--color-blue--color-light-gray7.53:1AAA
--color-blue--color-blue-23.14:1AA Large
Only 5 contrast pairs were extracted. Figma's full color system uses a semantic token model (e.g. --color-text, --color-bg) via the --ramp-* color scale, which provides accessible pairings at each elevation level.
CSS Variables Reference
Background Colors
Black--color-black#000000
Black 2--color-black-2#000102
Dark Gray 2 (canvas)--color-dark-gray-2#1E1E1E
Dark Gray (toolbar)--color-dark-gray#2C2C2C
White (content bg)--color-white#F5F5F5
White 2 (pure white)--color-white-2#FFFFFF
Light Gray--color-light-gray#E6E6E6
Light Gray 2--color-light-gray-2#EEEEEE
Light Gray 3--color-light-gray-3#F2F2F2
Blue 2 (brand)--color-blue-2#0D99FF
Blue 3 (brand hover)--color-blue-3#007BE5
Blue 4 (violet)--color-blue-4#4D49FC
Light Blue--color-light-blue#E5F4FF
Purple (FigJam)--color-purple#9747FF
Orange (persimmon)--color-orange#FF5C16
Pink (template)--color-pink#FF24BD
Blue (link text)--color-blue#0000EE
Typography
Default (Inter)--font-family-baseInter
Display (Whyte)--font-family-displayWhyte
Mono (Roboto Mono)--font-family-monoRoboto Mono
Regular--font-weight-regular400
Default--font-weight-w450450
Medium--font-weight-medium500
Strong--font-weight-w550550
2xs (8px)--font-size-2xs8px
xs (11px)--font-size-xs11px
sm (13px)--font-size-sm13px
base (16px)--font-size-base16px
LH tight--line-height-tight16px
LH snug--line-height-snug22px
LH normal--line-height-normal24px
LS tight (−0.032px)--letter-spacing-tight−0.032px
LS normal (−0.003px)--letter-spacing-normal−0.003px
LS wide (0.005px)--letter-spacing-wide0.005px
LS wider (0.055px)--letter-spacing-wider0.055px
Spacing
1 (2px)--space-12px
2 (4px)--space-24px
3 (6px)--space-36px
4 (8px)--space-48px
5 (10px)--space-510px
6 (12px)--space-612px
8 (16px)--space-816px
10 (24px)--space-1024px
12 (28px)--space-1228px
16 (32px)--space-1632px
20 (34px)--space-2034px
24 (138px)--space-24138.188px
Borders & Radius
Hairline--border-width-hairline1px
Thin (focus ring)--border-width-thin4px
MD--radius-md2px
LG--radius-lg3px
XL--radius-xl4px
2XL--radius-2xl4.5px
Full--radius-full5px
R7--radius-r76px
R8--radius-r88px
R9--radius-r913px
R11--radius-r11100%
R12 / Pill--radius-r129999px
Motion, Opacity, Layers & Breakpoints
Instant--duration-instant100ms
Fast--duration-fast200ms
Normal--duration-normal300ms
Slow--duration-slow400ms
Slower--duration-slower500ms
Ease In-Out--easing-ease-in-outease-in-out
Ease Out--easing-ease-outease-out
Ghost--opacity-3030%
Muted--opacity-5959%
Dim--opacity-6060%
Near-full--opacity-8989%
Frosted--opacity-9292%
Behind--z-1-1
Canvas base--z-21
Canvas pin--z-32
Sidebar--z-66
Toolbar--z-78
Modal / Overlay--z-811
Scrub cursor (max int)--z-index-scrub-cursor2147483647
Compact--breakpoint-xs645px
Small tablet--breakpoint-sm832px
Desktop--breakpoint-lg1000px
Full HD--breakpoint-2xl1440px
Semantic Color System (Ramp Scale)
Figma's real color architecture is a semantic alias system mapping named roles to a comprehensive ramp scale. Extracted examples from the published CSS:
Background default--color-bg--ramp-white-1000
Background brand--color-bg-brand--ramp-blue-500
Background component--color-bg-component--ramp-purple-500
Background danger--color-bg-danger--ramp-red-500
Background success--color-bg-success--ramp-green-500
Background warning--color-bg-warning--ramp-yellow-500
Background template--color-bg-template--ramp-pink-500
Border default--color-border--ramp-grey-200
Border strong--color-border-strong--ramp-grey-800
Text default--color-text--ramp-black-800
Text secondary--color-text-secondary--ramp-black-500
Design System Preview · Figma · Generated 15/04/2026 · 20 color tokens + ramp semantic system · 4 font-size · 3 font-family · 4 font-weight · 3 line-height · 4 letter-spacing · 12 spacing · 12 radius · 2 border-width · 6 shadow · 5 duration · 2 easing · 8 z-index · 6 breakpoints · 5 opacity