---
version: alpha
name: Figma
description: Figma's publicly observable web look, with white fields and near-black ink, a five-color brand set used as accents, a bright blue for in-product actions, and compact 5-6px corners.
colors:
  primary: "#000000"
  on-primary: "#FFFFFF"
  action: "#0D99FF"
  action-deep: "#0D99FF"
  on-action: "#252D41"
  surface: "#FFFFFF"
  surface-variant: "#FFFFFF"
  on-surface: "#1E1E1E"
  on-surface-variant: "#404040"
  border: "#D6D7DA"
  brand-red: "#FF5C16"
  brand-orange: "#FF3737"
  brand-purple: "#9747FF"
  brand-blue: "#00B6FF"
  brand-green: "#24CB71"
  error: "#972121"
typography:
  display:
    fontFamily: Inter
    fontSize: 3.5rem
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Inter
    fontSize: 2.25rem
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  heading:
    fontFamily: Inter
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: 1.3
  body:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: Inter
    fontSize: 0.8125rem
    fontWeight: 400
    lineHeight: 1.45
  label:
    fontFamily: Inter
    fontSize: 0.6875rem
    fontWeight: 500
    lineHeight: 1.35
  code:
    fontFamily: JetBrains Mono
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 5px
  md: 6px
  lg: 12px
  full: 9999px
spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-action:
    backgroundColor: "{colors.action-deep}"
    textColor: "{colors.on-action}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  card:
    backgroundColor: "{colors.surface-variant}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: "{spacing.lg}"
  panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: "{spacing.sm}"
  field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  link:
    textColor: "{colors.primary}"
  helper-text:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-sm}"
  divider:
    backgroundColor: "{colors.border}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.brand-green}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 2px 8px
  badge-warning:
    backgroundColor: "{colors.brand-orange}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 2px 8px
  badge-error:
    backgroundColor: "{colors.brand-red}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 2px 8px
  badge-info:
    backgroundColor: "{colors.brand-blue}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 2px 8px
  badge-beta:
    backgroundColor: "{colors.brand-purple}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 2px 8px
---

> Independent analysis of publicly observable design patterns. Not affiliated with, endorsed by, or sponsored by Figma, Inc. All trademarks belong to their owners. Use as inspiration for an original system.

## Overview

Figma's public pages read as a creative tool that takes work seriously.
The structure is monochrome: white fields
(`{colors.surface}`, `{colors.surface-variant}`) under near-black ink,
observed as true black `{colors.primary}` on marketing pages and the softer
`{colors.on-surface}` family inside the product. The five-color brand set
appears in illustration, badges, and one accent moment per section, never as
UI chrome. Inside the tool, primary actions turn `{colors.action}` blue,
panels compress to small `{typography.label}` type behind `{colors.border}`
hairlines, and corners hold at a compact 5-6px. Marketing pages keep the same
ink and add air: big headlines, wide margins, generous section gaps.

Reach for this look when a product should feel playful but precise:
monochrome structure, disciplined density, color saved for delight.

## Colors

- **primary (`#000000`) / on-primary (`#FFFFFF`)** — the marketing ink:
  headlines, body copy, and solid CTA fills on the marketing pages sit in
  true black on white.
- **on-surface (`#1E1E1E`)** — the softer near-black text family observed in
  the product UI; **on-surface-variant (`#404040`)** covers secondary text on
  both kinds of page.
- **action (`#0D99FF`)** — the bright product blue observed on in-product
  primary buttons, selection, and focus. White on it measures 2.99:1, so
  these tokens pair it with dark `{colors.on-action}` text; see the contrast
  note below.
- **action-deep (`#0D99FF`)** — a compatibility alias for the same observed
  action blue. The public capture did not expose a distinct darker action
  value, so this file does not invent one.
- **surface (`#FFFFFF`) / surface-variant (`#FFFFFF`)** — the white field and
  white secondary surfaces, separated by border, spacing, or layout rather
  than an invented gray fill.
- **border (`#D6D7DA`)** — the hairline that structures panels, toolbars, and
  property rows.
- **brand-red (`#FF5C16`) / brand-orange (`#FF3737`) / brand-purple
  (`#9747FF`) / brand-blue (`#00B6FF`) / brand-green (`#24CB71`)** — the
  vivid accent family observed in public inline illustrations and
  presentation markup, not a claim about canonical logo tokens.

Contrast notes: `{colors.on-action}` on `{colors.action}` measures 4.59:1
and passes WCAG AA for normal text; white on the same blue measures 2.99:1
and fails. `{colors.primary}` black passes on every accent hue (4.66:1 to
9.86:1), so badges consistently use black text. `{colors.on-surface}` on
`{colors.brand-purple}` measures only 3.70:1 and is not a substitute.

- **status colors** — `{colors.error}` (`#972121`) is the observed status
  hue, holding 8.22:1 on `{colors.surface}` so it can carry text as well as
  fills.

## Typography

Headlines and UI copy on the site are set in a proprietary grotesk family;
these tokens substitute **Inter** (open, Google Fonts). **JetBrains Mono**
stands in for the monospace used in code snippets.

- **display (`{typography.display}`)** — the marketing hero voice: large,
  bold, tightly tracked, and short, usually one or two lines.
- **heading-lg / heading** — section titles step down through
  `{typography.heading-lg}` and `{typography.heading}` with a lighter
  tracking taper.
- **body (`{typography.body}`)** — the 16px reading size for marketing copy
  and long-form pages.
- **body-sm (`{typography.body-sm}`)** — the compact size that dense product
  surfaces gravitate to.
- **label (`{typography.label}`)** — the product's famously small 11px UI
  text for panel labels, property rows, and toolbar captions.
- **code (`{typography.code}`)** — monospace for snippets and technical
  values.

## Spacing & Layout

Two densities share one scale. In-product panels run tight: `{spacing.xxs}`
to `{spacing.sm}` insets, `{typography.label}` text, and `{colors.border}`
hairlines between rows. Marketing pages open up: content blocks separated by
`{spacing.lg}` to `{spacing.xl}`, section gaps at `{spacing.2xl}` to
`{spacing.3xl}`, and a centered column with wide margins. Keep each surface
one density or the other: a screen is either a dense tool panel or an airy
marketing section, never a blend.

## Components

- **button-primary** — the marketing CTA: solid `{colors.primary}` black with
  a `{colors.on-primary}` label and `{rounded.md}` corners.
- **button-secondary** — a `{colors.surface}` button with a
  `{colors.primary}` label and a hairline `{colors.border}` outline.
- **button-action** — the in-product primary: an `{colors.action-deep}` fill
  with a `{colors.on-action}` label, compact padding, `{rounded.sm}` corners;
  plain `{colors.action}` stays on selection and focus.
- **card** — a `{colors.surface-variant}` marketing tile with `{rounded.lg}`
  corners and `{spacing.lg}` padding.
- **panel** — a dense `{colors.surface}` tool panel: `{spacing.sm}` insets,
  `{colors.border}` hairlines, `{typography.label}` captions.
- **field** — a white input with a `{colors.border}` outline and
  `{rounded.sm}` corners; focus shows an `{colors.action}` ring.
- **link** — marketing links stay in the ink (`{colors.primary}`) with
  underlines; in-product links pick up `{colors.action}`.
- **helper-text** — `{colors.on-surface-variant}` in `{typography.body-sm}`
  for captions and metadata.
- **divider** — a 1px `{colors.border}` hairline.
- **badge-success / badge-warning / badge-error / badge-info / badge-beta** —
  small pills that put the brand set to work as status fills:
  `{colors.brand-green}`, `{colors.brand-orange}`, `{colors.brand-red}`,
  `{colors.brand-blue}`, and `{colors.brand-purple}`, always carrying dark
  `{colors.primary}` text.

## Motion

Observed motion is brief and functional: hover shifts on buttons, fade-up
reveals on marketing sections, and autoplaying product demos; the tool itself
favors instant response over transitions. Keep effects in the 100-250ms
range and honour `prefers-reduced-motion` by dropping reveals and pausing
demo loops.

## Do's and Don'ts

- **Do** keep the brand set (`{colors.brand-red}` through
  `{colors.brand-green}`) for accents, badges, and illustration; **don't**
  build buttons, navigation, or other UI chrome from it.
- **Do** set headlines and CTAs in `{colors.primary}` ink on
  `{colors.surface}`; **don't** set long copy in any brand hue.
- **Do** put dark text on brand-hue and `{colors.action}` fills; **don't**
  assume one foreground works for every vivid fill. Use the token pairings
  defined here and recheck contrast if a background changes.
- **Do** reserve the action blues (`{colors.action}`, `{colors.action-deep}`)
  for product-style actions, selection, and focus; **don't** spread them
  across marketing surfaces that already carry black CTAs.
- **Do** hold corners at `{rounded.sm}`-`{rounded.md}` for controls;
  **don't** inflate every element into a pill — `{rounded.full}` is for
  badges and avatars.
- **Do** let marketing sections breathe at `{spacing.2xl}`-`{spacing.3xl}`
  while panels stay at `{spacing.xxs}`-`{spacing.sm}`; **don't** mix the two
  densities on one surface.
- **Do** structure dense UI with `{colors.border}` hairlines; **don't** stack
  drop shadows to separate panels.
- **Do** set UI copy in Inter and code in `{typography.code}` (both open);
  **don't** ship the site's proprietary grotesk.

## Agent Prompt Guide

When generating UI in this look:

1. Reference tokens by name (`{colors.action}`, `{spacing.sm}`,
   `{typography.label}`); never hardcode raw values.
2. Every text/background pairing must pass WCAG AA 4.5:1. In practice: white
   text sits on `{colors.primary}`; brand hues take `{colors.primary}` dark
   text; and `{colors.action}` takes `{colors.on-action}`. Plain action blue
   also marks selection, focus rings, and accents.
3. Default composition: `{colors.surface}` field, `{colors.primary}` ink and
   CTAs, `{colors.surface-variant}` tiles, one brand-hue accent moment per
   section, `{colors.action}` only inside product-style UI.
4. Pick one density per surface: airy marketing
   (`{spacing.2xl}`-`{spacing.3xl}` gaps, `{typography.display}` headlines)
   or dense panels (`{spacing.sm}` insets, `{typography.label}` text,
   `{colors.border}` hairlines).
5. Use Inter and JetBrains Mono (both open); the proprietary grotesk is named
   in prose only and must never be shipped.
6. If a needed token is missing, propose it; do not invent values.