A product-photography showroom for drones and cameras: full-bleed studio renders in square, gutter-separated tiles on a white canvas, every action a rounded pill in one engineering blue, tightly tracked Open Sans in near-black ink, small orange tier labels, and store option cards on the same restrained system.
01 — Foundations
Color Palette
Thirty-two tokens from DESIGN.md. Two action blues (brand site and store), an ink ladder built from stepped opacities, and a small orange accent for product rank.
Brand & Accent
DJI Blue · primary
#0070d5
Brand-site action pills: Store, Buy Now, model selector.
Store Blue · store-blue
#0060ef
Store Buy Now, Add to Cart label, selected option ring.
Store Blue Tint · store-blue-tint
#deeafd
Add to Cart pill fill.
On Blue · on-primary
#ffffff
Labels on blue and dark pills, hero text.
Link Blue · link-blue
#1890ff
Learn More / Buy Now text links on cards.
Tier Orange · tier-orange
#be4e04
Product rank eyebrows.
Badge Orange · badge-orange
#fa8c16
Option corner badge.
Error · error
#f5222d
Out of Stock.
Surface
Canvas · canvas
#ffffff
Page, nav, cards, purchase bar.
Canvas Soft · canvas-soft
#f7f9fa
Feature-link band, store panels, In the Box tiles.
Panel · panel
#f6f8f9
Product benefits panel.
Fog · fog
#f5f5f5
Explore More band, product-card backdrop, region pill.
Announce · announce
#fafafa
Announcement bar, category strip.
Media Black · media-black
#000000
Store feature media tiles.
Footer · footer
#272727
Brand-site footer.
Footer Pill · footer-pill
#383838
Download App pill.
Footer Divider · footer-divider
#414141
Footer rules.
Text
Ink · ink
#262626
Headings and body.
Ink Secondary · ink-secondary
#595959
Secondary text, inactive tabs.
Ink Tertiary · ink-tertiary
#8c8c8c
Tile eyebrows.
Store Ink · store-ink
#333333
Store product and option titles.
Graphite · graphite
#3b3e40
Store body copy and headings.
Nav Ink · nav-ink
#303233
Nav labels.
Slate · slate
#6c7073
Store footer links, field border.
Steel · steel
#9fa3a6
Spec captions.
Footer Link · footer-link
#b3b3b3
Brand footer links.
Lines
Hairline · hairline
#f0f0f0
Tab track rule.
Divider · divider
#e8e8e8
FAQ rows, purchase-bar rule.
Card Border · card-border
#d9d9d9
Option card border.
Dashed Border · dashed-border
#dddddd
Unavailable option card.
Input Border · input-border
#d4d7d9
Store email field.
Control Border · control-border
#cccccc
Quantity stepper, checkbox.
02 — Foundations
Typography
Open Sans throughout, tracked slightly tight (about −0.02em on body, −0.03em on headings), with weight 600 for headings and 400 for everything functional.
display-xl Open Sans — 48px / 600 / 1.08 / -1.44px
Camera Drones
display Open Sans — 40px / 600 / 1.2 / -1.2px
Popular Drone Comparisons
spec-value Open Sans — 40px / 400 / 1.2 / -1.2px
1063 g
heading Open Sans — 32px / 600 / 1.125 / -0.96px
DJI SDR Transmission Combo
card-title-lg Open Sans — 32px / 500 / 1.125 / 0
Video Production
news-title Open Sans — 28px / 600 / 1.14 / 0
DJI Agriculture Annual Report
title-md Open Sans — 24px / 600 / 1.17 / -0.72px
Accessories
product-name Open Sans — 24px / 400 / 1.17 / -0.72px
DJI Mavic 4 Pro
price Open Sans — 20px / 600 / 1.2 / -0.4px
USD $469
subhead Open Sans — 20px / 600 / 1.2 / -0.6px
Select Option
feature-title Open Sans — 20px / 500 / 1.4 / 0
Fly Safe
option-title Open Sans — 18px / 600 / 1.33 / -0.36px
DJI SDR Transmission Transmitter
body Open Sans — 16px / 400 / 1.5 / -0.32px
Protect your drone with this comprehensive plan
button Open Sans — 16px / 400 / 1.25 / -0.32px
Buy Now
faq Open Sans — 16px / 600 / 1.5 / -0.32px
What monitoring methods does DJI SDR Transmission support?
ui Open Sans — 14px / 400 / 1.43 / -0.28px
Aerial Imaging
nav Open Sans — 14px / 400 / 1.0 / -0.28px
Camera Drones · Handheld · Lifestyle Tech
caption Open Sans — 12px / 400 / 1.33 / -0.24px
Flagship
badge Open Sans — 12px / 600 / 1.33 / -0.24px
Dual-Mode Transmission
footer-heading Open Sans — 12px / 500 / 2.0 / 0
Product Categories
micro Open Sans — 10px / 600 / 1.8 / -0.2px
DJI Care
03 — Components
Button Variants
button-primary · 60pxBuy NowDJI Lito X1
Filled DJI blue pill, 40px tall: Buy Now, active model selector, Where to Buy.
floating-circle-button — 40px circles with the floating shadow.
09 — Foundations
Spacing Scale
4px base on mostly 8px steps; tiles sit on 16px gutters, option cards pad 24px and the feature-link band pads 64px.
xxs 4px
xs 8px
sm 12px
md 16px
lg 20px
xl 24px
xxl 32px
xxxl 40px
huge 48px
section 64px
10 — Foundations
Border Radius
Square tiles and cards; pills for every action; 8px for store option cards and panels.
0px
none Tiles, cards, media
4px
xs DJI Care tag
8px
sm Option cards, panels
60px
xl Card pills
64px
xxl Hero ghost pills
100px
pill Region, toggle, Download App
9999px
full Store pill, store CTAs
11 — Foundations
Elevation & Depth
Flat — tiles, cards, bands, footer.
Outlined — option cards, FAQ rows, outline pills.
Selected — 2px store-blue ring.
Floating — floating buttons, sticky purchase bar.
12 — Responsive
Responsive Behavior
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
Small
≤ 456px
Compact type and tile heights
456
768
1024
1200
1440
Touch targets: store CTAs and the large outline pill are 48px tall, card pills 40px, nav pills 32px with generous horizontal padding. Collapsing: the nav collapses to a menu with the Store pill kept; two-up tiles and field cards stack; the comparison table scrolls horizontally; the store gallery stacks above the purchase column while the sticky purchase bar keeps price and both CTAs reachable.