# Figma

> `figma@1.0.0`

Figma is a browser-based design and prototyping platform — and since the 2024 expansion, also a sites/dev-mode/AI surface — owned by Adobe. The brand voice is collaborative, playful, and developer- adjacent. Visually, Figma is recognized by its five-color mark (orange, coral, purple, blue, green) and its clean white-canvas marketing surfaces with near-black body text. Where competitors pick one signature color, Figma's identity IS the five-color composition.


**Tags:** `saas`, `design-tools`, `figma`, `adobe`, `collaboration`

## Atoms

### Palette

**Figma** · `figma@1.0.0` · Proprietary — All Rights Reserved

> Figma's brand palette, anchored on the five colored shapes of the Figma mark: orange-red (#F24E1E), coral (#FF7262), purple (#A259FF), cyan-blue (#1ABCFE), and green (#0ACF83), set on a clean white canvas with near-black text. The five mark colors form the brand's primary accent system; the orange-red reads as the signature when a single brand color is required. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `figma-orange` | Figma Orange | `#F24E1E` |
| `figma-coral` | Figma Coral | `#FF7262` |
| `figma-purple` | Figma Purple | `#A259FF` |
| `figma-blue` | Figma Blue | `#1ABCFE` |
| `figma-green` | Figma Green | `#0ACF83` |
| `figma-white` | Figma White | `#FFFFFF` |
| `figma-black` | Figma Black | `#000000` |
| `figma-canvas-dark` | Figma Canvas Dark | `#1E1E1E` |
| `figma-surface-dark` | Figma Surface Dark | `#2C2C2C` |
| `figma-surface-light` | Figma Surface Light | `#F5F5F5` |
| `figma-text-secondary` | Figma Text Secondary | `#757575` |
| `figma-text-tertiary` | Figma Text Tertiary | `#B3B3B3` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `figma-white` | `#FFFFFF` |
| `surface` | `figma-surface-light` | `#F5F5F5` |
| `surface-elevated` | `figma-white` | `#FFFFFF` |
| `text-primary` | `figma-black` | `#000000` |
| `text-secondary` | `figma-text-secondary` | `#757575` |
| `text-tertiary` | `figma-text-tertiary` | `#B3B3B3` |
| `primary` | `figma-blue` | `#1ABCFE` |
| `primary-hover` | `figma-blue` | `#1ABCFE` |
| `accent` | `figma-orange` | `#F24E1E` |
| `accent-hover` | `figma-coral` | `#FF7262` |
| `warning` | `figma-orange` | `#F24E1E` |
| `warning-hover` | `figma-coral` | `#FF7262` |
| `error` | `figma-orange` | `#F24E1E` |
| `success` | `figma-green` | `#0ACF83` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `figma-canvas-dark` | `#1E1E1E` |
| `surface` | `figma-surface-dark` | `#2C2C2C` |
| `surface-elevated` | `figma-surface-dark` | `#2C2C2C` |
| `text-primary` | `figma-white` | `#FFFFFF` |
| `text-secondary` | `figma-text-tertiary` | `#B3B3B3` |
| `text-tertiary` | `figma-text-secondary` | `#757575` |
| `primary` | `figma-blue` | `#1ABCFE` |
| `primary-hover` | `figma-blue` | `#1ABCFE` |
| `accent` | `figma-orange` | `#F24E1E` |
| `accent-hover` | `figma-coral` | `#FF7262` |
| `warning` | `figma-orange` | `#F24E1E` |
| `warning-hover` | `figma-coral` | `#FF7262` |
| `error` | `figma-orange` | `#F24E1E` |
| `success` | `figma-green` | `#0ACF83` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `figma-orange` | `#F24E1E` |
| `on-identity` | `figma-white` | `#FFFFFF` |
| `primary` | `figma-blue` | `#1ABCFE` |
| `primary-hover` | `figma-blue` | `#1ABCFE` |
| `accent` | `figma-orange` | `#F24E1E` |
| `accent-hover` | `figma-coral` | `#FF7262` |
| `mark-orange` | `figma-orange` | `#F24E1E` |
| `mark-coral` | `figma-coral` | `#FF7262` |
| `mark-purple` | `figma-purple` | `#A259FF` |
| `mark-blue` | `figma-blue` | `#1ABCFE` |
| `mark-green` | `figma-green` | `#0ACF83` |
| `success` | `figma-green` | `#0ACF83` |
| `warning` | `figma-orange` | `#F24E1E` |
| `error` | `figma-orange` | `#F24E1E` |
| `background-light` | `figma-white` | `#FFFFFF` |
| `background-dark` | `figma-canvas-dark` | `#1E1E1E` |
| `surface-light` | `figma-surface-light` | `#F5F5F5` |
| `surface-dark` | `figma-surface-dark` | `#2C2C2C` |
| `text-primary-light` | `figma-black` | `#000000` |
| `text-primary-dark` | `figma-white` | `#FFFFFF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `logo.mark`

- **allowed:** figma-orange, figma-coral, figma-purple, figma-blue, figma-green, figma-white, figma-black
- **forbidden:** any-non-brand-color

> The five mark colors are the documented composition; only the neutral black/white monochrome variants are permitted as alternates. Figma's brand guidance forbids modifying the mark into other hues. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, fragmented-into-other-identities, integrated-with-other-marks

> Figma's brand guidelines explicitly prohibit modifying the marks or integrating parts of them into other identities. The mark is a fixed composition of five colored shapes. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text. Figma Black (#000000) on Figma White (#FFFFFF) clears AA comfortably. 

#### `variantSelection` → `logo`

- **use:** `logo-light`
- **when:** `backgroundColorScheme="dark"`

> On dark surfaces, use Figma's documented light-on-dark mark variant; do not invert the five-color SVG on the fly. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** product-of-competitor, merchandise, endorsement-implication, company-name-or-domain

> Figma's brand guidelines forbid use of "Figma" in third-party company names, product names, domain names, and social-media handles, and forbid uses that imply affiliation. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Figma-skinned surfaces must clear AA on body text. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 600, 700

> Inter on figma.com renders headings in the 500–700 band; lighter weights compromise the bold, confident voice of the marketing surface. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.mark-orange`

- **pairsWith:** figma-white, figma-black

> When a single Figma color is used as accent, it pairs cleanly with white or black. Combining it with another mark color outside the canonical composition risks reading as a corrupted mark. 

## Provenance

- **Source:** <https://www.figma.com/using-the-figma-brand/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Figma and the Figma logo are trademarks of Figma, Inc. (an Adobe company). The five mark colors are verified by reading the published Figma logo SVG on Wikimedia Commons; the primary orange-red (#F24E1E) is independently cross-referenced by the simple-icons brand database, which cites figma.com/using-the-figma-brand/ as the source. 
- **Imported:** `2026-05-17`
- **Notes:** Figma's brand guidance explicitly prohibits modifying the mark, embedding fragments of it into other identities, or implying affiliation. brand-atoms catalogues the five mark colors as the documented palette; consumers building Figma-adjacent surfaces should treat the mark composition as fixed. Inter is referenced here as the primary face — Inter is widely deployed on Figma's marketing surfaces and is in the brand-atoms catalog. 

---

*Generated by the brand-atoms converter. Source: `figma@1.0.0` from the encyclopedia.*