Figma Design System

---

version: alpha

name: Figma-design-analysis

description: "A confident black-and-white editorial frame interrupted by oversized, hand-cut pastel color blocks. The marketing canvas is rigorously monochrome — figmaSans variable type, pure white surfaces, pure black ink, pill-shaped CTAs — while each story section drops the page into a saturated lime, lavender, cream, mint, or pink panel that reads like a sticky note placed on a clean desk. The result is a design system that feels both technical and joyful — a tool for serious work, made by people who like color."

colors:

primary: "#000000"

on-primary: "#ffffff"

ink: "#000000"

canvas: "#ffffff"

inverse-canvas: "#000000"

inverse-ink: "#ffffff"

on-inverse-soft: "#ffffff"

hairline: "#e6e6e6"

hairline-soft: "#f1f1f1"

surface-soft: "#f7f7f5"

block-lime: "#dceeb1"

block-lilac: "#c5b0f4"

block-cream: "#f4ecd6"

block-pink: "#efd4d4"

block-mint: "#c8e6cd"

block-coral: "#f3c9b6"

block-navy: "#1f1d3d"

accent-magenta: "#ff3d8b"

semantic-success: "#1ea64a"

overlay-scrim: "#000000"

typography:

display-xl:

fontFamily: figmaSans

fontSize: 86px

fontWeight: 340

lineHeight: 1.00

letterSpacing: -1.72px

fontFeature: kern

display-lg:

fontFamily: figmaSans

fontSize: 64px

fontWeight: 340

lineHeight: 1.10

letterSpacing: -0.96px

fontFeature: kern

headline:

fontFamily: figmaSans

fontSize: 26px

fontWeight: 540

lineHeight: 1.35

letterSpacing: -0.26px

fontFeature: kern

subhead:

fontFamily: figmaSans

fontSize: 26px

fontWeight: 340

lineHeight: 1.35

letterSpacing: -0.26px

fontFeature: kern

card-title:

fontFamily: figmaSans

fontSize: 24px

fontWeight: 700

lineHeight: 1.45

letterSpacing: 0

fontFeature: kern

body-lg:

fontFamily: figmaSans

fontSize: 20px

fontWeight: 330

lineHeight: 1.40

letterSpacing: -0.14px

fontFeature: kern

body:

fontFamily: figmaSans

fontSize: 18px

fontWeight: 320

lineHeight: 1.45

letterSpacing: -0.26px

fontFeature: kern

body-sm:

fontFamily: figmaSans

fontSize: 16px

fontWeight: 330

lineHeight: 1.45

letterSpacing: -0.14px

fontFeature: kern

link:

fontFamily: figmaSans

fontSize: 20px

fontWeight: 480

lineHeight: 1.40

letterSpacing: -0.10px

fontFeature: kern

button:

fontFamily: figmaSans

fontSize: 20px

fontWeight: 480

lineHeight: 1.40

letterSpacing: -0.10px

fontFeature: kern

eyebrow:

fontFamily: figmaMono

fontSize: 18px

fontWeight: 400

lineHeight: 1.30

letterSpacing: 0.54px

fontFeature: kern

caption:

fontFamily: figmaMono

fontSize: 12px

fontWeight: 400

lineHeight: 1.00

letterSpacing: 0.60px

fontFeature: kern

rounded:

xs: 2px

sm: 6px

md: 8px

lg: 24px

xl: 32px

pill: 50px

full: 9999px

spacing:

hair: 1px

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 24px

xl: 32px

xxl: 48px

section: 96px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.pill}"

padding: 10px 20px

button-primary-pressed:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.pill}"

button-secondary:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.pill}"

padding: 8px 18px 10px

button-tertiary-text:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.link}"

rounded: "{rounded.full}"

padding: 8px 12px

button-icon-circular:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.full}"

size: 40px

button-icon-circular-inverse:

backgroundColor: "{colors.on-inverse-soft}"

textColor: "{colors.inverse-ink}"

typography: "{typography.button}"

rounded: "{rounded.full}"

size: 40px

button-magenta-promo:

backgroundColor: "{colors.accent-magenta}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.pill}"

padding: 10px 18px

pricing-tab-default:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.pill}"

padding: 8px 18px

pricing-tab-selected:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.pill}"

padding: 8px 18px

text-input:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.md}"

padding: 12px 14px

text-input-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.md}"

padding: 12px 14px

pricing-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 24px

pricing-card-feature-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.xs}"

color-block-section:

backgroundColor: "{colors.block-lime}"

textColor: "{colors.ink}"

typography: "{typography.subhead}"

rounded: "{rounded.lg}"

padding: 48px

color-block-section-lilac:

backgroundColor: "{colors.block-lilac}"

textColor: "{colors.ink}"

typography: "{typography.subhead}"

rounded: "{rounded.lg}"

padding: 48px

color-block-section-navy:

backgroundColor: "{colors.block-navy}"

textColor: "{colors.inverse-ink}"

typography: "{typography.subhead}"

rounded: "{rounded.lg}"

padding: 48px

promo-banner-lilac:

backgroundColor: "{colors.block-lilac}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.md}"

padding: 16px 24px

template-card:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.md}"

padding: 16px

feature-illustration-tile:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.ink}"

typography: "{typography.eyebrow}"

rounded: "{rounded.md}"

padding: 24px

top-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.xs}"

height: 56px

marquee-strip:

backgroundColor: "{colors.inverse-canvas}"

textColor: "{colors.inverse-ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.xs}"

height: 36px

comparison-checkmark:

backgroundColor: "{colors.canvas}"

textColor: "{colors.semantic-success}"

typography: "{typography.body-sm}"

rounded: "{rounded.full}"

size: 16px

footer:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.caption}"

rounded: "{rounded.xs}"

padding: 64px 32px

---

Figma's marketing canvas is, at the system level, an editor-clean black-and-white frame. The chrome — top nav, body type, footer, primary CTA — is monochrome. Headlines are oversized `{typography.display-xl}` set in `figmaSans` with aggressive negative tracking, body copy hovers around weight 320–340 of the same variable family, and small mono `{typography.eyebrow}` and `{typography.caption}` labels (figmaMono, all-caps, positive tracking) act as section markers. Every CTA is a pill — `{rounded.pill}` — and the primary action across the entire site is the same black `{components.button-primary}` paired with the same white `{components.button-secondary}`.

What makes the design unique is what happens **between** those monochrome bookends: the page repeatedly drops into oversized pastel **color-block sections** — lime, lavender, cream, mint, pink, coral, and a deep navy — that span the full content width with `{rounded.lg}` corners and `{spacing.xxl}` interior padding. These blocks are where the storytelling lives. They aren't accents tucked into a card; they take over a whole viewport's worth of vertical space, like a designer arranging giant sticky notes on a clean wall. FigJam is the most pastel-saturated, the home page rotates through the full set, and the pricing page ends with a lime FAQ panel — same vocabulary, different rhythm per route.

This is a system built on contrast: the monochrome chrome makes the color blocks feel intentional rather than decorative, and the color blocks make the monochrome chrome feel like editorial paper rather than enterprise SaaS. Density is generous, line-heights are tight on display sizes, and the interface never reaches for shadows or gradients to do the work that color blocks and confident typography already do.

**Key Characteristics:**

> Source pages: figma.com (home), /design/, /figjam/brainstorming-tool/, /pricing/, /contact/.

OpenType `kern` is enabled across every role.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 86px | 340 | 1.00 | -1.72px | Hero headlines (home, FigJam) |

| `{typography.display-lg}` | 64px | 340 | 1.10 | -0.96px | Section opener headlines |

| `{typography.headline}` | 26px | 540 | 1.35 | -0.26px | Story-block titles inside color blocks |

| `{typography.subhead}` | 26px | 340 | 1.35 | -0.26px | Long-form intro paragraphs that sit at near-headline scale |

| `{typography.card-title}` | 24px | 700 | 1.45 | 0 | Pricing-tier titles, feature card titles |

| `{typography.body-lg}` | 20px | 330 | 1.40 | -0.14px | Lead body copy on hero, contact form labels |

| `{typography.body}` | 18px | 320 | 1.45 | -0.26px | Default body |

| `{typography.body-sm}` | 16px | 330 | 1.45 | -0.14px | Card body, footer link list |

| `{typography.link}` | 20px | 480 | 1.40 | -0.10px | Inline link emphasis |

| `{typography.button}` | 20px | 480 | 1.40 | -0.10px | All pill buttons, primary and secondary |

| `{typography.eyebrow}` | 18px | 400 | 1.30 | 0.54px | figmaMono uppercase section eyebrows |

| `{typography.caption}` | 12px | 400 | 1.00 | 0.60px | figmaMono uppercase captions, footer column heads |

If implementing without access to figmaSans / figmaMono, suitable open-source substitutes are **Inter** (or **Geist**) for the sans, and **JetBrains Mono** (or **Geist Mono**) for the mono. Inter at variable weights closely matches the fine-grained weight axis figmaSans uses; expect to manually adjust line-heights down by ~0.02 to compensate for Inter's slightly taller x-height.

White space is used to make the color blocks feel deliberate. Between every colored panel and the next, the page returns to white canvas with `{spacing.section}` of breathing room. Inside a color block, the type itself is given generous side margins (often more than 1/4 of the block's width on each side) so the panel reads as a poster, not a wall of copy.

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow, no border | Default for color-block sections, inverse-canvas footer, hero |

| 1 (hairline) | 1px `{colors.hairline}` border on `{colors.canvas}` | Pricing cards, form inputs, comparison table cells |

| 2 (soft elevation) | Subtle drop shadow approx 0 4px 16px rgba(0,0,0,0.06) | Floating template tiles, dropdown menus |

| 3 (modal) | Stronger shadow + `{colors.overlay-scrim}` behind | Video / image lightbox overlays |

Figma's marketing system is shadow-light by design — the color blocks substitute for traditional elevation. Where most SaaS sites use a shadowed white card to draw attention, Figma uses a saturated background panel. This makes the rare actual shadow (e.g., a floating template card hovering over a cream section) feel like an exception worth noticing.

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 2px | Anchor / link decoration corners |

| `{rounded.sm}` | 6px | Small chips, sub-nav tabs |

| `{rounded.md}` | 8px | Form inputs, list items, image frames |

| `{rounded.lg}` | 24px | Pricing cards, color-block sections, large image containers |

| `{rounded.xl}` | 32px | Hero feature panels, oversized callouts |

| `{rounded.pill}` | 50px | All text CTAs (primary, secondary, tab toggles) |

| `{rounded.full}` | 9999px | Circular icon buttons, comparison-table checkmark glyphs |

**`button-primary`** — The black "Get started for free" pill that appears in the top nav, every hero, and every closing CTA.

**`button-secondary`** — White pill with black text. Used for tertiary navigation actions ("Contact sales") and as the visual counterpart to the primary pill.

**`button-tertiary-text`** — Plain text link styled as a button hit target inside top nav and footer.

**`button-icon-circular`** — 40px circular icon button used for carousel controls, social links, and inline actions on light surfaces.

**`button-icon-circular-inverse`** — Same shape, used on inverse-canvas / dark color blocks.

**`button-magenta-promo`** — Saturated pink pill used only inside promotional surfaces such as the lilac "Save your spot" Release Notes banner. Reserved for moments where Figma's product team wants the CTA to pop against an already-colored panel.

**`pricing-tab-default`** + **`pricing-tab-selected`** — The pill-toggle that switches between Starter / Professional / Organization / Enterprise on `/pricing/`.

**`text-input`** + **`text-input-focused`** — Form fields on `/contact/` and pricing seat-count steppers.

**`pricing-card`** — Each tier on `/pricing/`.

**`pricing-card-feature-row`** — Single row inside the comparison table.

**`template-card`** — Thumbnail tile in the home "Explore what people are making" grid and the FigJam template gallery.

**`feature-illustration-tile`** — Larger composition tile that holds a product UI mock or pastel illustration.

The defining surface of Figma's marketing. Each is a full-content-width panel with `{rounded.lg}` corners and `{spacing.xxl}` interior padding. Variants:

**`color-block-section`** — lime ground for "systems" stories (home), pricing FAQ, and the contact form.

**`color-block-section-lilac`** — lavender ground for `/design/` hero and FigJam highlight sections.

**`color-block-section-navy`** — deep indigo ground for the home "Ship products" story block. The only inverse color-block surface above the footer.

(Cream, mint, pink, and coral block variants follow the same shape with their respective `{colors.block-*}` surface.)

**`promo-banner-lilac`** — The Release Notes / "Save your spot" inline banner that floats above the contact form.

**`top-nav`** — Sticky white bar with logo, primary nav links, sign-in link, and the right-anchored `button-secondary` ("Contact sales") + `button-primary` ("Get started for free") pair.

**`marquee-strip`** — Thin black ribbon directly under the nav that scrolls through customer logos in white.

**`comparison-checkmark`** — Green check used in the pricing comparison matrix.

**`footer`** — Dense link grid on white canvas with the wordmark "Figma" set in display weight at the top-left.

| 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 (no rounded corners on edges) |

| Mobile | 560px | Display-xl reduces from 86px to ~48px; pill CTAs go full-width |

| Mobile-XS | 559px | Two-column footer collapses to single column |

1. Focus on ONE component at a time and reference it by its `components:` token name (e.g., `{components.button-primary}`, `{components.color-block-section}`).

2. When introducing a new section, decide **first** which `{colors.block-*}` token it sits on; the surface choice is the most consequential decision.

3. Default body type to `{typography.body}`; reach for `{typography.subhead}` or `{typography.headline}` only inside a color block.

4. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.

5. Add new variants as separate component entries (`-pressed`, `-selected`) — do not bury them in prose.

6. Keep `{colors.primary}` scarce. If two `button-primary` instances appear in the same viewport, the section is doing too much — neutralize one to `button-secondary`.

7. Treat `{colors.accent-magenta}` as a single-shot color: one promo CTA per page, never two.