DJI

awesome-design-mdMedia & Consumer Tech

Drone and camera maker. Studio product tiles, engineering-blue pills, tight Open Sans

Preview

Metadata (frontmatter)

version: alpha
name: DJI Analysis
description: An analysis of DJI's design language — a product-photography showroom for drones and cameras, where full-bleed studio renders sit in square, gutter-separated tiles on a white canvas, every action is a rounded pill in a single engineering blue, type is a tightly tracked Open Sans set in near-black ink at stepped opacities, small orange tier labels mark product rank, and the store layers 8px option cards, a sticky purchase bar and pale grey panels on top of the same restrained system before closing on a charcoal footer.

colors:
  primary: "#0070d5"          # DJI Blue — Store pill, Buy Now pills, active selector, announcement link
  store-blue: "#0060ef"       # store Buy Now, Add to Cart label, selected option border, store links
  store-blue-tint: "#deeafd"  # Add to Cart pill fill (store blue at 13% on white)
  on-primary: "#ffffff"       # labels on blue and dark pills, hero text over photography
  link-blue: "#1890ff"        # "Learn More ›" / "Buy Now ›" text links on product cards
  tier-orange: "#be4e04"      # product tier eyebrows ("Flagship", "Advanced")
  badge-orange: "#fa8c16"     # option corner badge
  error: "#f5222d"            # "Out of Stock"
  canvas: "#ffffff"           # page canvas, cards, nav, purchase bar
  canvas-soft: "#f7f9fa"      # feature-link band, store panels, In the Box tiles, store footer
  panel: "#f6f8f9"            # product benefits panel
  fog: "#f5f5f5"              # Explore More band, product-card backdrop, region pill
  announce: "#fafafa"         # announcement bar, category icon strip
  media-black: "#000000"      # store feature media tiles
  footer: "#272727"           # brand-site footer
  footer-pill: "#383838"      # Download App pill on the footer
  footer-divider: "#414141"   # footer rules
  ink: "#262626"              # headings and body (black at 85%)
  ink-secondary: "#595959"    # secondary text, inactive tabs (black at 65%)
  ink-tertiary: "#8c8c8c"     # tile eyebrows (black at 45%)
  store-ink: "#333333"        # store product and option titles
  graphite: "#3b3e40"         # store body copy and section headings
  nav-ink: "#303233"          # nav labels on white
  slate: "#6c7073"            # store footer links, input text, footer field border
  steel: "#9fa3a6"            # spec captions
  footer-link: "#b3b3b3"      # brand footer links (white at 65%)
  hairline: "#f0f0f0"         # tab track rule
  divider: "#e8e8e8"          # FAQ rows, purchase-bar rule
  card-border: "#d9d9d9"      # option card border
  dashed-border: "#dddddd"    # unavailable option card (dashed)
  input-border: "#d4d7d9"     # store email field
  control-border: "#cccccc"   # quantity stepper, checkbox

typography:
  display-xl:
    fontFamily: Open Sans
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -1.44px
  display:
    fontFamily: Open Sans
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -1.2px
  spec-value:
    fontFamily: Open Sans
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -1.2px
  heading:
    fontFamily: Open Sans
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.125
    letterSpacing: -0.96px
  card-title-lg:
    fontFamily: Open Sans
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.125
    letterSpacing: 0
  news-title:
    fontFamily: Open Sans
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.14
    letterSpacing: 0
  title-md:
    fontFamily: Open Sans
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.17
    letterSpacing: -0.72px
  product-name:
    fontFamily: Open Sans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: -0.72px
  price:
    fontFamily: Open Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.4px
  subhead:
    fontFamily: Open Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.6px
  feature-title:
    fontFamily: Open Sans
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0
  option-title:
    fontFamily: Open Sans
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: -0.36px
  body:
    fontFamily: Open Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.32px
  button:
    fontFamily: Open Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.32px
  faq:
    fontFamily: Open Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.32px
  ui:
    fontFamily: Open Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: -0.28px
  nav:
    fontFamily: Open Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.28px
  caption:
    fontFamily: Open Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: -0.24px
  badge:
    fontFamily: Open Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: -0.24px
  footer-heading:
    fontFamily: Open Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0
  micro:
    fontFamily: Open Sans
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.8
    letterSpacing: -0.2px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  xl: 60px
  xxl: 64px
  pill: 100px
  full: 9999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  huge: 48px
  section: 64px

components:
  announcement-bar:
    backgroundColor: "{colors.announce}"
    textColor: "{colors.ink}"
    typography: "{typography.ui}"
    rounded: "{rounded.none}"
  nav-bar-overlay:
    textColor: "{colors.on-primary}"
    typography: "{typography.nav}"
    rounded: "{rounded.none}"
    height: 64px
  nav-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.nav-ink}"
    typography: "{typography.nav}"
    rounded: "{rounded.none}"
    height: 64px
  button-store-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav}"
    rounded: "{rounded.full}"
    padding: "8px 16px 8px 34px"
    height: 32px
  region-pill:
    backgroundColor: "{colors.fog}"
    textColor: "{colors.ink}"
    typography: "{typography.nav}"
    rounded: "{rounded.pill}"
    padding: "0px 12px"
    height: 32px
  button-hero-ghost:
    textColor: "{colors.on-primary}"
    borderColor: "{colors.on-primary}"
    typography: "{typography.ui}"
    rounded: "{rounded.xxl}"
    padding: "5px 16px"
    height: 32px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: "0px 16px"
    height: 40px
  button-outline:
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: "0px 15px"
    height: 40px
  button-outline-lg:
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "14px 16px"
    height: 48px
  button-store-buy:
    backgroundColor: "{colors.store-blue}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "14px 32px"
    height: 48px
  button-store-cart:
    backgroundColor: "{colors.store-blue-tint}"
    textColor: "{colors.store-blue}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "14px 32px"
    height: 48px
  button-dark-pill:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.ui}"
    rounded: "{rounded.full}"
    padding: "6px 12px"
    height: 32px
  button-download-app:
    backgroundColor: "{colors.footer-pill}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "10px 16px"
    height: 40px
  compare-options-button:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.ui}"
    rounded: "{rounded.sm}"
    padding: "24px"
  text-link:
    textColor: "{colors.primary}"
    typography: "{typography.ui}"
  text-link-store:
    textColor: "{colors.store-blue}"
    typography: "{typography.ui}"
  card-text-link:
    textColor: "{colors.link-blue}"
    typography: "{typography.body}"
  product-tile:
    backgroundColor: "{colors.fog}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
  tile-eyebrow:
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.ui}"
  tier-eyebrow:
    textColor: "{colors.tier-orange}"
    typography: "{typography.caption}"
  product-card:
    backgroundColor: "{colors.fog}"
    textColor: "{colors.ink}"
    typography: "{typography.display}"
    rounded: "{rounded.none}"
  category-strip:
    backgroundColor: "{colors.announce}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    height: 124px
  comparison-tabs:
    textColor: "{colors.ink-secondary}"
    borderColor: "{colors.hairline}"
    typography: "{typography.ui}"
    padding: "14px 0px"
  comparison-tab-active:
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.ui}"
  spec-column:
    textColor: "{colors.ink}"
    typography: "{typography.spec-value}"
  spec-caption:
    textColor: "{colors.steel}"
    typography: "{typography.ui}"
  explore-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
    rounded: "{rounded.none}"
  field-card:
    textColor: "{colors.on-primary}"
    typography: "{typography.card-title-lg}"
    rounded: "{rounded.none}"
  news-card:
    textColor: "{colors.ink}"
    typography: "{typography.news-title}"
    rounded: "{rounded.none}"
  feature-link-band:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.feature-title}"
    padding: "64px 0px"
  store-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.ui}"
    rounded: "{rounded.none}"
  care-tag:
    backgroundColor: "{colors.store-blue}"
    textColor: "{colors.on-primary}"
    typography: "{typography.micro}"
    rounded: "{rounded.xs}"
    padding: "0px 4px"
  benefits-panel:
    backgroundColor: "{colors.panel}"
    textColor: "{colors.graphite}"
    typography: "{typography.ui}"
    rounded: "{rounded.sm}"
    padding: "16px"
  option-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.store-ink}"
    borderColor: "{colors.card-border}"
    typography: "{typography.option-title}"
    rounded: "{rounded.sm}"
    padding: "24px"
  option-card-active:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.store-ink}"
    borderColor: "{colors.store-blue}"
    typography: "{typography.option-title}"
    rounded: "{rounded.sm}"
    padding: "23px"
  option-card-disabled:
    textColor: "{colors.store-ink}"
    borderColor: "{colors.dashed-border}"
    typography: "{typography.option-title}"
    rounded: "{rounded.sm}"
    padding: "24px"
  option-badge:
    backgroundColor: "{colors.badge-orange}"
    textColor: "{colors.on-primary}"
    typography: "{typography.badge}"
    padding: "2px 8px"
  media-toggle:
    textColor: "{colors.ink}"
    typography: "{typography.ui}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: 32px
  media-toggle-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.ui}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: 32px
  quantity-stepper:
    textColor: "{colors.store-ink}"
    borderColor: "{colors.control-border}"
    typography: "{typography.ui}"
  purchase-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.divider}"
    typography: "{typography.price}"
    padding: "16px 0px"
  region-banner:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.graphite}"
    typography: "{typography.ui}"
    padding: "20px 12px"
  media-tile:
    backgroundColor: "{colors.media-black}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
  in-box-tile:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.ui}"
    rounded: "{rounded.none}"
  faq-row:
    textColor: "{colors.ink}"
    borderColor: "{colors.divider}"
    typography: "{typography.faq}"
  footnote-panel:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
  floating-circle-button:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    size: 40px
  newsletter-input:
    textColor: "{colors.on-primary}"
    borderColor: "{colors.slate}"
    typography: "{typography.ui}"
    padding: "4px 0px 4px 12px"
    height: 32px
  footer:
    backgroundColor: "{colors.footer}"
    textColor: "{colors.footer-link}"
    borderColor: "{colors.footer-divider}"
    typography: "{typography.footer-heading}"
    padding: "32px 16px"
  footer-store:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.slate}"
    typography: "{typography.caption}"

  # ─── Examples (illustrative) — kit-mirror surfaces composed from the primitives above ───
  ex-pricing-tier:
    description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface."
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.ink}"
    borderColor: "{colors.card-border}"
    rounded: "{rounded.sm}"
    padding: "{spacing.xl}"
  ex-pricing-tier-featured:
    description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)."
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    padding: "{spacing.xl}"
  ex-product-selector:
    description: "Color/size picker chrome — fashion / DTC variant selector."
    backgroundColor: "{colors.canvas-soft}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md}"
  ex-cart-drawer:
    description: "Shopping cart drawer — DTC / fashion brand actual cart chrome."
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md}"
    item-divider: "{colors.divider}"
  ex-app-shell-row:
    description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator."
    backgroundColor: "{colors.canvas}"
    activeIndicator: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: "{spacing.sm} {spacing.md}"
  ex-data-table-cell:
    description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm."
    headerBackground: "{colors.canvas-soft}"
    headerTypography: "{typography.caption}"
    bodyTypography: "{typography.body}"
    cellPadding: "{spacing.sm} {spacing.md}"
    rowBorder: "{colors.divider}"
  ex-auth-form-card:
    description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside."
    backgroundColor: "{colors.canvas-soft}"
    rounded: "{rounded.sm}"
    padding: "{spacing.xl}"
  ex-modal-card:
    description: "Modal dialog surface — same chrome as feature-card with elevated shadow."
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.sm}"
    padding: "{spacing.xl}"
  ex-empty-state-card:
    description: "Empty-state illustration frame."
    backgroundColor: "{colors.canvas-soft}"
    rounded: "{rounded.sm}"
    padding: "{spacing.huge}"
    captionTypography: "{typography.body}"
  ex-toast:
    description: "Toast notification surface — feature-card shape + medium shadow."
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.sm}"
    padding: "{spacing.sm} {spacing.md}"
    typography: "{typography.body}"

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

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.

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

Name	Width	Key Changes
Wide	≥ 1200px	Full desktop grids, 1200px store container
Desktop	1024–1199px	Store gallery and purchase column tighten
Tablet	769–1023px	Nav condenses; two-up tiles remain
Mobile	≤ 768px	Nav collapses to a menu; tiles, comparison columns and the store split stack to one column
Small	≤ 456px	Compact type and tile heights

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

Level	Treatment	Use
Flat	No shadow	Tiles, cards, bands, footer
Outlined	1px border (`{colors.card-border}`, `{colors.divider}`, ink outline pills)	Option cards, FAQ rows, outline buttons
Selected	2px `{colors.store-blue}` ring	Selected store option
Floating	Soft shadow, 0 8px 16px at 10% black	Floating circular buttons (support, back to top), the sticky purchase bar

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

Token	Value	Use
`{rounded.none}`	0px	Photo tiles, cards, media tiles, bands
`{rounded.xs}`	4px	DJI Care tag
`{rounded.sm}`	8px	Store option cards, benefits panel, Compare Options
`{rounded.xl}`	60px	Product-card Buy Now / Learn More pills
`{rounded.xxl}`	64px	Hero ghost pills
`{rounded.pill}`	100px	Region pill, media toggle, Download App
`{rounded.full}`	9999px	Store pill, store CTAs, large outline pill, dark pill

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.

Ingestion metadata

Source catalog: awesome-design-md
Last refreshed: 10/24/2026, 3:00:12 AM (5h ago)
Refresh schedule: Daily · 03:00 UTC
Dedupe status: Merged — per-file DESIGN.md stubs folded into this canonical entry