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

# Anker · Design System

> Clean commerce, powered by vivid product imagery

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

Anker’s homepage pairs a restrained monochrome storefront with immersive, product-led campaign imagery. A compact two-tier navigation and concise calls to action lead into editorial feature bands, category browsing, product cards, membership offers, and a dark, information-rich footer.

## North star

Keep the interface quiet and high-contrast, using large campaign imagery to make products—not decoration—the focal point.

## Overview

Anker’s visual system keeps the storefront chrome quiet so campaign imagery can carry the page. The pale #f5f5f7 canvas alternates with white and light-gray product surfaces, while black and near-black navigation, CTA buttons, and the footer establish contrast. Signal blue #00befa is used sparingly as a brand accent rather than a dominant fill. MontForAnker is used throughout in bold weights, with tight tracking on large headings and compact, readable labels. Full-bleed campaign images anchor the top of the page; lower sections shift to aligned grids of category tiles, product cards, and editorial panels. Generous section separation gives each merchandising story room, while repeated card patterns make browsing predictable. Borders are understated, corners are nearly square, and elevation is restrained, keeping attention on product photography and clear shopping actions.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Anker Ink | `#080a0f` | `--color-anker-ink` | neutral | Primary text and dark Shop Now buttons across product, navigation, and heading content. |
| Gallery Mist | `#f5f5f7` | `--color-gallery-mist` | surface | Main page canvas behind the campaign bands, category browsing, merchandise grids, and supporting sections. |
| Signal Cyan | `#00befa` | `--color-signal-cyan` | brand | Anker brand accent, including the bright primary CTA and small text or interface highlights. |
| Pure Black | `#000000` | `--color-pure-black` | surface | Inverse navigation and footer bands, dark campaign imagery, and high-contrast text over light surfaces. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | White card and footer details, plus text on dark backgrounds and button labels. |
| Soft Silver | `#eaeaec` | `--color-soft-silver` | surface | Product-card and category-card backgrounds that distinguish merchandise from the page canvas. |
| Quiet Nickel | `#b6b6ba` | `--color-quiet-nickel` | neutral | Subdued footer and input details, including muted copy and thin control outlines. |
| Fine Gray | `#e5e5e5` | `--color-fine-gray` | semantic | Light hairline borders and quiet separators between interface elements. |
| Graphite | `#1e2024` | `--color-graphite` | neutral | Secondary dark surface and text color, including pale-button labels and inverse content. |
| Footer Ash | `#6d6d6f` | `--color-footer-ash` | neutral | Low-emphasis footer copy; use only for secondary information. |

### Semantic aliases

`--color-canvas` → `#f5f5f7` (Gallery Mist) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#eaeaec` (Soft Silver) · `--color-surface-3` → `#000000` (Pure Black) · `--color-surface-4` → `#1e2024` (Graphite) · `--color-text` → `#080a0f` (Anker Ink) · `--color-border` → `#e5e5e5` (Fine Gray) · `--color-accent` → `#00befa` (Signal Cyan) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#080a0f` | `#f5f5f7` | 18.18:1 | AAA |
| `#080a0f` | `#ffffff` | 19.8:1 | AAA |
| `#080a0f` | `#eaeaec` | 16.48:1 | AAA |
| `#080a0f` | `#000000` | 1.06:1 | fail |
| `#00befa` | `#f5f5f7` | 1.98:1 | fail |
| `#00befa` | `#ffffff` | 2.15:1 | fail |
| `#00befa` | `#eaeaec` | 1.79:1 | fail |
| `#00befa` | `#000000` | 9.75:1 | AAA |

### Gradients

- `linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __MontForAnker_c72046 | `--font-body` | webfont | 700, 600, 800 | Site-wide type for headings, body copy, navigation, links, buttons, and product labels. | Montserrat |

- **__MontForAnker_c72046:** Use bold measured weights; headings are tightly tracked, and navigation and action labels stay compact and untransformed.

### Type scale — Major Third (ratio ≈ 1.257, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 700 | 1 | -0.04em | — | __MontForAnker_c72046 | Primary campaign headline, centered over full-bleed hero imagery. |
| h2 | 32px | 700 | 1 | -0.04em | — | __MontForAnker_c72046 | Major campaign and merchandising section headings. |
| h3 | 24px | 700 | 1.2 | -0.013em | — | __MontForAnker_c72046 | Feature-card and product-story titles. |
| h4 | 20px | 700 | 1.2 | -0.04em | — | __MontForAnker_c72046 | Compact subsection and product-card headings. |
| body | 16px | 700 | 1.4 | -0.02em | — | __MontForAnker_c72046 | Product descriptions and supporting promotional copy. |
| caption | 14px | 700 | 1.2 | -0.023em | — | __MontForAnker_c72046 | Short product details and small supporting labels. |
| button | 14px | 700 | 1.2 | -0.023em | — | __MontForAnker_c72046 | Shopping and discovery actions, set as bold concise labels. |
| nav | 14px | 700 | 1.4 | -0.02em | — | __MontForAnker_c72046 | Primary category navigation and secondary utility links. |
| link | 14px | 700 | 1.2 | -0.023em | — | __MontForAnker_c72046 | Inline calls to action and product or editorial links. |

## Spacing & layout

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

The measured content max width is 1312px, with a comfortable density and a 12-column merchandise area. The page alternates full-bleed, single-column campaign panels with contained feature grids, category tiles, product cards, and supporting content. Hero headings are centered, while merchandising titles and card content generally align left. Sections have a measured 64px rhythm; smaller element gaps are 8px. Keep the navigation compact and allow image-led panels to span the available width.

## Shape & elevation

- Radius: button `2px` · xs `2px`
- 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.

The interface is mostly flat: light surfaces, square-edged cards, and discreet hairlines do the structural work. Measured card shadows are soft and restrained rather than a pervasive effect. Dark and light campaign images create depth through their own lighting and composition; avoid adding heavy shadows or ornamental borders to reproduce that richness.

## Imagery

Use polished product photography and campaign scenes as the primary visual feature: chargers and power banks appear in lifestyle settings, close-up product compositions, and clean category tiles. Hero imagery spans the full content width, with concise centered copy and CTAs layered over it. Lower-page editorial panels and product cards mix lifestyle images with isolated product shots. Some imagery is dark or cinematic, but it belongs to the photography rather than defining the site-wide palette.

## Components

### Two-tier navigation

A slim dark brand/announcement strip sits above a white primary navigation with logo, product categories, and utility icons.

### Campaign hero

Full-bleed product or lifestyle imagery paired with a centered bold headline, short support copy, and a compact Shop Now action.

### Feature tiles

Image-led feature panels arranged in two-column rows, with short titles and small calls to action over or alongside the imagery.

### Category tiles

A horizontal multi-column browsing row with light-gray surfaces, centered product images, and concise category labels.

### Product cards

Merchandise sits on #eaeaec surfaces with product imagery, compact descriptions, prices, and dark or light shopping actions.

### Member offer panel

A wide dark image-led promotional block places brief membership copy and light actions over a contrasting visual.

### Newsletter footer

A black footer combines a subdued sign-up area, compact link columns, service information, and payment or social marks.

### Measured component styles

- **Primary button** (“Shop Now”): background #00befa · text #ffffff · radius 0px · padding 0px 48px · 800 16px __MontForAnker_c72046
- **Secondary button** (“Shop Now”): background #080a0f · text #ffffff · radius 0px · padding 11px 20px 10px 20px · 700 14px __MontForAnker_c72046
- **Link** (“Anker Charging”): transparent background · text #b5b7bb · radius 0px · padding 0px · 700 14px __MontForAnker_c72046
- **Input**: transparent background · text #ffffff · border 1px solid #b6b6ba · radius 0px · padding 0px 16px · 700 16px __MontForAnker_c72046
- **Card** (“Anker Nano Charger (45W, Smart Display, ”): background #eaeaec · text #080a0f · radius 0px · padding 0px 0px 450px 0px · 600 14px __MontForAnker_c72046
- **Navigation item** (“Power Bank Charger Wireless Charger Cabl”): transparent background · text #000000 · radius 0px · padding 0px · 600 14px __MontForAnker_c72046

## Do

- Use #f5f5f7 as the dominant page canvas.
- Let polished product imagery lead each campaign section.
- Use #080a0f for primary text and dark shopping actions.
- Reserve #00befa for focused brand accents and prominent actions.
- Keep headings bold, concise, and tightly tracked.
- Use light-gray surfaces to distinguish product cards from the canvas.

## Don't

- Do not turn every section into a dark panel.
- Do not use accent cyan as a large decorative background.
- Do not add rounded, pill-shaped card treatments.
- Do not clutter image-led sections with long copy.
- Do not introduce decorative gradients that compete with product photography.
- Do not give every card a strong shadow or thick border.

## Agent prompt

Build a new Anker-style ecommerce page with a quiet, product-first visual hierarchy. Use Gallery Mist (#f5f5f7) as the main canvas, Clean White (#ffffff) and Soft Silver (#eaeaec) for cards, and Anker Ink (#080a0f) for text and primary dark actions. Apply Signal Cyan (#00befa) sparingly to brand emphasis and standout CTAs. Use bold MontForAnker-style sans typography, or Montserrat as a free substitute, with compact labels and tight headline tracking. Combine full-width lifestyle/product photography with contained category and product grids; keep copy short, actions clear, and section spacing generous. Use near-square corners, fine gray separators, and restrained elevation. Keep navigation compact, make product browsing easy, and use dark panels selectively for membership or footer content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image with centered headline and supporting copy. | primary shopping CTA, campaign announcement | lifestyle hero image, centered bold typography, dark button |
| 2 | hero | Full-width dark campaign image with centered product message. | product discovery, shop action | dark image band, centered headline, light CTA |
| 3 | feature-split | Two campaign panels shown side by side. | two product paths, shop actions | paired campaign images, centered copy, compact buttons |
| 4 | feature-grid | Two-column feature stories with varied image-led content. | product exploration, preorder discovery | editorial image cards, left-aligned copy, small CTA |
| 5 | category-nav | Heading above a horizontal seven-column category row. | category browsing, direct navigation | light-gray tiles, centered product cutouts, short labels |
| 6 | feature-split | Two side-by-side series panels with image, title, and link. | series discovery, learn more | contrasting image panels, short copy, small CTA |
| 7 | feature-grid | Four-column mixed-size lifestyle and product image grid. | use-case discovery, product exploration | editorial image collage, left-aligned section title, image overlays |
| 8 | product-grid | Tabbed heading above a dense horizontal product-card grid. | new and best-selling tabs, quick shopping actions | light-gray product cards, product photography, price and action buttons |
| 9 | feature-split | Single full-bleed promotional image panel. | campaign discovery, shop action | wide lifestyle image, image-overlay copy, compact CTA |
| 10 | other | Three-column confidence and service content area. | service reassurance, policy discovery | simple information columns, clear heading hierarchy |
| 11 | feature-grid | Three-column grid of service promises with icons. | delivery information, return reassurance, payment options | small line icons, bold service labels, short descriptions |
| 12 | cta | Wide dark image panel with copy and two actions. | membership signup, benefit discovery | dark promotional image, light text, paired buttons |
| 13 | gallery | Offer-focused horizontal visual content area. | offer browsing, promotion discovery | image-led offer cards, horizontal presentation |
| 14 | testimonials | Horizontal review cards with customer names and product references. | social proof, review browsing | quote cards, star ratings, customer labels |
| 15 | content-feed | Editorial cards above a dense, full-width dark footer. | article discovery, newsletter signup, footer navigation | image-led blog cards, dark footer band, multi-column link lists |

## Source CSS custom properties (selected)

```css
--primary: #fff;
--primary-2: #f1f3f5;
--secondary: #000;
--secondary-2: #111;
--text-base: #1d1d1f;
--text-primary: #1d1d1f;
--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;
--brand-color: #00befa;
--brand-text-color: #00befa;
--brand-button-bg-color: #00befa;
--brand-button-text-color: #fff;
--brand-linear-color: #10b5ec;
--anker-color: #00befa;
--anker-linear-color: #10b5ec;
--eufy-color: #21ccbf;
--soundcore-color: #00a9df;
--nebula-color: #e42d46;
--solix-linear-color: linear-gradient(90deg,#2c7ed0 -10.12%,#00a9ed 11.59%,#00db84 69.71%);
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--btn-bg-active-color: #00befa;
--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;
--success-color-1: #d6f4de;
--warning-color-0: #ffc24d;
--warning-color-1: #f6ead0;
--error-color-0: #ff4d4d;
```

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