# Figma — Style Reference
> The collaborative canvas for design, code, and AI
**Theme:** normal
测量值已归一化；名称、用途和建议属于解释。字体摘要独立列示，不按位置配对；字体文件未随产物分发。
Figma’s sampled public language is built on extreme black-white contrast, generous white space, and Figma Sans display type with light 320–400 weights. Primary actions are black rectangles with 8–16px radii; supporting controls use transparent fills and semi-transparent hairlines. Product imagery injects saturated blue, cyan, green, purple, and orange accents, while interface chrome remains mostly neutral. Pricing uses dense typographic comparison and mobile cards with 12px radii and 24px padding. This is a three-page standard sample, not Figma’s private official design system.
Source: https://www.figma.com/
## Tokens — Colors
| Name | Value | Token | Role |
|---|---|---|---|
| Black | #000000 | --color-black | Primary high-contrast foreground and action surface. |
| White | #ffffff | --color-white | Primary light foreground and raised surface. |
| Alpha Gray 54 | #0000008a | --color-alpha-gray-54 | Semi-transparent neutral foreground and overlay tone. |
| Slate | #697485 | --color-slate | Cool secondary text and icon tone. |
| Alpha Black 08 | #00000014 | --color-alpha-black-08 | Subtle border, fill, and shadow tone. |
| Alpha Gray 16 | #00000029 | --color-alpha-gray-16 | Control border and quiet overlay tone. |
| Alpha Black 16 | #00000029 | --color-alpha-black-16 | Stronger border and hairline tone. |
| Alpha White 16 | #ffffff29 | --color-alpha-white-16 | Hairline and overlay on dark surfaces. |
| Alpha White 60 | #ffffff99 | --color-alpha-white-60 | Secondary text on black footer and dark media. |
| Light Border | #e2e2e2 | --color-light-border | Light neutral divider. |
| Alpha White 24 | #ffffff3d | --color-alpha-white-24 | Glass-like fill and border on dark media. |
| Soft Black | #000000a6 | --color-soft-black | Supporting text and captions. |
| Alpha Gray 04 | #0000000a | --color-alpha-gray-04 | Very subtle hover and fill tone. |
| Cyan Wash | #c7f8fb | --color-cyan-wash | Product accent wash and illustration surface. |
| Transparent | #00000000 | --color-transparent | Transparent background for overlays and unfilled controls. |
| Lime Wash | #f3ffe3 | --color-lime-wash | Product accent wash and illustration surface. |
| Red | #ff3737 | --color-red | Saturated product accent. |
| Green | #24cb71 | --color-green | Saturated product accent. |
| Purple | #874fff | --color-purple | Saturated product accent. |
| Orange | #ff7237 | --color-orange | Saturated product accent. |
| Cyan | #00b6ff | --color-cyan | Saturated product accent and decorative gradient stop. |
| Blue Wash | #e5f4ff | --color-blue-wash | Light blue surface wash. |
| Figma Blue | #0d99ff | --color-figma-blue | Core blue accent observed in product and UI graphics. |
| Alpha Black 04 | #0000000a | --color-alpha-black-04 | Subtle fill and hover wash. |
| Lime | #67ff7f | --color-lime | Saturated product accent. |
| Cool Wash | #e3ecf2 | --color-cool-wash | Cool illustration surface. |
| Mint Wash | #cff7d3 | --color-mint-wash | Mint illustration surface. |
| Violet Wash | #f1e5ff | --color-violet-wash | Violet illustration surface. |
| Navy | #252d41 | --color-navy | Deep navy illustration and UI accent. |
| Emerald | #14ae5c | --color-emerald | Saturated product accent. |
| Magenta | #ff24bd | --color-magenta | Saturated illustration accent. |
| Pink Wash | #ffe0fc | --color-pink-wash | Pink illustration surface. |
| Indigo | #4d49fc | --color-indigo | Saturated product accent. |
| Violet | #9747ff | --color-violet | Saturated product accent. |
| Lavender Wash | #ebebff | --color-lavender-wash | Lavender illustration surface. |
| Peach Wash | #ffdfcc | --color-peach-wash | Peach illustration surface. |
| Bright Orange | #ff5c16 | --color-bright-orange | Saturated illustration accent. |
| Conic Rings | Gradient | --gradient-conic-rings | Repeating conic ring pattern used as a decorative product motif. |
| Edge Fade | Gradient | --gradient-edge-fade | White-to-transparent edge fade for horizontally scrolling content. |
## Tokens — Typography
### Figma Sans — Primary interface and marketing typeface stack. · --font-figma-sans
- **Substitute:** "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif
- **Rendered fonts observed:** Figma VF
- **Weights:** 320, 330, 340, 360, 400, 450, 480, 520, 530, 540, 550, 580
- **Sizes:** 12px, 14px, 16px, 18px, 22px, 24px, 28px, 30px, 32px, 36px, 44px, 56px, 72px, 86px, 88px
- **Line height:** 0.95, 1, 1.1, 1.2, 1.25, 1.3, 1.35, 1.4, 1.45
- **Letter spacing:** -1.72px, -1.25px, -0.84px, -0.66px, -0.56px, -0.36px, -0.32px, -0.28px, -0.24px, -0.12px, -0.11px, -0.09px, -0.06px, normal
- **OpenType features:** "kern"
- **Role:** Primary interface and marketing typeface stack.
### Figma Mono — Monospace stack for code and technical UI copy. · --font-figma-mono
- **Substitute:** "figmaMono Fallback", "SF Mono", menlo, monospace
- **Rendered fonts observed:** Figma VF
- **Weights:** 400
- **Sizes:** 11px, 12px, 14px, 16px
- **Line height:** 1, 1.25, 1.3
- **Letter spacing:** 0.44px, 0.48px, 0.5px, 0.6px, 0.64px
- **OpenType features:** "kern"
- **Role:** Monospace stack for code and technical UI copy.
### Type Scale
| Role | Family | Weight | Size | Line Height | Letter Spacing | Token |
|---|---|---|---|---|---|---|
| Sans 16px / 22.4px · 400 | figmaSans | 400 | 16px | 1.4 | normal | --text-sans-16px-400-22-4px-font-size |
| Sans 22px / 29.7px · 320 | figmaSans | 320 | 22px | 1.35 | -0.11px | --text-sans-22px-320-29-7px-font-size |
| Sans 16px / 23.2px · 320 | figmaSans | 320 | 16px | 1.45 | -0.12px | --text-sans-16px-320-23-2px-font-size |
| Sans 18px / 25.2px · 330 | figmaSans | 330 | 18px | 1.4 | normal | --text-sans-18px-330-25-2px-font-size |
| Sans 14px / 20.3px · 340 | figmaSans | 340 | 14px | 1.45 | normal | --text-sans-14px-340-20-3px-font-size |
| Sans 30px / 36px · 400 | figmaSans | 400 | 30px | 1.2 | -0.66px | --text-sans-30px-400-36px-font-size |
| Sans 24px / 28.8px · 400 | figmaSans | 400 | 24px | 1.2 | -0.66px | --text-sans-24px-400-28-8px-font-size |
| Mono 12px / 12px · 400 | figmaMono | 400 | 12px | 1 | 0.6px | --text-mono-12px-400-12px-font-size |
| Sans 16px / 23.2px · 320 | figmaSans | 320 | 16px | 1.45 | normal | --text-sans-16px-320-23-2px-10-font-size |
| Sans 16px / 23.2px · 330 | figmaSans | 330 | 16px | 1.45 | normal | --text-sans-16px-330-23-2px-font-size |
| Sans 32px / 35.2px · 400 | figmaSans | 400 | 32px | 1.1 | -0.66px | --text-sans-32px-400-35-2px-font-size |
| Sans 44px / 48.4px · 400 | figmaSans | 400 | 44px | 1.1 | -0.66px | --text-sans-44px-400-48-4px-font-size |
| Sans 16px / 23.2px · 320 | figmaSans | 320 | 16px | 1.45 | normal | --text-sans-16px-320-23-2px-14-font-size |
| Sans 16px / 22.4px · 400 | figmaSans | 400 | 16px | 1.4 | normal | --text-sans-16px-400-22-4px-15-font-size |
| Mono 16px / 20.8px · 400 | figmaMono | 400 | 16px | 1.3 | 0.64px | --text-mono-16px-400-20-8px-font-size |
| Mono 16px / 20.8px · 400 | figmaMono | 400 | 16px | 1.3 | 0.48px | --text-mono-16px-400-20-8px-17-font-size |
| Sans 18px / 25.2px · 450 | figmaSans | 450 | 18px | 1.4 | -0.09px | --text-sans-18px-450-25-2px-font-size |
| Sans 16px / 23.2px · 450 | figmaSans | 450 | 16px | 1.45 | normal | --text-sans-16px-450-23-2px-font-size |
| Sans 16px / 23.2px · 330 | figmaSans | 330 | 16px | 1.45 | normal | --text-sans-16px-330-23-2px-20-font-size |
| Sans 18px / 25.2px · 450 | figmaSans | 450 | 18px | 1.4 | -0.09px | --text-sans-18px-450-25-2px-21-font-size |
| Sans 16px / 23.2px · 400 | figmaSans | 400 | 16px | 1.45 | normal | --text-sans-16px-400-23-2px-font-size |
| Sans 16px / 23.2px · 450 | figmaSans | 450 | 16px | 1.45 | normal | --text-sans-16px-450-23-2px-23-font-size |
| Sans 28px / 36.4px · 400 | figmaSans | 400 | 28px | 1.3 | -0.28px | --text-sans-28px-400-36-4px-font-size |
| Sans 32px / 41.6px · 400 | figmaSans | 400 | 32px | 1.3 | -0.32px | --text-sans-32px-400-41-6px-font-size |
| Sans 22px / 29.7px · 530 | figmaSans | 530 | 22px | 1.35 | -0.11px | --text-sans-22px-530-29-7px-font-size |
| Sans 18px / 25.2px · 540 | figmaSans | 540 | 18px | 1.4 | -0.09px | --text-sans-18px-540-25-2px-font-size |
| Sans 18px / 25.2px · 540 | figmaSans | 540 | 18px | 1.4 | normal | --text-sans-18px-540-25-2px-28-font-size |
| Sans 14px / 20.3px · 400 | figmaSans | 400 | 14px | 1.45 | normal | --text-sans-14px-400-20-3px-font-size |
| Sans 16px / 23.2px · 400 | figmaSans | 400 | 16px | 1.45 | normal | --text-sans-16px-400-23-2px-30-font-size |
| Sans 18px / 25.2px · 550 | figmaSans | 550 | 18px | 1.4 | normal | --text-sans-18px-550-25-2px-font-size |
| Sans 16px / 23.2px · 400 | figmaSans | 400 | 16px | 1.45 | normal | --text-sans-16px-400-23-2px-32-font-size |
| Sans 12px / 17.4px · 330 | figmaSans | 330 | 12px | 1.45 | normal | --text-sans-12px-330-17-4px-font-size |
| Mono 12px / 15.6px · 400 | figmaMono | 400 | 12px | 1.3 | 0.5px | --text-mono-12px-400-15-6px-font-size |
| Mono 14px / 18.2px · 400 | figmaMono | 400 | 14px | 1.3 | 0.5px | --text-mono-14px-400-18-2px-font-size |
| Sans 72px / 72px · 400 | figmaSans | 400 | 72px | 1 | -1.25px | --text-sans-72px-400-72px-font-size |
| Sans 88px / 88px · 400 | figmaSans | 400 | 88px | 1 | -1.25px | --text-sans-88px-400-88px-font-size |
| Sans 32px / 41.6px · 400 | figmaSans | 400 | 32px | 1.3 | -0.32px | --text-sans-32px-400-41-6px-38-font-size |
| Sans 28px / 36.4px · 400 | figmaSans | 400 | 28px | 1.3 | -0.28px | --text-sans-28px-400-36-4px-39-font-size |
| Sans 12px / 17.4px · 480 | figmaSans | 480 | 12px | 1.45 | -0.06px | --text-sans-12px-480-17-4px-font-size |
| Sans 24px / 31.2px · 400 | figmaSans | 400 | 24px | 1.3 | normal | --text-sans-24px-400-31-2px-font-size |
| Sans 36px / 36px · 400 | figmaSans | 400 | 36px | 1 | -1.25px | --text-sans-36px-400-36px-font-size |
| Sans 18px / 23.4px · 400 | figmaSans | 400 | 18px | 1.3 | normal | --text-sans-18px-400-23-4px-font-size |
| Sans 36px / 43.2px · 400 | figmaSans | 400 | 36px | 1.2 | -0.36px | --text-sans-36px-400-43-2px-font-size |
| Sans 56px / 61.6px · 400 | figmaSans | 400 | 56px | 1.1 | -0.84px | --text-sans-56px-400-61-6px-font-size |
| Sans 56px / 56px · 400 | figmaSans | 400 | 56px | 1 | -1.25px | --text-sans-56px-400-56px-font-size |
| Sans 14px / 20.3px · 580 | figmaSans | 580 | 14px | 1.45 | normal | --text-sans-14px-580-20-3px-font-size |
| Sans 14px / 20.3px · 580 | figmaSans | 580 | 14px | 1.45 | normal | --text-sans-14px-580-20-3px-48-font-size |
| Mono 11px / 13.75px · 400 | figmaMono | 400 | 11px | 1.25 | 0.44px | --text-mono-11px-400-13-75px-font-size |
| Sans 22px / 29.7px · 540 | figmaSans | 540 | 22px | 1.35 | -0.11px | --text-sans-22px-540-29-7px-font-size |
| Sans 18px / 25.2px · 330 | figmaSans | 330 | 18px | 1.4 | normal | --text-sans-18px-330-25-2px-51-font-size |
| Sans 12px / 15px · 360 | figmaSans | 360 | 12px | 1.25 | normal | --text-sans-12px-360-15px-font-size |
| Sans 24px / 32.4px · 520 | figmaSans | 520 | 24px | 1.35 | -0.24px | --text-sans-24px-520-32-4px-font-size |
| Sans 12px / 15px · 520 | figmaSans | 520 | 12px | 1.25 | normal | --text-sans-12px-520-15px-font-size |
| Sans 24px / 32.4px · 340 | figmaSans | 340 | 24px | 1.35 | -0.12px | --text-sans-24px-340-32-4px-font-size |
| Sans 18px / 22.5px · 400 | figmaSans | 400 | 18px | 1.25 | normal | --text-sans-18px-400-22-5px-font-size |
| Sans 14px / 17.5px · 580 | figmaSans | 580 | 14px | 1.25 | normal | --text-sans-14px-580-17-5px-font-size |
| Sans 18px / 22.5px · 580 | figmaSans | 580 | 18px | 1.25 | normal | --text-sans-18px-580-22-5px-font-size |
| Sans 86px / 81.7px · 400 | figmaSans | 400 | 86px | 0.95 | -1.72px | --text-sans-86px-400-81-7px-font-size |
| Sans 56px / 56px · 400 | figmaSans | 400 | 56px | 1 | -0.56px | --text-sans-56px-400-56px-60-font-size |
| Sans 14px / 17.5px · 400 | figmaSans | 400 | 14px | 1.25 | normal | --text-sans-14px-400-17-5px-font-size |
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** comfortable
### Spacing Scale
| Name | Value | Token |
|---|---|---|
| Space 4px | 4px | --spacing-space-4px |
| Space 12px | 12px | --spacing-space-12px |
| Space 8px | 8px | --spacing-space-8px |
| Space 16px | 16px | --spacing-space-16px |
| Space 24px | 24px | --spacing-space-24px |
| Space 2px | 2px | --spacing-space-2px |
| Space 6px | 6px | --spacing-space-6px |
| Space 40px | 40px | --spacing-space-40px |
| Space 20px | 20px | --spacing-space-20px |
| Space 32px | 32px | --spacing-space-32px |
| Space 4.5px | 4.5px | --spacing-space-4-5px |
| Space 18px | 18px | --spacing-space-18px |
| Space 80px | 80px | --spacing-space-80px |
| Space 30px | 30px | --spacing-space-30px |
| Space 70px | 70px | --spacing-space-70px |
| Space 60px | 60px | --spacing-space-60px |
| Space 10px | 10px | --spacing-space-10px |
| Space 22px | 22px | --spacing-space-22px |
| Space -16px | -16px | --spacing-space-neg-16px |
| Space 48px | 48px | --spacing-space-48px |
| Space 64px | 64px | --spacing-space-64px |
| Space 120px | 120px | --spacing-space-120px |
| Space -2px | -2px | --spacing-space-neg-2px |
| Space 3px | 3px | --spacing-space-3px |
| Space -40px | -40px | --spacing-space-neg-40px |
| Space 56px | 56px | --spacing-space-56px |
| Space 229.328px | 229.328px | --spacing-space-229-328px |
| Space 229.344px | 229.344px | --spacing-space-229-344px |
| Space -10px | -10px | --spacing-space-neg-10px |
| Space 43.2px | 43.2px | --spacing-space-43-2px |
| Space 36px | 36px | --spacing-space-36px |
| Space 14px | 14px | --spacing-space-14px |
| Space 344px | 344px | --spacing-space-344px |
| Space -24px | -24px | --spacing-space-neg-24px |
| Space 570.469px | 570.469px | --spacing-space-570-469px |
| Space 172.625px | 172.625px | --spacing-space-172-625px |
| Space -32px | -32px | --spacing-space-neg-32px |
| Space 310.797px | 310.797px | --spacing-space-310-797px |
| Space 192.469px | 192.469px | --spacing-space-192-469px |
| Space 114.672px | 114.672px | --spacing-space-114-672px |
| Space 45.5px | 45.5px | --spacing-space-45-5px |
### Border Radius
| Element | Value |
|---|---|
| Radius 2px | 2px |
| Pill | 9999px |
| Radius 4px | 4px |
| Circle | 50% |
| Radius 8px | 8px |
| Radius 24px | 24px |
| Radius 80px | 80px |
| Radius 16px | 16px |
| Radius 12px | 12px |
| Radius 40px | 40px |
### Shadows
| Name | Value | Token |
|---|---|---|
| Inset Hairline | #00000029 0px 0px 0px 1px inset | --shadow-inset-hairline |
| Bottom Hairline | #00000029 0px 1px 0px 0px | --shadow-bottom-hairline |
| Soft Elevation | #0000001a 0px 4px 32px 0px | --shadow-soft-elevation |
| Black Inset | #000000 0px 0px 0px 1px inset | --shadow-black-inset |
### Layout
- **Page max-width:** 1320px
- **Section gap:** 80px
- **Card padding:** 24px
- **Element gap:** 12px
## Components
### Global navigation
**Role:** Transparent top navigation with 18px light sans labels and compact menu triggers.
Background #00000000; Text #000000; Font figmaSans 16px / 400; Line height 23.2px; Letter spacing -0.14px; Padding 0px; Radius 0px.
### Primary conversion button
**Role:** Black 8px-radius action with white label and 12/22px padding.
Background #000000; Text #ffffff; Font figmaSans 18px / 330; Line height 25.2px; Letter spacing -0.14px; Padding 12px 22px 12px 22px; Radius 8px.
### Secondary outlined button
**Role:** Transparent action with 8px radius, 12/22px padding, and semi-transparent inset border.
Background #00000000; Text #000000; Font figmaSans 16px / 400; Line height 23.2px; Letter spacing normal; Padding 12px 22px 12px 22px; Radius 8px; Shadow #00000029 0px 0px 0px 1px inset.
### Hero display headline
**Role:** 56px/56px Figma Sans 400 headline with -1.25px tracking.
Background #00000000; Text #000000; Font figmaSans 56px / 400; Line height 56px; Letter spacing -1.25px; Padding 0px; Radius 0px.
### Large marketing action
**Role:** Black 16px-radius action using generous 24/32px padding for a primary media moment.
Background #000000; Text #ffffff; Font figmaSans 16px / 400; Line height 23.2px; Letter spacing normal; Padding 24px 32px 24px 32px; Radius 16px.
### Pricing plan card
**Role:** Mobile pricing article with 12px radius and 24px padding; pricing sections stack vertically inside.
Background #00000000; Text #000000; Font figmaSans 18px / 330; Line height 25.2px; Letter spacing normal; Padding 24px; Radius 12px; Border 1px solid #00000029.
## Do's and Don'ts
### Do
- Use black primary actions with white labels and 8–16px radii for high-contrast conversion moments.
- Keep interface copy in Figma Sans at 14–18px with light weights; reserve 44–86px type for marketing display moments.
- Use transparent secondary controls with semi-transparent inset hairlines rather than heavy borders.
- Keep neutral UI chrome separate from saturated product illustrations; color should signal creative content, not decorate every interface element.
- Maintain compact spacing with 4/8/12/16px rhythm and 24px card padding.
### Don't
- Do not infer hover, focus, expanded menus, editor workspaces, or logged-in product UI from this default-state marketing sample.
- Do not promote every saturated illustration color into Figma’s core product palette.
- Do not assume variable font weights such as 320 or 330 are standard static fonts; preserve the full variation settings and stack.
- Do not treat iframe, Shadow DOM, or authenticated editor content as covered by this document probe.
## Surfaces
| Level | Name | Value | Purpose |
|---|---|---|---|
| 1 | White | #ffffff | Raised or media surface role inferred from sampled context. |
| 3 | Black | #000000 | Raised or media surface role inferred from sampled context. |
| 2 | Alpha White 24 | #ffffff3d | Raised or media surface role inferred from sampled context. |
| 2 | Alpha White 16 | #ffffff29 | Raised or media surface role inferred from sampled context. |
| 1 | Alpha Gray 04 | #0000000a | Raised or media surface role inferred from sampled context. |
| 1 | Cyan Wash | #c7f8fb | Raised or media surface role inferred from sampled context. |
| 0 | Transparent | #00000000 | Raised or media surface role inferred from sampled context. |
| 1 | Lime Wash | #f3ffe3 | Raised or media surface role inferred from sampled context. |
| 2 | Alpha Black 08 | #00000014 | Raised or media surface role inferred from sampled context. |
| 1 | Alpha Black 04 | #0000000a | Raised or media surface role inferred from sampled context. |
| 1 | Lime | #67ff7f | Raised or media surface role inferred from sampled context. |
## Elevation
- **Inset Hairline:** #00000029 0px 0px 0px 1px inset
- **Bottom Hairline:** #00000029 0px 1px 0px 0px
- **Soft Elevation:** #0000001a 0px 4px 32px 0px
- **Black Inset:** #000000 0px 0px 0px 1px inset
