Figma

Figma's brand palette, anchored on the five colored shapes of the Figma mark: orange-red (#F24E1E), coral (#FF7262), purple (#A259FF), cyan-blue (#1ABCFE), and green (#0ACF83), set on a clean white canvas with near-black text. The five mark colors form the brand's primary accent system; the orange-red reads as the signature when a single brand color is required.

12 swatches 14 light roles 14 dark roles saasdesign-toolsfigmamulti-colorgeometric

Swatches

figma-orange
#F24E1E
Primary mark color — the top-left red-orange shape. The de-facto signature when a single brand color is needed.
figma-coral
#FF7262
Mid-left coral shape of the mark — the lighter partner to figma-orange.
figma-purple
#A259FF
Bottom-left purple shape of the mark.
figma-blue
#1ABCFE
Top-right cyan-blue shape of the mark.
figma-green
#0ACF83
Mid-right green shape of the mark.
figma-white
#FFFFFF
Canvas on light surfaces; reversed wordmark fill.
figma-black
#000000
Wordmark on light backgrounds.
figma-canvas-dark
#1E1E1E
Authored dark-mode canvas — neutral near-black.
figma-surface-dark
#2C2C2C
Authored elevated surface on dark mode.
figma-surface-light
#F5F5F5
Authored panel surface for light mode.
figma-text-secondary
#757575
Authored secondary text — neutral mid-gray.
figma-text-tertiary
#B3B3B3
Authored tertiary / muted text.

Mode role mappings

Light mode (14 roles)

accent → figma-orange
accent-hover → figma-coral
background → figma-white
error → figma-orange
primary → figma-blue
primary-hover → figma-blue
success → figma-green
surface → figma-surface-light
surface-elevated → figma-white
text-primary → figma-black
text-secondary → figma-text-secondary
text-tertiary → figma-text-tertiary
warning → figma-orange
warning-hover → figma-coral

Dark mode (14 roles)

accent → figma-orange
accent-hover → figma-coral
background → figma-canvas-dark
error → figma-orange
primary → figma-blue
primary-hover → figma-blue
success → figma-green
surface → figma-surface-dark
surface-elevated → figma-surface-dark
text-primary → figma-white
text-secondary → figma-text-tertiary
text-tertiary → figma-text-secondary
warning → figma-orange
warning-hover → figma-coral

Provenance

Source
https://www.figma.com/using-the-figma-brand/
License
Proprietary — All Rights Reserved
Attribution
Figma and the Figma logo are trademarks of Figma, Inc. (an Adobe company). The five mark colors below are verified by reading the published Figma logo SVG on Wikimedia Commons (https://upload.wikimedia.org/wikipedia/commons/3/33/Figma-logo.svg); the orange-red (#F24E1E) is independently cross-referenced by the simple-icons brand database, which cites figma.com/using-the-figma- brand/ as the source.
Imported
2026-05-17
Notes
The five mark colors are the authoritative published palette read directly from the published mark SVG. Surface neutrals and secondary text tones are authored to support a clean light-mode canvas and a near-black dark-mode canvas in line with Figma's documented design surfaces.