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

# ECOVACS · Design System

> Robotics showcased through calm, cinematic product stories.

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

The ECOVACS homepage pairs cinematic product imagery with a restrained black, white, and blue interface. Alternating full-width campaigns, product categories, innovation stories, and support content make the broad robotics range easy to explore.

## North star

Let cinematic, context-rich product imagery lead, while a quiet white interface and precise blue actions keep navigation effortless.

## Overview

The page uses a clean white canvas for product categories, recognition content, and footer information, punctuated by expansive black sections for brand films and technology stories. Black and charcoal image bands create contrast rather than a permanently dark interface. Bright blue marks the most actionable controls and selected highlights; the cyan-to-blue gradient is a restrained secondary flourish. SF Pro supplies a neutral, contemporary voice, with centered bold headings for campaign sections and compact, readable supporting copy. The layout alternates full-bleed hero photography with a two-column category presentation, centered video and innovation areas, and a subdued newsletter strip. Images carry much of the visual identity: polished robots appear in believable homes, outdoors, and pools, while close-up technology footage gives darker sections depth. Comfortable spacing, simple separators, and modest rounded controls keep the experience premium and approachable without decorative clutter.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, light product-category sections, footer, and text or controls over dark imagery. |
| Action Blue | `#3877f5` | `--color-action-blue` | accent | Blue outlined Buy controls and prominent footer or interface actions. |
| Campaign Black | `#000000` | `--color-campaign-black` | neutral | Brand-film and innovation section backgrounds, dark campaign bands, and primary text on white. |
| Slate Ink | `#253746` | `--color-slate-ink` | neutral | Muted informational text, especially footer copy and secondary interface text. |
| Laser Cyan | `#00c0fa` | `--color-laser-cyan` | accent | Cyan end of the blue gradient and bright links or action highlights. |
| Electric Blue | `#015eea` | `--color-electric-blue` | accent | Deeper end of the cyan-blue gradient used for links, buttons, and navigation highlights. |
| Mist Border | `#eef1f5` | `--color-mist-border` | semantic | Fine separators and pale footer boundary details. |
| Graphite Stage | `#3c3e40` | `--color-graphite-stage` | surface | Charcoal background for the top statistics and time-saved content band. |
| Cloud Panel | `#f8f9fc` | `--color-cloud-panel` | surface | Very light neutral content surface used behind secondary section content. |
| Deep Accent | `#1e5397` | `--color-deep-accent` | accent | Secondary blue accent measured on Buy controls; use sparingly for action emphasis. |
| Soft Divider | `#d9dadc` | `--color-soft-divider` | semantic | Subtle input and navigation borders rather than prominent card outlines. |
| Quiet Line | `#e7e7e7` | `--color-quiet-line` | semantic | Light borders on compact secondary controls and navigation details. |
| Footer Charcoal | `#1e1e1e` | `--color-footer-charcoal` | neutral | Minor dark footer text; not a defining large-area page color. |
| Muted Silver | `#adadad` | `--color-muted-silver` | neutral | Subtle navigation gradient detail; secondary to the primary black-and-white interface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Campaign Black) · `--color-surface-2` → `#3c3e40` (Graphite Stage) · `--color-surface-3` → `#f8f9fc` (Cloud Panel) · `--color-surface-4` → `#eef1f5` (Mist Border) · `--color-text` → `#000000` (Campaign Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#253746` (Slate Ink) · `--color-border` → `#eef1f5` (Mist Border) · `--color-accent` → `#3877f5` (Action Blue) · `--color-accent-2` → `#1e5397` (Deep Accent) · `--color-accent-3` → `#00c0fa` (Laser Cyan)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#3c3e40` | 1.96:1 | fail |
| `#000000` | `#f8f9fc` | 19.95:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#3c3e40` | 10.74:1 | AAA |
| `#ffffff` | `#f8f9fc` | 1.05:1 | fail |
| `#253746` | `#ffffff` | 12.26:1 | AAA |
| `#253746` | `#000000` | 1.71:1 | fail |
| `#253746` | `#3c3e40` | 1.14:1 | fail |
| `#253746` | `#f8f9fc` | 11.64:1 | AAA |

### Gradients

- `linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0))`
- `linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 6.67%, rgba(0, 0, 0, 0.01) 13.33%, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.18),`
- `linear-gradient(79deg, rgb(0, 192, 250) -15.26%, rgb(1, 94, 234) 110.25%)`
- `linear-gradient(21deg, rgb(0, 192, 250), rgb(1, 94, 234))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SF Pro | `--font-body` | system | 400, 600, 700, 200, 510, 500 | Primary family for navigation, headings, body copy, links, and buttons. | Inter |
| Arial | `--font-arial` | system | 500, 510 | Measured in the small newsletter email input. | Arial |

- **SF Pro:** Neutral sans-serif with regular body and navigation text, semibold hero headings, and bold section titles; normal tracking and sentence case.
- **Arial:** System fallback for compact form text; regular weight, unobtrusive, and conventionally cased.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | 1.63 | 0 | — | SF Pro | Large hero or campaign headline over full-bleed product imagery. |
| h2 | 40px | 700 | 1.33 | 0 | — | SF Pro | Centered campaign, recognition, and major section headings. |
| h3 | 30px | 700 | 1.3 | 0 | — | SF Pro | Product and technology feature titles within showcase sections. |
| h4 | 28px | 600 | 1.33 | 0 | — | SF Pro | Secondary feature or supporting content headings. |
| body | 14px | 400 | 1.86 | 0 | — | SF Pro | Product descriptions, campaign summaries, and supporting copy. |
| caption | 12px | 400 | 2 | 0 | — | SF Pro | Compact image captions, legal notes, and fine-print details. |
| button | 14px | 400 | 1.6 | 0 | — | SF Pro | Short action labels including Buy, Submit, and Learn More. |
| nav | 14px | 400 | 3.93 | 0 | — | SF Pro | Top-level product, support, and company navigation. |
| link | 14px | 400 | 1.6 | 0 | — | SF Pro | Product-card actions and footer navigation links. |

OpenType features in use: `"tnum"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 11, 12, 13, 15, 16, 17, 20, 22, 24, 28 px.
- Section rhythm 80px · element gap 15px · card padding — · max content width 1184px.

A comfortable, wide desktop layout uses a measured 1184px maximum content width, with several full-bleed campaign sections extending beyond it. The page alternates a cinematic hero, centered product-category tiles, dark video and innovation bands, a two-column promotional area, and compact closing content. Center alignment is common for section headings; product imagery remains the main anchor within cards. Section transitions are clear and spacious, with a denser multi-column footer and newsletter strip at the end.

## Shape & elevation

- Radius: button `13px` · input `8px` · media `8px` · nav `7px` · link `13px` · xs `7px` · sm `8px` · md `13px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The visual system is mostly flat: strong photography and alternating black or white section bands provide hierarchy instead of prominent shadows. Use subtle borders for inputs and compact controls. Rounded buttons and media frames soften the interface, while image overlays and dark gradients separate white copy from busy scenes. Avoid adding card shadows not evidenced by the page.

## Imagery

Use polished product photography and video as the primary visual material: robots in lived-in interiors, lawns, pools, and clean studio-like technology scenes. Hero imagery spans the viewport and supports white overlay copy with a dark gradient where needed. Category panels pair isolated products with contextual environments. Innovation content uses dark, close-cropped technical footage; illustrations and awards remain supporting details rather than brand-defining color sources.

## Components

### Transparent campaign navigation

Compact SF Pro navigation sits over the hero image, with white text and a bright blue Store action.

### Full-bleed product hero

Wide lifestyle product image with white headline and supporting copy, a blue Learn More action, outlined Buy control, and slide indicators.

### Category tiles

Centered product categories use large contextual imagery, a concise title, short description, and compact action links.

### Video story carousel

Dark campaign area centers a featured video tile with captioning and adjacent story previews.

### Innovation selector

Dark technology showcase pairs close-up media with a horizontal row of selectable product-innovation labels.

### Newsletter signup

Pale gray strip combines a short signup prompt, restrained bordered email field, and blue submit button.

### Multi-column footer

White footer organizes product, support, and company links, with app download assets and a compact legal row.

### Measured component styles

- **Primary button** (“Buy”): background #363839 · text #ffffff · border 1px solid #ffffff · radius 13px · padding 0px 17px · 400 18px SF Pro
- **Secondary button** (“Buy”): transparent background · text #3877f5 · border 1px solid #3877f5 · radius 13px · padding 0px 12px · 400 14px SF Pro
- **Link** (“Learn More”): transparent background · text #ffffff · radius 13px · padding 0px 12px · 400 14px SF Pro
- **Input**: background #ffffff · text #253746 · border 1px solid #d9dadc · radius 8px · padding 0px 24px · 400 12px Arial
- **Navigation item** (“DEEBOT WINBOT GOAT ULTRAMARINE Prime Fal”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px SF Pro

## Do

- Use full-bleed lifestyle photography for the lead product story.
- Alternate white information areas with deliberate black campaign bands.
- Reserve bright blue for actions and selected highlights.
- Keep headings centered in campaign and feature sections.
- Use product-specific imagery across category cards.
- Keep borders and interface decoration subtle.

## Don't

- Do not turn the whole page into a dark theme.
- Do not use gradients as a dominant page background.
- Do not add heavy shadows to cards or controls.
- Do not let decorative colors from product imagery define the UI palette.
- Do not overcrowd product panels with long copy.
- Do not replace the photographic storytelling with generic illustrations.

## Agent prompt

Build a polished consumer-robotics page in the ECOVACS visual style. Use Gallery White (#ffffff) as the main canvas and Campaign Black (#000000) for selected cinematic feature bands; Graphite Stage (#3c3e40) can support a secondary dark section. Use Action Blue (#3877f5) for primary actions and the Laser Cyan (#00c0fa) to Electric Blue (#015eea) gradient only as a restrained accent. Set type in a clean SF Pro-like sans serif, using Inter as a practical substitute, with bold centered section headings and readable compact body copy. Lead with full-width lifestyle product photography and white overlay text, then alternate product-category imagery, video stories, innovation features, and useful support content. Keep spacing comfortable, borders fine, controls modestly rounded, and shadows absent or very subtle. Make the desktop content broad but organized, and finish with a quiet newsletter strip and structured footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | stats | Full-width charcoal band with counters and supporting text. | At-a-glance metrics | Charcoal surface, High-contrast text |
| 2 | product-grid | White section with centered product tiles and full-width imagery. | Browse product families, Learn-more actions | Image-led tiles, Centered titles, Compact buttons |
| 3 | video | Black six-column campaign area with a centered story carousel. | Featured video, Carousel navigation | Dark media stage, White typography, Video captions |
| 4 | feature-grid | White, centered section with a two-column set of promotional panels. | Discover promotions, Access support | Image-led panels, Light neutral cards |
| 5 | video | Black innovation section with media and a horizontal feature selector. | Explore technologies, Switch feature topics | Dark media, Selectable labels, Centered heading |
| 6 | testimonials | Centered white section with brand recognition copy and award graphic. | Social proof | Centered heading, Pale content panel, Award artwork |
| 7 | newsletter | Compact pale-gray horizontal strip with signup form and social links. | Email signup, Social discovery | Bordered input, Blue submit action |
| 8 | footer | White multi-column footer with grouped links and app download area. | Browse support links, Download app | Three-column navigation, App badges, QR code |
| 9 | footer | Compact white legal row with copyright, policy links, and locale controls. | Review legal details, Change location | Small legal text, Inline links |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--toastify-color-light: #fff;
--toastify-color-dark: #121212;
--toastify-color-info: #3498db;
--toastify-color-success: #07bc0c;
--toastify-color-warning: #f1c40f;
--toastify-color-error: #e74c3c;
--toastify-color-transparent: rgba(255, 255, 255, .7);
--toastify-icon-color-info: #3498db;
--toastify-icon-color-success: #07bc0c;
--toastify-icon-color-warning: #f1c40f;
--toastify-icon-color-error: #e74c3c;
--toastify-toast-background: #fff;
--toastify-toast-bd-radius: 6px;
--toastify-font-family: sans-serif;
--toastify-text-color-light: #757575;
--toastify-text-color-dark: #fff;
--toastify-text-color-info: #fff;
--toastify-text-color-success: #fff;
--toastify-text-color-warning: #fff;
--toastify-text-color-error: #fff;
--toastify-spinner-color: #616161;
--toastify-spinner-color-empty-area: #e0e0e0;
--toastify-color-progress-light: linear-gradient( to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55 );
--toastify-color-progress-dark: #bb86fc;
--toastify-color-progress-info: #3498db;
--toastify-color-progress-success: #07bc0c;
--toastify-color-progress-warning: #f1c40f;
--toastify-color-progress-error: #e74c3c;
--toastify-color-progress-bgo: .2;
--neutral-background: #dae2ec;
--background: #ebf1fe;
--brand-background: #f3f8ff;
--special-background: #f9fbfd;
--primary: #3877f5;
--brand-black: #253746;
--gradient-primary: linear-gradient(79deg, #00c0fa -15.26%, #015eea 110.25%);
--gradient-primary-hover: linear-gradient(90deg, #14c8ff 0%, #1c76ff 100%);
--error-background: rgba(250, 20, 6, .1);
--font-size-10: 10px;
```

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