Figma Design System Deep Dive

1. Brand Overview

Figma’s brand is laser-focused on collaboration and clarity. The website is stripped of unnecessary decoration, but it’s not cold—it’s confident. Everything feels deliberate: typography is crisp, colors are minimal, spacing is disciplined. This is a product brand for people who design products, and it’s obvious they’ve thought about every pixel.

The vibe is “design tool for designers” with an emphasis on precision and neutrality. You don’t get the candy-colored overload some creative tools go for. Instead, the palette is almost monochrome, with the occasional accent coming from product imagery or UI examples. That makes the UI itself fade into the background, letting the product story carry the visual weight.

They clearly aim for accessibility and adaptability. The typography system is highly structured, with weights and sizes tuned for legibility across devices. The spacing scale is mechanical—8px base unit with occasional half-steps—and that discipline shows in how components align.

For developers, this is a dream: minimal color variables, tightly controlled type scale, a grid that actually works. For designers, it’s a reminder that brand expression isn’t always about loudness. Figma’s expression lives in the product, not the marketing fluff. The website is an extension of the tool—it feels like the UI you’d get inside Figma itself.

Philosophically, this is a “content-first” brand system. No gradients, no ornamental shadows (except mild functional ones), and almost no visual noise. Buttons are flat, links are understated, and focus states are functional. If you’re building for Figma, your job is to stay out of the way and let the work shine.

2. Color System

2.1 Primary Colors

There’s no flashy brand hue here. The primary “color” is actually black (#000000) used for text and interactive states, paired with pure white (#ffffff) as the main background. This is intentional: Figma’s product UI is full of color from user-created designs, so the brand shell stays neutral.

Secondary is a muted grey (#697485)—good for secondary text, captions, and subtle UI elements. It’s desaturated, leaning slightly cool, which keeps the system feeling professional rather than warm or playful.

This works because it’s timeless. Compare this to Adobe’s marketing pages—Adobe leans heavily on red as a brand anchor. Figma avoids that, giving product screenshots the job of adding vibrancy.

2.2 Complete Palette

That’s it. No accent blues, no reds, no greens in the core palette. Any other colors you see on the site come from imagery or inline illustrations.

2.3 Color Relationships

White background + black text = WCAG AAA contrast. Grey secondary text (#697485) on white is around 5.2:1 contrast—meeting WCAG AA for normal text.

Dark mode? The extracted data doesn’t show a dark mode palette, but the core colors would invert easily: black background, white text, grey secondary text.

2.4 Usage Guide

• Black on white is the default for content and CTAs.
• Grey on white for secondary info—don’t use it for critical content, it’s meant for supportive text.
• Avoid using grey as a background—it’s a text color here.
• Don’t invent accent colors unless you’re showing product UI; keep marketing shell neutral.
• Links use black with underline or white when on dark backgrounds.

3. Typography

3.1 Font Families

Primary UI font is figmaSans—custom. Fallbacks: figmaSans Fallback, SF Pro Display, system-ui, helvetica. This keeps the aesthetic consistent across platforms.

Monospace variant: figmaMono with fallbacks figmaMono Fallback, SF Mono, menlo. Used for code-like elements, captions, and some uppercase labels.

No Google Fonts or Adobe Fonts—this is a proprietary type system.

3.2 Type Scale

Here’s the full extracted type scale:

3.3 Hierarchy

Headings jump dramatically from 86px down to 64px—that’s hero section scale. Below that, sizes compress quickly to 26px and then into the 20px/18px range for UI text. This keeps body text readable while letting hero text make an impact.

Weights vary subtly—330 vs 340 vs 400 vs 480—this is micro-adjustment for visual balance at different sizes. Monospace is used sparingly, mostly as uppercase labels or captions.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. They also use half-steps (4px, 4.5px) for tighter fits.

All values:

4.2 Layout

Breakpoints:

• 559px
• 560px
• 768px
• 960px
• 1280px
• 1400px
• 1440px
• 1920px

This suggests careful tuning for both mobile and large desktop—likely content width caps around 1280–1440px.

5. Visual Elements

Border Radius

They use 8px for most rectangular interactive elements, 50% for perfect circles, and occasional large radii for pill-like tabs.

Shadows

Very restrained. Shadows are functional, low-opacity:

• rgba(0,0,0,0.08) 0px 1px 0px
• rgba(0,0,0,0.1) 0px 24px 70px
• rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.05) 0px 4px 6px -2px

Mostly flat design, with occasional soft shadows for modals or floating elements.

Borders

Thin, low-opacity borders on dividers (rgba(0,0,0,0.08) or rgba(255,255,255,0.16)). Rarely used for component outlines.

6. Components

6.1 Buttons

Variant 1 (Default)

• Background: #ffffff
• Text: #000000
• Padding: 12px 21px
• Radius: 8px
• Border: none
• Focus: outline: 2px dashed var(--f-text-color, #000000)

Variant 2 (Circular, light)

• Background: rgba(0,0,0,0.08)
• Text: #000000
• Radius: 50%
• Padding: 0
• Focus: same dashed outline

Variant 3 (Circular, dark)

• Background: #000000
• Text: #ffffff
• Radius: 50%
• Opacity: 0 by default (hidden until active?)

Variant 4 (Circular, translucent white)

• Background: rgba(255,255,255,0.16)
• Text: #ffffff
• Radius: 50%

6.2 Links

Style 1 (light background):

• Color: #000000
• Text-decoration: underline 1px
• Hover: unchanged

Style 2 (dark background):

• Color: #ffffff
• Text-decoration: underline 1px
• Hover: remove underline

6.3 Forms

No inputs detected in data—likely styled minimally with border-radius 8px and flat backgrounds.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-grey: #697485;

  /* Typography */
  --font-sans: 'figmaSans', 'figmaSans Fallback', 'SF Pro Display', system-ui, helvetica;
  --font-mono: 'figmaMono', 'figmaMono Fallback', 'SF Mono', menlo;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-4-5: 4.5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-50: 50px;
  --space-64: 64px;
  --space-80: 80px;
  --space-120: 120px;
  --space-160: 160px;
  --space-216: 216px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-50: 50px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-1: rgba(0,0,0,0.08) 0px 1px 0px 0px;
  --shadow-2: rgb(0,0,0) 0px 0px 0px 1px inset;
  --shadow-3: rgba(0,0,0,0.1) 0px 24px 70px 0px;
  --shadow-4: rgb(255,255,255) 0px 0px 0px 1px inset;
  --shadow-5: rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.05) 0px 4px 6px -2px;
}

8. AI Coding Assistant Prompt

# Figma Design System Specification

System Prompt:
You are a Figma design expert. Build UIs matching their visual language exactly.

Brand Context:
Figma’s brand is neutral, precise, and content-first. It uses minimal color, disciplined spacing, and a custom type system to stay out of the way and let product content shine.

## Colors
- White: #ffffff — Page backgrounds, card surfaces
- Black: #000000 — Primary text, headings, interactive states
- Cool Grey: #697485 — Secondary text, captions, muted UI labels

Color Rules:
- Use ONLY these colors for UI elements; product imagery can add other colors.
- Ensure WCAG AA contrast ratios for text.
- Black-on-white is default; grey-on-white for secondary content.

## Typography
Font Families:
- Sans: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, helvetica
- Mono: "figmaMono", "figmaMono Fallback", "SF Mono", menlo

Type Scale:

| Level        | Size | Weight | Line Height | Use For                |
|--------------|------|--------|-------------|------------------------|
| H1 Hero      | 86px | 400    | 1.00        | Homepage hero titles   |
| H1 Section   | 64px | 400    | 1.10        | Section headers        |
| H2           | 26px | 340    | 1.35        | Subheaders             |
| Link Large   | 26px | 340    | 1.35        | Prominent links        |
| H2 Bold      | 26px | 540    | 1.35        | Strong subheaders      |
| H3           | 24px | 700    | 1.45        | Key headings           |
| Body Large   | 20px | 330    | 1.40        | Main body text         |
| Button Med   | 20px | 480    | 1.40        | Primary buttons        |
| Mono Label   | 20px | 400    | 1.30        | Uppercase labels       |
| Caption Mono | 12px | 400    | 1.00        | Metadata               |

## Spacing & Grid
Base: 8px. Scale: 1px, 2px, 4px, 4.5px, 6px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 48px, 50px, 64px, 80px, 120px, 160px, 216px

Component mapping:
- Button padding: 12px vertical, 21px horizontal
- Card padding: 24px
- Section gaps: 64px–120px depending on viewport

## Border Radius
- sm: 2px — Small links
- md: 6px — Div containers
- lg: 8px — Buttons, cards, images
- xl: 16px — Large containers
- pill: 50px — Tabs
- full: 50% — Circular buttons, avatars

## Shadows & Depth
- Soft shadows for modals: rgba(0,0,0,0.1) 0px 24px 70px
- Minimal inset borders for input fields
- Avoid heavy drop shadows

## Components

### Primary Button
Default:
```css
background: #ffffff;
color: #000000;
padding: 12px 21px;
border-radius: 8px;
border: none;
font-weight: 400;
font-size: 16px;
outline: none;
```
Focus:
```css
outline: 2px dashed #000000;
```

### Circular Icon Button (Light)
```css
background: rgba(0,0,0,0.08);
color: #000000;
border-radius: 50%;
padding: 0;
border: none;
```

### Circular Icon Button (Dark)
```css
background: #000000;
color: #ffffff;
border-radius: 50%;
opacity: 0;
```

### Link
Light BG:
```css
color: #000000;
text-decoration: underline 1px;
```
Dark BG:
```css
color: #ffffff;
text-decoration: underline 1px;
```
Hover (dark bg): remove underline.

## Layout & Responsive Rules
- Max content width: ~1280–1440px
- Mobile padding: 16px
- Desktop padding: 32px
- Breakpoints: 560px, 768px, 960px, 1280px, 1400px, 1440px, 1920px

## Interaction Rules
- Transition timing: 150ms ease
- Focus: 2px dashed outline
- Hover: subtle color change or underline toggle

## DO List
- Use only the three core colors
- Maintain 8px grid
- Apply correct border-radius per component type
- Use `figmaSans` for all headings and body
- Keep shadows minimal

## DON'T List
- Don’t invent accent colors
- Don’t use heavy shadows
- Don’t mix sharp and rounded corners in same component
- Don’t remove focus outlines

## Code Examples

Primary button:
```css
.btn-primary {
  background: #ffffff;
  color: #000000;
  padding: 12px 21px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-weight: 400;
  transition: background 150ms ease;
}
.btn-primary:focus {
  outline: 2px dashed #000000;
}
```

Circular button:
```css
.btn-icon-light {
  background: rgba(0,0,0,0.08);
  color: #000000;
  border-radius: 50%;
  padding: 0;
  border: none;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.1) 0px 10px 15px -3px,
              rgba(0,0,0,0.05) 0px 4px 6px -2px;
}
```

9. Summary

TL;DR: Figma’s brand system is minimal, neutral, and precise. Three colors, custom fonts, an 8px grid, and subtle shadows keep the focus on content rather than decoration.

Brand Keywords:

• neutral-precision
• content-first
• disciplined-grid
• functional-minimalism