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

# EcoFlow · Design System

> Power products framed by cinematic contrast

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

EcoFlow pairs expansive product imagery with a restrained black-and-white interface to showcase portable power and home energy solutions. The page shifts from bright product-led merchandising into a dark editorial story, awards, newsletter, and compact footer.

## North star

Let cinematic product photography carry the emotion while a restrained, high-contrast interface keeps navigation and calls to action clear.

## Overview

The visual strategy is built around contrast between a clean white merchandising canvas and long, cinematic black sections. White, black, and charcoal define the interface; the blue-gray tones that dominate some screenshots belong chiefly to campaign imagery rather than a recurring UI accent. Typography uses a Helvetica Neue–style sans serif, with centered, compact product headings and restrained supporting copy. The navigation stays small and quiet, while large headings establish each campaign or product panel. A wide hero and immersive photography lead into paired product tiles, with narrow white gutters separating the imagery. Lower on the page, the black editorial area groups action stories, award cards, and newsletter content into a continuous dark field. Layout alternates between centered promotional blocks and a more structured, left-aligned story area. Generous section spacing gives the photography room to carry the visual emphasis; controls remain simple, rounded, and high contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary canvas, bright merchandising sections, white type on dark campaign panels, and light CTA surfaces. |
| Power Black | `#000000` | `--color-power-black` | surface | Hero and editorial background, navigation band, and the continuous dark lower-page story area. |
| Mist Gray | `#e6e6e7` | `--color-mist-gray` | neutral | Muted light text against dark surfaces, including secondary copy and subdued labels. |
| Graphite Panel | `#18191b` | `--color-graphite-panel` | surface | Footer and dark card surfaces, visually distinct from the deeper black story sections. |
| Slate Copy | `#595959` | `--color-slate-copy` | neutral | Default secondary body text on light backgrounds. |
| Soft Alloy | `#adafb3` | `--color-soft-alloy` | neutral | Quiet navigation, footer links, and secondary labels on dark surfaces. |
| Carbon Line | `#3a3c3f` | `--color-carbon-line` | semantic | Subtle footer dividers and dark-surface borders. |
| Signal Blue | `#3f68e0` | `--color-signal-blue` | accent | Small form-control accent, including the measured newsletter input border; not a dominant page color. |
| Steel Gray | `#83868a` | `--color-steel-gray` | neutral | Low-emphasis footer and supporting text. |
| Quiet Ash | `#919191` | `--color-quiet-ash` | neutral | Muted footer text and low-priority supporting labels. |
| Cloud Tint | `#f5f5f6` | `--color-cloud-tint` | neutral | Very light footer surface or subtle text detail; a minor interface color. |
| Night Ink | `#03060b` | `--color-night-ink` | surface | Near-black heading and text detail appearing in measured navigation and card contexts. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Power Black) · `--color-surface-2` → `#18191b` (Graphite Panel) · `--color-text` → `#595959` (Slate Copy) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#e6e6e7` (Mist Gray) · `--color-border` → `#3a3c3f` (Carbon Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#595959` | `#ffffff` | 7:1 | AAA |
| `#595959` | `#000000` | 3:1 | AA-large |
| `#595959` | `#18191b` | 2.51:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#18191b` | 17.59:1 | AAA |
| `#e6e6e7` | `#ffffff` | 1.25:1 | fail |
| `#e6e6e7` | `#000000` | 16.84:1 | AAA |
| `#e6e6e7` | `#18191b` | 14.1:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| EN-HelveticNeue-woff2-M | `--font-body` | webfont | 300, 700 | Primary interface and body family for navigation, body copy, and links. | Inter |
| EN-HelveticNeue-woff2-B | `--font-display` | webfont | 300, 500 | Headings, buttons, and some emphasized interface text. | Inter |
| EN-HelveticNeue-woff2-EB | `--font-en-helveticneue-woff2-eb` | webfont | 500 | Primary hero heading role. | Inter |
| en-Manrope-Light | `--font-en-manrope-light` | webfont | 300, 500 | Occasional navigation and store label text. | Manrope |

- **EN-HelveticNeue-woff2-M:** Neutral sans-serif; measured weights span light through bold. Keep tracking neutral and case natural.
- **EN-HelveticNeue-woff2-B:** Use measured heading scale with restrained weight; button labels are medium weight and sentence case.
- **EN-HelveticNeue-woff2-EB:** Reserved for the strongest heading emphasis; avoid decorative tracking or all-caps styling.
- **en-Manrope-Light:** Light, clean sans-serif used sparingly beside the main Helvetica Neue family.

### Type scale — Major Third (ratio ≈ 1.23, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 500 | 1.15 | 0 | — | EN-HelveticNeue-woff2-EB | Main hero or campaign headline, centered over the lead visual. |
| h2 | 28px | 500 | 1.15 | 0 | — | EN-HelveticNeue-woff2-B | Section and product-pair headings. |
| h3 | 24px | 300 | 1.15 | 0 | — | EN-HelveticNeue-woff2-B | Secondary product titles and supporting feature headings. |
| h4 | 20px | 300 | 1.15 | 0 | — | EN-HelveticNeue-woff2-B | Smaller nested titles within content blocks. |
| body | 14px | 300 | 1.15 | 0 | — | EN-HelveticNeue-woff2-M | Product descriptions, campaign copy, and general content. |
| caption | 12px | 300 | 2.17 | 0 | — | EN-HelveticNeue-woff2-M | Small legal notes, image labels, and fine print. |
| button | 16px | 500 | 1.38 | 0 | — | EN-HelveticNeue-woff2-B | Primary CTA labels such as Learn More and Subscribe. |
| nav | 14px | 300 | 1.29 | 0 | — | EN-HelveticNeue-woff2-M | Top-level product and company navigation. |
| link | 12px | 300 | 1.33 | 0 | — | EN-HelveticNeue-woff2-M | Compact secondary links and supporting actions. |

OpenType features in use: `"tnum"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 10, 12, 14, 16, 18, 20, 24, 32, 40, 60, 80 px.
- Section rhythm 80px · element gap 4px · card padding 28px · max content width 1280px.

Use a wide desktop canvas with a measured maximum content width of 1280px and a comfortable density. Start with compact announcement and navigation bands, then give the hero and campaign sections room to breathe. Product campaigns frequently use two-column panels, separated by slim white gutters; the smart-home feature returns to a white, left-aligned content area. Lower editorial content spans a continuous black band with story cards and awards. Keep headings centered in promotional blocks, but align newsletter and editorial content to their own column structure. Maintain the measured 80px section rhythm where applicable.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `8px` · nav `9999px` · link `4px` · xs `4px` · sm `6px` · md `8px` · pill `9999px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.16) 0px 1px 2.5px 0px inset, rgba(0, 0, 0, 0.08) 0px 0px 14px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The page is mostly flat, with contrast and imagery creating hierarchy rather than drop shadows. Dark cards sit directly in the black editorial field, while thin pale gutters separate product panels. Rounded controls and cards provide the main softened edges. A measured inset shadow exists only as a minor detail, so avoid adding broad floating-card shadows.

## Imagery

Photography and campaign artwork dominate: hero products are presented in cinematic, low-key scenes, while outdoor stories use landscape imagery and warm focal points. Product tiles use carefully staged home and studio settings, with the product clearly framed and copy overlaid near the top. The dark lower section mixes documentary-style action photography with award tiles. Screenshot colors within imagery may be blue-gray or warm-toned; treat them as campaign media, not UI palette.

## Components

### Campaign hero

Full-width dark visual with centered headline, compact supporting line, and a rounded Learn More CTA; image remains the dominant element.

### Top navigation

Black navigation band with restrained light text, brand mark, product links, language control, and a compact Store action.

### Product panel pair

Two campaign tiles in a balanced grid, with centered titles and links placed over full-panel product photography.

### Product card grid

Paired portable-power campaigns separated by narrow white gutters; product imagery and short titles carry the content.

### Editorial story feed

Dark, wide story area with a left-aligned heading, large action image, and compact adjacent story navigation.

### Awards strip

Row of charcoal award cards with compact marks, names, and counts against the black editorial background.

### Newsletter form

Dark newsletter panel with a concise prompt, email input, Subscribe action, and small consent copy.

### Footer

Graphite footer surface with newsletter controls, grouped product and company links, region selector, and fine-print details.

### Measured component styles

- **Primary button**: background #ffffff · text #000000 · radius 0px · padding 0px · 300 12px en-Manrope-Light
- **Secondary button** (“Learn More”): transparent background · text #000000 · border 1px solid #ffffff · radius 30px · padding 0px 18px · 300 14px EN-HelveticNeue-woff2-M
- **Link** (“Learn More”): transparent background · text #ffffff · border 1px solid · radius 4px · padding 0px · 300 14px EN-HelveticNeue-woff2-M
- **Input**: background #ffffff · text #707070 · border 1px solid #3f68e0 · radius 4px · padding 0px 20px · 300 14px EN-HelveticNeue-woff2-M
- **Card** (“TIME Best Inventions Awards ×3”): background #18191b · text #03060b · radius 8px · padding 32px 24px · 300 14px EN-HelveticNeue-woff2-M
- **Navigation item** (“Home Energy”): transparent background · text #adafb3 · radius 0px · padding 0px · 300 14px EN-HelveticNeue-woff2-M

## Do

- Use black and white as the dominant interface contrast.
- Let product photography fill large campaign panels.
- Keep product headings centered and concise.
- Separate adjacent tiles with slim, clean gutters.
- Use rounded pill-like treatment for prominent CTAs.
- Keep lower editorial and award content on dark surfaces.

## Don't

- Do not make campaign imagery the source of recurring UI colors.
- Do not add gradients or decorative accents absent from the measured interface.
- Do not crowd the hero with dense explanatory copy.
- Do not use heavy shadows to lift every card.
- Do not make navigation louder than the campaign content.
- Do not replace the editorial black band with a pale background.

## Agent prompt

Build a new EcoFlow-style page with a restrained, high-contrast interface and image-led campaign sections. Use Gallery White (#ffffff), Power Black (#000000), and Graphite Panel (#18191b) for the main canvas and dark surfaces; reserve Signal Blue (#3f68e0) for a small form detail rather than a broad accent. Set type in a clean Helvetica Neue–like sans serif, with compact navigation, centered campaign headings, and concise supporting copy. Structure the page with a wide hero, paired product panels, and a dark editorial area for stories or proof points. Use large, cinematic product photography and let its own colors remain within the image. Keep CTAs simple and rounded, section transitions clean, and card elevation minimal. Preserve generous breathing room between major blocks while keeping small labels and footer links unobtrusive.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign hero with centered copy above a large product visual. | carousel navigation, location selector prompt, primary Learn More action | dark hero surface, centered headline, rounded CTA, image-led composition |
| 2 | gallery | Full-width scenic story image with a centered heading and short link. | story discovery, Read the Story action | centered title, full-bleed landscape image, light copy over imagery |
| 3 | product-showcase | Two equal product campaign panels in a side-by-side grid. | product discovery, Learn More links | paired imagery, centered overlay headings, narrow divider gutter |
| 4 | product-grid | Two-column grid of portable power station campaigns. | compare product options, individual Learn More actions | product photography, centered title and subtitle, white panel separators |
| 5 | product-grid | Two-column split between a product campaign and community panel. | product discovery, forum exploration | paired tile layout, centered headings, image-led panels |
| 6 | feature-split | White content section with a left-aligned introduction and wide feature image. | category tabs, feature discovery, Learn More action | light canvas, left-aligned heading, large home-energy visual |
| 7 | other | Short, full-width black band between the white feature section and editorial content. | visual transition | solid black background |
| 8 | content-feed | Wide black editorial section with a left-aligned title and story carousel. | story carousel, next-story navigation, Learn More action | dark editorial field, large documentary image, compact story copy |
| 9 | logo-cloud | Horizontal row of award cards within the dark editorial area. | award recognition | charcoal cards, compact award marks, light labels |
| 10 | newsletter | Dark two-column newsletter panel with prompt and form. | email capture, marketing consent | dark background, email input, Subscribe button, small legal copy |
| 11 | newsletter | Graphite full-width footer band with prompt and compact form. | email capture, consent acknowledgement | graphite surface, outlined input, compact submit control |
| 12 | footer | Single broad footer area with grouped links, region control, and legal details. | browse product categories, company navigation, region selection | graphite background, muted link groups, fine-print text, brand mark |

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