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

# eufy · Design System

> Smart home products in bold, image-led storefronts

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

eufy’s homepage pairs a broad product catalog with large promotional imagery, rounded product cards, and recurring shopping prompts. A restrained black-and-white interface lets campaign colors and product photography supply most of the visual energy.

## North star

Keep the interface quiet and easy to scan, letting large product imagery and clear shopping actions lead each section.

## Overview

The page uses a restrained interface palette around vivid campaign and product imagery. Near-black text (#080a0f) anchors headings, product descriptions, and dark purchase buttons; white and pale gray provide clean card and canvas surfaces. A substantial charcoal band (#4c4c4c) appears in the measured page data and the screenshots show extensive darkened content, so treat dark sections as intentional contrast rather than applying a dark overlay to the whole page. Eufy blue (#005d8e) is a brand accent, but it is not the dominant homepage color. MontForAnker supplies a geometric sans-serif voice: bold, tightly tracked headings and compact, strong-weight labels. The layout moves through broad campaign banners, product and category grids, and editorial or benefit modules. Rounded cards and pill-shaped CTAs soften the dense catalog structure. Photography, rendered products, and lifestyle scenes carry the storytelling; keep interface decoration quiet, borders subtle, and spacing consistent enough to separate many content groups.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Night Ink | `#080a0f` | `--color-night-ink` | neutral | Primary headings, body copy, links, and dark purchase buttons. |
| Soft Mist | `#f5f5f7` | `--color-soft-mist` | surface | Pale section and card surfaces, plus light button fills. |
| Charcoal Field | `#4c4c4c` | `--color-charcoal-field` | surface | Inverse section band; preserve as a dark contrast surface rather than a page-wide tint. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, white cards, and text placed on dark navigation or imagery. |
| Eufy Blue | `#005d8e` | `--color-eufy-blue` | brand | Brand accent for occasional highlights and links; measured prominently in gradients, not broad fills. |
| Cloud Line | `#e5e7eb` | `--color-cloud-line` | semantic | Subtle card edges, dividers, and pale supporting surfaces. |
| Quiet Divider | `#cccccc` | `--color-quiet-divider` | semantic | Fine navigation separators; use sparingly. |
| Graphite | `#1e2024` | `--color-graphite` | neutral | Secondary dark button and supporting text color. |
| Slate Gray | `#767880` | `--color-slate-gray` | semantic | Muted supporting text and subdued control labels. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f7` (Soft Mist) · `--color-surface-2` → `#4c4c4c` (Charcoal Field) · `--color-surface-3` → `#e5e7eb` (Cloud Line) · `--color-text` → `#080a0f` (Night Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#f5f5f7` (Soft Mist) · `--color-border` → `#e5e7eb` (Cloud Line) · `--color-accent` → `#005d8e` (Eufy Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#080a0f` | `#ffffff` | 19.8:1 | AAA |
| `#080a0f` | `#f5f5f7` | 18.18:1 | AAA |
| `#080a0f` | `#4c4c4c` | 2.31:1 | fail |
| `#080a0f` | `#e5e7eb` | 15.99:1 | AAA |
| `#ffffff` | `#f5f5f7` | 1.09:1 | fail |
| `#ffffff` | `#4c4c4c` | 8.59:1 | AAA |
| `#ffffff` | `#e5e7eb` | 1.24:1 | fail |
| `#f5f5f7` | `#ffffff` | 1.09:1 | fail |
| `#f5f5f7` | `#4c4c4c` | 7.89:1 | AAA |
| `#f5f5f7` | `#e5e7eb` | 1.14:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(0, 93, 142) 0%, rgb(0, 93, 142) 100%)`
- `linear-gradient(97.34deg, rgb(81, 80, 68) -1.08%, rgb(5, 6, 8) 99.28%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MontForAnker | `--font-body` | webfont | 700, 600, 900 | Headings, body copy, navigation, buttons, and links throughout the storefront. | Montserrat |

- **MontForAnker:** Use bold, compact headings with negative tracking; navigation is semibold. Keep labels in sentence case, not all caps.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1.1 | -0.04em | — | MontForAnker | Campaign hero headline and primary page statement. |
| h2 | 40px | 700 | 1 | -0.04em | — | MontForAnker | Major homepage section headings. |
| h3 | 32px | 700 | 1.2 | -0.04em | — | MontForAnker | Feature, category, and promotional module headings. |
| h4 | 24px | 700 | 1.2 | 0 | — | MontForAnker | Product and card titles. |
| body | 16px | 700 | 1.4 | -0.02em | — | MontForAnker | Product descriptions and supporting section copy. |
| caption | 14px | 700 | 1.2 | 0 | — | MontForAnker | Compact metadata, campaign notes, and product details. |
| button | 14px | 700 | 1.2 | 0 | — | MontForAnker | Shopping and discovery calls to action. |
| nav | 15px | 600 | 1.2 | 0 | — | MontForAnker | Primary storefront navigation labels. |
| link | 14px | 700 | 1.2 | 0 | — | MontForAnker | Text links in cards, footer, and utility navigation. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 3, 4, 6, 8, 10, 11, 12, 15, 16, 20, 24, 32, 60, 64 px.
- Section rhythm 64px · element gap 8px · card padding 111px · max content width —.

Build a long, full-width storefront with a central content area and broad, image-led campaign bands. Arrange product and category content in responsive card grids, with occasional split layouts and horizontal product or editorial rails. The screenshot shows compact gutters and multiple cards per row, balanced by generous separation between major sections. Use a clear heading above each module and align its content consistently. The measured page has no max-width value; avoid imposing an unsupported fixed width and let the layout adapt to the viewport.

## Shape & elevation

- Radius: button `9999px` · card `16px` · nav `50%` · link `16px` · xs `8px` · sm `16px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Favor flat surfaces and restrained separation over heavy interface chrome. Product cards use rounded corners, with a measured large-card shadow available for layered emphasis; most card separation comes from image contrast and light surfaces. Keep borders hairline-thin in appearance, and reserve pronounced depth for overlays or floating elements.

## Imagery

Use large campaign photography, product renders, and lifestyle scenes as the primary visual material. Hero banners can blend product arrangements with promotional graphics; smaller cards should keep the product or scene legible and pair it with concise copy. Dark product imagery appears alongside bright lifestyle photography, so let each image retain its own treatment instead of applying one global filter. Use image crops to fill rounded cards and wide feature panels.

## Components

### Campaign hero

Wide promotional image panel with prominent campaign copy, deal details, and a rounded shopping CTA.

### Product card

Rounded image-led card with concise title, supporting details, price or offer, and shopping links.

### Pill CTA

Bold MontForAnker 14px button; measured variants use dark, white, or pale-gray fills and pill-shaped corners.

### Category navigation

Compact category links or visual product icons that direct visitors into major product families.

### Feature banner

Wide lifestyle or technology visual paired with a short heading, supporting copy, and discovery action.

### Product rail

Horizontally browsable product cards with offer badges and distinct learn-more and shop actions.

### Measured component styles

- **Primary button** (“Pre-Order Now”): background #080a0f · text #ffffff · radius 24px · padding 11px 20px 10px 20px · 700 14px MontForAnker
- **Secondary button** (“Shop Now”): background #f5f6f7 · text #1e2024 · radius 24px · padding 11px 20px 10px 20px · 700 14px MontForAnker
- **Link** (“Anker Charging Anker SOLIX Anker eufy An”): transparent background · text #323232 · radius 0px · padding 0px · 600 14px MontForAnker
- **Card** (“$1,030 OFF eufy 8-Cam Kit PoE NVR Securi”): background #eaeaec · text #080a0f · radius 16px · padding 0px 0px 444.7px 0px · 600 14px MontForAnker
- **Navigation item** (“Security Clean Mom & Baby New Home eufyM”): transparent background · text #ffffff · radius 0px · padding 0px · 600 14px MontForAnker

## Do

- Lead major sections with product or campaign imagery.
- Keep headings bold, concise, and tightly tracked.
- Use rounded cards and pill-shaped purchase buttons.
- Separate catalog modules with clear section headings.
- Use pale surfaces to distinguish cards from the canvas.
- Let promotional art introduce color without recoloring the interface.

## Don't

- Do not tint the entire page charcoal.
- Do not use brand blue as a dominant page background.
- Do not add ornamental borders around every card.
- Do not crowd product cards with long descriptions.
- Do not flatten all modules into one continuous grid.
- Do not apply a uniform dark overlay to product photography.

## Agent prompt

Create a responsive eufy-style storefront page with a calm interface and image-led product storytelling. Use Night Ink (#080a0f) for headings and primary dark CTAs, Gallery White (#ffffff) for the canvas, and Soft Mist (#f5f5f7) for quiet card surfaces. Use Eufy Blue (#005d8e) sparingly as an accent, not a dominant fill. Build full-width campaign imagery followed by clearly titled product and category grids, with rounded cards and pill-shaped actions. Use MontForAnker or Montserrat, bold compact headings, and semibold navigation. Keep borders subtle and shadows restrained. Mix product renders with lifestyle photography, preserving each image’s native contrast. Maintain generous separation between modules while keeping catalog rows easy to scan. Add concise purchase or discovery actions to relevant cards.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long, single-column storefront with full-width campaign imagery and stacked product, category, and editorial modules. | shop by category, product discovery, promotional CTAs | image-led banners, rounded product cards, dark and light section contrast |

## Source CSS custom properties (selected)

```css
--primary: #fff;
--primary-2: #f1f3f5;
--secondary: #000;
--secondary-2: #111;
--text-base: #323232;
--text-primary: #323232;
--text-secondary: #fff;
--accent-0: #fff;
--accent-1: #fafafa;
--accent-2: #eaeaea;
--accent-3: #999;
--accent-4: #888;
--accent-5: #666;
--accent-6: #444;
--accent-7: #333;
--accent-8: #111;
--accent-9: #000;
--font-sans: Mont,sans-serif;
--brand-color: #005d8e;
--brand-hover: #669ebb;
--brand-sub-color: #fc8037;
--brand-text-color: #005d8e;
--brand-button-bg-color: #005d8e;
--brand-button-text-color: #fff;
--brand-linear-color: #10b5ec;
--anker-color: #00a7e1;
--anker-linear-color: #10b5ec;
--eufy-color: #005d8e;
--eufy-nav-color: #005d8e;
--eufy-logo-color: #999;
--soundcore-color: #00a9df;
--nebula-color: #e42d46;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--btn-bg-active-color: #005d8e;
--btn-bg-disabled-color: #ccdfe850;
--btn-text-active-color: #fff;
--btn-bg-secondary-color: transparent;
--btn-bg-secondary-disabled-color: #f5f5f550;
--success-color-0: #30d158;
```

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