Typography
scale ratio 1.518- Figma Sanscss: figmaSansdisplay + body320 40099%
- Figma Monocss: figmaMonomono4001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Figma Sans | 56px | 400 | 1 | -0.022em |
| headline | Figma Sans | 30px | 400 | 1.2 | -0.022em |
| title | Figma Sans | 16px | 400 | 1.4 | 0em |
| body | Figma Sans | 16px | 400 | 1.4 | 0em |
| body-sm | Figma Sans | 14px | 400 | 1.45 | 0em |
| label | Figma Sans | 16px | 320 | 1.45 | 0em |
| mono | Figma Mono | 16px | 400 | 1.3 | 0.03em |
Type scale
Aa12Aa14Aa16Aa30Aa44Aa56
- Body size
- 16px / 1.4
- Display size
- 56px
- Display tracking
- -0.022em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 4.59:1
- Accent on bg
- 21.00:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 4.5
- 6
- 8
- 12
- 16
- 20
- 24
- 32
- 40
- 64
- 80
- 229.5
Corner radii
481624pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 160px
Components
exact computed valuesbutton-primary
- backgroundColor
- #000000
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 12px 22px
- height
- 46.4px
- fontFamily
- figmaSans
- fontSize
- 18px
- fontWeight
- 330
Layout & motion
- Container
- 1360px
- Grid columns
- 2
- Hero
- left-aligned
- Navigation
- top-fixed
- Page height
- 8,776px
- Easing
- ease-out
- Durations
- 180ms 250ms 400ms
- Transitions
- 56
- Keyframes
- 1
- Stack
- next.js, sanity, netlify, cloudfront
Page sections (10)
section labels are heuristic
01nav
02hero
03feature detail?Move fast in the right direction on an AI-native canvas.
04features?One workspace for your entire product development process.
05logosPowerfully expressive. Incredibly precise.
06feature detail?Start with design context. Build with consistency.
07logosThe products you love are designed in Figma
08feature detail?Ideas no longer have to wait their turn
09logosExplore what you can do in Figma.
10footerCompany
How Figma compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.52×: steeper than 90% of indexed sites (median 1.28×).
- Container
- 1360px: wider than 89% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 8,776px: longer than 56% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Figma Sans
- The only site in the index that loads Figma Sans.
- Figma Mono
- The only site in the index that loads Figma Mono.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Figma use?
Figma uses Figma Sans (loaded as "figmaSans") for headings and body text. Figma Mono (loaded as "figmaMono") is used for code.
What are Figma's brand colors?
Figma's website uses a light scheme: background #FFFFFF, text #000000, muted text #0000008A and borders #00000029.
How is Figma's website laid out?
The most common corner radius is fully rounded (pill), body text is 16px with 1.4 line height, and the page container is 1360px wide.
