---
version: alpha
name: DJI
description: "Studio white, capsule buttons, and one orange word riding above the headline."
colors:
  on-surface: "rgba(0, 0, 0, 0.85)"
  surface: "#FFFFFF"
  primary: "#0000EE"
  ink-muted: "rgba(0, 0, 0, 0.65)"
  ink-faint: "rgba(0, 0, 0, 0.45)"
  graphite: "#3B3E40"
  nav-ink: "#303233"
  slate: "#6C7073"
  mist: "#9FA3A6"
  dji-blue: "#0070D5"
  link-blue: "#1890FF"
  eyebrow-orange: "#BE4E04"
  surface-grey: "#F5F5F5"
  hairline: "#F0F0F0"
  tip-grey: "#FAFAFA"
  footer-black: "#272727"
  solution-blue: "#3B63A9"
  white-8: "rgba(255, 255, 255, 0.08)"
typography:
  display:
    fontFamily: Open Sans
    fontSize: 48px
    fontWeight: 400
    lineHeight: 52px
    letterSpacing: -1.44px
  headline:
    fontFamily: Open Sans
    fontSize: 40px
    fontWeight: 400
    lineHeight: 52px
    letterSpacing: -1.2px
  section-head:
    fontFamily: Open Sans
    fontSize: 32px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -0.96px
  card-head:
    fontFamily: Open Sans
    fontSize: 28px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -0.84px
  product-name:
    fontFamily: Open Sans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.72px
  title:
    fontFamily: Open Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.6px
  subhead:
    fontFamily: Open Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.48px
  body:
    fontFamily: Open Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.32px
  body-small:
    fontFamily: Open Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.28px
  nav-link:
    fontFamily: Open Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: -0.28px
  caption:
    fontFamily: Open Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: -0.24px
  footer-link:
    fontFamily: Open Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
rounded:
  large-capsule-button-slider-track: 60px
  banner-button-home-link-box: 64px
  icon-button-app-download-button-quiz-but: 99px
  language-pill: 100px
  buy-now-chip: 500px
  power-series-capsule: 999px
  store-button: 1408px
  product-card: 8px
  newsletter-field: 4px
  newsletter-submit: 0px
  slider-fill: 0px
  hero-cards-bands-sections-footer: 0px
spacing:
  space-1: 6px
  space-2: 8px
  space-3: 10px
  space-4: 12px
  space-5: 16px
  space-6: 32px
  space-7: 48px
  space-8: 64px
  space-9: 96px
  space-10: 112px
---
# DJI — Style Reference

> Studio white, capsule buttons, and one orange word riding above the headline.

**Theme:** light

DJI builds its marketing on a near-white studio: a `#FFFFFF` canvas, `#F5F5F5` and `#EDEDED` bands beneath it, body ink at `rgba(0, 0, 0, 0.85)` rather than pure black. The pages share one chrome — same header, same near-black footer, same centred hero stack — and disagree on one thing: the camera-drones and handheld pages fill their calls to action with `#0070D5`, the power-series page fills the identical capsule with `rgba(0, 0, 0, 0.85)`, and the home page leaves its banner buttons unfilled behind a 1px white hairline. Open Sans does all the work, 48px headlines down to 12px footer links, and hierarchy comes from size and tracking rather than weight — the display rows sit at 500 and 600 and stop. Controls are capsules almost without exception, expressed by whatever oversized radius each component inherited: 60px, 64px, 99px, 500px, 999px, 1408px, the filled controls landing between 32 and 48px tall. The radius language is not confined to them: the 60px row leads with `.progress`, the home page's 2px-tall slider tracks filled `rgba(255, 255, 255, 0.3)`, and the 64px row with `.link-box.ga-data`, 24px-tall text links with no fill at all. Depth usually reads as a luminance step rather than a shadow, renders float on their own studio cast, and a small orange eyebrow rides above the headline.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#FFFFFF` | `--color-canvas` | Page ground and card fill; also ink on dark bands and the `.banner-button.ga-data` hairline. |
| Ink | `rgba(0, 0, 0, 0.85)` | `--color-ink` | Headlines and body — the real black. `#000000` sits on wrappers, not copy. |
| Ink Muted | `rgba(0, 0, 0, 0.65)` | `--color-ink-muted` | Descriptions under a headline, one step down from the body ink. |
| Ink Faint | `rgba(0, 0, 0, 0.45)` | `--color-ink-faint` | Spec captions and secondary eyebrows. The floor on white. |
| Graphite | `#3B3E40` | `--color-graphite` | The most-observed ink, carried as text on the category pages' body wrappers. |
| Nav Ink | `#303233` | `--color-nav-ink` | The category sub-nav links — "Camera Drones" `.style__category-item-link___1scpg`, 14 anchors at 14px/400/14px/−0.28px on the camera-drones and handheld pages — and the text-less search and account controls `.nav-link.nav-search-link.ga-data.no-configuration-link`, `.search-btn` and `.nav-link`. Not the header links: the census paints those `#FFFFFF`. |
| Slate | `#6C7073` | `--color-slate` | Newsletter field border and submit fill — and, in 48 of its 60 observations, small text: the 12px/400 legal row at a 24px line-height, "DJI Privacy Policy" `.ga-data` and its nine siblings on the category pages. The submit's label ink is `not measured` — the control census marks its `#FFFFFF` *inherited*. |
| Mist | `#9FA3A6` | `--color-mist` | Footer link ink on the category pages, against `#272727`. |
| DJI Blue | `#0070D5` | `--color-blue` | Two roles in equal measure — text 25 / fill 25. Fill: "Store" `.normal-btn.dui-btn.dui-btn-sm.dui-btn-buy`, `.style__store-btn___2BG_Z`, the primary capsule and the "Buy Now" chip. Text: "Download the App" `.universal-product-tip-link`, on a transparent ground. |
| Link Blue | `#1890FF` | `--color-link` | Inline text links: `.atom-design-v1.style__dji-link___3Bxkg.style__dji-link-external___F_OpW` and the "Buy Now" text links. |
| Eyebrow Orange | `#BE4E04` | `--color-eyebrow` | The editorial accent: eyebrows, "Flagship", "New". Text on every carrier. |
| Surface Grey | `#F5F5F5` | `--color-surface` | Band tint behind hero cards. One step off canvas. |
| Hairline | `#F0F0F0` | `--color-hairline` | The tab-bar rule; the lightest structural line painted. |
| Tip Grey | `#FAFAFA` | `--color-tip` | The 48px announcement strip — near-invisible by design. |
| Footer Black | `#272727` | `--color-footer` | The dark plane that ends the page. |
| Solution Blue | `#3B63A9` | `--color-solution` | Behind the home page's sky-gradient tiles. Editorial, not UI. |
| UA Blue | `#0000EE` | `--color-ua-link` | Browser default on the skip link and accessibility button. Not a brand blue. |
| White 8% | `rgba(255, 255, 255, 0.08)` | `--color-white-08` | Control fill on dark and photographic grounds: language pill, app-download button, activity card. |

## Tokens — Typography

### Open Sans — the whole system, 12px to 48px, size and tracking doing the work weight usually does · `--font-sans`
- **Substitute:** Noto Sans, Source Sans 3, Segoe UI
- **Weights:** 300, 400, 500, 600 (all four painted; every measured heading and text row lands on 400, 500 or 600)
- **Sizes:** 12, 14, 16, 20, 24, 28, 32, 40, 48px (plus 13.3333px inherited on the floating support button)
- **Line height:** 14px on 14px nav links (solid), 16px on 12px captions, 20–24px on 14–16px body, 24px on 12px footer links, 44–52px on 40–48px display
- **Letter spacing:** −0.03em wherever a heading row carries tracking: 48px/−1.44px, 40px/−1.2px, 32px/−0.96px, 28px/−0.84px, 24px/−0.72px, 20px/−0.6px. Small type runs −0.02em (14px/−0.28px, 16px/−0.32px). The home and power-series heroes paint `normal` instead — "Osmo 360 II" `.product-name-text.text` at 40px/500 and "Portable Power Station" `.title.font-opensans` at 40px/600 sit untracked.
- **Role:** the entire system — display, subhead, body, nav, caption, footer.

### FontAwesome — the inline glyph face behind chevrons and social marks · `--font-icon`
- **Substitute:** Font Awesome 6 Free, Material Symbols, Lucide
- **Weights:** 400
- **Sizes:** not measured — no text row carries this family
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** `not measured` — the census names the family and its 400 weight, and no row names an element that carries it.

### quark — the framework face riding with the tab-bar component · `--font-quark`
- **Substitute:** Open Sans, Inter, system-ui
- **Weights:** 400
- **Sizes:** not measured — the census names the family but no text row carries it
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** `not measured` — the census names the family and its 400 weight, and no row names an element that carries it; a vendor default to override with Open Sans.

### Arial, Times & sans-serif — inherited UA faces · `--font-fallback`
- **Substitute:** Helvetica, Georgia, ui-sans-serif
- **Weights:** 400 for each
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** `not measured` — the census names these families and their 400 weights, and no row names an element that carries one; specify Open Sans instead.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 48px / 600 | 52px | −1.44px | `--text-display` |
| Headline | 40px / 400–600 | 44–52px | −1.2px or normal | `--text-headline` |
| Section Head | 32px / 500–600 | 36px | −0.96px or normal | `--text-section` |
| Card Head | 28px / 600 | 32px | −0.84px | `--text-card-head` |
| Product Name | 24px / 600 | 28px | −0.72px | `--text-product` |
| Title | 20px / 500–600 | 24px | −0.6px or normal | `--text-title` |
| Subhead | 16px / 400 | 24px | −0.48px | `--text-subhead` |
| Body | 16px / 400 | 20–24px | −0.32px or normal | `--text-body` |
| Body Small | 14px / 400 | 20–24px | −0.28px | `--text-body-sm` |
| Nav Link | 14px / 400 | 14px | −0.28px | `--text-nav` |
| Caption | 12px / 400 | 16px | −0.24px / −0.36px | `--text-caption` |
| Footer Link | 12px / 400–500 | 24px | normal | `--text-footer` |

## Tokens — Spacing & Shapes

**Base unit:** 16px  **Density:** comfortable

Every section step is a multiple of 16 — 48, 64, 96, 112. Control padding drops to a finer, less tidy set (1, 5, 6, 8, 10, 12, 15, 16, 32, 34px), where the component libraries show.

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| space-1 | 6px | `--spacing-1` |
| space-2 | 8px | `--spacing-2` |
| space-3 | 10px | `--spacing-3` |
| space-4 | 12px | `--spacing-4` |
| space-5 | 16px | `--spacing-5` |
| space-6 | 32px | `--spacing-6` |
| space-7 | 48px | `--spacing-7` |
| space-8 | 64px | `--spacing-8` |
| space-9 | 96px | `--spacing-9` |
| space-10 | 112px | `--spacing-10` |

### Border Radius

| Element | Value |
|---------|-------|
| Large capsule button, slider track | 60px |
| Banner button, home link box | 64px |
| Icon button, app-download button, quiz button | 99px |
| Language pill | 100px |
| Buy Now chip | 500px |
| Power-series capsule | 999px |
| Store button | 1408px |
| Circular nav, floating support button | 50% |
| Product card | 8px |
| Newsletter field | 4px 0px 0px 4px |
| Newsletter submit | 0px 4px 4px 0px |
| Slider fill | 0px 2px 2px 0px |
| Hero cards, bands, sections, footer | 0px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Float | `rgba(0, 0, 0, 0.1) 0px 16px 32px 0px` | `--shadow-float` |

### Layout
- **Page max-width:** 1920px, full-bleed — `.site-footer.dji-edit-module`, `.banner-content.theme-light.swiper-lazy.swiper-lazy-loaded` and `.atom-design-v1.style__hero-vertical-component___2JEHR` all measure it. Inner column 1200px on `.store-point-wrapper.is-pc`.
- **Section gap:** 48px is the common step; 64px on hero and comparison sections, 96px on `.homepage-service-module`, 112px on the home banner.
- **Card padding:** 0px on `.product-item` and `.atom-design-v1.style__hero-vertical-card___2B64y.style__media-screen-1440___2do0U` — these cards pad their children, not themselves. `.site-footer.dji-edit-module` pads 32px 0px; `.comparison-section.style__comparison-section___2GIwn` 64px 0px.
- **Element gap:** not measured — no flex or grid gap on any page.
- **Horizontal inset:** 48px on the home, camera-drones and power-series blocks; 96px on `.style__text-content-container___1aLKY`.

## Components

### Primary Capsule Button
**Role:** the filled call to action on the category pages, beside a hero render.
Built from `.atom-design-v1.style__dji-btn___ILmHs.style__dji-btn-lg___2BnLT.style__dji-btn-primary___3tFe2`: a `button` filled `#0070D5`, label `#FFFFFF` at 16px/400, line-height 20px, tracking −0.32px, padding 0px 16px, radius 60px, no border, no shadow, measured at 128×40px. The width is fixed, not fluid — 128px whatever the label — so a pair sits as a symmetrical block under the headline. A 60px radius on a 40px box is 3× what full-round needs — a 40px box goes fully round at 20px; the system over-specifies and lets the browser clamp.

### Secondary Outline Button
**Role:** the quieter half of the hero button pair, sitting beside the filled one.
Built from `.atom-design-v1.style__dji-btn___ILmHs.style__dji-btn-lg___2BnLT.style__dji-btn-secondary-dark___30qIM`: a `button` with no fill, a 1px `rgba(0, 0, 0, 0.85)` border, 16px/400 type at 20px line-height and −0.32px tracking, padding 0px 15px, radius 60px, no shadow, measured at 128×40px. Label ink is `not measured` on this row. Note the padding: 15px against the primary's 16px, so the border is absorbed and both land on exactly 128×40px. The outline is a peer, not a lesser control.

### Ink Capsule Button
**Role:** the primary action on the power-series product cards.
Built from `.dui-btn.dui-btn-primary.ga-data`: an anchor filled `rgba(0, 0, 0, 0.85)` with `#FFFFFF` label ink, 16px/400, line-height 48px, tracking −0.32px, padding 0px 32px, radius 999px, no border, no shadow, box 128×48px, text "Buy Now". Line-height equals box height, so the label is centred by leading and the 32px padding is purely horizontal. Here the system swaps blue for ink: same capsule, different temperature, merchandising rather than chrome.

### Tinted Ghost Button
**Role:** the "Learn More" companion on the power-series cards.
Built from `.dui-learn-more.ga-data`: an anchor filled `rgba(0, 0, 0, 0.04)` with `rgba(0, 0, 0, 0.85)` label ink, 16px/400, line-height 48px, tracking −0.32px, padding 0px 32px, radius 999px, no border, no shadow, box 147×48px, text "Learn More". A 4% black wash is the lightest fill here that still reads as a surface; against the card's `#FFFFFF` it is barely a tint, which is the intended hierarchy next to the ink button. Its box runs 19px wider than its partner's — these size to their label, unlike the fixed 128px pair.

### Buy Now Chip
**Role:** the compact purchase link inside a comparison or product row.
Built from `.style__product-buy-now-btn___24LU_`: an anchor filled `#0070D5`, ink `#FFFFFF`, 14px/400 at 20px line-height with `normal` tracking, padding 6px 12px, radius 500px, no border, no shadow, box 82×32px, text "Buy Now". The small end of the blue ladder — 32px tall against the 40px capsule and the 48px ink button — and it drops tracking to normal, relaxing the discipline larger controls keep.

### Eyebrow Tag
**Role:** the orange line above a headline naming the category or flagging a launch.
Two rows carry it. `.style__eyebrow___2AP0X` sets Open Sans 12px/400, line-height 16px, tracking −0.24px, in `#BE4E04`, on spans such as "Flagship". `.text-ms-12.style__eyebrow-text___1gRhT.style__eyebrow___3m_hp` sets the same face and size at −0.36px tracking, also `#BE4E04`, as an `h2` carrying "Triple-Lens Flagship Camera Drone". The inventory records `#BE4E04` as text on every carrier — `p`, `h2`, `span`, including `.style__new-tag___1jRcB` — with no fill or border observation. The accent is a word, never a chip. `rgba(255, 255, 255, 0.65)` is a different row — the home page's 16px/400 `.eyebrow-text.eyebrow` div carrying "Triple-Lens Flagship Camera Drone", 11 observations. What `…style__eyebrow___3m_hp` paints over photography is `not measured`.

### Product Card
**Role:** the power-series catalogue tile: render, name, spec sentence, two buttons.
Built from `.product-item`: a `div` filled `#FFFFFF`, padding 0px 0px, radius 8px, no border, no shadow, measured at 440×568–588px, containing "New DJI Power 140W GaN Charger 140W Efficient Ou…". Its title row is "DJI Power 140W GaN Charger" `.title` — Open Sans 20px/600, line-height 24px, tracking −0.6px, `rgba(0, 0, 0, 0.85)`. The 8px radius is the system's most rectangular corner, and the card earns its edge from the page's `#F2F2F2` body, not a border or shadow. Height varies 20px across the grid where the spec sentence runs long; nothing is truncated to force a match.

### Hero Band Card
**Role:** the full-width product band carrying render, eyebrow, headline and button pair.
Built from `.atom-design-v1.style__hero-vertical-card___2B64y.style__media-screen-1440___2do0U`, which measures two ways. The wide variant fills `#FFFFFF` at 592–1888×501–640px, padding 0px, radius 0px, no border, no shadow, containing "Beginner-Friendly Camera Drones DJI Lito Series ". The paired variant fills `#F5F5F5` at a fixed 936×600px with the same zero padding, zero radius and no shadow, containing "Triple-Lens Flagship Camera Drone DJI Mavic 4 Pr". Two grey halves sit side by side across the 1920px band — 936 + 936 = 1872px, so they cover it nearly but not edge to edge; the white variant runs alone. Nothing separates them but the luminance gap between the fills.

### Activity Card
**Role:** the handheld page's lifestyle tile — a full-bleed photograph labelled with a use case.
Built from `.style__card-container___otn1P.style__card-hover-scaled___3wlMa.style__card-clickable___3RbW_`: an anchor filled `rgba(255, 255, 255, 0.08)`, label `#FFFFFF` at 20px/600, padding 0px 0px, radius 0px, no border, no shadow, box 297–320×600px, containing "Vlogging". The 8% white is a scrim under the photograph, not a visible surface; the card is the image. Corners stay square while the buttons beside them are capsules — a hard line between what you click and what you look at.

### Announcement Bar
**Role:** the app-promotion strip that sits above the header on every page.
Built from `.universal-product-tip-container.universal-product-tip-container-in.universal-product-tip-container-light`: a `div` filled `#FAFAFA`, padding 0px, radius 0px, no border, no shadow, measured at 1920×48px, containing "Download the DJI Store App and be first to exper". Behind it `.universal-product-tip-bg` paints `#FFFFFF` across the same 1920×48px. Its inline link, `.universal-product-tip-link`, carries `#0070D5` — the strip's only colour. Near-white above a white header is deliberately weak contrast: the bar is dismissible, so it is built to be ignorable.

### Site Footer
**Role:** the five-column directory that closes every page.
Built from `.site-footer.dji-edit-module`: a `footer` filled `#272727`, padding 32px 0px, radius 0px, no border, no shadow. The box census counts it on all four pages; the component census measures it at 1920×800px. Footer links paint `#9FA3A6` on the category pages and `rgba(255, 255, 255, 0.85)` on the home and power pages, both at 12px/400 with a 24px line-height — double leading, which is what makes a long directory readable. Column headings sit at 12px/500 in `#FFFFFF`. The newsletter field takes `4px 0px 0px 4px` and its submit the mirrored `0px 4px 4px 0px` in `#6C7073` — one rectangle, as un-capsule as this system gets.

### Floating Support Button
**Role:** the persistent circular affordance pinned to the lower-right corner.
Built from `.button-presale.contact-btn-presale`: a `button` filled `#FFFFFF`, radius 50%, no border, box 48×48px, carrying `rgba(0, 0, 0, 0.1) 0px 16px 32px 0px`. It measures two ways: padding 1px 6px with 13.3333px/400 type on the home and power pages, padding 0px 0px with 16px/400 at a 24px line-height on the category pages. The row carries no text — the face is a glyph. It is the only element in the capture that paints a box-shadow, and the shadow is enormous: 32px of blur at a 16px offset. This one thing is allowed to hover.

## Do's and Don'ts

### Do
- Set body copy in `rgba(0, 0, 0, 0.85)`, not `#000000`. The 85% ink is what "Just Fly." `.subhead` and "DJI Lito X1" `.text` paint; every `#000000` carrier the census names is a wrapper — `.js.no-touch.csstransforms3d.csstransitions`, `.dji-en.dji-pc.universal-product-tip-body.nav-theme-light`, `.universal-product-tip-bg` — and no text row carries it, so what solid black sets is `not measured`.
- Track headlines at −0.03em from 20px up. Every heading row carrying tracking lands there: "Camera Drones" `.style__headline___1ripS.style__headline-text___1tW5r` at 48px/−1.44px, "Popular Drone Comparisons" `.style__headline___Oq3it` at 40px/−1.2px, `.style__product-name___1eaZ9` at 24px/−0.72px.
- Keep `#BE4E04` as an ink. Its carriers — `.style__eyebrow___2AP0X`, `.text-ms-12.style__eyebrow-text___1gRhT.style__eyebrow___3m_hp`, `.style__new-tag___1jRcB` — are text on every observation.
- Give paired buttons the same box: `…style__dji-btn-primary___3tFe2` and `…style__dji-btn-secondary-dark___30qIM` both measure 128×40px.
- Let the render carry the band: a centred stack of eyebrow, headline, tagline, buttons above one object.
- Separate planes by luminance: `#FFFFFF` → `#FAFAFA` → `#F5F5F5` → `#EDEDED` → `#272727`.

### Don't
- Don't add shadows. The capture paints one box-shadow in total — `rgba(0, 0, 0, 0.1) 0px 16px 32px 0px` on `.button-presale.contact-btn-presale`.
- Don't round a card like a button. `.product-item` paints 8px and `.atom-design-v1.style__hero-vertical-card___2B64y.style__media-screen-1440___2do0U` paints 0px, while controls run 60px, 99px, 500px, 999px and 1408px.
- Don't treat `#0000EE` as a brand colour. It arrives on `.skip-link` and `.a11y-button` as the browser's untouched default.
- Don't reach past weight 600. Open Sans paints 300, 400, 500 and 600 here and the display rows top out at 600.
- Don't write a CSS gradient. No painted colour carries a gradient-stop observation; the gradients live inside photographs.
- Don't fill a control with `#1890FF`. The census records it as text only, on `.atom-design-v1.style__dji-link___3Bxkg…` and the "Buy Now" text links.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page ground, card fill, comparison sections. |
| 0 | Page Ground (power) | `#F2F2F2` | The power-series `body`, so white cards read as raised. |
| 1 | Tip Strip | `#FAFAFA` | The 48px announcement bar. |
| 1 | Service Band | `#F7F9FA` | `.homepage-service-module`, the coolest light tint. |
| 2 | Surface | `#F5F5F5` | Hero bands and quiz entrance on the category pages. |
| 3 | Banner Ground | `#EDEDED` | `.banner-content.theme-light` behind the home banner. |
| 4 | Footer | `#272727` | The dark plane. |
| 4 | Dark Chip | `#262626` | `.zPFdO`, a dark inset on the category pages. |

## Elevation

Elevation is luminance, not shadow. The ladder runs `#FFFFFF` → `#FAFAFA` → `#F5F5F5` → `#EDEDED`: four steps inside eighteen points of lightness, so planes read as folds in one sheet of paper rather than stacked objects. The power-series page inverts it — a `#F2F2F2` body pushes `#FFFFFF` cards forward. Where a step is too subtle, the system reaches for a 1px line: `rgba(0, 0, 0, 0.85)` on the secondary button, `#F0F0F0` on the tab bar, `#6C7073` on the newsletter field, `rgba(255, 255, 255, 0.12)` on the footer's store band, `#FFFFFF` on the banner button over photography. Only `.button-presale.contact-btn-presale` breaks the rule.

## Imagery

Photography is the system. A band is built around one product render, three-quarter view, centred, floating on a seamless gradient sweep with a soft cast shadow beneath — near-white for drones, warm-lit black for the pocket cameras, pale sky blue for the Lito series. The renders are lit in-camera rather than composited, and they overlap the band's lower edge so the object feels larger than its frame. Lifestyle photography appears where a use case needs people: vertical 297–320×600px crops of vlogging, diving, mountain biking, motorcycling and skiing, each shot in motion with the product in hand. Icons are thin monoline strokes at one weight — shopping bag, headset, map pin — and the sub-nav uses small grey silhouettes of each product family. No illustration, no pattern: the object is the image.

## Layout

Full-bleed is the default. Bands span the 1920px viewport and stack without gutters — banner, product band, product band, solution tiles, service module, footer — with rhythm carried by 48px, 64px, 96px and 112px section padding rather than margins. Inside a band the content is centred and narrow: 48px insets on the home, camera-drones and power-series blocks, 96px on `.style__text-content-container___1aLKY`, a 1200px column on `.store-point-wrapper.is-pc`. Grids run two-up for hero cards (936×600px halves), three-up for the home page's 389×512px solution tiles, six-up for the 297–320×600px activity cards, two-up for 440px product cards. The header is one row that paints no fill of its own: wordmark, seven `.nav-item-title.ga-data.font-opensans.ga-data-hover-v2` links at 14px/400 with a 14px line-height in `#FFFFFF`, a 40×40px circular search and account pair (`.nav-link.nav-search-link.ga-data.no-configuration-link` and `.nav-link`, both radius 50%), a 94×32px `.language-box` pill at radius 100px, and the `#0070D5` Store button `.normal-btn.dui-btn.dui-btn-sm.dui-btn-buy` at 83×32px, radius 1408px, padding 8px 34px. The band beneath the header is `not measured` — no box in the census paints one. The category pages add a second row: an icon strip of product families over `rgba(0, 0, 0, 0.02)`, links at 14px/400 in `#303233`.

## Typography Voice

Open Sans runs in two modes. Display is large and tightly tracked — 24 to 48px at weight 500 or 600, letter-spacing at −0.03em, line-height a fixed 4px above the font size (24/28, 28/32, 32/36, 48/52) — the 40px display row is the exception, setting 48px of leading ("Popular Drone Comparisons" `.style__headline___Oq3it`, 40/48/−1.2px, 15 elements). 40/44 is the home page's *untracked* row. Those ratios, 1.08 to 1.20 — tightest on the 48px display row and loosest on the 40px one, are what make the headlines look engineered rather than editorial: lines nearly touch, and negative tracking pulls each word into one mass. UI mode is ungenerous differently — 12 to 16px at weight 400, tracking relaxed to −0.02em or normal, line-height set solid at 14px on 14px for nav and category links. Between them sits the footer, where 12px links breathe at a 24px line-height: double leading, the loosest setting here, and the reason a five-column directory scans. The signature move is that the home and power-series heroes drop tracking to `normal` at the same sizes the category pages track at −0.03em — "Osmo 360 II" at 40px/500/normal against "Handheld Imaging Devices" at 40px/600/−1.2px.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF`
- text: `rgba(0, 0, 0, 0.85)`
- surface: `#F5F5F5`
- border: `#F0F0F0`
- accent: `#BE4E04`
- primary action: `#0070D5`

## Example Component Prompts
1. **Primary Capsule Button**: Button filled `#0070D5`, label `#FFFFFF` in Open Sans 16px/400, line-height 20px, letter-spacing −0.32px, padding 0 16px, radius 60px, no border, no shadow, fixed 128×40px.
2. **Power Card**: `#FFFFFF` card at 440×588px, radius 8px, no border, no shadow, on a `#F2F2F2` page. Centred render; `#BE4E04` "New" tag, type `not measured` on the power page; title at 20px/600, line-height 24px, letter-spacing −0.6px in `rgba(0, 0, 0, 0.85)`; spec sentence at 14px/400/20px in `rgba(0, 0, 0, 0.65)`; two 48px capsules at radius 999px, padding 0 32px — one filled `rgba(0, 0, 0, 0.85)` with white label, one `rgba(0, 0, 0, 0.04)` with `rgba(0, 0, 0, 0.85)` label.
3. **Hero Product Band**: Full-bleed 1920px band split into two 936×600px halves filled `#F5F5F5`, radius 0, no border, no shadow. Each half centres a stack: eyebrow at Open Sans 12px/400/16px/−0.36px in `#BE4E04`; headline at 40px/600, line-height 48px, letter-spacing −1.2px in `rgba(0, 0, 0, 0.85)`; subhead at 16px/400/24px/−0.48px; then a 128×40px pair at radius 60px — `#0070D5` filled and 1px `rgba(0, 0, 0, 0.85)` outlined — above a cut-out render on a soft gradient.
4. **Activity Tile Row**: Six anchors at 297–320×600px — five measure 297px wide and one 320px, radius 0, filled `rgba(255, 255, 255, 0.08)` over full-bleed vertical lifestyle photography, no gap. Label bottom-left in Open Sans 20px/600, `#FFFFFF`; a 32×32px `#FFFFFF` circle at radius 99px bottom-right holding a chevron.
5. **Site Footer**: `#272727` footer, 32px vertical padding across 1920px, 1200px inner column. Five link columns: headings at Open Sans 12px/500 in `#FFFFFF`, links at 12px/400 with a 24px line-height in `#9FA3A6`. Newsletter field with a 1px `#6C7073` border at radius `4px 0px 0px 4px` beside a `#6C7073` submit at radius `0px 4px 4px 0px`.

## Similar Brands
- **Apple** — one object, one centred type stack, one near-white band, repeated down the page until the catalogue is told.
- **Insta360** — kindred consumer-imaging system: studio-lit renders on pale grounds, a warm accent held for launch tags, capsule CTAs in saturated blue.
- **Dyson** — product-on-white photography carrying the layout, dark bands used sparingly as full stops.
- **Sonos** — light canvas, tightly tracked sans headlines, nothing decorated that isn't the product.
- **Samsung** — the same grammar of stacked full-bleed bands with paired pill buttons, one filled and one outlined, at identical widths.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #FFFFFF;
  --color-ink: rgba(0, 0, 0, 0.85);
  --color-ink-muted: rgba(0, 0, 0, 0.65);
  --color-ink-faint: rgba(0, 0, 0, 0.45);
  --color-graphite: #3B3E40;
  --color-nav-ink: #303233;
  --color-slate: #6C7073;
  --color-mist: #9FA3A6;
  --color-muted: #919699;
  --color-footer-muted: #616466;
  --color-blue: #0070D5;
  --color-link: #1890FF;
  --color-eyebrow: #BE4E04;
  --color-surface: #F5F5F5;
  --color-surface-alt: #EEEEED;
  --color-page-ground: #F2F2F2;
  --color-service-band: #F7F9FA;
  --color-hairline: #F0F0F0;
  --color-tip: #FAFAFA;
  --color-banner: #EDEDED;
  --color-footer: #272727;
  --color-dark-chip: #262626;
  --color-solution: #3B63A9;
  --color-ua-link: #0000EE;
  --color-black: #000000;
  --color-white-08: rgba(255, 255, 255, 0.08);
  --color-white-12: rgba(255, 255, 255, 0.12);
  --color-white-25: rgba(255, 255, 255, 0.25);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-65: rgba(255, 255, 255, 0.65);
  --color-white-85: rgba(255, 255, 255, 0.85);
  --color-black-02: rgba(0, 0, 0, 0.02);
  --color-black-04: rgba(0, 0, 0, 0.04);
  --color-black-08: rgba(0, 0, 0, 0.08);

  /* Typography — Families */
  --font-sans: 'Open Sans', ui-sans-serif, system-ui, sans-serif;
  --font-icon: 'FontAwesome', ui-sans-serif, system-ui, sans-serif;
  --font-quark: 'quark', 'Open Sans', ui-sans-serif, sans-serif;
  --font-fallback: Arial, Helvetica, sans-serif;

  /* Typography — Scale */
  --text-display: 48px;   --leading-display: 52px;   --tracking-display: -1.44px;
  --text-headline: 40px;  --leading-headline: 48px;  --tracking-headline: -1.2px;
  --text-section: 32px;   --leading-section: 36px;   --tracking-section: -0.96px;
  --text-card-head: 28px; --leading-card-head: 32px; --tracking-card-head: -0.84px;
  --text-product: 24px;   --leading-product: 28px;   --tracking-product: -0.72px;
  --text-title: 20px;     --leading-title: 24px;     --tracking-title: -0.6px;
  --text-subhead: 16px;   --leading-subhead: 24px;   --tracking-subhead: -0.48px;
  --text-body: 16px;      --leading-body: 20px;      --tracking-body: -0.32px;
  --text-body-sm: 14px;   --leading-body-sm: 20px;   --tracking-body-sm: -0.28px;
  --text-nav: 14px;       --leading-nav: 14px;       --tracking-nav: -0.28px;
  --text-caption: 12px;   --leading-caption: 16px;   --tracking-caption: -0.24px;
  --text-footer: 12px;    --leading-footer: 24px;    --tracking-footer: normal;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing */
  --spacing-1: 6px;
  --spacing-2: 8px;
  --spacing-3: 10px;
  --spacing-4: 12px;
  --spacing-5: 16px;
  --spacing-6: 32px;
  --spacing-7: 48px;
  --spacing-8: 64px;
  --spacing-9: 96px;
  --spacing-10: 112px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-card: 8px;
  --radius-input: 4px 0px 0px 4px;
  --radius-input-submit: 0px 4px 4px 0px;
  --radius-slider: 0px 2px 2px 0px;
  --radius-btn: 60px;
  --radius-banner-btn: 64px;
  --radius-icon: 99px;
  --radius-pill: 100px;
  --radius-chip: 500px;
  --radius-capsule: 999px;
  --radius-store: 1408px;
  --radius-circle: 50%;

  /* Shadow */
  --shadow-float: rgba(0, 0, 0, 0.1) 0px 16px 32px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #FFFFFF;
  --color-ink: rgba(0, 0, 0, 0.85);
  --color-ink-muted: rgba(0, 0, 0, 0.65);
  --color-ink-faint: rgba(0, 0, 0, 0.45);
  --color-graphite: #3B3E40;
  --color-nav-ink: #303233;
  --color-slate: #6C7073;
  --color-mist: #9FA3A6;
  --color-muted: #919699;
  --color-footer-muted: #616466;
  --color-blue: #0070D5;
  --color-link: #1890FF;
  --color-eyebrow: #BE4E04;
  --color-surface: #F5F5F5;
  --color-surface-alt: #EEEEED;
  --color-page-ground: #F2F2F2;
  --color-service-band: #F7F9FA;
  --color-hairline: #F0F0F0;
  --color-tip: #FAFAFA;
  --color-banner: #EDEDED;
  --color-footer: #272727;
  --color-dark-chip: #262626;
  --color-solution: #3B63A9;
  --color-ua-link: #0000EE;
  --color-black: #000000;
  --color-white-08: rgba(255, 255, 255, 0.08);
  --color-white-12: rgba(255, 255, 255, 0.12);
  --color-white-25: rgba(255, 255, 255, 0.25);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-65: rgba(255, 255, 255, 0.65);
  --color-white-85: rgba(255, 255, 255, 0.85);
  --color-black-02: rgba(0, 0, 0, 0.02);
  --color-black-04: rgba(0, 0, 0, 0.04);
  --color-black-08: rgba(0, 0, 0, 0.08);

  --font-sans: 'Open Sans', ui-sans-serif, system-ui, sans-serif;
  --font-icon: 'FontAwesome', ui-sans-serif, system-ui, sans-serif;
  --font-quark: 'quark', 'Open Sans', ui-sans-serif, sans-serif;
  --font-fallback: Arial, Helvetica, sans-serif;

  --text-display: 48px;
  --text-display--line-height: 52px;
  --text-display--letter-spacing: -1.44px;
  --text-headline: 40px;
  --text-headline--line-height: 48px;
  --text-headline--letter-spacing: -1.2px;
  --text-section: 32px;
  --text-section--line-height: 36px;
  --text-section--letter-spacing: -0.96px;
  --text-card-head: 28px;
  --text-card-head--line-height: 32px;
  --text-card-head--letter-spacing: -0.84px;
  --text-product: 24px;
  --text-product--line-height: 28px;
  --text-product--letter-spacing: -0.72px;
  --text-title: 20px;
  --text-title--line-height: 24px;
  --text-title--letter-spacing: -0.6px;
  --text-subhead: 16px;
  --text-subhead--line-height: 24px;
  --text-subhead--letter-spacing: -0.48px;
  --text-body: 16px;
  --text-body--line-height: 20px;
  --text-body--letter-spacing: -0.32px;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 20px;
  --text-body-sm--letter-spacing: -0.28px;
  --text-nav: 14px;
  --text-nav--line-height: 14px;
  --text-nav--letter-spacing: -0.28px;
  --text-caption: 12px;
  --text-caption--line-height: 16px;
  --text-caption--letter-spacing: -0.24px;
  --text-footer: 12px;
  --text-footer--line-height: 24px;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --spacing-1: 6px;
  --spacing-2: 8px;
  --spacing-3: 10px;
  --spacing-4: 12px;
  --spacing-5: 16px;
  --spacing-6: 32px;
  --spacing-7: 48px;
  --spacing-8: 64px;
  --spacing-9: 96px;
  --spacing-10: 112px;

  --radius-none: 0px;
  --radius-card: 8px;
  --radius-btn: 60px;
  --radius-banner-btn: 64px;
  --radius-icon: 99px;
  --radius-pill: 100px;
  --radius-chip: 500px;
  --radius-capsule: 999px;
  --radius-store: 1408px;
  --radius-circle: 50%;

  --shadow-float: rgba(0, 0, 0, 0.1) 0px 16px 32px 0px;
}
```