DJI

Difficulty:
Industry
DJI Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 4px
md · 8px
lg · 12px
full

Interactive controls use fully rounded pill shapes.

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Prompt
  • Ag

    Headings 32px · bold

    Open Sans

  • Ag

    Body 16px · regular

    Open Sans

  • Ag

    Labels 13px · medium

    Open Sans

A bright product showroom defines DJI: full-bleed studio renders sit in square, gutter-separated tiles on a white canvas, with interface chrome pushed behind the photography. A single engineering blue carries every primary action in pill form -- #0070d5 on the brand site, #0060ef in the store -- while 1px ink-outline pills handle secondary moves and a burnt-orange (#be4e04) eyebrow marks product rank. Open Sans runs throughout with negative tracking from -0.02em to -0.03em and a narrow 600/400 weight range, and the store adds 8px option cards, a 2px blue selection ring, and a sticky purchase bar.

DJIConsumer

Prompt Template

Base Template
Design a DJI-inspired interface. - Photography-first showroom: full-bleed studio renders in square, gutter-separated tiles on a white canvas; - One engineering blue for every primary action -- #0070d5 on the brand site, #0060ef in the store -- always expressed as a pill, with 1px ink-outline pills for secondary actions; - Open Sans throughout with negative tracking (-0.02em body, -0.03em headings) and a narrow 600/400 weight range; - Burnt-orange (#be4e04) eyebrow labels marking product tier, never used as a button fill; - Store surfaces built from 8px option cards with a 2px #0060ef selection ring and a sticky white purchase bar. Colors: #0070d5, #0060ef, #be4e04, #262626, #ffffff, #f5f5f5 with #0070d5 accent. Typography: Open Sans.

Variant Prompts

📱 Mobile
Design a mobile app with DJI aesthetics. Use DJI color identity with #0070d5 accents. Photography-led cards, pill actions, and a compact sticky purchase bar.
💻 Web
Design a web application with DJI style. Use DJI color identity with #0070d5 accents. Square studio tiles, white gutters, and restrained engineering-blue actions.
📊 Dashboard
Design a dashboard with DJI design language. Use DJI color identity with #0070d5 accents. Telemetry cards, clear spec hierarchy, and pill-shaped filters.
📄 Landing Page
Design a landing page with DJI visual identity. Use DJI color identity with #0070d5 accents. Full-bleed product hero, square tiles, and a single blue conversion path.

Usage Examples

DJI Product Store

Web
Build a DJI-style product store page with a full-bleed hero carousel, square studio tiles, and #0070d5 pill CTAs.

DJI Flight Data Dashboard

Dashboard
Create a drone fleet dashboard using DJI's restrained system: white canvas, Open Sans, spec cards, and #0070d5 status pills.

✅ Best For

  • Drone and camera product pages
  • Studio-style hardware showcases
  • Consumer electronics stores

❌ Avoid For

  • Dense back-office tables
  • Soft lifestyle brands

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download