Dji DESIGN.md

Overview

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.

Colors

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.

Typography

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

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.

Layout

Spacing System

• Base unit: 4px, mostly in 8px steps.
• Tokens (front matter): {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.xxxl} 40px · {spacing.huge} 48px · {spacing.section} 64px.
• Product tiles are separated by {spacing.md} white gutters; option cards pad {spacing.xl}; the feature-link band pads {spacing.section} vertically; the footer pads {spacing.xxl} by {spacing.md}.

Grid & Container

• Home and category tiles run full width minus a small outer gutter, two-up below the hero; editorial and field cards run two-up and three-up.
• The comparison table is four columns; explore and support cards are two-up inside a 1200px container.
• The store product page splits into a large photo gallery on the left and a 500px purchase column on the right.

Whitespace Philosophy

Photography fills the tiles; whitespace appears as consistent gutters and generous gaps above centred section headings. Inside the store, whitespace groups options into cards and panels rather than separating long sections.

Responsive Strategy

Breakpoints

Touch Targets

Store CTAs (button-store-buy, button-store-cart) and button-outline-lg are 48px tall; button-primary and button-outline are 40px; nav pills are 32px and rely on generous horizontal padding. FAQ rows are about 49px tall.

Collapsing Strategy

• The nav collapses to a menu; the Store pill stays visible.
• Two-up product tiles and field cards stack to one column; the comparison table becomes horizontally scrollable columns.
• The store gallery stacks above the purchase column; the sticky purchase-bar keeps price and both CTAs reachable.

Image Behavior

Hero images are full-bleed carousels with slide titles at the lower left; tile renders are centred studio cut-outs on soft grey; editorial cards use cropped landscape photography. Images load lazily as tiles scroll into view.

Elevation & Depth

Elevation is rare. The site relies on photography and flat grey bands for depth, and keeps shadows for elements that genuinely float over content.

Decorative Depth

Depth comes from the product renders themselves: soft-lit studio shots with gentle floor shadows on grey gradients, and dramatic dark hero backdrops. Store feature tiles use pure black ({colors.media-black}) behind product renders and lifestyle photography.

Shapes

Border Radius Scale

Floating support and back-to-top buttons are perfect circles. The orange option badge rounds only its bottom-left corner (8px), and email fields round only their left corners (4px) where they meet a square submit button.

Photography Geometry

Product tiles are square-cornered and close to 1:1 on the home page; category cards are similar large squares on a grey backdrop. Field and editorial cards use landscape crops. Store galleries use a large landscape frame with thumbnail strips; In the Box tiles are square.

Components

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

• Product render, tier-eyebrow, model name in {typography.product-name}, a button-primary "Where to Buy" and a card-text-link, then stacked spec rows: icon, value in {typography.spec-value} and caption in {colors.steel}.

explore-card — white card on the {colors.fog} band

• Background {colors.canvas}, square corners, photo on top, centred title in {typography.title-md}, one-line description and a card-text-link.

field-card — photo card with overlaid title ("Video Production", "Enterprise")

• Full photo, white title in {typography.card-title-lg}, subtitle and "Learn More ›" in white, square corners.

news-card — editorial photo card

• Light photo with a tile-eyebrow, title in {typography.news-title} and a text link, square corners.

feature-link-band — "Where to Buy / Support / Fly Safe" band

• Background {colors.canvas-soft}, padding {spacing.section} vertical, three centred columns of outline icon, title in {typography.feature-title} and a link.

media-tile — store feature tile

• Background {colors.media-black}, white heading and paragraph over product renders or lifestyle photography, square corners, arranged in mixed one- and two-column rows.

in-box-tile — "In the Box" item

• Background {colors.canvas-soft}, square product cut-out, name below in {typography.ui} and a "× 1" count.

footnote-panel — numbered spec footnotes

• Background {colors.canvas-soft}, {typography.caption} in {colors.ink-secondary}.

Store Purchase Components

benefits-panel — shipping and feature summary beside the title

• Background {colors.panel}, text {colors.graphite} in {typography.ui}, padding {spacing.md}, {rounded.sm} container, icon-led lists with a chevron.

option-card + option-card-active + option-card-disabled — selectable product option

• Background {colors.canvas}, {rounded.sm}, title in {typography.option-title} {colors.store-ink} beside a product thumbnail, price below. Default has a 1px {colors.card-border} border and {spacing.xl} padding; selected has a 2px {colors.store-blue} ring with 23px padding; unavailable has a 1px dashed {colors.dashed-border} border and a red "Out of Stock" line in {colors.error}.

option-badge — corner badge on a highlighted option

• Background {colors.badge-orange}, white {typography.badge}, padding 2px {spacing.xs}, rounded only at the bottom-left (8px), pinned to the card's top-right corner.

care-tag — small "DJI Care" tag in the store nav

• Background {colors.store-blue}, white {typography.micro}, {rounded.xs}, padding 0 {spacing.xxs}.

media-toggle + media-toggle-active — gallery switch ("Photos" / "Intro")

• {rounded.pill}, padding {spacing.xs} by {spacing.md}, 32px tall; active fills {colors.ink} with a white label, inactive is plain text.

quantity-stepper — accessory quantity control

• Minus, value and plus cells outlined in {colors.control-border}, {typography.ui}.

purchase-bar — sticky bar with delivery, price and CTAs

• Background {colors.canvas}, 1px {colors.divider} rule, soft shadow, padding {spacing.md} vertical; delivery selector at left, price in {typography.price}, then button-store-cart + button-store-buy at right.

region-banner — region suggestion bar at the top of the store

• Background {colors.canvas}, text {colors.graphite} in {typography.ui}, padding {spacing.lg} by {spacing.sm}, close icon at left and a button-dark-pill at right.

faq-row — FAQ question row

• Question in {typography.faq} {colors.ink}, chevron at right, 1px {colors.divider} rule beneath.

Inputs & Forms

newsletter-input — footer email field on the dark footer

• Transparent, white {typography.ui} text, 1px {colors.slate} border rounded only on the left (4px), padding 4px 0 4px {spacing.sm}, 32px tall, joined to a square grey submit button.

Signature Components

floating-circle-button — floating support and back-to-top buttons

• 40px circles in {colors.canvas} with an ink icon and the soft floating shadow, pinned at the right edge.

Footer

footer — brand-site footer

• Background {colors.footer}, padding {spacing.xxl} by {spacing.md}. A "Only in the DJI Store App" row with button-download-app sits above {colors.footer-divider} rules, then six link columns with {typography.footer-heading} headings in white and links in {colors.footer-link}, a subscribe field, social icons and a legal row.

footer-store — store footer

• Background {colors.canvas-soft}, headings in {colors.graphite}, links in {colors.slate} {typography.caption}, a subscribe field outlined in {colors.input-border} and a legal row.

Examples (illustrative)

Illustrative demonstration surfaces. Each ex-* entry is composed only from the brand-native primitives above (store option-card shape, button-primary / button-store-buy pills, canvas / canvas-soft surfaces and the Open Sans roles), so the same ten example surfaces re-skin consistently in DJI's colours, radii and spacing.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

• Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

• Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — Color/size picker chrome — fashion / DTC variant selector.

• Properties: backgroundColor, rounded, padding

ex-cart-drawer — Shopping cart drawer — DTC / fashion brand actual cart chrome.

• Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: backgroundColor, activeIndicator, rounded, padding

ex-data-table-cell — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: headerBackground, headerTypography, bodyTypography, cellPadding, rowBorder

ex-auth-form-card — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: backgroundColor, rounded, padding

ex-modal-card — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: backgroundColor, rounded, padding

ex-empty-state-card — Empty-state illustration frame.

• Properties: backgroundColor, rounded, padding, captionTypography

ex-toast — Toast notification surface — feature-card shape + medium shadow.

• Properties: backgroundColor, rounded, padding, typography

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.