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

# DJI · Design System

> Precision products, presented with cinematic clarity

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

DJI’s homepage pairs restrained white-and-charcoal interface styling with expansive product imagery and cinematic footage. A spacious, modular sequence moves from featured launches through brand stories and product categories to practical links and a dense dark footer.

## North star

Let cinematic product imagery carry the emotion while a quiet, spacious interface keeps navigation and actions unmistakably clear.

## Overview

The page uses a predominantly white canvas, with pale gray bands and cards separating product modules without heavy framing. Charcoal anchors the footer and provides the main dark text; bright blue is reserved for high-attention actions such as the store button and select links. Open Sans supplies a consistent, contemporary voice: medium-weight centered headings introduce products, while lighter supporting copy and compact navigation stay secondary. The layout alternates a large cinematic hero, two-column product panels, full-bleed video, editorial feature cards, and a three-column category showcase. Product imagery does most of the visual work: crisp device renders sit against quiet pale backgrounds, while lifestyle photography and video bring texture and motion. Generous white space around sections keeps the long homepage calm, even as the footer shifts to a dense, multi-column directory. Rounded pill actions and sparse hairlines finish the interface without making it feel ornamental.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light section backgrounds, and text or outlines on dark imagery. |
| Footer Mist | `#dfdfdf` | `--color-footer-mist` | neutral | Muted footer copy and low-emphasis supporting text. |
| Carbon | `#272727` | `--color-carbon` | brand | Dark footer surface and primary dark text. |
| Cloud Panel | `#ededed` | `--color-cloud-panel` | surface | Pale gray product section and card backgrounds. |
| DJI Blue | `#0070d5` | `--color-dji-blue` | accent | Store action and selected high-emphasis link treatments. |
| Flight Blue | `#3b63a9` | `--color-flight-blue` | accent | Secondary blue accent, including link and tinted promotional surfaces. |
| Navigation Gray | `#595959` | `--color-navigation-gray` | neutral | Secondary navigation and supporting text. |
| Frost White | `#f7f9fa` | `--color-frost-white` | surface | Pale service-link band near the bottom of the page. |
| Link Blue | `#0000ee` | `--color-link-blue` | accent | Measured link and navigation accent; use sparingly alongside DJI Blue. |
| Slate Border | `#6c7073` | `--color-slate-border` | semantic | Input outlines, button borders, and subtle footer dividers. |
| Quiet Gray | `#8c8c8c` | `--color-quiet-gray` | neutral | Low-emphasis supporting text. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Measured dark heading, navigation, and text instances. |
| Footer Divider | `#414141` | `--color-footer-divider` | semantic | Subtle borders and separators in the dark footer. |
| Deep Charcoal | `#232323` | `--color-deep-charcoal` | neutral | Occasional dark body text and headings. |
| Silver Note | `#b4b4b4` | `--color-silver-note` | neutral | Low-contrast footer details and secondary labels. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ededed` (Cloud Panel) · `--color-surface-2` → `#272727` (Carbon) · `--color-surface-3` → `#f7f9fa` (Frost White) · `--color-text` → `#272727` (Carbon) · `--color-text-muted` → `#dfdfdf` (Footer Mist) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#6c7073` (Slate Border) · `--color-accent` → `#0070d5` (DJI Blue) · `--color-accent-2` → `#3b63a9` (Flight Blue) · `--color-accent-3` → `#0000ee` (Link Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#272727` | `#ffffff` | 14.94:1 | AAA |
| `#272727` | `#ededed` | 12.76:1 | AAA |
| `#272727` | `#f7f9fa` | 14.15:1 | AAA |
| `#dfdfdf` | `#ffffff` | 1.33:1 | fail |
| `#dfdfdf` | `#ededed` | 1.14:1 | fail |
| `#dfdfdf` | `#272727` | 11.21:1 | AAA |
| `#dfdfdf` | `#f7f9fa` | 1.26:1 | fail |
| `#ffffff` | `#ededed` | 1.17:1 | fail |
| `#ffffff` | `#272727` | 14.94:1 | AAA |
| `#ffffff` | `#f7f9fa` | 1.06:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Open Sans | `--font-body` | webfont | 400, 500, 600, 300 | Site-wide interface, navigation, headings, product labels, links, and body copy. | Lato |

- **Open Sans:** Use measured regular, light, medium, and semibold weights; sentence case and restrained tracking keep the presentation clean.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 500 | 1.1 | 0 | — | Open Sans | Primary hero product title. |
| h2 | 32px | 600 | 1.25 | 0 | — | Open Sans | Major feature and section headings. |
| h3 | 24px | 500 | 1.5 | 0 | — | Open Sans | Product-panel and editorial feature headings. |
| h4 | 20px | 500 | 1.2 | 0 | — | Open Sans | Compact card or supporting section headings. |
| body | 16px | 400 | 1.5 | 0 | — | Open Sans | Product descriptions, explanatory copy, and standard page text. |
| caption | 12px | 400 | 2 | 0 | — | Open Sans | Small labels, metadata, and footer details. |
| button | 14px | 400 | 1 | -0.02em | — | Open Sans | Store and other compact action labels. |
| nav | 14px | 400 | 1.43 | -0.02em | — | Open Sans | Top-level navigation and menu items. |
| link | 14px | 300 | normal | 0 | — | Open Sans | Light-weight inline calls to action and text links. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 1, 4, 5, 6, 8, 9, 12, 16, 24, 32, 40, 48, 64, 112 px.
- Section rhythm 112px · element gap — · card padding — · max content width 1392px.

A spacious long-scroll homepage uses a broad desktop canvas, with measured page max width of 1392px and a section rhythm of 112px. The opening feature fills the width; below it, product panels form a two-column grid, followed by a full-bleed video carousel. Editorial cards return to a centered two-column arrangement, then a three-column category row. Centered headlines and product copy give way to a pale three-link service band and a dense, left-aligned multi-column footer. Keep transitions airy rather than adding visual separators everywhere.

## Shape & elevation

- Radius: button `9999px` · input `4px` · nav `50%` · link `9999px` · xs `4px` · pill `9999px`
- Shadow `md` (nav, other): `rgba(0, 0, 0, 0.1) 0px 8px 16px 0px`
- Shadow `sm` (nav): `rgba(0, 0, 0, 0.2) 0px 2px 8px 0px`
- Shadow `lg` (button): `rgba(0, 0, 0, 0.1) 0px 16px 32px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The page is largely flat: white and pale gray section surfaces, clean card edges, and little ornamental depth. Measured navigation and buttons can use restrained soft shadows, but product cards are not dependent on shadows for separation. Prefer whitespace and background contrast; use thin gray rules sparingly, especially for input and footer divisions.

## Imagery

Large product renders and photography are the primary visual language, not decorative illustrations. The opening hero uses a cinematic lifestyle image with centered product messaging over the scene. Product cards isolate devices against pale backgrounds; the video carousel uses full-width lifestyle footage. Later editorial and category tiles combine short copy with photographic scenes. Keep imagery crisp, immersive, and naturally colored.

## Components

### Announcement strip

A slim white notice above the main navigation, with centered copy, a blue app link, and a dismiss control.

### Hero navigation

Transparent, overlaid navigation with a white logo and links on the photographic hero; the Store action is a bright blue pill.

### Featured product panels

Two-column product tiles use pale imagery, centered product names, brief subtitles, and compact text-link actions.

### Video showcase

A horizontally framed, full-bleed video carousel centers a featured clip and overlays its title and a learn-more link.

### Editorial cards

Two large innovation stories pair concise centered headings and links with immersive photographic imagery.

### Category tiles

Three tall photographic tiles introduce product fields with centered white text and a short link.

### Footer directory

A charcoal footer combines app promotion, dense multi-column product and support links, newsletter inputs, and a compact legal row.

### Measured component styles

- **Primary button** (“Store”): background #0070d5 · text #ffffff · radius 1408px · padding 8px 16px 8px 34px · 400 14px Open Sans
- **Secondary button** (“Learn More”): transparent background · text #0000ee · border 1px solid #ffffff · radius 64px · padding 5px 16px · 400 16px Open Sans
- **Link** (“Learn More”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px Open Sans
- **Input**: transparent background · text #ffffff · border 1px solid #6c7073 · radius 4px · padding 4px 0px 4px 12px · 400 14px sans-serif
- **Card** (“Product Info Compare Camera Drones See p”): background #eeeeed · text #000000 · radius 0px · padding 0px · 400 16px Open Sans
- **Navigation item** (“Camera Drones”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Open Sans

## Do

- Use white space to separate major homepage sections.
- Keep product titles and short calls to action centered over featured imagery.
- Reserve DJI Blue for prominent actions and select links.
- Use pale gray surfaces to distinguish product panels from the white canvas.
- Make lifestyle imagery and product photography the dominant content.
- Shift to charcoal and compact columns for the footer.

## Don't

- Do not add bright accent colors beyond the measured blue palette.
- Do not surround every panel with borders or shadows.
- Do not crowd the hero with secondary controls or explanatory copy.
- Do not use decorative gradients as a substitute for product imagery.
- Do not make all page sections dark; the page is predominantly light.
- Do not style the dense footer like the spacious product showcase.

## Agent prompt

Build a new DJI-style consumer electronics page with a broad white canvas and generous section breathing room. Use Open Sans, centered medium-weight product headings, and quieter supporting text. Keep Gallery White (#ffffff) as the main surface, Cloud Panel (#ededed) for selected product bands, Carbon (#272727) for the footer, and DJI Blue (#0070d5) for the primary store or conversion action. Organize the page as a cinematic hero, modular product imagery, a wide video or editorial feature, category tiles, practical service links, and a compact multi-column footer. Favor authentic product photography and lifestyle footage over decorative graphics. Keep card edges clean, use pill-shaped actions sparingly, and reserve subtle borders or shadows for controls rather than content panels.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide featured hero with centered product messaging and surrounding promotional modules. | Learn More action, Buy Now action, rotating featured products | cinematic hero image, centered white typography, pale product panels |
| 2 | product-grid | Two-column product and comparison panels with image-led cards. | product detail links, comparison entry point, purchase links | pale card backgrounds, centered labels, clean image framing |
| 3 | video | Full-bleed horizontal video carousel with a centered featured clip. | carousel browsing, featured video link | immersive moving footage, overlay heading, adjacent slide previews |
| 4 | feature-grid | Centered introduction followed by two large editorial cards in a two-column layout. | read report, explore award story | centered section heading, photographic feature cards, short text overlays |
| 5 | category-nav | Three-column photographic category tiles with centered text. | browse by field, learn more links | tall image tiles, white overlay copy, blue-toned photographic scenes |
| 6 | feature-grid | Pale horizontal band with three evenly distributed service links. | where to buy, support entry, fly-safe information | simple line icons, centered labels, Frost White background |
| 7 | footer | Dark footer with app promotion, multiple link columns, newsletter fields, and a legal row. | download app, newsletter signup, browse site directory | Carbon background, dense link columns, subtle separators |

## Source CSS custom properties (selected)

```css
--black-bg: rgba(0,0,0,0.04);
--black-bg-hover: rgba(0,0,0,0.06);
--black-border: rgba(0,0,0,0.15);
--text-default: rgba(0,0,0,0.65);
--text-blod: rgba(0,0,0,0.85);
--dialog-border: rgba(0,0,0,0.09);
--link-color: #0070d5;
--link-color-hover: #2490e3;
--link-color-active: #0058b0;
--dialog-bg: #fff;
--button-bg: rgba(0,0,0,0.04);
--button-bg-hover: rgba(0,0,0,0.06);
--button-bg-active: rgba(0,0,0,0.15);
--button-border: rgba(0,0,0,0.04);
--button-border-size: 0px;
--close-button-bg: transparent;
--close-button-text: #000;
--close-button-bg-hover: rgba(0,0,0,0.04);
--check-input-bg: #fff;
--button-primary-color-1: #535759;
--button-primary-color-2: #3b3e40;
--button-primary-color-3: #6c7073;
--button-primary-text-color: #fff;
--button-primary-bg: linear-gradient(#535759,#3b3e40);
--button-primary-bg-hover: linear-gradient(#6c7073,#535759);
--button-primary-bg-active: linear-gradient(#3b3e40,#535759);
```

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