Design System Analysis of Figma

Figma's monochrome system inverted onto a true-dark canvas — pastel color blocks remain unchanged because they ARE the brand identity. Black-and-white roles swap (white CTA on dark canvas), translucent white borders replace solid hairlines, and the brand magenta and section pastels stay identical to preserve the spirit of the system.

01 — Color Palette

Palette

Brand & Accent
Primary (inverted)
#ffffff
CTAs become white on the dark canvas — the system's primary surface inverts.
On-Primary (inverted)
#0a0a0a
Text on white CTA buttons.
Magenta Promo
#ff3d8b
Unchanged — the brand accent stays identical.
Surface
Canvas (dark)
#0a0a0a
Default page background.
Surface 1
#161616
One step above canvas — cards, swatches.
Surface 2
#1f1f1f
Two steps above — elevated tiles, icon buttons.
Hairline
rgba(255,255,255,0.12)
Translucent white borders replace solid #e6e6e6.
Block Lime
#dceeb1
Unchanged — pastel section blocks ARE the brand.
Block Lilac
#c5b0f4
Unchanged.
Block Cream
#f4ecd6
Unchanged.
Block Mint
#c8e6cd
Unchanged.
Block Pink
#efd4d4
Unchanged.
Block Coral
#f3c9b6
Unchanged.
Block Navy
#1f1d3d
Unchanged — the existing dark color block reads as a brand-tinted deep surface.
Text
Ink (heading)
#ffffff
Heading text on dark canvas.
Body Text
rgba(255,255,255,0.85)
Default body copy at 85% opacity.
Secondary Text
rgba(255,255,255,0.6)
Captions, eyebrows, footer columns.
Semantic
Success Green (lifted)
#2ecc5b
Brightened slightly for dark-canvas contrast.
02 — Typography Scale

Typography

display-xl86px · 600 · 1.00 · -1.72px · figmaSans
Bring everyone together
display-lg64px · 600 · 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

The pastel section blocks are unchanged in dark mode. They sit as bright islands on the deep canvas — exactly as they would inside a Figma file viewed in dark theme.

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 deep indigo block reads as a natural extension of the dark canvas.

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 (inverts to white on dark)
Trusted by teams atBraintreeDribbbleGitHubMicrosoftSlackThe New York Times
comparison-checkmark
✓Unlimited Figma files
✓Team libraries
✓Plugin admin
top-nav (mini, inverted)
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.