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)
FigmaProducts Solutions Community Resources Pricing
06 — Form Elements

Forms

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

NameWidthKey Changes
4k1920pxMax content width holds at 1280px; gutters expand
Desktop-XL1440pxDefault desktop layout
Desktop1400pxComparison table column widths normalize
Desktop-S1280pxPricing 4-up tier grid maintained
Tablet960pxPricing collapses 4-up → 2-up; nav becomes hamburger
Mobile-L768pxColor-block sections become full-bleed
Mobile560pxDisplay-xl drops 86px → ~48px; pill CTAs full-width
Mobile-XS559pxTwo-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.