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

# Figure — Figure 03 · Design System

> A restrained monochrome stage for a human-scale robot.

**Theme:** light · **Industry:** ai · **Source:** https://www.figure.ai/figure · **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._

Figure 03 pairs oversized, precise typography with expansive robot imagery and a restrained monochrome palette. The page shifts from a bright product introduction to cinematic, full-bleed video sections before closing with a layered team and navigation footer.

## North star

Let the robot and its cinematic imagery dominate, using monochrome typography and ample white space as a quiet frame.

## Overview

The visual strategy is built around contrast between a clean white canvas and near-black product details. White (#ffffff) dominates the opening and closing areas, while black (#000000) marks two full-bleed video bands; #0c0c0c supplies crisp headline and interface text. Muted gray (#6d6d6d) and pale gray (#cecece) appear in secondary copy, rules and navigation dividers. Product imagery carries the softer metallic grays, so these photographic tones should not be mistaken for extra brand colours. Display headlines use PP Neue Machina Plain in uppercase, pairing geometric character with unusually generous scale; Neue Haas Grotesk Text handles readable copy and controls. The single-column page lets the robot occupy much of the frame, then uses offset text and fine horizontal rules to organize specifications. Spacious white intervals give way to immersive video, with restrained borders and minimal interface chrome keeping attention on the machine.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas, light-section background, and reversed navigation or button text. |
| Figure Ink | `#0c0c0c` | `--color-figure-ink` | brand | Headlines, body copy, navigation, and the filled Sign Up button. |
| Stage Black | `#000000` | `--color-stage-black` | surface | Background for the two full-bleed cinematic video sections. |
| Soft Graphite | `#6d6d6d` | `--color-soft-graphite` | neutral | Muted text and subtle rules, including specification separators and footer details. |
| Pale Divider | `#cecece` | `--color-pale-divider` | neutral | Fine navigation and footer dividers; keep it to hairlines rather than large fills. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Stage Black) · `--color-text` → `#0c0c0c` (Figure Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#6d6d6d` (Soft Graphite) · `--color-border` → `#6d6d6d` (Soft Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0c0c0c` | `#ffffff` | 19.56:1 | AAA |
| `#0c0c0c` | `#000000` | 1.07:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#6d6d6d` | `#ffffff` | 5.17:1 | AA |
| `#6d6d6d` | `#000000` | 4.06:1 | AA-large |

### Gradients

- `linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, rgb(12, 12, 12), rgb(12, 12, 12))`
- `linear-gradient(90deg, rgba(13, 13, 13, 0), rgba(13, 13, 13, 0)), linear-gradient(90deg, rgb(12, 12, 12), rgb(12, 12, 12))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| neue-haas-grot-text | `--font-body` | webfont | 400, 500 | Body copy, descriptions, controls, and readable interface text. | Inter |
| pp-neue-machina-plain | `--font-display` | webfont | 400 | Oversized product titles, section headings, and uppercase navigation labels. | Space Mono |

- **neue-haas-grot-text:** Use regular text for copy and medium-weight controls; keep sentence case and restrained tracking.
- **pp-neue-machina-plain:** Use regular weight, mostly uppercase; display lettering is large with slightly tight tracking.

### Type scale — Golden Ratio (ratio ≈ 1.637, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 122px | 400 | 1 | -0.01em | uppercase | pp-neue-machina-plain | Oversized uppercase product or campaign headline. |
| h1 | 52px | 400 | 1.11 | 0 | uppercase | pp-neue-machina-plain | Primary product title, such as FIGURE 03. |
| h2 | 28px | 400 | 1.11 | 0 | uppercase | pp-neue-machina-plain | Major section headings and prominent footer navigation labels. |
| h3 | 22px | 400 | 1.1 | -0.01em | — | neue-haas-grot-text | Smaller feature and supporting section headings. |
| body | 17px | 400 | 1.6 | -0.01em | — | neue-haas-grot-text | Product explanation, feature descriptions, and supporting copy. |
| caption | 16px | 400 | 1.5 | -0.01em | — | neue-haas-grot-text | Compact secondary descriptions and image-adjacent details. |
| button | 14px | 500 | 1.2 | 0 | — | neue-haas-grot-text | Signup and contact actions. |
| nav | 14px | 400 | 1 | 0.02em | uppercase | pp-neue-machina-plain | Uppercase primary navigation labels. |

OpenType features in use: `"ss12"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 5, 8, 16, 20, 24, 28, 32, 40, 48, 56, 60, 80 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1344px.

Use a single-column, full-width page with content constrained to the measured 1344px maximum. The opening pairs a large robot image on the left with a headline and short description offset to the right; specifications align to fine horizontal rules alongside the figure. Keep generous vertical breathing room, then switch to full-bleed media bands. The final light section layers team imagery with a split footer containing signup details and a large link list. Overall density is comfortable, not card-heavy.

## Shape & elevation

- Radius: button `9999px` · nav `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The interface is essentially flat: no measured shadows or card surfaces define its hierarchy. Use crisp white and black section bands, restrained gray hairlines, and occasional image overlays for text legibility. Keep layering tied to photography and the translucent-looking footer composition rather than adding floating UI or ornamental elevation.

## Imagery

Make large, photorealistic humanoid robot imagery the central visual element. The opening frames a close, front-facing robot against a bright white setting; later sections use edge-to-edge cinematic video stills in real environments and darker scenes. Preserve natural metallic grayscale tones and let image contrast create depth. Avoid decorative illustrations or extra graphic treatments.

## Components

### Primary navigation

A compact top bar with uppercase links over the hero imagery; keep labels restrained and separate items with subtle spacing or hairlines.

### Product hero

Pair the large robot portrait with an oversized uppercase FIGURE 03 title and a short, readable description.

### Specification rules

Present product measurements as right-aligned values organized by thin horizontal separators alongside the robot.

### Full-bleed video bands

Use edge-to-edge, cinematic footage on black section backgrounds, with compact white text placed over the image.

### Pill signup button

Use a #0c0c0c fill, #ffffff label, medium sans-serif text, and the measured fully rounded treatment.

### Footer navigation

Combine a brand and signup area with a prominent numbered list of links, fine dividers, and understated legal links.

### Measured component styles

- **Primary button** (“Sign Up”): background #0c0c0c · text #ffffff · border 1px solid #0c0c0c · radius 24px · padding 0px 32px · 500 14px neue-haas-grot-text
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 400 14px neue-haas-grot-text
- **Navigation item** (“FIGURE 03 HELIX INDEX NEWS CAREERS COMPA”): transparent background · text #0c0c0c · radius 0px · padding 0px · 400 16px neue-haas-grot-text

## Do

- Keep the main palette strictly monochrome.
- Let large robot imagery lead each product-focused view.
- Use uppercase geometric display typography for key headings.
- Leave generous open space around the hero title.
- Use fine gray rules to organize specifications and link lists.
- Reserve full-bleed black bands for cinematic media.

## Don't

- Don't introduce bright accent colours.
- Don't turn the page into a grid of rounded cards.
- Don't add heavy shadows or decorative gradients.
- Don't let body copy compete with the product imagery.
- Don't treat photographic metal tones as added brand colours.
- Don't crowd the hero with multiple competing calls to action.

## Agent prompt

Build a new product page in Figure’s restrained, cinematic visual style. Use Gallery White (#ffffff) as the primary canvas, Figure Ink (#0c0c0c) for headlines and controls, and Stage Black (#000000) for full-bleed video or media bands. Reserve Soft Graphite (#6d6d6d) and Pale Divider (#cecece) for muted copy and fine rules. Pair oversized uppercase geometric display type with a clean sans-serif for body text. Keep the layout spacious and mostly single-column, using full-width robot photography or video as the focal point. Align product facts along delicate horizontal rules; use few interface elements and no card grid or heavy shadows. Make the navigation and footer quiet, precise, and secondary to the imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-detail | Bright single-column product canvas; large robot portrait on the left, offset title and description on the right, specifications along the image. | Primary navigation, Product specifications, Scroll-led discovery | Oversized uppercase title, Fine gray rules, White canvas |
| 2 | video | Full-bleed black media section with edge-to-edge footage and compact text overlay. | Autoplay-style cinematic viewing, Overlay feature copy | Black section band, Full-width video, Light text overlay |
| 3 | video | Another full-bleed black video band, with the robot and short editorial copy sharing the frame. | Sequential media storytelling, Caption-led context | Edge-to-edge video, Minimal overlay text, Dark cinematic treatment |
| 4 | footer | Light footer block layered over team imagery; signup content sits beside a large numbered link list. | Email signup, Primary site navigation, Legal links | Large uppercase link labels, Hairline separators, Pill signup control |

## Source CSS custom properties (selected)

```css
--color-white: #fff;
--color-black: #000;
--color-black-alt: #1d1d1d;
--color-figure-black: #0c0c0c;
--color-figure-white: #f6f6ef;
--color-grey-alt-2: #2e2e2e;
--swiper-theme-color: #007aff;
```

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