Dji Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

11type steps

6radius steps

2pxspacing base

Dji, in one page

DJI's site works like a brightly lit product showroom. The page is a white canvas ({colors.canvas}) tiled edge to edge with studio photography: a full-height hero carousel of a single hero product over dark or sky backdrops, then a two-up grid of square-cornered product tiles separated by thin white gutters, each tile a soft grey render of a drone, gimbal or microphone with its name set as large, light-weight wordmark-style type above it. Text is never pure black; it is Open Sans in a near-black ink ({colors.ink}) at stepped opacities, tracked slightly tight so headings read compact and engineered.

Colour is used almost only for action. Every interactive pill (the nav Store button, "Buy Now", model selectors, "Where to Buy") is filled with a single engineering blue ({colors.primary}), while secondary actions are thin black-outlined pills. The store sharpens the same idea with a slightly brighter blue ({colors.store-blue}) and a pale tinted companion for "Add to Cart". A small burnt-orange label ({colors.tier-orange}) marks product rank such as "Flagship" or "Advanced"; it is the only warm accent on the brand site.

Pages share a clear rhythm: an announcement bar and white nav, photographic tiles, a centred section heading, comparison or editorial grids, a pale grey feature-link band, and a charcoal footer ({colors.footer}). The store keeps that skeleton but adds commerce furniture: 8px option cards with a 2px blue selection ring, an orange corner badge, a sticky white purchase bar, square black media tiles for feature storytelling, and a light grey footer.

Key Characteristics:

Photography-first: full-bleed hero carousel and square, gutter-separated product tiles on {colors.canvas}; UI chrome stays out of the way.
One action colour: {colors.primary} on the brand site and {colors.store-blue} in the store; every CTA is a pill ({rounded.xl}, {rounded.xxl}, {rounded.full}).
Secondary actions are 1px {colors.ink} outline pills (button-outline); hero CTAs are white ghost pills over photography (button-hero-ghost).
Open Sans throughout, tracked tight (about −0.02em for body, −0.03em for headings), with weight 600 for headings and 400 for everything else.
Ink at stepped opacities: {colors.ink}, {colors.ink-secondary}, {colors.ink-tertiary}.
Small {colors.tier-orange} eyebrows mark product rank; orange never fills a button.
Page rhythm: announcement bar, nav, photo hero, product tiles, centred heading with grid, {colors.canvas-soft} feature-link band, {colors.footer} footer.

Do's and don'ts

Do

Let product photography fill square, gutter-separated tiles; keep text centred above the render.
Use {colors.primary} (brand site) or {colors.store-blue} (store) for every primary action, always as a pill.
Pair a filled blue pill with a 1px {colors.ink} outline pill for the secondary action.
Use white button-hero-ghost pills over dark hero photography.
Set all text in Open Sans with slight negative tracking, and use the ink opacity steps ({colors.ink}, {colors.ink-secondary}, {colors.ink-tertiary}) for hierarchy.
Mark product rank with a small tier-eyebrow in {colors.tier-orange}.
In the store, group choices into {rounded.sm} option cards and show selection with a 2px {colors.store-blue} ring.
Close pages with the {colors.footer} footer on the brand site and {colors.canvas-soft} in the store.

Don't

Don't round photo tiles, cards or media tiles; only pills, option cards and small tags are rounded.
Don't use more than one blue on the same surface; the brand site and the store each have their own.
Don't use orange for buttons or large fills; it is reserved for small rank labels and the option badge.
Don't use pure black for text; use {colors.ink}.
Don't add drop shadows to tiles or cards; keep shadows for floating buttons and the sticky purchase bar.
Don't set headings heavier than 600 or track type positively.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Dji design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #0070d5
- store-blue: #0060ef
- store-blue-tint: #deeafd
- on-primary: #ffffff
- link-blue: #1890ff
- tier-orange: #be4e04
- badge-orange: #fa8c16
- error: #f5222d
- canvas: #ffffff
- canvas-soft: #f7f9fa

Type:
- families: Open Sans
- scale: 10, 12, 14, 16, 18, 20, 24, 28, 32
- weights: 400, 500, 600

Shape:
- radius: 0, 4, 8, 60, 64, 100
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 2, 4, 5, 6, 8, 10, 12, 14, 16, 20

Rules:
- Let product photography fill square, gutter-separated tiles; keep text centred above the render.
- Use `{colors.primary}` (brand site) or `{colors.store-blue}` (store) for every primary action, always as a pill.
- Pair a filled blue pill with a 1px `{colors.ink}` outline pill for the secondary action.
- Use white `button-hero-ghost` pills over dark hero photography.
- Set all text in Open Sans with slight negative tracking, and use the ink opacity steps (`{colors.ink}`, `{colors.ink-secondary}`, `{colors.ink-tertiary}`) for h…
- Mark product rank with a small `tier-eyebrow` in `{colors.tier-orange}`.

Avoid:
- Don't round photo tiles, cards or media tiles; only pills, option cards and small tags are rounded.
- Don't use more than one blue on the same surface; the brand site and the store each have their own.
- Don't use orange for buttons or large fills; it is reserved for small rank labels and the option badge.
- Don't use pure black for text; use `{colors.ink}`.
- Don't add drop shadows to tiles or cards; keep shadows for floating buttons and the sticky purchase bar.
- Don't set headings heavier than 600 or track type positively.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Source pages: dji.com home, the camera-drones category page, and a store product page.

Brand & Accent

DJI Blue ({colors.primary} — #0070d5): the brand-site action colour: nav Store pill, "Buy Now" pills, the active model selector, "Where to Buy" pills and the announcement-bar link.
Store Blue ({colors.store-blue} — #0060ef): the store's action colour: Buy Now, Add to Cart label, the selected option ring, the DJI Care tag and inline store links.
Store Blue Tint ({colors.store-blue-tint} — #deeafd): the pale fill of Add to Cart.
On Blue ({colors.on-primary}): white labels on blue and dark pills, and hero text over photography.
Link Blue ({colors.link-blue} — #1890ff): "Learn More ›" and "Buy Now ›" text links on product and explore cards.
Tier Orange ({colors.tier-orange} — #be4e04): small eyebrows that mark product rank.
Badge Orange ({colors.badge-orange} — #fa8c16): the corner badge on a highlighted store option.

Surface

Canvas ({colors.canvas}): page background, nav, cards, purchase bar.
Canvas Soft ({colors.canvas-soft} — #f7f9fa): feature-link band, store panels, In the Box tiles, footnote panel and the store footer.
Panel ({colors.panel} — #f6f8f9): the product benefits panel.
Fog ({colors.fog} — #f5f5f5): Explore More band, product-card backdrop and the Other Regions pill.
Announce ({colors.announce} — #fafafa): announcement bar and the category icon strip.
Media Black ({colors.media-black}): store feature media tiles.
Footer ({colors.footer} — #272727), with Footer Pill ({colors.footer-pill} — #383838) and Footer Divider ({colors.footer-divider} — #414141).
Lines: {colors.hairline} (#f0f0f0) tab track, {colors.divider} (#e8e8e8) FAQ and purchase-bar rules, {colors.card-border} (#d9d9d9) option cards, {colors.dashed-border} (#dddddd) unavailable option, {colors.input-border} (#d4d7d9) store email field, {colors.control-border} (#cccccc) steppers and checkboxes.

Text

Ink ({colors.ink} — #262626): headings and body on white.
Ink Secondary ({colors.ink-secondary} — #595959): secondary copy, inactive tabs.
Ink Tertiary ({colors.ink-tertiary} — #8c8c8c): product-tile eyebrows.
Store Ink ({colors.store-ink} — #333333): store product and option titles.
Graphite ({colors.graphite} — #3b3e40): store body copy and section headings.
Nav Ink ({colors.nav-ink} — #303233): nav labels on the white header.
Slate ({colors.slate} — #6c7073): store footer links and the dark footer's field border.
Steel ({colors.steel} — #9fa3a6): spec captions in the comparison table.
Footer Link ({colors.footer-link} — #b3b3b3): links on the charcoal footer.

Semantic

Error ({colors.error} — #f5222d): "Out of Stock" on unavailable store options.

Type scaleRead the full spec

Font Family

Open Sans is the single family across the brand site and the store. Hierarchy comes from size and a narrow weight range (400 for body, links and buttons; 500 for feature titles; 600 for headings and store titles). Letter-spacing is consistently negative: about −0.02em at body sizes and −0.03em at heading sizes, which gives the type a compact, technical feel. Large product names on the photo tiles appear as logotype artwork and are not part of the type scale.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xl}`	48px	600	1.08	−1.44px	Category page title ("Camera Drones")
`{typography.display}`	40px	600	1.2	−1.2px	Section headings ("Popular Drone Comparisons", "Explore More")
`{typography.spec-value}`	40px	400	1.2	−1.2px	Comparison spec values ("1063 g", "100 MP")
`{typography.heading}`	32px	600	1.125	−0.96px	Store product title, store and home section headings
`{typography.card-title-lg}`	32px	500	1.125	0	Field-card titles over photography
`{typography.news-title}`	28px	600	1.14	0	Editorial/news card titles
`{typography.title-md}`	24px	600	1.17	−0.72px	Explore card titles
`{typography.product-name}`	24px	400	1.17	−0.72px	Model names in the comparison table
`{typography.price}`	20px	600	1.2	−0.4px	Purchase-bar price
`{typography.subhead}`	20px	600	1.2	−0.6px	Store sub-sections ("Select Option")
`{typography.feature-title}`	20px	500	1.4	0	Feature-link band titles
`{typography.option-title}`	18px	600	1.33	−0.36px	Store option titles
`{typography.body}`	16px	400	1.5	−0.32px	Body copy, card text links
`{typography.button}`	16px	400	1.25	−0.32px	Pill button labels
`{typography.faq}`	16px	600	1.5	−0.32px	FAQ questions
`{typography.ui}`	14px	400	1.43	−0.28px	Tabs, store lists, hero ghost labels, inline links
`{typography.nav}`	14px	400	1.0	−0.28px	Top navigation and nav pills
`{typography.caption}`	12px	400	1.33	−0.24px	Tier eyebrows, category labels, footnotes
`{typography.badge}`	12px	600	1.33	−0.24px	Option corner badge
`{typography.footer-heading}`	12px	500	2.0	0	Footer column headings
`{typography.micro}`	10px	600	1.8	−0.2px	DJI Care tag

Principles

Tight tracking at every size makes long product names and spec values sit as compact blocks.
Weight is used sparingly: headings at 600, everything functional at 400, so blue pills and photography carry the emphasis.
Spec values use the display size at regular weight, letting numbers like "1063 g" read as large, calm data rather than shouting headlines.

Note on Font Substitutes

Open Sans is open source on Google Fonts. Keep the negative tracking (−0.02em to −0.03em); without it the type looks noticeably looser than the brand.

Components and layoutRead the full spec

No hover states documented. Each component below documents its resting state only.

Navigation

announcement-bar — slim strip above the nav

Background {colors.announce}, text {colors.ink} in {typography.ui}, a text-link ("Shop Now ›") and a close icon.

nav-bar-overlay — the home nav over the hero photo

Transparent, white {typography.nav} labels, 64px tall; logo left, category links, then search, account, region-pill and button-store-pill at right.

nav-bar — the white nav on inner pages

Background {colors.canvas}, labels in {colors.nav-ink} {typography.nav}, 64px tall.

button-store-pill — the blue Store button in the nav

Background {colors.primary}, text {colors.on-primary} in {typography.nav}, {rounded.full}, padding 8px 16px 8px 34px (room for a bag icon), 32px tall.

region-pill — "Other Regions" selector

Background {colors.fog}, text {colors.ink} in {typography.nav}, {rounded.pill}, padding 0 {spacing.sm}, 32px tall, with a globe icon.

store-nav — store header

Background {colors.canvas}, {typography.ui} category links with a 2px indicator, a care-tag beside "Services", and search, cart and account icons.

category-strip — icon row under the category-page nav

Background {colors.announce}, 124px tall, product icons over {typography.caption} labels.

Buttons

button-primary — blue pill ("Buy Now", active model selector, "Where to Buy")

Background {colors.primary}, text {colors.on-primary} in {typography.button}, {rounded.xl}, padding 0 {spacing.md}, 40px tall.

button-outline — outline pill ("Learn More", inactive model selector)

Transparent, 1px {colors.ink} border, text {colors.ink} in {typography.button}, {rounded.xl}, padding 0 15px, 40px tall.

button-outline-lg — larger outline pill ("Compare DJI Camera Drones ›")

1px {colors.ink} border, {typography.button}, {rounded.full}, padding 14px {spacing.md}, 48px tall.

button-hero-ghost — white ghost pill over hero photography ("Learn More ›", "Buy Now ›")

Transparent, 1px {colors.on-primary} border and text, {typography.ui}, {rounded.xxl}, padding 5px {spacing.md}, 32px tall.

button-store-buy — store Buy Now

Background {colors.store-blue}, text {colors.on-primary} in {typography.button}, {rounded.full}, padding 14px {spacing.xxl}, 48px tall.

button-store-cart — store Add to Cart

Background {colors.store-blue-tint}, text {colors.store-blue}, same shape as button-store-buy. The pair always sits side by side, cart first.

button-dark-pill — compact dark pill ("switch now")

Background {colors.ink}, text {colors.on-primary} in {typography.ui}, {rounded.full}, padding 6px {spacing.sm}, 32px tall.

button-download-app — footer pill ("Download App")

Background {colors.footer-pill}, text {colors.on-primary} in {typography.button}, {rounded.pill}, padding 10px {spacing.md}, 40px tall.

compare-options-button — full-width store panel button ("Compare Options")

Background {colors.canvas-soft}, text {colors.ink} in {typography.ui}, {rounded.sm}, padding {spacing.xl}, with a blue circular chevron at right.

text-link, text-link-store, card-text-link — inline links

{colors.primary} on the brand site, {colors.store-blue} in the store, and {colors.link-blue} "Learn More ›" on product and explore cards; all followed by a small chevron.

Cards & Containers

product-tile — home and category photo tile

{colors.fog}-toned studio render at {rounded.none}, separated by {spacing.md} white gutters. A centred tile-eyebrow, a logotype product name, a short tagline and two text links or pills sit above the render.

tile-eyebrow — tile kicker ("Beginner-Friendly Camera Drones")

{colors.ink-tertiary} in {typography.ui}.

tier-eyebrow — product rank label ("Flagship", "Triple-Lens Flagship Camera Drone")

{colors.tier-orange} in {typography.caption}.

product-card — category-page product card

{colors.fog} backdrop, square corners, tier-eyebrow above the logotype name, a tagline, then button-primary + button-outline side by side over the render.

comparison-tabs + comparison-tab-active — table switcher ("Aerial Imaging", "Immersive Flight")

Inactive tabs in {colors.ink-secondary}, active tab in {colors.ink} with an ink underline, on a 1px {colors.hairline} track, {typography.ui}.

spec-column + spec-caption — comparison column

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-dji {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #262626;
  --heading-color: #262626;
  --link-color: #0070d5;
  --link-hover-color: #0055a2;
  --border-color: #d8d8d8;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(38,38,38,0.06);
  --card-hover-shadow: 0 6px 18px rgba(38,38,38,0.12);
  --header-bg: #262626;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #727272;
  --button-bg: #0070d5;
  --button-text-color: #ffffff;
  --button-hover-bg: #0055a2;
  --button-border: none;
  --button-border-radius: 60px;
  --button-secondary-bg: #f2f2f2;
  --button-secondary-text-color: #262626;
  --button-secondary-hover-bg: #e5e5e5;
  --button-secondary-border: 1px solid #d8d8d8;
  --prompt-bg: #f4f4f4;
  --prompt-text-color: #262626;
  --base-font: var(--font-open-sans);
  --heading-font: var(--font-open-sans);
  --card-border-radius: 60px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

resend 76.7%
spiral 76.1%
expo 72.6%
daikin 71.5%
ikyu 71.3%

Where this came from

Source document: volt/design-md/dji/DESIGN.md · 41.0 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.