# Figma · Design system migration spec

> Source: https://www.figma.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a modern, premium SaaS interface that balances professional clarity with creative expression, making it an excellent reference for clean, scalable design systems.

## 1. Identity DNA

Figma's design system is built as the collaborative canvas where teams construct digital products together. Like the blank page of a well-made sketchbook, it provides a precise, unadorned foundation that amplifies the work placed upon it rather than competing for attention.

**One-liner:** A collaborative interface design tool for teams to brainstorm, design, and build products together.
**Keywords:** design · collaboration · tool · modern · creative · professional
**Analogy:** The standard operating system for modern design and product teams.

## 2. Color

The palette is a deliberate exercise in high-contrast monochrome, anchoring the interface in absolute black and white. Strategic black accents serve as functional signposts, guiding the eye toward primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#808080` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--accent` | `#5B5BF7` | single accent |
| `--line` | `rgba(255, 255, 255, 0.16)` | divider |

**Color principle:** High-contrast, clean white backgrounds with black text for maximum readability, accented by a vibrant purple for primary actions and a bright green for promotional banners.

The principle is absolute clarity: contrast is not merely aesthetic but a critical navigational tool.

## 3. Typography

Typography is set in a geometric sans-serif, establishing a voice that is clean, modern, and unambiguous. Headlines employ tight tracking and bold weights for decisive impact, while body text maintains a generous line height for sustained readability.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 330 | -0.24px | Main hero headings |
| heading-lg | 24px | 1.35 | 400 | -0.14px | Section headings |
| body | 18px | 1.4 | 330 | -0.12px | Primary body text |
| body-sm | 16px | 1.45 | 330 | -0.12px | Secondary text and UI labels |

**Type rules:**
- Headlines use tight tracking (negative letter-spacing) for a modern, compact look.
- Body text maintains a light weight (330) for a clean, airy feel.
- Monospace fonts are reserved for code snippets or technical displays.

## 4. Spacing

All spacing adheres to a consistent 8-point baseline grid, creating a rhythmic and predictable vertical cadence throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base unit with a consistent spatial system based on multiples of 8 and 16 for padding and margins.

## 5. Surfaces

Surfaces are defined by subtle depth, using a specific soft shadow to lift key components like the floating hero card. Borders are thin and semi-transparent, providing just enough delineation to organize space without visual weight.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.08) 0px 1px 0px 0px
  - rgb(0, 0, 0) 0px 0px 0px 1px inset
  - rgb(255, 255, 255) 0px 0px 0px 1px inset
- **Borders:** Minimal use of borders, primarily subtle 1px dividers or inset shadows for defining containers and input fields.

## 6. Layout

The layout skeleton begins with a full-width hero section, dominated by a centered, floating interactive card. Below this, content flows through centered containers, progressing from text blocks to structured logo grids.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A standard 12-column fluid grid with responsive breakpoints, prioritizing generous white space and clear content hierarchy.

## 7. Motion & Interaction

Motion is purposeful and restrained, designed to communicate dynamism without distraction. Background carousels and headline typewriter effects suggest the platform's collaborative, iterative nature.

- **Durations:** micro 160ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.8, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for hover states and interactive elements.
  - Subtle transforms and translations for UI state changes.
  - Background and opacity transitions for modals or overlays.

- **Hover:** Subtle background color changes or opacity adjustments, often with a transition duration of around 0.16s to 0.25s.
- **Click:** Immediate visual feedback, often through background color shifts or subtle transforms.
- **Transition:** Smooth transitions for layout changes, background colors, and interactive element states.
- **Keyboard:** Standard keyboard navigation support with visible focus states for interactive elements.

## 8. Voice & Don'ts

The editorial voice is professional yet approachable, favoring direct, action-oriented phrasing. Language avoids casual slang and unnecessary technical jargon, focusing instead on clear, imperative calls to action.

- **Tone:** Professional, empowering, and clear, focusing on collaboration and creativity.
- **Headline style:** Bold, concise statements that highlight core functionalities and benefits.
- **CTA style:** Direct and action-oriented, using phrases like 'Get started' or 'Contact sales'.
- **Avoid:** Jargon-heavy technical descriptions / Overly casual or slang-filled copy / Passive voice in calls to action

### Don'ts
- ❌ Don't use a dark primary background — the screenshot shows predominantly white backgrounds.
- ❌ Don't use serif fonts for headings — the screenshot shows humanist-sans-serif fonts.
- ❌ Don't use overly complex, multi-colored gradients as primary backgrounds — the screenshot shows a clean white base.
- ❌ Don't use heavy, drop shadows for elevation — the screenshot shows subtle, minimal box shadows or inset borders.
- ❌ Don't use all-caps for body text — the screenshot shows uppercase text used sparingly for labels or small tags.
- ❌ Don't use a high-contrast, bright primary color that isn't purple or green — the screenshot shows a specific purple for CTAs and green for promotional banners.

The system deliberately avoids colorful gradients, purely rounded forms, and low-contrast text, committing instead to a functional aesthetic of precision and restraint.

## System Prompt (paste into AI tool)

```
This is the homepage of Figma, a collaborative design tool. The design DNA is clean, professional, and highly refined, prioritizing clarity and whitespace. The primary color palette is monochromatic with black (#000000) text on a white (#FFFFFF) background, accented by a vibrant purple (#5B5BF7) for primary action buttons and a bright green (#24CB71) for promotional banners. Typography is strictly humanist-sans-serif (Figma Sans) with a light body weight (330) and tight letter-spacing for a modern feel. Key interactions are subtle, using smooth transitions. Critical don'ts: Do not use dark mode as the primary theme; do not use serif fonts; do not rely on heavy drop shadows for elevation. Focus on clean layouts, generous spacing, and high-contrast, accessible text.
```
