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

# Jackery · Design System

> Adventure-ready power, grounded in a bold, practical grid

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

Jackery’s homepage pairs a clean, light storefront with cinematic lifestyle photography and unmistakable orange calls to action. Heavy uppercase display headlines, practical product cards, and deep green bands connect outdoor adventure with dependable home backup.

## North star

Let cinematic energy imagery set the mood while a restrained, legible storefront and orange actions make shopping effortless.

## Overview

Build the page around Gallery White (#ffffff) and soft warm-gray panels (#f5f5f3), with deep Forest Green (#242f20) bands for brand proof and footer content. Signal Orange (#fd5000) is a compact, high-contrast action color for buttons, sale emphasis, and small highlights—not a general background. Inter carries navigation, product detail, and body copy; Oxanium makes oversized, uppercase display headlines feel technical and energetic. Alternate full-bleed lifestyle campaigns with calm, carefully aligned category and product modules. Product cards stay functional and information-rich, using restrained rules and compact specs rather than decorative framing. Photography supplies most of the page’s color and emotion, while the interface remains light, flat, and legible. Keep section changes clear through image scale, background bands, and whitespace, not heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, white product cards, and reverse text on dark campaign bands. |
| Warm Mist | `#f5f5f3` | `--color-warm-mist` | surface | Soft neutral section and media panels that distinguish shopping areas from the white canvas. |
| Signal Orange | `#fd5000` | `--color-signal-orange` | accent | Primary purchase buttons, sale-price emphasis, logo accents, and small promotional highlights. |
| Carbon Ink | `#181818` | `--color-carbon-ink` | neutral | Primary heading and interface text on light backgrounds. |
| Forest Green | `#242f20` | `--color-forest-green` | brand | Brand-toned proof strip, dark footer surfaces, and inverse text or controls. |
| Pale Stone | `#e8e8e5` | `--color-pale-stone` | neutral | Subtle footer and supporting interface details; secondary to the white and warm-gray surfaces. |
| Soft Graphite | `#565655` | `--color-soft-graphite` | semantic | Muted supporting copy and secondary control text. |
| Campaign Black | `#000000` | `--color-campaign-black` | surface | High-contrast promotional and video-section backgrounds, especially behind white display text. |
| Rule Gray | `#d9d9d9` | `--color-rule-gray` | semantic | Fine dividers and light interface borders. |
| Card Edge | `#c6c7c8` | `--color-card-edge` | semantic | Measured outline color on product comparison or solution panels. |
| Near Black | `#222222` | `--color-near-black` | neutral | Dark input text and minor footer or interface details. |
| Mid Graphite | `#626262` | `--color-mid-graphite` | semantic | Occasional muted text and footer details; not a defining brand color. |
| Slate Ink | `#333333` | `--color-slate-ink` | neutral | Product-card titles and standard supporting interface copy. |
| Smoke Gray | `#5c5c5c` | `--color-smoke-gray` | neutral | Secondary text details, including subdued labels. |
| Sage Gray | `#929790` | `--color-sage-gray` | semantic | Minor muted footer text; a supporting interface tone rather than a prominent surface. |
| Quiet Silver | `#d0d0cf` | `--color-quiet-silver` | semantic | Occasional fine rules and low-emphasis interface borders. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f3` (Warm Mist) · `--color-surface-2` → `#242f20` (Forest Green) · `--color-surface-3` → `#000000` (Campaign Black) · `--color-text` → `#181818` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#565655` (Soft Graphite) · `--color-border` → `#d9d9d9` (Rule Gray) · `--color-accent` → `#fd5000` (Signal Orange) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#181818` | `#ffffff` | 17.76:1 | AAA |
| `#181818` | `#f5f5f3` | 16.27:1 | AAA |
| `#181818` | `#242f20` | 1.27:1 | fail |
| `#181818` | `#000000` | 1.18:1 | fail |
| `#ffffff` | `#f5f5f3` | 1.09:1 | fail |
| `#ffffff` | `#242f20` | 13.98:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#565655` | `#ffffff` | 7.35:1 | AAA |
| `#565655` | `#f5f5f3` | 6.73:1 | AA |
| `#565655` | `#242f20` | 1.9:1 | fail |

### Gradients

- `linear-gradient(310deg, rgb(245, 245, 243), rgb(245, 245, 243) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 500, 900, 700 | Navigation, body copy, product detail, captions, links, and most interface text. | Roboto |
| Oxanium | `--font-display` | webfont | 800, 900 | Display headlines and large campaign or section titles. | Audiowide |

- **Inter:** Use measured weights from 400 to 900; keep body copy practical and readable, with normal case except button or campaign labels.
- **Oxanium:** Use heavy 800–900 weights, uppercase transformation, and compact line-height for a bold technical display voice.

### Type scale — Augmented Fourth (ratio ≈ 1.431, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 84px | 800 | 1.1 | 0 | uppercase | Oxanium | Oversized uppercase campaign and brand-story headlines. |
| h1 | 72px | 800 | 1.1 | 0 | uppercase | Oxanium | Primary campaign headlines and major page-level messages. |
| h2 | 48px | 800 | 1.1 | 0 | uppercase | Oxanium | Large uppercase section titles such as backup and story headings. |
| h3 | 32px | 600 | 1.1 | 0 | — | Inter | Solution, featured-product, and editorial subheadings. |
| h4 | 24px | 600 | 1.1 | 0 | — | Inter | Product and smaller module headings. |
| body | 14px | 400 | 1.4 | 0 | — | Inter | Navigation, descriptions, product details, and supporting copy. |
| caption | 12px | 600 | 1.33 | 0 | — | Inter | Compact product specs, labels, and secondary annotations. |
| link | 20px | 600 | 1.4 | 0 | — | Inter | Prominent shopping and section links. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 12, 14, 16, 20, 24, 40 px.
- Section rhythm 40px · element gap 8px · card padding — · max content width 1320px.

The desktop page uses a centered storefront system with a measured maximum content width of 1320px. It mixes full-bleed campaign imagery with inset modules: two-column lifestyle and solution areas, five-column category navigation, and multi-column product grids. Headings are frequently centered over shopping sections, while campaign copy aligns left over its image. Keep the measured compact density, with an 8px base unit and clear section breaks; use broad image-led bands and quieter neutral intervals to maintain rhythm.

## Shape & elevation

- Radius: button `50%` · media `50%` · xs `4px` · sm `8px`
- Shadow `sm` (button): `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 2px 8px 0px`
- Shadow `xl` (other): `rgba(255, 255, 255, 0.8) 0px 30px 50px 0px`
- Shadow `md` (footer): `rgba(0, 0, 0, 0.2) 0px 0px 10px 0px`
- Motion: standard transition `0.24s ease` on interactive elements.

The interface is predominantly flat, with section color and photography providing depth. Product panels use restrained borders rather than pronounced card shadows; measured product-card outlines use #c6c7c8. Keep controls visually direct, use subtle button shadow only where appropriate, and reserve deeper layering for photo overlays or the footer.

## Imagery

Use large lifestyle photographs of home backup, camping, and travel as the emotional anchor, often edge-to-edge with text layered over darker or legible areas. Product imagery is crisp and grounded in real domestic or outdoor settings, with cards showing the power station clearly alongside compact specs. Awards and editorial stories use smaller image modules. The measured page also includes video-led campaign sections; avoid decorative illustration as a substitute for product photography.

## Components

### Campaign hero

Full-bleed seasonal image with left-aligned copy, uppercase Oxanium offer headline, orange CTA, and compact dark countdown tiles.

### Category tiles

Image-led home, camping, and RV links arranged as a larger feature tile beside smaller stacked tiles.

### Category navigation

Centered heading followed by a five-column row of product cutouts, labels, and shopping links.

### Solution comparison

Two-column home-backup module pairing lifestyle imagery with product solutions, prices, key specs, and an orange action.

### Product card

White, minimally framed card with product photography, compact title and pricing, orange shopping link, and concise output, capacity, and weight details.

### Proof strip

Deep green horizontal brand band combining the Jackery mark with sales and recognition proof points.

### Newsletter and footer

Light newsletter form sits within a dark green footer, above tightly organized link columns, support details, and payment marks.

### Measured component styles

- **Primary button** (“LEARN MORE”): background #fd5000 · text #ffffff · radius 0px · padding 0px 40px · 600 20px Inter · uppercase
- **Link** (“Solar Generator 5000 Plus 5040Wh \| 7200W”): background #f5f5f3 · text #252f20 · radius 0px · padding 8px · 400 16px Inter
- **Input**: transparent background · text #222222 · border 1px solid #ffffff · radius 0px · padding 0px 12px 0px 37px · 400 16px Inter
- **Card** (“STANDARD HOT HomePower 3600 Plus + Solar”): background #ffffff · text #333333 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use Oxanium for oversized uppercase display headlines.
- Keep Inter for navigation, product details, and body text.
- Reserve Signal Orange (#fd5000) for actions and deliberate highlights.
- Use Forest Green (#242f20) for brand proof and dark footer surfaces.
- Let product photography carry color and communicate real use.
- Separate shopping modules with measured neutral surfaces and clear whitespace.

## Don't

- Do not turn the interface into an orange-dominant page.
- Do not use display type for dense product descriptions.
- Do not add heavy shadows to ordinary product cards.
- Do not replace real product and lifestyle photography with generic illustrations.
- Do not crowd product cards with oversized copy or decorative framing.
- Do not make every section a full-bleed image.

## Agent prompt

Create a responsive Jackery-style ecommerce page with a clean shopping interface and cinematic energy-product photography. Use Gallery White (#ffffff) as the main canvas, Warm Mist (#f5f5f3) for calm section panels, Forest Green (#242f20) for proof and footer bands, and Signal Orange (#fd5000) sparingly for primary actions and sale emphasis. Set major headlines in heavy uppercase Oxanium, with Inter for navigation, body copy, and product details. Alternate wide lifestyle campaigns with aligned category rows and practical product grids. Keep product cards light and information-rich: photo, concise title, price, clear shopping link, and compact specs. Favor restrained borders, compact spacing, clear contrast, and direct shopping flows; avoid decorative shadows or invented interface flourishes.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image with left-aligned offer copy, CTA, and countdown. | seasonal promotion, countdown urgency, primary shop action | full-bleed photography, uppercase display headline, orange button, dark countdown tiles |
| 2 | category-nav | One large home image beside two smaller stacked lifestyle tiles. | shop by use case, linked scene selection | asymmetric image grid, centered tile labels, photographic links |
| 3 | category-nav | Centered heading above a five-column category row. | browse product categories, direct category links | product cutout images, compact labels, subtle separators |
| 4 | comparison | Centered section heading above a two-column image and solution comparison. | compare solution tiers, show prices and specs, learn more action | lifestyle product image, accordion-like options, orange CTA |
| 5 | video | Full-bleed video campaign with left-aligned headline and controls. | play video, shop product | dark image treatment, uppercase headline, contrasting buttons |
| 6 | product-grid | Centered title and tabs above a four-column product-card grid. | switch lifestyle tabs, compare products, shop from cards | product photography, compact specs, status badges |
| 7 | logo-cloud | Centered display heading above four award marks. | establish product credibility | award logos, thin dividers, spacious horizontal row |
| 8 | cta | Narrow full-width image band with centered prompt and button. | guided product selection, single focused action | landscape background, centered white copy, orange CTA |
| 9 | product-grid | Three-column product grid with cards on a light section surface. | browse outdoor picks, compare price and specs, shop now | new badges, white cards, product cutouts and lifestyle images |
| 10 | stats | Two-column brand-stat band with concise visual metrics. | scan brand proof | dark green surface, large numeric emphasis, simple icons |
| 11 | feature-grid | Five-column row of compact feature or benefit items. | scan product benefits | small icons, short labels, aligned columns |
| 12 | video | Full-bleed video image with left-aligned copy and play affordance. | discover brand mission, play brand video | cinematic outdoor imagery, large uppercase heading, outlined secondary action |
| 13 | testimonials | Centered title above a horizontally browsable story-card gallery. | browse customer stories, filter story topics, read featured story | portrait and home photography, topic labels, carousel cards |
| 14 | footer | Newsletter form above dense multi-column footer links and support details. | email signup, country and phone entry, browse support and store links | dark green footer, light form panel, orange subscribe action, payment marks |

## Source CSS custom properties (selected)

```css
--jds-custom-color-primary: #FD5000;
--font-name: 'Inter';
--primary-color: #FD5000;
--normal-color: #fff;
--brand-color: #FD5000;
--error-color: #FF3B30;
--success-color: #52C41A;
--link-color: #0A59F7;
--text-black: #000;
--text-main-color: #333;
--text-sub-color: #666;
--text-info-color: #999;
--text-disable-color: #ccc;
--input-border-color: #ddd;
--gap: 20px;
--radius: 12px;
--border-primary: 2px solid #FD5000;
--border-grey: 1px solid #ccc;
--border-color-link: 1px solid #ddd;
--jds-font-family: "Inter", sans-serif;
--jds-text-x-direction: 1;
--jds-color-primary: #FD5000;
--jds-color-primary-highlight: color-mix(in srgb, #FFFFFF 15%, #FD5000 85%);
--jds-color-primary-contrast: #ffeee6;
--jds-color-success: #5E8A4E;
--jds-color-success-highlight: color-mix(in srgb, #FFFFFF 15%, #5E8A4E 85%);
--jds-color-success-contrast: #eff3ed;
--jds-color-danger: #F52317;
--jds-color-danger-highlight: color-mix(in srgb, #FFFFFF 15%, #F52317 85%);
--jds-color-danger-contrast: #fee9e8;
--jds-color-warning: #FAAD14;
--jds-color-warning-highlight: color-mix(in srgb, #FFFFFF 15%, #FAAD14 85%);
--jds-color-warning-contrast: #FFF8E6;
--jds-color-info: #5794FF;
--jds-color-info-highlight: color-mix(in srgb, #FFFFFF 15%, #5794FF 85%);
--jds-color-info-contrast: #EEF4FF;
--jds-color-neutral: #242F20;
--jds-color-neutral-highlight: color-mix(in srgb, #FFFFFF 15%, #242F20 85%);
--jds-color-neutral-contrast: #E8E8E5;
--jds-color-text-l1: #242F20;
```

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