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

# UGREEN Official Site · Design System

> Clean product storytelling, grounded in everyday technology

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

UGREEN pairs full-bleed product campaigns with calm, spacious product and editorial sections. Monochrome typography and pale neutral surfaces let vivid photography carry most of the visual impact.

## North star

Keep the interface quiet and spacious so richly detailed product and lifestyle imagery—not decorative UI—sets the visual tone.

## Overview

The page is built on a restrained monochrome foundation: white canvas, pale gray section bands, black typography, and occasional darker areas in the footer. The measured green, blue, red, and yellow appear as small badges rather than a dominant brand palette; campaign imagery supplies the stronger color. Metropolis is used throughout, with centered, weighty headings and straightforward body copy. The 48px hero heading and 40px section heading establish clear hierarchy without decorative type effects. Layout alternates full-bleed campaign media with spacious product grids, category browsing, lifestyle imagery, proof points, and editorial content. Product tiles sit on light surfaces and rely on photography rather than visible card borders or shadows. Rounded outline actions recur over both light and dark media. Generous section spacing gives the long homepage room to breathe, while compact partner marks, review cards, and news modules create denser moments lower down.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, light product cards, and text or outlines placed over dark campaign imagery. |
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | Primary headings and body text, dark footer bands, and black outline actions. |
| Soft Porcelain | `#f8f8f8` | `--color-soft-porcelain` | surface | Pale background for signature products, category browsing, lifestyle content, and newsroom sections. |
| Cool Mist | `#f0f1f2` | `--color-cool-mist` | surface | Cool gray band behind innovation stats, partner logos, review cards, and creator videos. |
| Graphite Gray | `#404040` | `--color-graphite-gray` | neutral | Muted supporting text and measured hairline or section borders. |
| Quiet Silver | `#dadada` | `--color-quiet-silver` | neutral | Subtle border on the outlined everyday-essentials action; a minor divider tone. |
| Frosted Blue Gray | `#e5e9f0` | `--color-frosted-blue-gray` | surface | Pale gradient stop measured in section styling, not a defining interface color. |
| Soft Charcoal | `#2d2d2d` | `--color-soft-charcoal` | neutral | Secondary dark heading and copy tone; subordinate to the primary black text. |
| Badge Green | `#007934` | `--color-badge-green` | semantic | Small measured badge color; not a defining surface or campaign color. |
| Badge Blue | `#1975b7` | `--color-badge-blue` | semantic | Small badge accent only; blue in campaign imagery is photographic, not this UI token. |
| Badge Red | `#c30000` | `--color-badge-red` | semantic | Small trade-show badge accent in newsroom content. |
| Badge Gold | `#ffd700` | `--color-badge-gold` | semantic | Small brand badge accent; not a general-purpose button or section color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f8f8` (Soft Porcelain) · `--color-surface-2` → `#f0f1f2` (Cool Mist) · `--color-surface-3` → `#000000` (Carbon Ink) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#404040` (Graphite Gray) · `--color-border` → `#404040` (Graphite Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f8f8f8` | 19.77:1 | AAA |
| `#000000` | `#f0f1f2` | 18.57:1 | AAA |
| `#ffffff` | `#f8f8f8` | 1.06:1 | fail |
| `#ffffff` | `#f0f1f2` | 1.13:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#404040` | `#ffffff` | 10.37:1 | AAA |
| `#404040` | `#f8f8f8` | 9.76:1 | AAA |
| `#404040` | `#f0f1f2` | 9.17:1 | AAA |
| `#404040` | `#000000` | 2.03:1 | fail |

### Gradients

- `linear-gradient(120deg, rgb(242, 244, 248), rgb(229, 233, 240), rgb(242, 244, 248))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Metropolis | `--font-body` | webfont | 400, 600, 700, 500 | Site-wide headings, navigation, body copy, captions, buttons, and links. | Montserrat |

- **Metropolis:** Use regular body and nav, with 600–700 weights for headings; sentence case, neutral tracking, and clear hierarchy.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | 1.1 | 0 | — | Metropolis | Primary campaign headline, centered over the full-bleed hero. |
| h2 | 40px | 600 | 1.1 | 0 | — | Metropolis | Major centered section titles and editorial headings. |
| h3 | 32px | 700 | 1.2 | 0 | — | Metropolis | Product names and prominent card headings. |
| h4 | 28px | 600 | 1.3 | 0 | — | Metropolis | Supporting subheads within content sections. |
| body | 16px | 400 | 1.5 | 0 | — | Metropolis | Product descriptions, supporting copy, and general page text. |
| caption | 14px | 400 | 1.5 | 0 | — | Metropolis | Product labels, dates, metadata, and small supporting details. |
| button | 16px | 400 | 1.5 | 0 | — | Metropolis | Short action labels inside rounded outline controls. |
| nav | 16px | 400 | 1.67 | 0 | — | Metropolis | Top-level site navigation and footer navigation links. |
| link | 18px | 600 | 1.4 | 0 | — | Metropolis | Emphasized linked text, including product and newsroom actions. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 10, 11, 12, 16, 20, 22, 24, 28, 32, 36, 40, 120 px.
- Section rhythm 120px · element gap 12px · card padding 34px · max content width 1360px.

A spacious, long-form homepage uses full-width section bands and a content maximum of 1360px. The hero is full-bleed; product storytelling shifts between large image tiles and a multi-column grid, followed by a centered category carousel and lifestyle feature. Most section headings are centered, while partner, review, and newsroom content align to the left. The measured section gap is 120px, with a 4px spacing base and 12px typical element gap. Density rises in the lower editorial and footer areas.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · link `12px` · xs `12px` · pill `9999px`
- Shadow `inset` (link): `rgb(0, 0, 0) 0px 0px 0px 1px inset`
- Shadow `inset-2` (button): `rgb(255, 255, 255) 0px 0px 0px 0px inset`
- Motion: standard transition `0.125s ease-in-out` on interactive elements.

The interface is largely flat: product and quote cards sit directly on pale surfaces, without prominent shadows. Separation comes from background bands, image composition, and whitespace. Outlined pill-shaped actions provide the clearest component edge. Keep dark footer regions visually distinct from the light content rather than adding depth through heavy shadow.

## Imagery

Photography and video do the expressive work: full-bleed campaign frames lead, followed by crisp product arrangements, home-office and living-room lifestyle scenes, and creator testimonials. Product images are generally large and cleanly framed against pale backgrounds. Campaign media can be dark, colorful, and cinematic, with white text and outlined actions layered over it. Partner marks and newsroom thumbnails provide smaller editorial image moments.

## Components

### Campaign carousel

Full-bleed image or video slide with centered white heading and supporting line, a rounded white-outline Learn More action, and slim progress indicators.

### Product showcase tiles

Large product-photo panels on pale backgrounds with centered Metropolis titles, concise benefit copy, and compact outlined Learn More actions.

### Category carousel

Centered lineup heading above image-led category links; keep each item quiet and use simple previous and next controls.

### Outline action

Rounded pill with a thin black or white border and matching text; the measured Learn More labels use regular 16px Metropolis.

### Proof-point cards

Four concise innovation metrics on a cool-gray band, with prominent figures and restrained labels on light card surfaces.

### Editorial cards

Media quotes and newsroom entries combine thumbnails or logos with compact text, dates, and occasional small colored category badges.

### Footer navigation

Black footer area with white icon-led utility links, grouped navigation, newsletter signup, and subtle dividers.

### Measured component styles

- **Primary button** (“Learn More”): transparent background · text #ffffff · border 1px solid #ffffff · radius 50px · padding 12px 32px · 400 16px Metropolis
- **Link** (“Chargers”): background #f0f1f2 · text #000000 · radius 0px · padding 28px · 400 14px Metropolis
- **Input**: transparent background · text #000000 · radius 0px · padding 16px 28px · 400 14px Metropolis
- **Card** (“The UGREEN 145W Power Bank packs a lot o”): background #ffffff · text #000000 · radius 0px · padding 28px 36px 36px 36px · 400 14px Metropolis
- **Badge** (“Brand”): background #ffd700 · text #ffffff · radius 0px · padding 2px 6px · 600 14px Metropolis
- **Navigation item** (“NAS Charging Data & Accessories About Su”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Metropolis

## Do

- Use campaign media as the primary source of color and mood.
- Keep headings crisp, centered, and clearly subordinate to the hero.
- Use pale section bands to organize the long page.
- Prefer product photography over decorative illustration.
- Use rounded outline actions with restrained labels.
- Keep editorial cards readable and visually quiet.

## Don't

- Do not introduce a bright accent palette across the interface.
- Do not add heavy shadows to product tiles or quote cards.
- Do not crowd the spacious transitions between major sections.
- Do not use decorative typefaces or uppercase-heavy headings.
- Do not treat badge colors as broad brand surfaces.
- Do not place dense text over busy photography without contrast.

## Agent prompt

Build a new UGREEN-style page with a clean consumer-tech storefront feel. Use Gallery White (#ffffff) as the canvas, Soft Porcelain (#f8f8f8) and Cool Mist (#f0f1f2) as alternating section surfaces, and Carbon Ink (#000000) for primary text and the dark footer. Use Metropolis or a close sans-serif substitute, with strong but restrained headings and readable regular-weight copy. Let large product and lifestyle photos carry the color; avoid turning badge green, blue, red, or gold into broad UI accents. Keep the layout spacious, with clear section bands, image-led grids, and centered headings where appropriate. Use thin rounded outline actions, flat cards, minimal borders, and a visually distinct black footer. Make the page feel calm, polished, and product-focused.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign carousel with centered copy and overlaid top navigation. | slide indicators, campaign CTA, carousel | dark photographic media, white typography, outlined pill action |
| 2 | product-showcase | Pale band with a multi-column grid of large image-led product panels. | product discovery, benefit summaries, learn-more actions | pale surface, centered titles, product photography |
| 3 | category-nav | Centered title above a horizontal image-based category carousel. | browse categories, carousel navigation | product thumbnails, simple arrows, quiet labels |
| 4 | feature-split | Wide lifestyle image with centered title, tabs, description, and link below. | scenario browsing, tab selection, explore link | full-width lifestyle media, centered copy, minimal controls |
| 5 | stats | Centered heading, four proof-point columns, and a broad supporting video frame. | brand proof, metric scan | cool-gray band, light stat cards, large figures |
| 6 | logo-cloud | Left-aligned section title above a single horizontal row of partner marks. | partner credibility | logo row, generous spacing, cool-gray background |
| 7 | testimonials | Left-aligned heading above a horizontal set of review cards. | expert quotes, carousel browsing | light cards, publication marks, compact copy |
| 8 | video | Left-aligned title above a horizontally browsable row of video thumbnails. | creator reviews, video playback, carousel browsing | portrait thumbnails, play icons, image overlays |
| 9 | content-feed | Two-column editorial arrangement with a large feature story and stacked secondary items. | news browsing, featured story, view-all link | thumbnail-led cards, metadata badges, pale background |
| 10 | footer | Black full-width band with four evenly distributed icon-led utility links. | support access, store locator, company navigation | white icons, white labels, dark surface |
| 11 | footer | Black footer with newsletter area, grouped link columns, social links, and legal row. | newsletter signup, footer navigation, social links | white text, input and signup action, subtle dividers |

## Source CSS custom properties (selected)

```css
--hover-shadow-color: rgb(0 0 0 / 1.0);
--hover-transition-duration: .25s;
--surface-transition-duration: .3s;
--surface-transition-timing: cubic-bezier(0.32, 0.72, 0, 1);
--color-background: rgb(255 255 255 / 1.0);
--color-background-rgb: 255 255 255;
--color-foreground: rgb(0 0 0 / 0.81);
--color-foreground-rgb: 0 0 0;
--color-foreground-heading: rgb(0 0 0 / 1.0);
--color-foreground-heading-rgb: 0 0 0;
--color-primary: rgb(0 0 0 / 0.81);
--color-primary-rgb: 0 0 0;
--color-primary-hover: rgb(0 0 0 / 1.0);
--color-primary-hover-rgb: 0 0 0;
--color-border: rgb(0 0 0 / 0.06);
--color-border-rgb: 0 0 0;
--color-shadow: rgb(0 0 0 / 1.0);
--color-shadow-rgb: 0 0 0;
--color-primary-button-text: rgb(255 255 255 / 1.0);
--color-primary-button-background: rgb(0 0 0 / 1.0);
--color-primary-button-border: rgb(0 0 0 / 1.0);
--color-primary-button-hover-text: rgb(255 255 255 / 1.0);
--color-primary-button-hover-background: rgb(51 51 51 / 1.0);
--color-primary-button-hover-border: rgb(0 0 0 / 1.0);
--color-secondary-button-text: rgb(0 0 0 / 1.0);
--color-secondary-button-background: rgb(0 0 0 / 0.0);
--color-secondary-button-border: rgb(0 0 0 / 1.0);
--color-secondary-button-hover-text: rgb(51 51 51 / 1.0);
--color-secondary-button-hover-background: rgb(250 250 250 / 1.0);
--color-secondary-button-hover-border: rgb(51 51 51 / 1.0);
--color-input-background: rgb(255 255 255 / 0.78);
--color-input-text: rgb(51 51 51 / 1.0);
--color-input-text-rgb: 51 51 51;
--color-input-border: rgb(223 223 223 / 1.0);
--color-input-hover-background: rgb(0 0 0 / 0.01);
--color-variant-background: rgb(255 255 255 / 1.0);
--color-variant-border: rgb(0 0 0 / 0.13);
--color-variant-text: rgb(0 0 0 / 1.0);
--color-variant-text-rgb: 0 0 0;
--color-variant-hover-background: rgb(245 245 245 / 1.0);
```

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