Figma Design System

Figma's DESIGN.md has 20 color tokens: primary (#000000), on-primary (#ffffff), ink (#000000), canvas (#ffffff), inverse-canvas (#000000), inverse-ink (#ffffff) and 14 more. Every value is a quoted hex you can copy.

The color token `primary` is #000000, used by 3 components. The surface behind it is `canvas` (#ffffff).

Map the tokens to your CSS variables: `primary` (#000000) to `--primary`, `canvas` (#ffffff) to `--background`, `ink` (#000000) to `--foreground`. shadcn/ui's Tailwind setup maps them to classes such as `bg-primary` and `text-foreground`, so they then use Figma's palette.

The color blocks are full-content-width pastel panels with 24px rounded corners and 48px interior padding. The full set runs lime (#dceeb1), lilac (#c5b0f4), cream (#f4ecd6), mint (#c8e6cd), pink (#efd4d4), coral (#f3c9b6), and a deep navy (#1f1d3d). Each route uses a different rhythm — the home page rotates through the full set, FigJam leans heavily on the pastels, and the pricing page closes with a lime FAQ panel. They are the system's primary depth device, replacing the drop shadow that most SaaS sites would reach for.

The system primary is pure black (#000000). It carries every primary CTA, every headline, every body line, the marquee strip directly under the nav, and the inverse canvas of dark sections. White (#ffffff) is the canvas and the foreground of secondary pill buttons. There is no third brand color in the chrome — the only saturated accent is a single magenta (#ff3d8b) reserved for one promotional pill per page, typically inside the lilac Release Notes banner.

No — the marketing site is light-only. The closest analog is the navy color-block section (#1f1d3d) on the home page and the inverse-canvas footer that takes the same black ink role from the opposite direction. The editor itself ships dark and light themes, but those are product surfaces and aren't represented in this DESIGN.md, which captures the public marketing experience.

Figma's DESIGN.md sets its type in figmaSans and figmaMono. The first family is the one most tokens use.

12 type tokens, such as `display-xl`, from 12px to 86px, in weights 320 to 700. Each token carries its family, size, weight, line height and letter spacing.

figmaSans is Figma's main family and may be proprietary or need its own license. Keep the sizes, weights, line heights and letter spacing from the file and swap the family for an open font of similar proportions, such as a font from Google Fonts, set in `--font-sans`.

Figma runs figmaSans, a proprietary variable typeface, alongside figmaMono for eyebrows and captions. The variable weight axis is exercised at unusually fine increments — 320, 330, 340, 480, 540, 700 — so the system reads as one voice flexing rather than a stepped weight family. Display sizes pull aggressive negative tracking (-1.72px at 86px, -0.96px at 64px). Inter or Geist are the closest open-source substitutes for the sans; JetBrains Mono or Geist Mono for the mono. Adjust line-heights down by ~0.02 to compensate for Inter's slightly taller x-height.

23 components, among them `button-primary`, `button-primary-pressed`, `button-secondary`, `button-tertiary-text` and `button-icon-circular`. Each lists properties such as its background, text color, type token and corner radius as references to the other tokens.

7 corner radii: xs (2px), sm (6px), md (8px), lg (24px), xl (32px) and 2 more. 9 spacing values: hair (1px), xxs (4px), xs (8px), sm (12px), md (16px) and 4 more. The file reads as soft in shape.

Pill (50px radius) is the only button shape in the system — every text CTA, every pricing-tab toggle, every secondary action. Icon buttons take the fully-rounded 9999px circle. Form inputs and image frames use the gentler 8px radius. Square corners only appear at the 2px hairline level for sub-nav tabs. The consistency is intentional: a square CTA would read as a different brand. The pill-and-circle pairing is the brand signature.

Copy the color and radius tokens into your `globals.css`: Figma's `primary` (#000000) becomes `--primary`, and `md` (8px) becomes `--radius`. The shadcn/ui components read those variables, so they change with the file.

Download Figma's DESIGN.md (or copy it as Markdown) and put it in your project, or paste it into the chat. Then ask Claude Code, Cursor or another agent to build a page "in the style of the Figma DESIGN.md": it reads the tokens and writes matching components.

Yes. The file is free to download or copy, with no account, from the buttons at the top and bottom of this page. The raw Markdown is also at `/design/figma/raw`.

Figma's page describes the look of its public website (www.figma.com), curated from what is visible there: the colors, type and components. It is an interpretation.

No. The Figma DESIGN.md describes the look of a public website. It is not official, and Figma has not endorsed or reviewed it. The name and logo belong to Figma.

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Figma's contrast pattern — monochrome chrome, oversized pastel color-block sections between editorial bands — rather than a generic shadcn theme. You can also reference the tokens directly: every color, type style, radius, and spacing value in the spec is a quoted value you can paste into Tailwind config, CSS variables, or your own component library.