DJI Design System

DJI's web presence reads like a hardware catalog re-staged inside an aerospace gallery. The homepage opens on a pure black "#000000" hero canvas with a stark white "OSMO POCKET 4" set at 40px Open Sans weight 500 — no gradient, no atmospheric mesh, no decorative chrome. Below that, the page settles into a predictable alternation: a 2-up grid of white product cards holding the Mini, Avata 360, and Lite drone lineups, then another black tile, then a deep landscape photograph of a pilot operating a drone over alpine water captioned "Standing at the Forefront of Innovation." The chrome itself is restrained to the point of invisibility, because the chrome is not the point — the aircraft is.

This file packages DJI's marketing chrome into a single Google Labs DESIGN.md spec. Inside: 18 color tokens covering the two-blue split (Sky CTA "#0070d5" for buttons, DJI Brand Blue "#3b63a9" for accent fills, and a legacy hyperlink "#0000ee" for inline links), pure black and white as the dominant surface pair, plus a graded neutral ladder from "#272727" through "#ededed"; 10 typography roles all running Open Sans at weights 300 through 600; a 5-step radius scale topping out at the extreme 1408px pill used on every primary CTA; an 8px-based spacing system; and 20 component definitions covering pill buttons, product cards, the dark hero tile, the navigation row with the embedded blue search input, and the alpine atmospheric photograph footer card.

Drop the file into Claude, Cursor, or GitHub Copilot and the agent will produce React components that respect DJI's catalog grammar — single-blue CTA pills against alternating black/white tiles rather than a generic SaaS hero. Reference the tokens directly in Tailwind config or CSS variables; every hex and pixel value is quoted and ready to paste. The system is worth studying because it inverts the convention of hardware marketing: where most consumer-electronics brands lean on hero gradients and product glow, DJI runs flat black tiles and a single pill button.