Figma

Figma

Collaborative interface design tool

The browser-based interface design and prototyping tool most product teams standardize on.

figma.com

Color palette

Accent

Primary#000000

Primary brand color — key actions and emphasis.

On Inverse Soft#ffffff

Accent color used within the product's own UI.

Block Lime#dceeb1

Accent color used within the product's own UI.

Block Lilac#c5b0f4

Accent color used within the product's own UI.

Block Cream#f4ecd6

Accent color used within the product's own UI.

Block Mint#c8e6cd

Accent color used within the product's own UI.

Block Coral#f3c9b6

Accent color used within the product's own UI.

Block Navy#1f1d3d

Accent color used within the product's own UI.

Accent Magenta#ff3d8b

Accent color used within the product's own UI.

Overlay Scrim#000000

Accent color used within the product's own UI.

Semantic

Semantic Success#1ea64a

Success state.

Neutral

On Primary#ffffff

Text and icon color on a solid primary fill.

Ink#000000

Primary text color.

Canvas#ffffff

Page background.

Inverse Canvas#000000

Page background.

Inverse Ink#ffffff

Primary text color.

Hairline#e6e6e6

Borders and dividers.

Hairline Soft#f1f1f1

Borders and dividers.

Surface Soft#f7f7f5

Card and panel surfaces.

Block Pink#efd4d4

Primary text color.

Type scale

Display Xl
86px · 340 · 1
Display Lg
64px · 340 · 1.1
Headline
26px · 540 · 1.35
Subhead
26px · 340 · 1.35
Card Title
24px · 700 · 1.45
Body Lg
20px · 330 · 1.4
Link
20px · 480 · 1.4
Button
20px · 480 · 1.4
Body
18px · 320 · 1.45
Eyebrow
18px · 400 · 1.3
Body Sm
16px · 330 · 1.45
Caption
12px · 400 · 1

Fonts

PrimaryfigmaSansWeights 320, 330, 340, 480, 540, 700
CodefigmaMonoWeights 400

Spacing & shape

Hair
1px
Xxs
4px
Xs
8px
Sm
12px
Md
16px
Lg
24px
Xl
32px
Xxl
48px
Section
96px
Xs
2px
Sm
6px
Md
8px
Lg
24px
Xl
32px
Pill
50px
Full
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (figmaSans, figmaMono).
  • Use one of the documented corner radii (2px, 6px, 8px, 24px, 32px, 50px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (1px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 96px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.