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

# Robot.com · Design System

> Approachable robotics, framed with confident simplicity

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

Robot.com pairs bold, approachable typography with immersive footage of robots working in real environments. Rounded modules, warm neutral surfaces, and sharp yellow accents give the long homepage a clear rhythm without competing with the product imagery.

## North star

Let real robot footage lead, then use restrained typography, rounded panels, and selective yellow accents to make each section immediately legible.

## Overview

The visual strategy balances understated interface chrome with large, attention-grabbing media. White is the main canvas, while near-black panels create strong pauses and carry white text; warm off-white cards soften informational and product sections. Bright yellow marks high-visibility moments such as the announcement strip, hero action, and a prominent robotics section. The palette also includes quiet gray text and surfaces for secondary information. Yellix provides a consistent sans-serif voice: large, tightly tracked headings contrast with compact, readable body copy and small navigation labels. The layout is a spacious, long-form sequence of full-width media, logo proof, dark editorial statements, product displays, metrics, and calls to action. Rounded cards and pill controls keep the industrial subject matter approachable. Photography and video show robots in real workplaces and public settings; imagery, rather than decorative effects, supplies most of the page’s visual complexity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, white text on dark panels, and pale pill-button fill. |
| Workshop Ink | `#262626` | `--color-workshop-ink` | brand | Inverse section backgrounds, primary text, dark cards, and strong outlines. |
| Warm Porcelain | `#f8f6f3` | `--color-warm-porcelain` | surface | Soft neutral backgrounds for testimonial and information cards. |
| Quiet Graphite | `#6f6f6e` | `--color-quiet-graphite` | semantic | Muted supporting copy and secondary text. |
| Signal Lemon | `#fff65d` | `--color-signal-lemon` | accent | Announcement band, hero action, and vivid robotics section; strongest recurring attention accent. |
| Mist Stone | `#f2f1ee` | `--color-mist-stone` | surface | Subtle section tint appearing in measured section details; use sparingly behind content. |
| Pale Concrete | `#d9d7d5` | `--color-pale-concrete` | surface | Secondary card surface for a quiet, low-contrast separation. |
| Olive Signal | `#726f39` | `--color-olive-signal` | accent | Sparse accent-colored text; not a dominant interface color. |
| Footer Slate | `#686868` | `--color-footer-slate` | semantic | Low-emphasis footer text and supporting labels. |
| Soft Ash | `#8f8e8d` | `--color-soft-ash` | semantic | Occasional subdued supporting text, rather than a major section color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#262626` (Workshop Ink) · `--color-surface-2` → `#f8f6f3` (Warm Porcelain) · `--color-surface-3` → `#d9d7d5` (Pale Concrete) · `--color-text` → `#262626` (Workshop Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#6f6f6e` (Quiet Graphite) · `--color-border` → `#262626` (Workshop Ink) · `--color-accent` → `#726f39` (Olive Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#262626` | `#ffffff` | 15.13:1 | AAA |
| `#262626` | `#f8f6f3` | 14.03:1 | AAA |
| `#262626` | `#d9d7d5` | 10.54:1 | AAA |
| `#ffffff` | `#262626` | 15.13:1 | AAA |
| `#ffffff` | `#f8f6f3` | 1.08:1 | fail |
| `#ffffff` | `#d9d7d5` | 1.44:1 | fail |
| `#6f6f6e` | `#ffffff` | 5.03:1 | AA |
| `#6f6f6e` | `#262626` | 3.01:1 | AA-large |
| `#6f6f6e` | `#f8f6f3` | 4.66:1 | AA |
| `#6f6f6e` | `#d9d7d5` | 3.5:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Yellix | `--font-body` | webfont | 500, 600, 400 | Site-wide typeface for headings, body copy, navigation, links, and controls. | Manrope |

- **Yellix:** Use medium body weight and semibold headings; display and headline styles are tightly tracked, with natural sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.388, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 1 | -0.03em | — | Yellix | Oversized hero or statement headings. |
| h1 | 52px | 600 | 1.1 | -0.02em | — | Yellix | Primary page and major section headline. |
| h2 | 42px | 600 | 1.1 | -0.02em | — | Yellix | Prominent feature and editorial section headings. |
| h3 | 41px | 600 | 1 | -0.02em | — | Yellix | Product and subsection headings. |
| h4 | 38px | 600 | 1.1 | -0.02em | — | Yellix | Secondary card and content headings. |
| body | 14px | 500 | 1.16 | 0 | — | Yellix | Compact explanatory copy and supporting descriptions. |
| caption | 12px | 500 | 1.1 | -0.01em | — | Yellix | Small metadata, qualifiers, and fine-print labels. |
| button | 15px | 600 | 1.16 | 0 | — | Yellix | Semibold pill action labels. |
| nav | 24px | 600 | 1.25 | -0.02em | — | Yellix | Prominent navigation and menu labels. |
| link | 14px | 500 | 1.16 | 0 | — | Yellix | Inline actions such as product details and demo requests. |

OpenType features in use: `"ss01"`, `"salt"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 4, 5, 8, 11, 12, 14, 16, 18, 20, 21, 24, 40 px.
- Section rhythm 300px · element gap 4px · card padding 24px · max content width 1430px.

A spacious, vertically sequenced homepage uses broad media bands and content blocks, with measured page max width of 1430px. Most section headings align to the start rather than the center. Content shifts between single-column statements, multi-column proof and metric rows, and paired product presentations. Generous section separation creates pauses between stories, while cards use measured 24px padding. Keep text groups compact beside large images, and preserve clear transitions between white, warm-neutral, dark, and yellow areas.

## Shape & elevation

- Radius: button `9999px` · card `24px` · nav `17px` · link `9999px` · xs `10px` · sm `17px` · md `20px` · lg `24px` · xl `26px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955)` on interactive elements.

The design is primarily flat: measured shadow styles are absent. Separate content with contrasting section fills, rounded card silhouettes, and occasional fine borders rather than floating layers. Dark panels, image crops, and pill controls provide depth through contrast and overlap; keep card edges clean and avoid adding decorative drop shadows.

## Imagery

Use real-world robot photography and video as the dominant visual material: workshop close-ups, delivery robots, warehouse scenes, and robots interacting with people. Frame hero media edge-to-edge inside a large rounded panel, and let product images occupy generous whitespace in product sections. Keep image treatment documentary and natural; yellow grids and other graphic motifs are section-specific accents, not replacements for photography.

## Components

### Announcement strip

A bright yellow rounded band above the hero, with a short launch message and an inline directional link.

### Media hero

Large rounded video panel with overlaid white headline, yellow pill action, compact centered brand navigation, and a sales link.

### Trust logo row

A short trust statement and partner logos arranged as a broad multi-column proof section.

### Editorial statement panel

A near-black rounded panel pairing a small image with oversized muted-white statement text.

### Product cards

Warm off-white rounded cards with concise robot descriptions, a restrained text link, and ample product imagery.

### Category selector

Dark automation feature panel with a prominent active category and narrow adjacent vertical category tabs.

### Partner CTA

Large near-black rounded module with a partner mark, oversized white copy, and a small white pill action.

### Footer

Dark closing panel with compact multi-column navigation and a distinctive dotted robot-face graphic.

### Measured component styles

- **Primary button** (“Visit Formic”): background #ffffff · text #262626 · radius 9999px · padding 19px 20px · 600 15px Yellix
- **Secondary button**: transparent background · text #ffffff · border 1px solid #ffffff · radius 4px · padding 1px 0px 0px 0px · 400 16px Yellix
- **Link** (“Learn more Learn more Learn more Learn m”): transparent background · text #262626 · radius 0px · padding 0px · 600 14px Yellix
- **Card** (“Trusted by Delivery, logistics, and adve”): background #f8f6f3 · text #262626 · radius 24px · padding 24px · 400 16px Yellix
- **Navigation item** (“Talk to sales Talk to sales ads ads carg”): transparent background · text #262626 · radius 0px · padding 0px · 400 16px Yellix

## Do

- Lead with authentic footage or photography of robots at work.
- Use Signal Lemon (#fff65d) for a few high-priority moments.
- Set major headings in tight, confident Yellix-style sans serif.
- Use Workshop Ink (#262626) panels to create deliberate visual pauses.
- Keep cards rounded and their copy concise.
- Allow generous whitespace around product imagery.

## Don't

- Do not introduce gradients or decorative shadows.
- Do not use yellow as a background for every section.
- Do not center every heading or content block.
- Do not crowd product photography with dense copy.
- Do not make muted text compete with headlines.
- Do not turn the documentary imagery into glossy abstract renders.

## Agent prompt

Build a new page in Robot.com’s visual language: spacious, editorial, and grounded in real robotics footage. Use Gallery White (#ffffff) as the primary canvas and Workshop Ink (#262626) for confident inverse panels; reserve Signal Lemon (#fff65d) for one or two high-priority accents. Use Warm Porcelain (#f8f6f3) for soft information cards and Quiet Graphite (#6f6f6e) for supporting copy. Choose Yellix or a close sans-serif such as Manrope, with large tightly tracked headings and compact body copy. Compose broad media sections, left-aligned text, generous whitespace, rounded cards, and simple pill actions. Let authentic product imagery supply visual detail. Keep the page flat, avoid shadows and gradients, and alternate light and dark sections to create a clear reading rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed rounded video with overlaid left-aligned headline and action. | Explore product action, Sales navigation | Announcement strip, Overlay headline, Yellow pill CTA, Centered brand navigation |
| 2 | logo-cloud | Short intro beside a broad multi-column customer logo row. | Partner credibility, Become a partner link | Partner logos, Warm neutral cards, Compact supporting copy |
| 3 | other | Single dark, rounded editorial panel with image and oversized statement. | Brand positioning | Near-black surface, Large text, Small supporting image |
| 4 | product-showcase | Headline-led section with two-column product content and image-led cards. | Product discovery, Learn more links | Yellow graphic band, Product imagery, Rounded neutral cards |
| 5 | stats | Four-column row mixing dark statement, highlighted metric, robot image, and founder quote. | Performance proof, Scale metrics | Dark feature tile, Yellow metric card, Large figures, Image tile |
| 6 | product-grid | Two-column product showcase with copy above or beside large product images. | Product browsing, Learn more actions | Minimal product cards, Large isolated robot imagery, Compact links |
| 7 | category-nav | Featured image and dark active category panel with narrow vertical category tabs. | Category switching, Request a demo | Dark selector panel, Numbered tabs, Rounded image |
| 8 | video | Wide immersive media area with overlaid heading, inset video, and lower text action. | Play video, Learn more | Full-bleed image, Inset video thumbnail, White overlay copy |
| 9 | cta | Yellow introductory CTA followed by a large dark partner feature panel. | Talk to team, Visit partner | Yellow CTA band, Dark rounded panel, Oversized white copy, Partner image |
| 10 | footer | Large dark footer with three-column navigation and dotted graphic across the lower area. | Browse site categories, Legal links, Contact links | Dark surface, Compact link columns, Dotted robot-face motif |

## Source CSS custom properties (selected)

```css
--font-main: 'Yellix', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--bg-white: #FFFFFF;
--radius-full: 9999px;
```

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