01 — Color Palette

## Palette

Brand & Accent
Black
#000000
Primary CTA, headlines, body text, marquee strip.
White
#ffffff
Inverse text on black; canvas of secondary pill button.
Magenta Promo
#ff3d8b
Single saturated CTA pink for promotional inline buttons.
Surface
Canvas
#ffffff
Default page background.
Inverse Canvas
#000000
Footer, marquee, dark color blocks.
Surface Soft
#f7f7f5
Off-white tile background for icon buttons, template cards.
Hairline
#e6e6e6
1px borders on inputs, pricing cards, dividers.
Hairline Soft
#f1f1f1
Subtler dividers — comparison-table rows, footer rules.
Block Lime
#dceeb1
Signature systems / FAQ / contact-form color block.
Block Lilac
#c5b0f4
Hero block on /design/; Release Notes promo banner.
Block Cream
#f4ecd6
Soft warm background — FigJam hero strip.
Block Mint
#c8e6cd
FigJam pastel section.
Block Pink
#efd4d4
FigJam pastel section.
Block Coral
#f3c9b6
"Ship products" coral story block.
Block Navy
#1f1d3d
Deep indigo story block (only dark surface above footer).
Text
Ink
#000000
All headline, body, caption type on light surfaces.
Inverse Ink
#ffffff
Type on inverse-canvas surfaces.
Semantic
Success Green
#1ea64a
Comparison-table checkmark glyph.
02 — Typography Scale

## Typography

display-xl86px · 540 · 1.00 · -1.72px · figmaSans
Bring everyone together
display-lg64px · 540 · 1.10 · -0.96px · figmaSans
Pick your plan
headline26px · 600 · 1.35 · -0.26px · figmaSans
A faster, more efficient way of working
subhead26px · 340 · 1.35 · -0.26px · figmaSans
Better ideas start with better brainstorming tools
card-title24px · 700 · 1.45 · 0 · figmaSans
Professional
body-lg20px · 330 · 1.40 · -0.14px · figmaSans
Customize your plan with add-ons that fit how your team works.
body18px · 320 · 1.45 · -0.26px · figmaSans
Default body copy stays at near-zero letter-spacing for readability while display sizes pull tracking in tight.
body-sm16px · 330 · 1.45 · -0.14px · figmaSans
Card body and footer link list run at 16px with subtle negative tracking.
link20px · 480 · 1.40 · -0.10px · figmaSans
Inline link emphasis
button20px · 480 · 1.40 · -0.10px · figmaSans
Get started for free
eyebrow18px · 500 · 1.30 · 0.54px · figmaMono
Section eyebrow label
caption12px · 500 · 1.00 · 0.60px · figmaMono
Footer column caption
03 — Button Variants

## Buttons

button-primary
button-secondary
button-tertiary-text
button-magenta-promo
button-icon-circular
button-icon-circular-inverse
button-primary-pressed
pricing-tab-default + pricing-tab-selected
04 — Color-Block Sections (signature)

## Color-Block Sections

Each block is a full-content-width panel with 24px corners and 48px interior padding. The variant chosen sets the section's emotional register.

color-block-section

### Bring everyone together with systems that scale

Signature lime ground for systems, FAQ, and the contact form.

color-block-section-lilac

### A faster, more efficient way of working

Lavender ground for the Figma Design hero and FigJam highlights.

color-block-section-navy

### Ship products, any way you want

The only inverse color-block surface above the footer.

color-block-section · cream

### Templates to get you started

Soft warm background, FigJam hero and template grid surfaces.

color-block-section · mint

### Plays well with the rest of your stack

Pastel mint section, used inside FigJam.

color-block-section · pink

### Move from idea to outcome

Pastel pink section, used inside FigJam.

color-block-section · coral

### Designers and developers, one canvas

Coral story block on the home page.

05 — Cards & Containers

## Cards

pricing-card · Starter
Starter
Free

- 3 Figma + FigJam files
- Unlimited collaborators
- Basic dev resources

pricing-card · Professional
Professional
$XX

- Unlimited Figma files
- Team libraries
- Plugin admin

pricing-card · Organization
Organization
$XX

- Org-wide libraries
- SSO + advanced security
- Branching & merging

template-card
Brainstorming template
feature-illustration-tile
Component playground
promo-banner-lilac
Release Notes · See how leading product teams are designing with Figma.
marquee-strip
Trusted by teams atBraintreeDribbbleGitHubMicrosoftSlackThe New York Times
comparison-checkmark
✓Unlimited Figma files
✓Team libraries
✓Plugin admin
top-nav (mini)
Figma Products Solutions Community Resources Pricing
06 — Form Elements

## Forms

text-input · default
text-input · focused
text-input · disabled
textarea
07 — Spacing Scale

## Spacing

hair · 1px
xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 96px
08 — Border Radius Scale

## Radius

xs · 2px
sm · 6px
md · 8px
lg · 24px
xl · 32px
pill · 50px
full · 9999px
09 — Elevation & Depth

## Elevation

Level 0 — flat
Level 1 — hairline
Level 2 — soft
Level 3 — modal
10 — Responsive Behavior

## Responsive

Name | Width | Key Changes
--- | --- | ---
4k | 1920px | Max content width holds at 1280px; gutters expand
Desktop-XL | 1440px | Default desktop layout
Desktop | 1400px | Comparison table column widths normalize
Desktop-S | 1280px | Pricing 4-up tier grid maintained
Tablet | 960px | Pricing collapses 4-up → 2-up; nav becomes hamburger
Mobile-L | 768px | Color-block sections become full-bleed
Mobile | 560px | Display-xl drops 86px → ~48px; pill CTAs full-width
Mobile-XS | 559px | Two-column footer collapses to single column

375
560
768
960
1280
1440
Touch Targets

- Pill buttons maintain ≥44px tap height — exceeds WCAG AAA.
- Circular icon buttons grow from 40px to 44px on touch viewports.
- Form input minimum tap target is 48px high.

Collapsing Strategy

- Nav: links collapse to hamburger below 960px; pills stay visible.
- Pricing tier grid: 4-up → 2-up at 960px → 1-up below 768px.
- Color-block sections: rounded above 768px, full-bleed below.
- Comparison table: collapses into per-tier accordions below 960px.