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

# Agility — Digit 5 · Design System

> Warm minimalism frames industrial robotics in motion.

**Theme:** light · **Industry:** ai · **Source:** https://www.agilityrobotics.com/solutions/digit-5 · **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._

A product-led page introduces Digit 5 through cinematic robot footage, concise capability messaging, and a restrained warm-neutral interface. Large media moments alternate with compact feature cards, specification details, editorial resources, and a dark contact-and-footer close.

## North star

Let cinematic robot imagery carry the drama, and keep the warm-neutral interface, typography, and controls calm and precise.

## Overview

The visual system balances an understated warm canvas with industrial, high-contrast robot footage. Gallery White (#f0eeeb) covers most informational sections, while Ink (#292827) anchors typography and the closing contact/footer band. Pale stone surfaces and fine gray borders keep cards and controls quiet rather than decorative; greens and blacks prominent in the screenshots belong chiefly to product photography, not the interface palette. Agility Diatype supplies clean, rounded sans-serif headlines and compact body copy, with a small monospace family reserved for uppercase labels and technical metadata. The page moves between a full-bleed cinematic hero, spacious text-led introduction, rounded video panels, a three-card capability row, a product showcase, and editorial resource cards. Generous breathing room separates these shifts, while thin rules and modest radii maintain a practical, engineered feel.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#f0eeeb` | `--color-gallery-white` | brand | Main warm canvas across product information, cards, and light sections; also the hero CTA fill and text on dark surfaces. |
| Soft Ink | `#292827` | `--color-soft-ink` | brand | Primary text and headings on light sections; background for the contact and footer area and text on light buttons. |
| Media Black | `#000000` | `--color-media-black` | surface | Dark underlay and gradient tone in cinematic media sections; not a general page canvas color. |
| Pale Stone | `#d6d3ce` | `--color-pale-stone` | surface | Muted capability-card surface that supports dark copy and restrained diagrams. |
| Screen Graphite | `#787775` | `--color-screen-graphite` | semantic | Intermediate gray observed in media gradients; not a defining interface color. |
| Charcoal Link | `#393837` | `--color-charcoal-link` | surface | Dark rounded contact/resource link surfaces with light text. |
| Quiet Rule | `#c1beba` | `--color-quiet-rule` | semantic | Fine borders around secondary buttons and subtle interface separators. |
| Footer Slate | `#51504e` | `--color-footer-slate` | semantic | Subtle divider or line tone within the dark footer region. |
| Studio White | `#ffffff` | `--color-studio-white` | surface | Occasional light card or media highlight; secondary to the warmer page canvas. |
| Footer Graphite | `#494847` | `--color-footer-graphite` | semantic | Low-contrast line or border tone in the dark footer. |
| Muted Taupe | `#938f89` | `--color-muted-taupe` | semantic | Secondary copy, especially subdued footer text. |
| Mist Gray | `#e0e0df` | `--color-mist-gray` | semantic | Pale neutral appearing in section gradients, not a primary UI surface. |
| Cloud Gray | `#c6c5c0` | `--color-cloud-gray` | semantic | Soft gradient transition tone in media or section treatments. |

### Semantic aliases

`--color-canvas` → `#f0eeeb` (Gallery White) · `--color-surface` → `#292827` (Soft Ink) · `--color-surface-2` → `#000000` (Media Black) · `--color-surface-3` → `#393837` (Charcoal Link) · `--color-surface-4` → `#d6d3ce` (Pale Stone) · `--color-text` → `#292827` (Soft Ink) · `--color-text-muted` → `#f0eeeb` (Gallery White) · `--color-text-subtle` → `#938f89` (Muted Taupe) · `--color-border` → `#c1beba` (Quiet Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#292827` | `#f0eeeb` | 12.71:1 | AAA |
| `#292827` | `#000000` | 1.43:1 | fail |
| `#292827` | `#393837` | 1.26:1 | fail |
| `#f0eeeb` | `#292827` | 12.71:1 | AAA |
| `#f0eeeb` | `#000000` | 18.13:1 | AAA |
| `#f0eeeb` | `#393837` | 10.1:1 | AAA |
| `#938f89` | `#f0eeeb` | 2.78:1 | fail |
| `#938f89` | `#292827` | 4.58:1 | AA |
| `#938f89` | `#000000` | 6.53:1 | AA |
| `#938f89` | `#393837` | 3.64:1 | AA-large |

### Gradients

- `linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))`
- `linear-gradient(rgba(207, 206, 198, 0) 13.57%, rgb(240, 238, 235) 97.85%), radial-gradient(346.03% 100% at 50% 100%, rgba(240, 238, 235, 0.5) 0%, rgba(210, 211, 211, 0.5) 23.56%, rgba(186, 186, 183, 0.5) 48.56%, rgba(178`
- `linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0) 54%)`
- `linear-gradient(rgb(255, 255, 255), rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Agility Diatype | `--font-body` | webfont | 400, 700 | Display, headings, body copy, navigation, and buttons. | Inter |
| Agility Diatype Mono | `--font-mono` | webfont | 700, 400 | Eyebrows, technical labels, and compact uppercase metadata. | Space Mono |

- **Agility Diatype:** Mostly regular weight; compact negative tracking on headings and body. Keep sentence case for headlines and body.
- **Agility Diatype Mono:** Use bold mono sparingly, with tracked uppercase labels and technical captions.

### Type scale — Perfect Fifth (ratio ≈ 1.537, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 400 | 1 | -0.04em | — | Agility Diatype | Oversized hero or product-display headline where used. |
| h1 | 62px | 400 | 0.93 | -0.03em | — | Agility Diatype | Primary page headline over the cinematic hero. |
| h2 | 36px | 400 | 1 | -0.03em | — | Agility Diatype | Major section headings and prominent resource or CTA titles. |
| h3 | 28px | 400 | 1 | -0.02em | — | Agility Diatype | Feature-card and supporting content headings. |
| h4 | 24px | 400 | 1 | 0.03em | uppercase | Agility Diatype Mono | Uppercase mono-style section labels and compact headings. |
| body | 14px | 400 | 1.25 | -0.01em | — | Agility Diatype | Introductory copy, feature descriptions, and supporting paragraphs. |
| caption | 13px | 400 | normal | -0.015em | — | Agility Diatype | Small image captions and supporting metadata. |
| nav | 14px | 400 | 1 | -0.01em | — | Agility Diatype | Compact top navigation labels. |
| eyebrow | 12px | 700 | 1 | 0.06em | uppercase | Agility Diatype Mono | Tracked uppercase labels such as HUMANOID and FEATURES. |
| code | 12px | 700 | 1 | 0.06em | uppercase | Agility Diatype Mono | Technical or specification-style uppercase labels. |

OpenType features in use: `"ss01", "ss07", "ss09", "ss10", "ss11"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 5, 6, 8, 10, 11, 12, 13, 15, 18, 30, 50, 55, 150 px.
- Section rhythm 55px · element gap 12px · card padding 27px · max content width 1330px.

The page uses a wide desktop canvas with content organized in broad horizontal bands and a measured maximum width of 1330px. The hero and major video moments run full bleed or nearly full width; text introductions, feature cards, specifications, and resource content sit in aligned columns. The system feels comfortable rather than dense, with a measured 55px section gap and 12px element gap. Alignment alternates between left-led editorial sections and centered calls to action. Repeated card rows provide a compact counterpoint to expansive media.

## Shape & elevation

- Radius: button `6px` · card `12px` · media `2px` · nav `6px` · link `24px` · xs `1px` · sm `2px` · md `6px` · lg `10px` · xl `12px` · 2xl `24px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat, with no measured shadows. Separation comes from alternating warm and dark section backgrounds, delicate borders, and modest rounded corners: 6px buttons, 12px cards, and 2px media. Image overlays add depth inside the photography, not as a general UI elevation system.

## Imagery

Large, cinematic photography and video show Digit in warehouse, factory, and product settings. The hero uses dark, close-cropped footage with text overlaid near the lower left; later media panels show the robot in context, often with rounded corners and subtle overlays for legibility. Product imagery supplies the page’s teal-green and black color, while diagrams and resource portraits remain secondary supporting content.

## Components

### Cinematic hero

Full-bleed video or photography with a small uppercase eyebrow, large white headline, light filled CTA, and playback control.

### Primary CTA

Gallery White (#f0eeeb) fill with Soft Ink (#292827) text; measured 6px radius and a right-pointing arrow.

### Outlined action

Transparent button with a 1px light or Quiet Rule (#c1beba) border and a measured 6px radius.

### Capability cards

Three Pale Stone (#d6d3ce) cards with dark headings, concise body copy, and simple line diagrams.

### Product showcase

Wide, light product panel with a centered Digit image, large title, compact technical specifications, and a download action.

### Editorial resource cards

Small image-led cards in a four-column row, followed by compact title and metadata.

### Dark contact panels

Two image-backed contact/resource links sit within the Soft Ink (#292827) closing band.

### Measured component styles

- **Primary button** (“DEPLOY DIGIT 5 →”): background #f0eeeb · text #292827 · border 1px solid #f0eeeb · radius 6px · padding 13px 15px · 400 19px Agility Diatype
- **Secondary button** (“WATCH THE VIDEO +”): transparent background · text #292827 · border 1px solid #f0eeeb · radius 6px · padding 11px 13px · 400 19px Agility Diatype
- **Link** (“Talk to our team Ready to put Digit to w”): background #393837 · text #f0eeeb · radius 24px · padding 18px · 400 19px Agility Diatype
- **Card** (“Flexible automation Digit is engineered ”): background #d6d3ce · text #292827 · radius 12px · padding 88.3px 0px 18px 0px · 400 19px Agility Diatype
- **Navigation item** (“Solutions +”): transparent background · text #f0eeeb · radius 6px · padding 8px 10px · 400 14px Agility Diatype

## Do

- Use Gallery White (#f0eeeb) as the main informational canvas.
- Reserve Soft Ink (#292827) for primary text and the closing dark band.
- Let robot footage provide the strongest color and visual drama.
- Keep section labels compact, uppercase, and mono-styled.
- Use fine borders and restrained rounded corners on controls and cards.
- Alternate broad media moments with concise, well-spaced content.

## Don't

- Do not turn photographic teal or green into a brand UI accent.
- Do not add decorative gradients across ordinary content sections.
- Do not use heavy shadows or layered card elevation.
- Do not crowd the spacious media-led section rhythm.
- Do not make technical labels large or sentence-cased.
- Do not replace the warm canvas with stark white everywhere.

## Agent prompt

Build a new Agility-style product page with a calm industrial editorial feel. Use Gallery White (#f0eeeb) for the main canvas and Soft Ink (#292827) for text and the closing contact/footer section. Keep Pale Stone (#d6d3ce) for quiet capability cards and Quiet Rule (#c1beba) for thin borders. Use Agility Diatype or Inter for clean, regular-weight headlines and body copy; reserve tracked uppercase mono labels for small technical eyebrows. Lead with a full-bleed cinematic robot image or video, then alternate spacious text, compact feature cards, a product/specification showcase, and image-led resources. Let footage supply saturated color. Keep controls flat, corners modest, and spacing generous; avoid decorative shadows and extra accent colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed cinematic media with lower-left text and CTA overlay. | primary deploy CTA, video playback control | dark media overlay, white headline, light filled button |
| 2 | feature-split | Two-column introduction on the warm canvas, eyebrow opposite a broad text block. | scannable introduction | small mono label, large body copy |
| 3 | video | Wide rounded video panel spanning the content area. | watch video action, playback control | rounded media frame, overlay controls |
| 4 | feature-grid | Three equal capability cards in a horizontal row. | quick capability scan | Pale Stone cards, simple line diagrams, small corner markers |
| 5 | product-showcase | Wide media-led product panel with centered robot, title, and four specs. | specification scan, download product sheet | large product title, thin divider, outlined download action |
| 6 | feature-grid | Introductory heading above a four-column image-and-copy grid. | feature browsing, related links | image cards, compact titles, editorial copy |
| 7 | video | Wide contextual video panel with text and button overlaid. | watch video action | rounded full-width media, left-aligned overlay copy |
| 8 | video | Second wide video panel with overlaid heading and supporting text. | watch video action | rounded full-width media, contrast overlay |
| 9 | content-feed | Four editorial resource cards in a row on the light canvas. | browse all resources, open article cards | portrait thumbnails, compact metadata, small arrow link |
| 10 | cta | Dark band containing two side-by-side image-backed panels. | contact team CTA, browse resources | dark section canvas, image panels, centered white copy |
| 11 | footer | Dark footer with logo at left and three link columns at right. | grouped site navigation, social links, legal links | Soft Ink background, muted separators, compact footer text |

## Source CSS custom properties (selected)

```css
--_color-themes---stroke: #938f8980;
--_color-themes---background: #f0eeeb;
--_color-themes---primary-text: #292827;
--_letter-spacing---body-copy: -.01em;
--_letter-spacing---h1: -.03em;
--_letter-spacing---h2: -.02em;
--_letter-spacing---h3: -.01em;
--_letter-spacing---h4: -.01px;
--_letter-spacing---h5: -.01px;
--_letter-spacing---h6: .06px;
--_color-themes---secondary-text: #958d83;
--_spacing---md-margin: 18px;
--_sizes---radius-md<deleted|variable-1bd2ea9c-d497-c6dc-b435-bd42ede8ccdc>: 12px;
--_base-colors---bright-white: white;
--_base-colors---off-black: #292827;
--_base-colors---warm-white: #f0eeeb;
--_letter-spacing---mono-caps: .06em;
--_responsive-spacing---site-padding: 55px;
--_spacing---lg-margin: 30px;
--_spacing---xl-margin: 55px;
--_spacing---sm-margin: 12px;
--_spacing---xs-margin: 5px;
--_base-colors---light-tan-70: #e8e3d8b3;
--_radii---radius-sm: 6px;
--_letter-spacing---small-body-copy: -.01em;
--_color-themes---nav-background-hover: #fffc;
--_letter-spacing---big-paragraph: -.03em;
--_line-height---card-text: 125%;
--_responsive-spacing---hero-nav-spacing: 250px;
--_color-themes---button-blur-background: #e8e3d8b3;
--_radii---radius-lg: 24px;
--_color-themes---secondary-background: white;
--_radii---radius-md: 12px;
--_base-colors---off-black-light: #393837;
--_spacing---xxl-margin: 100px;
--_responsive-type-scale---card-text: clamp(15px,calc(15px + 0*((100vw - 500px)/940)),15px);
--_letter-spacing---card-text: -.01em;
--_base-type-sizes---desktop--card-text: 15px;
--_base-type-sizes---desktop--micro-text: 10px;
--_color-themes---card-blur-background: #e8e3d8b3;
```

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