---
title: "Figma design system"
variant: extended
source: https://www.figma.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/figma-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Figma · Design System

> A quiet canvas for bold creative work

**Theme:** light · **Industry:** design · **Source:** https://www.figma.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Figma’s homepage pairs a restrained black-and-white interface with colorful, layered examples of creative work. Large open sections, crisp typography, and a prominent dark CTA keep the product story clear while community imagery adds energy.

## North star

Keep the interface monochrome and spacious, letting real product and community visuals provide the color and depth.

## Overview

The page uses Gallery White (#ffffff) as an almost uninterrupted canvas, with Ink (#000000) reserved for headings, navigation, controls, the large closing CTA, and the full-width footer. Supporting copy is softened with muted gray; fine gray rules separate navigation and other subtle boundaries. Bright color is mostly carried by product examples, community templates, and the Figma mark rather than broad brand-color panels. Figma Sans gives the page a clean, contemporary voice: oversized regular-weight headlines sit beside small, understated descriptions and simple text links. The hero is deliberately asymmetric, balancing a left-aligned headline, a layered product montage, and a standalone black CTA. Below, spacious editorial sections alternate between text-led statements, media, feature links, customer proof, and a horizontal template gallery. The page stays visually flat; imagery supplies depth through overlap and varied color, while restrained borders and minimal shadowing keep the interface light.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and light navigation, content, and footer text. |
| Ink | `#000000` | `--color-ink` | brand | Primary headings, navigation text, black CTA fills, media controls, and the footer band. |
| Canvas Blue | `#00b6ff` | `--color-canvas-blue` | accent | A measured accent gradient detail; not a dominant surface color in the screenshots. |
| Soft Graphite | `#757575` | `--color-soft-graphite` | neutral | Muted explanatory copy and secondary text against the white canvas. |
| Rule Gray | `#d6d6d6` | `--color-rule-gray` | semantic | Subtle navigation separators and fine interface borders. |
| Pale Graphite | `#999999` | `--color-pale-graphite` | neutral | Minor muted heading detail in measured text; not a defining page color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Ink) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#757575` (Soft Graphite) · `--color-border` → `#d6d6d6` (Rule Gray) · `--color-accent` → `#00b6ff` (Canvas Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#757575` | `#ffffff` | 4.61:1 | AA |
| `#757575` | `#000000` | 4.56:1 | AA |
| `#00b6ff` | `#ffffff` | 2.3:1 | fail |
| `#00b6ff` | `#000000` | 9.14:1 | AAA |

### Gradients

- `repeating-conic-gradient(rgb(0, 182, 255) 0deg, rgb(0, 182, 255) 18deg, rgba(0, 0, 0, 0) 18deg, rgba(0, 0, 0, 0) 30deg)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| figmaSans | `--font-body` | webfont | 400, 320, 330 | Display and headings, body copy, navigation, buttons, captions, and links. | Inter |
| figmaMono | `--font-mono` | webfont | 400 | Uppercase eyebrow labels and code-like labels. | Space Mono |

- **figmaSans:** Regular, light-feeling weights dominate; headlines are large with tight negative tracking, while body copy stays compact and readable.
- **figmaMono:** Use sparingly for uppercase section labels; measured tracking is open and line spacing compact.

### Type scale — Perfect Fifth (ratio ≈ 1.531, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 400 | 1 | -0.014em | — | figmaSans | Oversized hero or campaign display headlines. |
| h1 | 56px | 400 | 1 | -0.022em | — | figmaSans | Primary page and section headline emphasis. |
| h2 | 44px | 400 | 1.1 | -0.015em | — | figmaSans | Major section titles and narrative statements. |
| h3 | 30px | 400 | 1.2 | -0.022em | — | figmaSans | Feature titles and smaller content headings. |
| body | 16px | 320 | 1.45 | -0.007em | — | figmaSans | Supporting product explanations and descriptive copy. |
| caption | 14px | 400 | 1.45 | 0 | — | figmaSans | Small notes, customer details, and secondary labels. |
| button | 16px | 400 | 1.45 | 0 | — | figmaSans | CTA and action control labels. |
| nav | 16px | 400 | 1.45 | 0 | — | figmaSans | Top-level navigation and utility links. |
| eyebrow | 16px | 400 | 1.3 | 0.03em | uppercase | figmaMono | Uppercase mono section or category labels. |
| code | 16px | 400 | 1.3 | 0.03em | uppercase | figmaMono | Occasional uppercase, code-like interface labels. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 6, 8, 12, 16, 20, 24, 30, 32, 40, 70, 80 px.
- Section rhythm 80px · element gap 2px · card padding — · max content width 1360px.

The measured content max width is 1360px, with a comfortable density and a measured 80px section gap. The opening viewport spreads a left-aligned headline, central product montage, and right-side CTA across a wide canvas. Further down, the page alternates single-column statements with two-column feature areas and broad media moments. A customer-proof block and template gallery provide denser content before the full-width black footer. Preserve generous whitespace and varied alignment rather than forcing every section into identical cards.

## Shape & elevation

- Radius: button `50%` · media `50%` · nav `8px` · link `2px` · xs `2px` · sm `4px` · md `8px`
- Shadow `inset` (button, nav): `oklch(0 0 none / 0.16) 0px 0px 0px 1px inset`
- Shadow `hairline` (nav): `oklch(0 0 none / 0.16) 0px 1px 0px 0px`
- Motion: standard transition `0.18s ease-out` on interactive elements.

The interface is predominantly flat, with no prominent card-shadow system. A thin measured gray border and subtle navigation hairline provide the main separation. Use overlap and layered media artwork for depth in showcases; keep controls clean and reserve strong contrast for black buttons and the footer.

## Imagery

Product UI, templates, and community examples appear as colorful media within otherwise white sections. The hero uses overlapping rectangular creative panels, while lower sections include video-like previews, customer logos, and a horizontally browsable template gallery. Keep imagery vivid and closely cropped to the work itself; avoid adding decorative background color blocks that compete with the examples.

## Components

### Top navigation

White horizontal bar with the Figma mark, compact product and resource links, utility actions, and a black rounded primary button; a fine hairline separates it from the page.

### Hero composition

Wide asymmetric arrangement: large black headline at left, layered creative product imagery in the center, and a standalone black Get started CTA at right.

### Feature narrative

Spacious text-led statements with muted supporting copy, occasional two-column placement, and understated text links for product exploration.

### Media showcase

Product and creative examples presented as large image panels, with simple circular play controls and minimal surrounding interface.

### Customer proof

Testimonial quote paired with a prominent 95% statistic and a horizontal row of recognizable customer logos.

### Template gallery

Horizontal strip of colorful community template previews with small category links and compact carousel controls.

### Dark footer

Full-width black closing area with white Figma branding, social icons, and several tightly organized columns of small navigation links.

### Measured component styles

- **Primary button** (“Get started for free”): background #000000 · text #ffffff · radius 8px · padding 12px 22px · 330 18px figmaSans
- **Link** (“Explore Figma Design”): transparent background · text #000000 · radius 2px · padding 0px · 400 16px figmaSans
- **Navigation item** (“Products Solutions Community Resources P”): transparent background · text #000000 · radius 0px · padding 0px · 330 18px figmaSans

## Do

- Use white as the dominant page canvas.
- Set primary text and key actions in black.
- Keep hero content asymmetric and media-led.
- Use large, regular-weight headlines with tight tracking.
- Let colorful product examples supply most visual variety.
- Preserve generous whitespace between major sections.

## Don't

- Do not add broad colored section backgrounds.
- Do not turn every feature into a bordered card.
- Do not make secondary copy as dark or prominent as headlines.
- Do not center every section into the same template.
- Do not add heavy shadows to ordinary interface elements.
- Do not let decoration overwhelm product imagery.

## Agent prompt

Build a new Figma-style page on a Gallery White (#ffffff) canvas with Ink (#000000) typography and CTA fills. Use Figma Sans or a close sans-serif substitute, with oversized regular headlines, tight tracking, and smaller muted supporting copy in Soft Graphite (#757575). Keep the layout wide and editorial: asymmetric hero, generous open space, varied single- and two-column sections, and a clear closing footer band. Use colorful product or community imagery as the main source of visual richness; do not spread Canvas Blue (#00b6ff) across large surfaces. Keep borders subtle in Rule Gray (#d6d6d6), interfaces mostly flat, and buttons simply rounded. Build clear navigation, concise feature narratives, media showcases, and a compact proof or gallery section without imposing a repetitive card grid.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide asymmetric hero with left headline, central layered media, and right CTA. | Primary get-started action, Product concept at a glance | Large black headline, Layered creative panels, Black rounded CTA |
| 2 | feature-split | Two-column narrative area with text and supporting product or agent content. | Explain AI collaboration, Link to agent exploration | Black headline, Muted body copy, Sparse media and link treatment |
| 3 | feature-grid | Introductory heading followed by paired feature areas. | Separate design and build paths, Explore related tools | Two-column feature composition, Minimal text links, Media-led space |
| 4 | product-showcase | Broad, media-heavy showcase with several creative previews. | Browse product examples, Use video play controls | Colorful cropped previews, Overlapping media, Circular play icons |
| 5 | feature-split | Spacious single-column section with headline, supporting copy, and media. | Connect design context to code, Explore Figma Make | Black headline, Gray supporting text, Minimal text link |
| 6 | testimonials | Two-column testimonial and statistic followed by a horizontal logo row. | Customer quote, Proof-point statistic, Recognizable customer logos | Large quotation text, Oversized percentage, Compact logo strip |
| 7 | cta | Centered headline above a broad black call-to-action button. | Single primary action, Reinforce the next step | Centered black heading, Wide black rounded CTA, High-contrast white label |
| 8 | gallery | Left-aligned title above a horizontal strip of template previews and controls. | Browse community resources, Move through carousel items | Colorful preview tiles, Small category links, Compact carousel controls |
| 9 | footer | Full-width black band with branding and several link columns. | Browse product and company links, Access social and locale controls | Black background, White brand mark, Dense multi-column links |

## Source CSS custom properties (selected)

```css
--global-font-sans: "figmaSans","figmaSans Fallback",SF Pro Display,system-ui,helvetica,sans-serif;
--global-font-mono: "figmaMono","figmaMono Fallback",SF Mono,menlo,monospace;
--global-cursor-text: text;
--fig-space-none: 0;
--fig-space-4: 0.25rem;
--fig-space-6: 0.375rem;
--fig-space-8: 0.5rem;
--fig-space-12: 0.75rem;
--fig-space-16: 1rem;
--fig-space-24: 1.5rem;
--fig-space-32: 2rem;
--fig-space-40: 2.5rem;
--fig-space-56: 3.5rem;
--fig-space-64: 4rem;
--fig-space-80: 5rem;
--fig-space-120: 7.5rem;
--fig-radius-2: 0.125rem;
--fig-radius-4: 0.25rem;
--fig-radius-8: 0.5rem;
--fig-radius-12: 0.75rem;
--fig-radius-16: 1rem;
--fig-radius-24: 1.5rem;
--fig-radius-28: 1.75rem;
--fig-radius-full: 9999px;
--fig-elevation-1: 0 0.25rem 2rem 0 color-mix(in oklch, #000000, transparent 90%);
--fig-elevation-1-shadow: 0 0.25rem 2rem color-mix(in oklch, #000000, transparent 90%);
--fig-elevation-2: 0 1.5rem 4.375rem 0 color-mix(in oklch, #000000, transparent 90%);
--fig-elevation-2-shadow: 0 1.5rem 4.375rem color-mix(in oklch, #000000, transparent 90%);
--fig-theme-bg: #FFFFFF;
--fig-theme-fg: #000000;
--fig-theme-fg-muted: color-mix(in oklch, #000000, transparent 46%);
--fig-theme-card-bg: color-mix(in oklch, #000000, transparent 96%);
--fig-theme-btn-primary-bg: #000000;
--fig-theme-btn-primary-bg-hover: color-mix(in oklch, #000000, transparent 15%);
--fig-theme-btn-primary-fg: #FFFFFF;
--fig-theme-btn-secondary-bg: color-mix(in oklch, #000000, transparent 100%);
--fig-theme-btn-secondary-fg: #000000;
--fig-theme-btn-transparent-bg: color-mix(in oklch, #000000, transparent 96%);
--fig-theme-btn-transparent-bg-hover: color-mix(in oklch, #000000, transparent 92%);
--fig-theme-btn-transparent-fg: #000000;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/figma-com