Skip to content
Library

DJI. Aerospace black canvas with a single electric blue thrust.

  • Commerce
  • Mixed theme
  • 10 colors
  • 2 typefaces

DJI presents its products like aviation reveal footage: the hero is a near-black void where the device emerges from shadow, then the rest of the site opens into a clean, light-gray editorial grid of product cards. The palette is deliberately restrained — nearly monochromatic — with one vivid blue (#0070d5) that does the work of brand recognition, active state, and the one persistent call to action. Typography is Open Sans in a wide weight range (300–600) with tight negative tracking on display sizes, giving headlines a engineered, technical feel without serif warmth. Components are minimal: pill-shaped buttons at 64px radius, flat product cards with no decorative borders, ghost links with chevrons, and an almost shadowless surface system that lets the product photography carry all visual weight.

Screenshot of DJI
Captured from dji.com on October 11, 2026

DJI design system

DJI

Brand1

  • Blue supporting accent for decorative details and low-frequency emphasis.

Accent1

  • Secondary link state, hover or visited variant of Signal Blue — a muted counterpart that reads as the same brand without competing for attention

Neutrals8

  • Primary text, icons, dark hero backgrounds, footer — the dominant ink color across all UI

  • Footer background, dark panels — deep neutral for terminal/closing sections

  • Primary nav item text, section headings on light backgrounds — darker than body to anchor hierarchy

  • Body copy, secondary nav text, descriptions — the workhorse text gray that sits between headlines and helper text

  • Muted helper text, disabled states, secondary button borders, input placeholder

  • Tertiary captions, meta text, fine print

  • Page canvas behind card grids and product sections — slightly cool, lower than pure white so product imagery pops

  • Card surfaces, nav bar, product detail panels, input fields — the lightest surface in the stack

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper on Signal Blue

4.91 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.