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

# Roborock · Design System

> Quietly confident product design, made for cleaner living.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://us.roborock.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._

Roborock’s homepage pairs a restrained white-and-gray interface with immersive robot-vacuum imagery and clear shopping paths. Product discovery, feature storytelling, and practical purchase benefits are arranged in a spacious editorial flow.

## North star

Keep the interface quiet and spacious so precise product imagery leads, while red appears only where it helps shoppers act or notice.

## Overview

The visual strategy keeps the interface quiet so the products and their environments carry the story. White and pale gray establish a clean canvas across the page, with black and charcoal text providing crisp hierarchy; Roborock red is reserved for high-value accents such as the store button, promotional links, and selected emphasis. Proxima Nova is used throughout, pairing large, compactly tracked headings with readable body copy and small, unobtrusive navigation labels. The first viewport uses a wide, pale product hero with left-aligned copy and a dramatic robot-and-dock composition on the right. Below, full-width promotional photography gives way to a centered product grid, editorial product feature panels, and a split advantage section. Generous gaps separate these blocks, while restrained gray hairlines mark service and footer divisions. Rounded pill controls contrast with mostly flat, square-edged content areas. Photography is polished, tonal, and product-led rather than decorative.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas and product-card background; also used for reversed text and controls over dark imagery. |
| Mist Gray | `#f4f4f4` | `--color-mist-gray` | surface | Pale gray section background behind the hero, product stories, benefits, and lower-page content. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Strong heading and body text, plus selected navigation and product-card copy. |
| Quiet Gray | `#6c6d6e` | `--color-quiet-gray` | neutral | Muted navigation and supporting text, especially secondary labels and descriptions. |
| Roborock Red | `#eb0029` | `--color-roborock-red` | brand | Brand accent for the store action, promotional emphasis, and selected links or headings. |
| Divider Gray | `#e1e1e1` | `--color-divider-gray` | neutral | Thin card, navigation, and section-separation hairlines; avoid using it as a prominent fill. |
| Soft Charcoal | `#161616` | `--color-soft-charcoal` | neutral | Dark pill buttons, links, navigation text, and supporting copy where a softer black is appropriate. |
| Muted Silver | `#bbbbbb` | `--color-muted-silver` | semantic | Sparse subdued heading detail only; not a defining brand color or broad interface surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f4f4` (Mist Gray) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#6c6d6e` (Quiet Gray) · `--color-text-subtle` → `#161616` (Soft Charcoal) · `--color-border` → `#e1e1e1` (Divider Gray) · `--color-accent` → `#eb0029` (Roborock Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f4f4f4` | 19.09:1 | AAA |
| `#6c6d6e` | `#ffffff` | 5.18:1 | AA |
| `#6c6d6e` | `#f4f4f4` | 4.71:1 | AA |
| `#161616` | `#ffffff` | 18.1:1 | AAA |
| `#161616` | `#f4f4f4` | 16.45:1 | AAA |
| `#eb0029` | `#ffffff` | 4.6:1 | AA |
| `#eb0029` | `#f4f4f4` | 4.18:1 | AA-large |

### Gradients

- `conic-gradient(from 90deg, rgb(255, 255, 255) 0deg, rgba(255, 255, 255, 0) 360deg)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| proxima-nova | `--font-body` | webfont | 400, 500, 600, 300 | Site-wide typeface for navigation, headings, body copy, labels, links, and buttons. | Inter |
| ProximaNova-Semibold | `--font-proximanova-semibold` | webfont | 400 | Semibold variant detected in a small share of page text. | Inter |

- **proxima-nova:** Use clean sans-serif forms; headings are mostly medium or semibold, body copy regular, and major headings may use tight negative tracking.
- **ProximaNova-Semibold:** Treat as a semibold Proxima Nova face; use selectively for emphasis rather than introducing a separate typographic style.

### Type scale — Major Third (ratio ≈ 1.278, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | 1.08 | -0.02em | — | proxima-nova | Primary hero headline and strongest page-level product statement. |
| h2 | 44px | 500 | 1.23 | 0 | — | proxima-nova | Major section titles, centered above product and brand-story areas. |
| h3 | 40px | 600 | 1.1 | -0.02em | — | proxima-nova | Product names and prominent feature headings within content sections. |
| h4 | 34px | 500 | 1.53 | 0 | — | proxima-nova | Supporting feature or subsection headings in product storytelling. |
| body | 18px | 400 | 1.44 | 0 | — | proxima-nova | Descriptive product copy, benefit explanations, and newsletter text. |
| caption | 12px | 400 | 1.33 | 0 | — | proxima-nova | Compact legal, utility, and low-priority supporting labels. |
| button | 14px | 500 | 1.43 | 0 | — | proxima-nova | Short action labels inside rounded pill controls. |
| nav | 12px | 400 | 1.33 | 0 | — | proxima-nova | Compact header and footer navigation labels. |
| link | 16px | 500 | 1.25 | 0 | — | proxima-nova | Secondary actions and footer links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 6, 8, 9, 10, 12, 16, 20, 24, 32, 35, 48, 70 px.
- Section rhythm 40px · element gap 24px · card padding — · max content width 1136px.

The page uses full-width bands for campaigns and brand stories, with product content contained in a centered maximum width of 1136px. The desktop product listing uses four measured columns, while the visible assortment reads as a centered three-item row; feature storytelling alternates media and copy in two-column compositions. Major headings are centered except for hero messaging and newsletter copy. Section gaps are generous, with comfortable density and recurring whitespace between distinct shopping tasks.

## Shape & elevation

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

The interface is predominantly flat, with no measured shadow system. Separate pale sections through background shifts and use fine #e1e1e1 hairlines for service blocks and footer divisions. Most cards have square edges, while action controls use pill-shaped silhouettes; imagery itself provides the strongest sense of depth.

## Imagery

Use polished product photography and rendered product scenes, especially robot vacuums and docking stations in clean domestic environments. Hero imagery is wide and atmospheric, with copy kept clear of the main product silhouette. Product cards use isolated, legible product views; feature sections pair large close-ups or demonstrations with explanatory copy. The warm and dark tones visible in some campaign imagery belong to the photography, not the core interface palette.

## Components

### Announcement bar

Slim centered sale message above the main navigation, with a small red shopping link and a close control.

### Primary navigation

Horizontal logo, compact category links, red Store pill, and search, account, and cart utility icons.

### Campaign hero

Wide pale product-image carousel with left-aligned headline and subline, dark Learn More pill, and discreet slide indicators.

### Product card

Centered product image, product name, compact feature copy, and dark rounded Learn More action on a clean light background.

### Editorial product feature

Large product or technology visual paired with product heading, feature title, explanatory paragraph, and a restrained action.

### Service benefits

Evenly distributed reassurance items for returns, shipping, payment, warranty, and points, separated with subtle hairlines.

### Newsletter signup

Compact heading and supporting offer copy beside a rounded email field and dark Subscribe control.

### Footer directory

Multi-column link groups for products, shopping, support, discovery, and company information, followed by social and payment marks.

### Measured component styles

- **Primary button** (“Store”): background #ea0029 · text #ffffff · radius 24px · padding 6px 16px · 500 14px proxima-nova
- **Secondary button** (“Learn More”): background #161616 · text #ffffff · radius 24px · padding 12px 24px · 500 16px proxima-nova
- **Link** (“Learn More”): transparent background · text #161616 · radius 24px · padding 12px 24px · 500 16px proxima-nova
- **Input**: transparent background · text #161616 · radius 32px · padding 1px 2px 1px 20px · 400 14px proxima-nova
- **Card** (“Saros 20 Brand New RockDock® Experience ”): background #ffffff · text #000000 · radius 0px · padding 0px · 400 16px proxima-nova
- **Navigation item** (“Roborock Fall Prime Day Sale Begins：Save”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px proxima-nova

## Do

- Use white and pale gray as the dominant page surfaces.
- Reserve Roborock Red for focused brand and shopping emphasis.
- Give product photography broad, uncluttered space.
- Use Proxima Nova or a close clean sans-serif substitute consistently.
- Build major product stories as spacious image-and-copy compositions.
- Use rounded pill shapes for prominent actions.
- Separate lower-page utilities with subtle hairlines.

## Don't

- Do not turn the page into a dense dashboard or compact catalog.
- Do not use red as a large continuous background.
- Do not add heavy shadows to otherwise flat content blocks.
- Do not crowd hero copy against product imagery.
- Do not introduce decorative colors unsupported by the interface palette.
- Do not apply rounded corners to every image or content panel.
- Do not make secondary navigation compete with product headlines.

## Agent prompt

Build a new Roborock-style ecommerce page with a quiet, product-first visual hierarchy. Use Gallery White (#ffffff) and Mist Gray (#f4f4f4) for broad surfaces, Pure Ink (#000000) and Soft Charcoal (#161616) for text and dark pill actions, Quiet Gray (#6c6d6e) for secondary copy, and Roborock Red (#eb0029) sparingly for key actions and emphasis. Use Proxima Nova, or Inter if unavailable, with compact navigation, confident headings, and readable body copy. Give product photography generous space and keep hero copy clear of the focal product. Alternate centered product grids with spacious editorial image-and-copy sections. Favor flat surfaces, subtle Divider Gray (#e1e1e1) hairlines, and pill-shaped controls; avoid heavy shadows, excessive decoration, and dense layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width pale campaign carousel with left-aligned product copy and product imagery across the frame. | Slide indicators, Learn More action | Pale gray background, Large product photography, Dark pill CTA |
| 2 | feature-split | Two wide promotional image panels arranged as a full-width campaign band. | Trade-up offer, Rewards program links | Immersive domestic photography, Overlay text, Compact calls to action |
| 3 | product-grid | Centered product category tabs above a contained multi-column product listing. | Category switching, Product discovery, Learn More actions | Isolated product images, Centered labels, Dark pill buttons |
| 4 | product-showcase | Centered section heading above a horizontally arranged image-and-copy product carousel. | Carousel controls, Feature details, Learn More action | Large technical product visual, Editorial copy panel, Subtle indicators |
| 5 | feature-split | Centered heading followed by a broad two-column feature area with copy beside a large image. | Selectable benefit topics, Supporting explanation | Split layout, Selected red topic label, Large close-up imagery |
| 6 | stats | Five evenly distributed reassurance items in a single horizontal band. | Returns assurance, Shipping information, Payment and warranty reassurance | Centered compact copy, Fine vertical separators, Light background |
| 7 | newsletter | Single horizontal signup area with text on the left and a rounded form on the right. | Email capture, Discount incentive, Subscribe action | Compact heading, Rounded input, Dark submit pill |
| 8 | footer | Multi-column directory followed by a separated lower strip for brand, social, legal, and payment details. | Grouped navigation, App downloads, Support access | Small muted links, Light gray footer surface, Compact utility strip |

## Source CSS custom properties (selected)

```css
--brand-color: #EA0029;
--main-color: #161616;
--second-color: #6C6D6E;
--error-color: #D93840;
--border-color: #E1E1E1;
--disable-color: #E1E1E1;
--bg-color: #F6F6F6;
--bg-white-color: #FFF;
--navbar-text-color: #161616;
--navbar-logo-color: #6C6D6E;
--navbar-livestream-color: rgba(22, 22, 22, .2);
--seel-ew-main-color: #000000;
--color-component-overlay-bg: rgba(25, 25, 37, 0.9);
--color-component-button-primary-bg-default-neutral-inverse-resting: #ffffff;
--color-component-button-primary-text-default-neutral-inverse-resting: #0c0c14;
--color-component-button-primary-bg-default-neutral-inverse-hover: #e5e5e9;
--color-component-button-primary-text-default-neutral-inverse-hover: #313142;
--color-component-button-secondary-icon-default-neutral-inverse-resting: #ffffff;
--color-component-button-secondary-text-default-neutral-inverse-resting: #ffffff;
--color-fill-brand-indigo: #4a4af4;
--components-spacing-xxxxs: 2px;
--components-spacing-lg: 24px;
--components-spacing-xxl: 40px;
--color-primary-light: #A8A9FC;
--color-primary-dark: #2F2FC1;
--color-greyscale-black-60: #6D6E71;
--color-ui-colors-background-neutral-2: #F0F5F7;
--color-ui-colors-text-100: #101820;
--primary: #eb0029;
--secondary: #d5d5d5;
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--swiper-theme-color: #007aff;
--fw-player-border-radius: 8px;
```

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