# Figma — Design Reference

> Black and white chrome, all the color left to the work

**Theme:** light · **Measured from:** figma.com (English, 1440 px)

Figma's site is a gallery wall. The chrome is strictly monochrome: white canvas, black text, black buttons, and no accent color at all (the CSS variables define just `bg #FFFFFF`, `fg #000000`, `btn-primary-bg #000000`). Every bit of color comes from the work on display — stacked UI mockups in the hero, video tiles of real designs further down. One custom family, **figmaSans**, is used at a single regular weight (400) for everything from the 56px headline to 14px captions, with tight negative tracking on large sizes. Headings are short two-tone statements: a black sentence followed by a gray sentence. Buttons are black rectangles with 8px corners. Huge amounts of white space separate the sections.

> Much of the captured page is empty white: the lazy-loaded videos in the middle sections did not render. The layout notes below describe the slots they occupy.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Black | `#000000` | All text, primary buttons, play buttons, glyph bullets |
| White | `#ffffff` | Canvas, secondary buttons, text on black |
| Ash | `#757575` | Gray second sentence of two-tone headings, small descriptions |
| Hairline | `#d6d6d6` | Nav bottom rule and secondary button ring (black at 16%) |
| Error Red | `#972121` | Form error background only |
| Signal Cyan | `#00b6ff` | Decorative conic pattern only; never chrome |

There is no brand accent. The multicolor Figma logo and the artwork in the media tiles are the only color on the page — keep it that way.

## Typography

**figmaSans** is the only family. Substitute: **Inter** (300/400) from Google Fonts.

- Weight **400** for every heading and every paragraph. Size alone creates hierarchy.
- Buttons are slightly *lighter* than body: weight **330** at 18px.
- Large sizes tighten: `-1.25px` at 56px and up, `-0.66px` at 30–44px. Body has no tracking.
- Line height is tight on display (1.0) and modest on body (1.4).

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display XL | 88px | 400 | 1 | -1.25px |
| Display | 56px | 400 | 1 | -1.25px |
| Heading large | 44px | 400 | 1.1 | -0.66px |
| Heading | 30px | 400 | 1.2 | -0.66px |
| Button | 18px | 330 | 1 | 0 |
| Body | 16px | 400 | 1.4 | 0 |
| Small | 14px | 400 | 1.45 | 0 |

**Two-tone heading:** one block at 30px, first sentence in Black, the following sentence(s) in Ash. Example: "Move fast in the right direction on an AI-native canvas. *Teammates and AI agents work in the same space with shared context.*"

## Shape and spacing

- **Buttons:** 8px radius; the oversized hero CTA uses 16px.
- **Media frames and cards:** 24px radius where rounded; gallery video tiles butt together square.
- **Play buttons and tags:** full circle / pill.
- **Base unit:** 8px. Scale: 4, 8, 16, 24, 40, 64, 120, 200.
- **Content width:** 1360px, with text blocks indented to about 1131px.
- **Section gap:** very large, about 200px of white between sections.

## Components

### Primary button
Black `#000000` fill, white text, 8px radius, padding `12px 22px` (46px tall), figmaSans 330 at 18px. No border, no shadow. Label: "Get started for free".

### Secondary button
White fill, black text, 1px inset ring `rgba(0,0,0,.16)`, 8px radius, same size as the primary, 8px to its left. Label: "Contact sales".

### Hero CTA
An oversized black button floating alone on the right of the hero: about 224×84px, 16px radius, white text around 30px — "Get started". It balances the headline on the left with the artwork in between.

### Navigation
White bar with a `0 1px 0 rgba(0,0,0,.16)` bottom rule. Multicolor logo glyph on the left, then 16px black links with thin chevrons (Products, Solutions, Community, Resources, Pricing). Right side: "Log in" as plain text, then the secondary and primary buttons.

### Feature caption
A tiny black glyph (dot, square, diamond) as a bullet, a 14px black title ("Design anything you can imagine"), a 14px Ash description, and an underlined 14px link with an arrow ("Explore design tools →"). Sits under or beside a media tile.

### Video tile with play button
Full-bleed design videos in a tight mosaic with no gaps or square corners. Each has a small black circular play button (white triangle) in a corner.

## Do

- Keep the chrome strictly black and white.
- Use weight 400 for all headings; let size and tracking do the work.
- Write section headings as two-tone sentences (black, then gray).
- Let artwork and product videos carry all the color.
- Use black 8px buttons, paired with a white ringed secondary.
- Leave very large gaps between sections.

## Don't

- Don't introduce an accent or brand color in UI elements.
- Don't use bold or semibold type.
- Don't round buttons into pills.
- Don't add drop shadows to cards or buttons.
- Don't use gray backgrounds or tinted bands; the canvas stays white.
- Don't use the multicolor logo palette for buttons or links.

## Layout

Three-part hero on white: a 56px three-line headline at the far left ("The full-stack creative canvas"), a stack of overlapping colorful UI mockups in the center, and the oversized black "Get started" button on the right. Below, alternating sections each open with a two-tone 30px heading aligned left at the content edge, followed by a large video or media block and small feature captions. A dense mosaic of design videos ("Powerfully expressive. Incredibly precise.") sits mid-page, and a 44px heading introduces the customer showcase.

## Agent prompt guide

- Text: `#000000` · Secondary text: `#757575`
- Canvas: `#ffffff` · Hairlines: `rgba(0,0,0,.16)` ≈ `#d6d6d6`
- Action: `#000000` (white label) · No accent color

Example prompts:

1. "Primary button: background #000000, white text, 8px radius, padding 12px 22px, 46px tall, Inter 300 18px, no shadow. Secondary: white, black text, inset 0 0 0 1px rgba(0,0,0,.16), same size."
2. "Two-tone section heading: one paragraph at 30px weight 400, line-height 1.2, letter-spacing -0.66px; first sentence #000000, the rest #757575."
3. "Hero: white page; left a 56px weight-400 headline with letter-spacing -1.25px and line-height 1; center a cluster of overlapping colorful UI mockups; right a lone black button about 224×84px with 16px radius and 30px white text."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-ash: #757575;
  --color-hairline: #d6d6d6;
  --color-error-red: #972121;
  --color-signal-cyan: #00b6ff;

  /* Fonts */
  --font-sans: 'figmaSans', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display-xl: 88px;
  --text-display-xl--line-height: 1;
  --text-display-xl--letter-spacing: -1.25px;
  --text-display-xl--font-weight: 400;
  --text-display: 56px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -1.25px;
  --text-display--font-weight: 400;
  --text-heading-lg: 44px;
  --text-heading-lg--line-height: 1.1;
  --text-heading-lg--letter-spacing: -0.66px;
  --text-heading-lg--font-weight: 400;
  --text-heading: 30px;
  --text-heading--line-height: 1.2;
  --text-heading--letter-spacing: -0.66px;
  --text-heading--font-weight: 400;
  --text-button: 18px;
  --text-button--line-height: 1;
  --text-button--font-weight: 330;
  --text-body: 16px;
  --text-body--line-height: 1.4;
  --text-body--font-weight: 400;
  --text-small: 14px;
  --text-small--line-height: 1.45;
  --text-small--font-weight: 400;

  /* Radius */
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 24px;
  --radius-tags: 9999px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-nav-rule: 0 1px 0 rgba(0, 0, 0, 0.16);
  --shadow-ring: inset 0 0 0 1px rgba(0, 0, 0, 0.16);

  /* Layout */
  --container-page: 1360px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-ash: #757575;
  --color-hairline: #d6d6d6;
  --color-error-red: #972121;
  --color-signal-cyan: #00b6ff;

  /* Fonts */
  --font-sans: 'figmaSans', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display-xl: 88px;
  --text-display-xl--line-height: 1;
  --text-display-xl--letter-spacing: -1.25px;
  --text-display-xl--font-weight: 400;
  --text-display: 56px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -1.25px;
  --text-display--font-weight: 400;
  --text-heading-lg: 44px;
  --text-heading-lg--line-height: 1.1;
  --text-heading-lg--letter-spacing: -0.66px;
  --text-heading-lg--font-weight: 400;
  --text-heading: 30px;
  --text-heading--line-height: 1.2;
  --text-heading--letter-spacing: -0.66px;
  --text-heading--font-weight: 400;
  --text-button: 18px;
  --text-button--line-height: 1;
  --text-button--font-weight: 330;
  --text-body: 16px;
  --text-body--line-height: 1.4;
  --text-body--font-weight: 400;
  --text-small: 14px;
  --text-small--line-height: 1.45;
  --text-small--font-weight: 400;

  /* Radius */
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 24px;
  --radius-tags: 9999px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-nav-rule: 0 1px 0 rgba(0, 0, 0, 0.16);
  --shadow-ring: inset 0 0 0 1px rgba(0, 0, 0, 0.16);

  /* Layout */
  --container-page: 1360px;
}
```

---

*Measured from https://www.figma.com/ on 2026-10-28 by Faundr. Inspired by Figma; not its official design system and not affiliated with Figma.*