Variables
Colors
Accent
--bluePrimary button, hyperlinks, focus/selected states
--greenToolbar selections
--yellowCautionary conditions/warnings
--redIndicate error
--purpleIndicate Component & Instance nodes
--hot-pinkAssistive UI canvas decorations
Basic foreground
--whitePrimary background for UI, text on menus
--white8Only used for Figma toolbar
--white4Used in same way as black3, Ex: option group headers in menus
--blackActive states
--black880% black, ex: most common black used in UI text and icons
--black330% black, ex: lower priority messages, disabled states
Basic background
--bg-whitePositive backgrounds, ex: property panels, sidebar
--bg-greyBg of ex: buttons, controls in active state
--bg-silverSidebar seperator lines & default canvas bg
--bg-blackTabstrip bg in desktop app (Fullscreen mode)
--bg-hudHeads-up display elements, ex: menus
--bg-toolbarBackground for Figma toolbar
Special
--black1Outline of UI controls
--hover-fillHover state for items without borders, ex: icon button
--white2Menu separators
--blue3Text range selection
--selection-aSelected cells, ex: selected top level layer
--selection-bSelected cells, ex: selected child layers
Typography
| Property | Var | Value |
|---|
font-family | --font-stack | 'Inter', sans-serif |
font-size | --font-size-xsmall | 11px |
font-size | --font-size-small | 12px |
font-size | --font-size-large | 13px |
font-size | --font-size-xlarge | 14px |
font-weight | --font-weight-normal | 400 |
font-weight | --font-weight-medium | 500 |
font-weight | --font-weight-bold | 600 |
line-height | --font-line-height | 16px |
line-height | --font-line-height-large | 24px |
letter-spacing | --font-letter-spacing-pos-xsmall | .005em |
letter-spacing | --font-letter-spacing-neg-xsmall | .01em |
letter-spacing | --font-letter-spacing-pos-small | 0 |
letter-spacing | --font-letter-spacing-neg-small | .005em |
letter-spacing | --font-letter-spacing-pos-large | -0.0025em |
letter-spacing | --font-letter-spacing-neg-large | .0025em |
letter-spacing | --font-letter-spacing-pos-xlarge | -.001em |
letter-spacing | --font-letter-spacing-neg-xlarge | -.001em |
The letter-spacing vars are used to optimize legibility of certain font sizes on certain background colors. Ex: --font-letter-spacing-neg-small improves the legibility of light --font-size-small text on a dark background.
Size
| Var | Value |
|---|
--size-xxxsmall | 4px |
--size-xxsmall | 8px |
--size-xsmall | 16px |
--size-small | 24px |
--size-medium | 32px |
--size-large | 40px |
--size-xlarge | 48px |
--size-xxlarge | 64px |
--size-xxxlarge | 80px |
Border radius
| Var | Value | Notes |
|---|
--border-radius-small | 2px | Ex: menus, input borders, icon button |
--border-radius-med | 5px | Ex: visual bell, toasts |
--border-radius-large | 6px | Ex: buttons |
Shadows
| Var | Value | Notes |
|---|
--shadow-hud | 0 5px 17px rgba(0, 0, 0, 0.2),
0 2px 7px rgba(0, 0, 0, 0.15) | Ex: menus, tooltips, toasts |
--shadow-floating-window | 0 2px 14px rgba(0, 0, 0, 0.15) | Ex: modal, dialog |