# Figma design system: colors, fonts and tokens

> Figma's website (figma.com) uses a light interface with #e4ff97 as its primary color and figmaSans as the main typeface, with figmaMono alongside it. designlang measured 6 font sizes from 12px to 64px, 14 spacing values, 4 corner radii.

Source: https://figma.com, captured 21 May 2026. Page: https://designlang.app/design-system/figma

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#e4ff97` | 1 |
| Secondary | `#00b6ff` | 1 |
| Accent | `#c4baff` | 1 |

Neutrals: `#000000`, `#ffffff`, `#697485`, `#e6e6e6`, `#f3ffe3`

Backgrounds: `#ffffff`, `#24cb71`, `#e6e6e6`, `#f3ffe3`, `#e2e2e2`, `#000000`, `#e4ff97`, `#00b6ff`

## Fonts

- figmaSans (sans), 1494 elements
- figmaMono (mono), 18 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 64px | 400 | 70.4px | -0.64px | h1, span |
| 44px | 400 | 48.4px | -0.44px | span, h2, p |
| 24px | 320 | 32.4px | -0.12px | p, a, span, h3 |
| 18px | 330 | 25.2px | normal | p, span, ul, li |
| 16px | 400 | 23.2px | normal | html, head, meta, link |
| 12px | 400 | 12px | 0.6px | span |

## Spacing

1px, 16px, 24px, 27px, 40px, 44px, 53px, 60px, 64px, 80px, 107px, 120px, 160px, 409px

## Radii

2px, 8px, 16px, 50px

## Motion

Feel: springy. Durations: 100ms, 160ms, 300ms, 500ms, 800ms, 2000ms.

## Audit

Overall 88/100 (grade B).

- Color Discipline: 92/100
- Typography Consistency: 85/100
- Spacing System: 85/100
- Shadow Consistency: 100/100
- Border Radius Consistency: 100/100
- Accessibility: 100/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #e4ff97;
  --color-secondary: #00b6ff;
  --color-accent: #c4baff;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-neutral-1: #000000;
  --color-neutral-2: #ffffff;
  --color-neutral-3: #697485;
  --color-neutral-4: #e6e6e6;
  --font-primary: "figmaSans", sans-serif;
  --font-secondary: "figmaMono", monospace;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 16px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/figma-com/figma-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/figma-com/figma-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/figma-com/figma-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/figma-com/figma-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/figma-com/figma-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/figma-com/figma-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/figma-com/figma-com-DESIGN.md)
- [Brand book PDF](https://designlang.app/gallery/figma-com/figma-com.brand.pdf)

Regenerate: `npx designlang figma.com`