# Figma

> Generated by BrandSweets from the figma BrandDoc (v2, schema 1). Do not edit by hand.

## Identity

**Tagline:** Nothing great is made alone.

**Mission:** Make design accessible to everyone and help teams build great products together.

**Sector:** design software

**Audience:** designers and the cross-functional teams they build with

**Founded:** 2012

**Domain:** figma.com

**Guidelines:** https://www.figma.com/using-the-figma-brand/


Figma is where teams design together. It brought design into the browser and made it multiplayer, so anyone — designers, engineers, PMs — can build in the same place. The brand is bold and joyful: a five-color geometric mark, expressive type, and a playful, inclusive voice that celebrates making things with other people.

### Values

- **Community** — Nothing great is made alone — the brand celebrates people making things together.
- **Craft** — Show the work; respect the maker's attention to detail.
- **Play** — Bold color and joyful motion are on-brand, not off-limits.

## Voice

**Tone:** playful, inclusive, bold, creative, encouraging

### Do

- Celebrate collaboration and the people doing the work
- Be bold and a little joyful — it's okay to have fun
- Invite everyone in; design isn't just for designers
- Show the craft

### Don't

- Don't gatekeep with insider design jargon
- Avoid cold, corporate distance
- Don't take yourself too seriously

### Sample copy

- **event promo** _(headline)_: "Nothing great is made alone. Join us at Config." — `config-teaser`
- **button** _(cta)_: "Start designing" — `cta-button`
- **hero headline** _(headline)_: "Design, together." — `hero-headline`
- **feature subhead** _(headline)_: "See everyone's cursors, live, on the same canvas." — `multiplayer-line`

### Vocabulary

- **Preferred:** canvas, together, multiplayer, community, prototype
- **Avoided:** asset management, stakeholder alignment, pixel-pushing
- **Config:** Capitalized; Figma's annual conference.
- **FigJam:** One word, capital F and J; the whiteboard product.
- **Figma:** Always capitalized; the product.

## Colors

| Role | Name | Hex | Dark | Usage |
| --- | --- | --- | --- | --- |
| `primary` | Figma Red | `#f24e1e` | — | Signature brand red — the top-left shape of the mark; the color the brand reads as at a glance. |
| `accent` | Figma Blue | `#0d99ff` | — | Product accent blue — primary buttons, links, selection in the app UI. |
| `surface` | — | `#ffffff` | — | Background — white; canvas gray at 200. |
| `text` | — | `#1e1e1e` | — | Body and heading ink. |
| `logoBlue` | — | `#1abcfe` | — | Bottom shape of the Figma mark (cyan). |
| `logoGreen` | — | `#0acf83` | — | Top-right shape of the Figma mark. |
| `logoOrange` | — | `#ff7262` | — | Right-middle shape of the Figma mark. |
| `logoPurple` | — | `#a259ff` | — | Left-middle shape of the Figma mark. |
| `logoRed` | — | `#f24e1e` | — | Top-left shape of the Figma mark. |

### Scales

- **primary:** 50 `#fdeee9`, 100 `#fbdccf`, 200 `#f7b49f`, 300 `#f58a6a`, 400 `#f36a41`, 500 `#f24e1e`, 600 `#cc3d15`, 700 `#a12f11`, 800 `#7e2711`, 900 `#672213`, 950 `#381005`
- **accent:** 50 `#e6f6ff`, 100 `#cceaff`, 200 `#99d5ff`, 300 `#5cbdff`, 400 `#2ba8ff`, 500 `#0d99ff`, 600 `#0a7acc`, 700 `#0861a3`, 800 `#0a5182`, 900 `#0d446b`, 950 `#062a45`
- **surface:** 50 `#ffffff`, 100 `#fafafa`, 200 `#f2f2f2`, 300 `#e6e6e6`, 400 `#d1d1d1`, 500 `#a3a3a3`, 600 `#757575`, 700 `#545454`, 800 `#333333`, 900 `#1e1e1e`, 950 `#0d0d0d`
- **text:** 50 `#f4f4f4`, 100 `#e4e4e4`, 200 `#c8c8c8`, 300 `#a1a1a1`, 400 `#727272`, 500 `#525252`, 600 `#3d3d3d`, 700 `#2e2e2e`, 800 `#242424`, 900 `#1e1e1e`, 950 `#0d0d0d`
- **logoBlue:** 50 `#e7f8ff`, 100 `#cbf0ff`, 200 `#98e2ff`, 300 `#5bd0fe`, 400 `#1abcfe`, 500 `#0e9bd4`, 600 `#0c7dac`, 700 `#0e6588`, 800 `#12536e`, 900 `#14455c`, 950 `#092a3a`
- **logoGreen:** 50 `#e6fbf1`, 100 `#c4f5df`, 200 `#89ebbf`, 300 `#48dd9c`, 400 `#1fd48a`, 500 `#0acf83`, 600 `#08a869`, 700 `#0a8455`, 800 `#0c6845`, 900 `#0c563a`, 950 `#033020`
- **logoOrange:** 50 `#fff0ee`, 100 `#ffdedb`, 200 `#ffbdb6`, 300 `#ff958b`, 400 `#ff7262`, 500 `#f5503c`, 600 `#d43a29`, 700 `#ad2d20`, 800 `#8a271d`, 900 `#71241d`, 950 `#3f0f0b`
- **logoPurple:** 50 `#f4ecff`, 100 `#e9d8ff`, 200 `#d3b0ff`, 300 `#bd88ff`, 400 `#b071ff`, 500 `#a259ff`, 600 `#8438e6`, 700 `#6a2ac0`, 800 `#56259b`, 900 `#48227d`, 950 `#2c1250`
- **logoRed:** 50 `#fdeee9`, 100 `#fbdccf`, 200 `#f7b49f`, 300 `#f58a6a`, 400 `#f36a41`, 500 `#f24e1e`, 600 `#cc3d15`, 700 `#a12f11`, 800 `#7e2711`, 900 `#672213`, 950 `#381005`

## Typography

### Families

#### Inter `inter`
- **Source:** google
- **Foundry:** Rasmus Andersson
- **Weights:** 400 Regular, 500 Medium
- **Fallback stack:** `Inter, system-ui, sans-serif`
- **Licensing:** Inter (SIL OFL) — product UI and long-form body; safe to self-host.

#### Roboto Mono `roboto-mono`
- **Source:** google
- **Weights:** 400 Regular, 500 Medium
- **Fallback stack:** `"Roboto Mono", ui-monospace, monospace`
- **Licensing:** Roboto Mono (Apache 2.0) — code and technical labels.

#### Whyte `whyte`
- **Source:** licensed
- **Foundry:** Dinamo
- **Weights:** 400 Regular, 500 Medium
- **Fallback stack:** `Whyte, "Helvetica Neue", Arial, sans-serif`
- **Licensing:** Whyte by Dinamo — licensed brand sans; never rehosted.
- **License:** https://abcdinamo.com/typefaces/whyte

#### Whyte Inktrap `whyte-inktrap`
- **Source:** licensed
- **Foundry:** Dinamo
- **Weights:** 500 Medium, 700 Bold
- **Fallback stack:** `"Whyte Inktrap", Whyte, "Helvetica Neue", Arial, sans-serif`
- **Licensing:** Whyte Inktrap by Dinamo — licensed display cut for big brand headlines. Reference by name only; never rehosted.
- **License:** https://abcdinamo.com/typefaces/whyte-inktrap
- **Usage:** Display only — the inktraps read at hero sizes, not in running text.

### Role assignments

- **display:** Whyte Inktrap (`whyte-inktrap`) — weights 500, 700
- **heading:** Whyte (`whyte`) — weights 400, 500
- **body:** Inter (`inter`) — weights 400, 500
- **mono:** Roboto Mono (`roboto-mono`)

### Scale

| Step | Size (rem) | Line height | Tracking (em) |
| --- | --- | --- | --- |
| xs | 0.75 | 1.5 | — |
| sm | 0.875 | 1.5 | — |
| base | 1 | 1.5 | — |
| lg | 1.375 | 1.35 | — |
| xl | 2 | 1.2 | -0.01 |
| display | 4 | 1 | -0.03 |

## Logos

### primary
- **Formats:**
  - `svg` (24×24): data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20role%3D%22img%22%3E%3Ctitle%3EFigma%3C%2Ftitle%3E%3Cpath%20d%3D%22M15.852%208.981h-4.588V0h4.588c2.476%200%204.49%202.014%204.49%204.49s-2.014%204.491-4.49%204.491zM12.735%207.51h3.117c1.665%200%203.019-1.355%203.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0%201.471H8.148c-2.476%200-4.49-2.014-4.49-4.49S5.672%200%208.148%200h4.588v8.981zm-4.587-7.51c-1.665%200-3.019%201.355-3.019%203.019s1.354%203.02%203.019%203.02h3.117V1.471H8.148zm4.587%2015.019H8.148c-2.476%200-4.49-2.014-4.49-4.49s2.014-4.49%204.49-4.49h4.588v8.98zM8.148%208.981c-1.665%200-3.019%201.355-3.019%203.019s1.355%203.019%203.019%203.019h3.117V8.981H8.148zM8.172%2024c-2.489%200-4.515-2.014-4.515-4.49s2.014-4.49%204.49-4.49h4.588v4.441c0%202.503-2.047%204.539-4.563%204.539zm-.024-7.51a3.023%203.023%200%200%200-3.019%203.019c0%201.665%201.365%203.019%203.044%203.019%201.705%200%203.093-1.376%203.093-3.068v-2.97H8.148zm7.704%200h-.098c-2.476%200-4.49-2.014-4.49-4.49s2.014-4.49%204.49-4.49h.098c2.476%200%204.49%202.014%204.49%204.49s-2.014%204.49-4.49%204.49zm-.097-7.509c-1.665%200-3.019%201.355-3.019%203.019s1.355%203.019%203.019%203.019h.098c1.665%200%203.019-1.355%203.019-3.019s-1.355-3.019-3.019-3.019h-.098z%22%20fill%3D%22%23F24E1E%22%2F%3E%3C%2Fsvg%3E
  - `png` (600×192): brands/figma/logo-primary@2x.png
- **Clearspace:** 0.5× mark-width — Half the mark width of clear space on all sides.
- **Min size:** 96px w (screen)
- **Allowed backgrounds:** light, dark
- **Disallowed backgrounds:** brand, photo
- **Colors:** logoRed, logoOrange, logoPurple, logoBlue, logoGreen, text
- **Notes:** Official monochrome mark from simple-icons (CC0 / public domain). Source: https://www.figma.com/using-the-figma-brand/

### mark
- **Formats:**
  - `svg` (64×96): brands/figma/mark.svg
  - `png` (128×192): brands/figma/mark@2x.png
- **Clearspace:** 0.5× mark-width — Half the mark width of clear space on all sides.
- **Min size:** 24px w (screen)
- **Allowed backgrounds:** light, dark
- **Disallowed backgrounds:** brand, photo
- **Colors:** logoRed, logoOrange, logoPurple, logoBlue, logoGreen
- **Notes:** The five-color mark stays full-color on light or dark; never recolor individual shapes.

### wordmark
- **Formats:**
  - `svg` (200×72): brands/figma/wordmark.svg
- **Clearspace:** 1× cap-height
- **Min size:** 72px w (screen)
- **Allowed backgrounds:** light

### mono
- **Formats:**
  - `svg` (24×24): data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20role%3D%22img%22%3E%3Ctitle%3EFigma%3C%2Ftitle%3E%3Cpath%20d%3D%22M15.852%208.981h-4.588V0h4.588c2.476%200%204.49%202.014%204.49%204.49s-2.014%204.491-4.49%204.491zM12.735%207.51h3.117c1.665%200%203.019-1.355%203.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0%201.471H8.148c-2.476%200-4.49-2.014-4.49-4.49S5.672%200%208.148%200h4.588v8.981zm-4.587-7.51c-1.665%200-3.019%201.355-3.019%203.019s1.354%203.02%203.019%203.02h3.117V1.471H8.148zm4.587%2015.019H8.148c-2.476%200-4.49-2.014-4.49-4.49s2.014-4.49%204.49-4.49h4.588v8.98zM8.148%208.981c-1.665%200-3.019%201.355-3.019%203.019s1.355%203.019%203.019%203.019h3.117V8.981H8.148zM8.172%2024c-2.489%200-4.515-2.014-4.515-4.49s2.014-4.49%204.49-4.49h4.588v4.441c0%202.503-2.047%204.539-4.563%204.539zm-.024-7.51a3.023%203.023%200%200%200-3.019%203.019c0%201.665%201.365%203.019%203.044%203.019%201.705%200%203.093-1.376%203.093-3.068v-2.97H8.148zm7.704%200h-.098c-2.476%200-4.49-2.014-4.49-4.49s2.014-4.49%204.49-4.49h.098c2.476%200%204.49%202.014%204.49%204.49s-2.014%204.49-4.49%204.49zm-.097-7.509c-1.665%200-3.019%201.355-3.019%203.019s1.355%203.019%203.019%203.019h.098c1.665%200%203.019-1.355%203.019-3.019s-1.355-3.019-3.019-3.019h-.098z%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E
- **Clearspace:** 0.5× mark-width
- **Min size:** 20px w (screen)
- **Allowed backgrounds:** any
- **Notes:** Official monochrome mark from simple-icons (CC0 / public domain). Source: https://www.figma.com/using-the-figma-brand/

### favicon
- **Formats:**
  - `svg` (32×32): brands/figma/favicon.svg
  - `png` (32×32): brands/figma/favicon-32.png
  - `ico` (32×32): brands/figma/favicon.ico
- **Allowed backgrounds:** any

## Usage Rules

- **[MUST] Meet WCAG AA** (accessibility) — Body text must clear 4.5:1; don't set text in the bright logo colors on white without checking contrast. `contrast-aa`
- **[MUST] The five colors define the mark** (color) — Red, orange, purple, blue, and green are the logo. Use them expressively in illustration, but never substitute or reorder the mark's shapes. `logo-colors-together`
- **[MUST] Keep the mark full-color** (logo) — The five-color mark is used as-is on light or dark. Never recolor individual shapes or apply gradients. `mark-full-color`
- **[SHOULD] Invite everyone in** (voice) — Write so a PM or engineer feels as welcome as a designer. Skip insider jargon. `voice-inclusive`

## Boards

- **Figma — Brand** — `cover` (`board-cover`)
- **Logo** — `logo-suite` (`board-logos`)
- **Color** — `color-system` (`board-colors`)
- **Typography** — `type-specimen` (`board-type`)
- **Voice** — `voice` (`board-voice`)
- **Imagery** — `imagery` (`board-imagery`)
- **Logo Construction** — `custom-html` (`board-logo-construction`)

## Resources

- Tokens (JSON): /b/figma/tokens.json
- Tokens (CSS): /b/figma/brand.css
- This document: /b/figma/brand.md
- MCP endpoint (public read): mcp.brandsweets.com/figma/mcp
- Agent integration guide: /agents.md