Figma

---
version: alpha
name: "Figma Marketing 2025"
description: "Figma's marketing site uses a strict black-and-white monochrome palette with its proprietary variable font (figmaSans) as the sole typographic voice. Large display headlines at 88–56px anchor hero sections, while a bold black pill-shaped CTA button contrasts against a pure white canvas. The layout is grid-driven with a 1440px max-content width, generous 80px vertical section padding, and a 4-column responsive grid. Depth is conveyed through product screenshot staging rather than shadows or gradients. The overall tone is confident, tool-forward, and typographically expressive."
colors:
  figma-white: "#ffffff"
  muted-text: "#808080"
  border-subtle: "#e2e2e2"
  figma-black: "#000000"
typography:
  display-1:
    fontFamily: "figmaSans"
    fontSize: "88px"
    fontWeight: "400"
    lineHeight: "88px"
    letterSpacing: "-1.25px"
  display-2:
    fontFamily: "figmaSans"
    fontSize: "56px"
    fontWeight: "400"
    lineHeight: "56px"
    letterSpacing: "-1.25px"
  title-1:
    fontFamily: "figmaSans"
    fontSize: "44px"
    fontWeight: "400"
    lineHeight: "48.4px"
    letterSpacing: "-0.66px"
  title-2:
    fontFamily: "figmaSans"
    fontSize: "30px"
    fontWeight: "400"
    lineHeight: "36px"
    letterSpacing: "-0.66px"
  body-xl:
    fontFamily: "figmaSans"
    fontSize: "18px"
    fontWeight: "330"
    lineHeight: "25.2px"
  body-l:
    fontFamily: "figmaSans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "23.2px"
  body-l-tight:
    fontFamily: "figmaSans"
    fontSize: "16px"
    fontWeight: "320"
    lineHeight: "23.2px"
    letterSpacing: "-0.12px"
  button:
    fontFamily: "figmaSans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "18.4px"
  code-label:
    fontFamily: "figmaMono"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "20.8px"
    letterSpacing: "0.64px"
  caption-mono:
    fontFamily: "figmaMono"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "12px"
    letterSpacing: "0.6px"
rounded:
  radius-2: "0.125rem"
  radius-4: "0.25rem"
  radius-8: "0.5rem"
  radius-12: "0.75rem"
  radius-16: "1rem"
  radius-24: "1.5rem"
  radius-28: "1.75rem"
  radius-full: "9999px"
spacing:
  space-4: "0.25rem"
  space-6: "0.375rem"
  space-8: "0.5rem"
  space-12: "0.75rem"
  space-16: "1rem"
  space-20: "1.25rem"
  space-24: "1.5rem"
  space-32: "2rem"
  space-40: "2.5rem"
  space-56: "3.5rem"
  space-64: "4rem"
  space-80: "5rem"
  space-120: "7.5rem"
---

## Overview

Figma's marketing site uses a strict black-and-white monochrome palette with its proprietary variable font (figmaSans) as the sole typographic voice. Large display headlines at 88–56px anchor hero sections, while a bold black pill-shaped CTA button contrasts against a pure white canvas. The layout is grid-driven with a 1440px max-content width, generous 80px vertical section padding, and a 4-column responsive grid. Depth is conveyed through product screenshot staging rather than shadows or gradients. The overall tone is confident, tool-forward, and typographically expressive.

**Signature traits:**
- Dual typeface system: Pairs figmaSans and figmaMono across the type hierarchy.
- Soft, rounded geometry: Generous corner rounding up to 9999px.
- Monochrome palette: Relies entirely on neutral tones with no chromatic accent.
- Layered elevation: Depth comes from 2 validated shadow tokens.

## Colors

The palette uses 4 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **action-border** maps to `figma-black`: Role "border" is grounded by usage context "Primary button backgrounds, heading text, nav text, border accents, footer text".
- **action-background** maps to `figma-white`: Role "background" is grounded by usage context "Page background, primary button foreground text, card surfaces".
- **surface-border** maps to `border-subtle`: Role "border" is grounded by usage context "Subtle dividers and surface borders in footer zone".
- **content-text** maps to `muted-text`: Role "text" is grounded by usage context "Secondary/muted text in footer zone".

### Text Scale
- **Muted Text** (#808080): Secondary/muted text in footer zone. Role: text. {authored: rgb(128, 128, 128), space: rgb}

### Interactive
- **Border Subtle** (#e2e2e2): Subtle dividers and surface borders in footer zone. Role: border. {authored: rgb(226, 226, 226), space: rgb}
- **Figma Black** (#000000): Primary button backgrounds, heading text, nav text, border accents, footer text. Role: border. {authored: rgb(0, 0, 0), space: rgb, alpha: 0.16}

### Surface & Shadows
- **Figma White** (#ffffff): Page background, primary button foreground text, card surfaces. Role: background. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.16}

## Typography

Typography uses figmaSans, figmaMono across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes figmaSans and figmaMono for visual contrast. Sizes range from 12px to 88px.

### Font Roles
- **Headline Font**: figmaSans
- **Body Font**: figmaSans

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero super-display headline | figmaSans | 88px | 400 | 88px | -1.25px | figmaSans, figmaSans Fallback, SF Pro Display, system-ui, helvetica, sans-serif; features: "kern" | Extracted token |
| Section display headline | figmaSans | 56px | 400 | 56px | -1.25px | figmaSans, figmaSans Fallback, SF Pro Display, system-ui, helvetica, sans-serif; features: "kern" | Extracted token |
| Large section titles | figmaSans | 44px | 400 | 48.4px | -0.66px | figmaSans, figmaSans Fallback, SF Pro Display, system-ui, helvetica, sans-serif; features: "kern" | Extracted token |
| Sub-section titles | figmaSans | 30px | 400 | 36px | -0.66px | figmaSans, figmaSans Fallback, SF Pro Display, system-ui, helvetica, sans-serif; features: "kern" | Extracted token |
| Primary body copy and hero descriptors | figmaSans | 18px | 330 | 25.2px | normal | figmaSans, figmaSans Fallback, SF Pro Display, system-ui, helvetica, sans-serif; features: "kern" | Extracted token |
| Standard body text, nav items, UI labels | figmaSans | 16px | 400 | 23.2px | normal | figmaSans, figmaSans Fallback, SF Pro Display, system-ui, helvetica, sans-serif; features: "kern" | Extracted token |
| Slightly condensed body text variant | figmaSans | 16px | 320 | 23.2px | -0.12px | figmaSans, figmaSans Fallback, SF Pro Display, system-ui, helvetica, sans-serif; features: "kern" | Extracted token |
| CTA button labels | figmaSans | 16px | 400 | 18.4px | normal | figmaSans, figmaSans Fallback, SF Pro Display, system-ui, helvetica, sans-serif; features: "kern" | Extracted token |
| Code snippets and monospaced labels | figmaMono | 16px | 400 | 20.8px | 0.64px | figmaMono, figmaMono Fallback, SF Mono, menlo, monospace; features: "kern" | Extracted token |
| Small monospaced captions | figmaMono | 12px | 400 | 12px | 0.6px | figmaMono, figmaMono Fallback, SF Mono, menlo, monospace; features: "kern" | Extracted token |

## Layout

Responsive system uses 4 breakpoint tier(s): mobile, tablet, desktop, wide.

This system uses a 8px base grid with scale values 4, 6, 8, 12, 16, 20, 24, 32, 40, 56, 64, 80, 120.

### Responsive Strategy
- **mobile (320-559px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **tablet (>= 768px)**: Increase spacing and column structure for medium-width viewports.
- **desktop (>= 1024px)**: Expand layout density and horizontal composition for wide viewports.
- **wide (>= 1440px)**: Stretch composition with generous gutters and wider layout spans.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| space-4 | 0.25rem | 4 | Mapped to --fig-space-4 |
| space-6 | 0.375rem | 6 | Mapped to --fig-space-6 |
| space-8 | 0.5rem | 8 | Mapped to --fig-space-8 |
| space-12 | 0.75rem | 12 | Mapped to --fig-space-12 |
| space-16 | 1rem | 16 | Mapped to --fig-space-16 |
| space-20 | 1.25rem | 20 | Extracted spacing token |
| space-24 | 1.5rem | 24 | Mapped to --fig-space-24 |
| space-32 | 2rem | 32 | Mapped to --fig-space-32 |
| space-40 | 2.5rem | 40 | Mapped to --fig-space-40 |
| space-56 | 3.5rem | 56 | Mapped to --fig-space-56 |
| space-64 | 4rem | 64 | Mapped to --fig-space-64 |
| space-80 | 5rem | 80 | Mapped to --fig-space-80 |
| space-120 | 7.5rem | 120 | Mapped to --fig-space-120 |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| inset-ring | 1 | inset 0 0px 0px 0px |
| bottom-hairline | 1 | 0 0px 1px 0px |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-color | rgb(0, 0, 0) ; rgb(255, 255, 255) ; oklch(0 0 none / 0.54) |
| Light | outline-width | 3px |
| Light | outline-offset | 0px |
| Light | transform | matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, -418.013, 0) ; matrix(1, 0, 0, 1, -3040, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-2 | 0.125rem | 2 | Hairline corner |
| radius-4 | 0.25rem | 4 | Subtle corner |
| radius-8 | 0.5rem | 8 | Control corner |
| radius-12 | 0.75rem | 12 | Control corner |
| radius-16 | 1rem | 16 | Card corner |
| radius-24 | 1.5rem | 24 | Large surface corner |
| radius-28 | 1.75rem | 28 | Large surface corner |
| radius-full | 9999px | 9999 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-2 | 2px | px |
| radius-4 | 4px | px |
| radius-8 | 8px | px |
| radius-12 | 12px | px |
| radius-16 | 16px | px |
| radius-24 | 24px | px |
| radius-28 | 28px | px |
| radius-full | 9999px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Dual typeface system, Soft, rounded geometry, Monochrome palette without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 559px | (max-width: 559px) |
| Mobile | >= 320px | (min-width: 320px) |
| Mobile | >= 480px | (min-width: 480px) |
| Mobile | >= 560px | (min-width: 560px) |
| Tablet | >= 768px | (min-width: 768px) |
| Tablet | >= 960px | (min-width: 960px) |
| Desktop | >= 1024px | (min-width: 1024px) |
| Desktop | >= 1280px | (min-width: 1280px) |
| Desktop | >= 1440px | (min-width: 1440px) |
| Desktop | >= 1600px | (min-width: 1600px) |
| Desktop | >= 1920px | (min-width: 1920px) |
| Breakpoint 12 | Unknown | (hover: hover) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.