figma.com design system

---
version: alpha
name: "figma.com"
description: "Design system extracted from https://www.figma.com/ on 2026-09-28"
colors:
  background: "#ffffff"
  foreground: "#000000"
  muted-foreground: "#ffffff"
  primary: "#000000"
  on-primary: "#ffffff"
  secondary: "#874fff"
  border: "#ffffff"
typography:
  headline-display:
    fontFamily: "figmaSans"
    fontSize: "56px"
    fontWeight: 400
    lineHeight: "1"
    letterSpacing: "-1.25px"
  headline-lg:
    fontFamily: "figmaSans"
    fontSize: "30px"
    fontWeight: 400
    lineHeight: "1.2"
    letterSpacing: "-0.66px"
  headline-md:
    fontFamily: "figmaSans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.4"
  body-md:
    fontFamily: "figmaSans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.45"
  label-md:
    fontFamily: "figmaMono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1"
    letterSpacing: "0.6px"
  button:
    fontFamily: "figmaSans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.45"
rounded:
  none: "0px"
  md: "8px"
  sm: "2px"
  xl: "24px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "40px"
  9: "80px"
components:
  button-ghost:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "8px"
    height: "46px"
    padding: "12px 22px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "8px"
    height: "46px"
    padding: "12px 22px"
---

# figma.com

## Overview

Figma: The collaborative canvas for design, code, and AI: Figma is the canvas where design, code, and AI come together. From first idea to shipped product — go from concept to production with your whole team, in one place.

Gently rounded controls, layered shadows for depth, large display type at 56px / 400, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 1287 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| foreground | `#000000` | Primary text |
| muted-foreground | `#ffffff` | Secondary text, captions |
| primary | `#000000` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#874fff` | Secondary accent (violet) |
| border | `#ffffff` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#000000`, `#874fff`.

Gradients in use: `repeating-conic-gradient(rgb(0, 182, 255) 0deg, rgb(0, 182, 255) 18deg, rgba(0, 0, 0, 0) 18deg, rgba(0, 0, 0, 0) 30deg)`.

The accent `#000000` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **figmaSans** for h1, h2, h3, body, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **figmaMono** for label: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | figmaSans | 56px | 400 | 1 | -1.25px |
| headline-lg | figmaSans | 30px | 400 | 1.2 | -0.66px |
| headline-md | figmaSans | 16px | 400 | 1.4 | normal |
| body-md | figmaSans | 16px | 400 | 1.45 | normal |
| label-md | figmaMono | 12px | 400 | 1 | 0.6px |
| button | figmaSans | 16px | 400 | 1.45 | normal |

Type scale in use: 12px, 14px, 16px, 18px, 30px, 44px, 56px. Base body size 16px.

The H1 renders at 56px / 400, start aligned, up to 328px wide, tracking -1.25px. Sample: "The full-stack creative canvas".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 40, 80 (px).
- Flex and grid gaps: 4, 8, 12, 16, 24, 32, 40, 60 px.
- Content max width: 1360px, centred.
- Breakpoints: 480px, 768px, 960px, 1024px, 1280px.
- Header: 78px tall, fixed, background `rgb(255, 255, 255)`; 5 nav links at 16px / 400 (Pricing · Log in · Contact sales · Get started for free).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `oklch(0 0 none / 0.16) 0px 0px 0px 1px inset`
- shadow-2: `oklch(0 0 none / 0.16) 0px 1px 0px 0px`

## Shapes

- Buttons: 8px
- Inputs: 8px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, md 8px, sm 2px, xl 24px, full 9999px

## Components

### Button, ghost

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#000000`, border none, radius 8px, height 46px, padding 12px 22px, 16px / 400, shadow `oklch(0 0 none / 0.16) 0px 0px 0px 1px inset`. Sample label: "Contact sales".

### Button, primary

Background `#000000`, text `#ffffff`, border none, radius 8px, height 46px, padding 12px 22px, 18px / 330. Sample label: "Get started for free".

### Link

Colour `#000000`, no underline at rest, weight 400.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1360px | 40px | 16px | 56px, 3 lines, start | 78px, 4 links, 2 CTA | media below text | 3→1 col; 2→2 col; 2→1 col | content-width |
| laptop 1024px | 944px | 40px | 16px | 56px, 4 lines, start | 0px, 0 links | media below text | 3→1 col; 2→2 col; 2→1 col | content-width |
| tablet 768px | 720px | 24px | 16px | 36px, 1 line, start | 0px, 0 links | media below text | 12→2 col; 6→1 col | content-width |
| phone 390px | 358px | 16px | 16px | 36px, 2 lines, start | 0px, 0 links | media below text | 12→2 col; 6→1 col | content-width |

- H1 goes 56px → 36px (64%), 3 → 2 lines.
- Nav never collapses to a hamburger (0 links still visible at 390px).
- Card grids: 4 columns → 2 columns on phones (gap 16px → 16px).
- Body text stays 16px at every width.
- Phone side gutter 16px.
- Section top padding 80px → 40px.

## Interaction & Motion

59 elements carry transitions; typical 0.18s with ease-out, mostly on all, background, box-shadow. 1 running keyframe animations (animation-1ps4q2h 25s infinite).

- Hover on button-primary ("Save your spot"): background #000000 → oklch(0 0 none / 0.85); cursor pointer; transition background, box-shadow | 0.18s, 0.18s | ease-out, ease-out | delay 0s, 0s.
- Hover on button-secondary ("Contact sales"): shadow deepens; cursor pointer; transition background, box-shadow | 0.18s, 0.18s | ease-out, ease-out | delay 0s, 0s.
- Hover on nav-link ("Pricing"): no visible change; cursor pointer.
- Focus on button-primary: outline 2px dashed rgb(255, 255, 255), offset 4px.
- No tooltip could be triggered from the first viewport, but the stylesheet defines tooltip rules (a, a *, button:not(.tooltip-btn), button:not(.tooltip-btn) *, select, input[type="checkbox"]): .
- No dropdown menus found in the header.
- No scroll-reveal: content is visible without scrolling into view.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#000000` for actions and focus; never paint large areas with it.
- Do keep body text at 16px in figmaSans.
- Do match corner radii per element class (buttons 8px, cards 0px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.