Figma design system
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.
Figma colors
The brand roles and neutrals figma.com renders, with how many elements use each one.
Brand colors
- Primary
#e4ff971 uses - Secondary
#00b6ff1 uses - Accent
#c4baff1 uses
Neutrals
#0000002,344 uses#ffffff667 uses#69748544 uses#e6e6e62 uses#f3ffe31 uses
Backgrounds
#ffffff#24cb71#e6e6e6#f3ffe3#e2e2e2#000000#e4ff97#00b6ff
Text colors
#00000021:1 on #ffffff#ffffff1:1 on #ffffff#6974854.73:1 on #ffffff#33dfdf1.65:1 on #ffffff#b98e013.03:1 on #ffffff
Contrast checks (WCAG 2.1)
Text and background pairs found together on the page; 100% of them pass.
| Text | Background | Ratio | Result |
|---|---|---|---|
#000000 | #ffffff | 21:1 | AAA |
Figma fonts and type scale
Every font family and size in use, read from computed styles rather than the CSS source.
Font families
- figmaSans: sans, most text (1,494 elements)
- figmaMono: mono, most text (18 elements)
Body text: 18px at weight 330, line height 25.2px.
Weights in use: 400, 330, 320, 480, 540, 340, 450, 700.
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 and radii
Spacing scale
Corner radii
- 2px
- 8px
- 16px
- 50px
Medium radii lead, with a few larger ones. 5 distinct box shadows.
Motion
The motion reads as springy.
Durations
xs: 100mssm: 160msmd: 300mslg: 500msxl: 800msxxl: 2000ms
Easing
- ease-in-out (97 uses):
ease - custom (1 uses):
cubic-bezier(0.8, 0, 0.2, 1) - spring (6 uses):
cubic-bezier(0.34, 1.56, 0.64, 1)
Design system audit
designlang scores how consistently a site uses its own values. How the audit works.
Overall
Components found: buttons (24), cards (2), links (189), navigation (65), footer (1), modals (1).
By category
| 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 |
- 8 font weights in use — consider standardizing to 3 (regular, medium, bold)
- 216 !important rules — prefer specificity over overrides
- 94% of CSS is unused — consider purging
- 41308 duplicate CSS declarations
Download the tokens
The files designlang wrote for figma.com. Run it yourself for a fresh read: npx designlang figma.com.
The core values as CSS variables
: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;
}Read figma.com yourself
Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.
Quick answers
What font does Figma use?
What are Figma's brand colors?
How do I use the Figma design system in my own app?
Is this the official design system?
Measured from the public pages of figma.com on 21 May 2026. Figma is a trademark of its owner; designlang is not affiliated with it. More: the full Figma brand kit, the token extraction guide and the markdown version of this page.