DJI

# DJI — Style Reference
> Precision instrument display. A stark, high-contrast digital interface where light and shadow define advanced technology.

**Theme:** light

**Site:** https://dji.com

This system evokes a sense of technical precision and premium product display, balancing stark black-and-white hero sections with clean, information-rich content areas. The use of a single vivid blue for interactive elements cuts through the achromatic palette, acting like a power indicator light. Subtle grayscale variations create depth and hierarchy without relying on heavy shadows, maintaining a lightweight, almost floating aesthetic crucial for showcasing high-tech hardware.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Active Blue | `#0070d5` | `--color-active-blue` | Interactive elements, primary links, and active navigation indicators — this vivid blue signals user interaction. |
| Deep Sea Blue | `#3b63a9` | `--color-deep-sea-blue` | Less prominent interactive states or subtle accent backgrounds, a slightly muted blue. |
| Button Gradient Blue | `#0060e7` | `--color-button-gradient-blue` | Subtle background for specific blue buttons, hinting at a gradient though not explicitly defined. |
| Sky Link Hover | `#2490e3` | `--color-sky-link-hover` | Hover state for links, a lighter, more vibrant blue. |
| Ocean Link Active | `#0058b0` | `--color-ocean-link-active` | Active state for links, a darker, deeper blue. |
| Midnight Void | `#000000` | `--color-midnight-void` | Major headings, primary text, icon fills, and hero section backgrounds — establishes a strong, commanding presence. |
| Arctic Snow | `#ffffff` | `--color-arctic-snow` | Page backgrounds, card surfaces, and primary button backgrounds — provides a clean canvas for product focus. |
| Glacial White | `#f7f9fa` | `--color-glacial-white` | Subtle background for content sections, slightly warmer than Arctic Snow to introduce minimal variation. |
| Platinum Gray | `#ededed` | `--color-platinum-gray` | Card backgrounds and secondary content areas, offering a soft contrast against Arctic Snow. |
| Charcoal Black | `#272727` | `--color-charcoal-black` | Footer backgrounds and other dark-mode elements, a deeper black to delineate sections. |
| Shadow Ink | `#040404` | `--color-shadow-ink` | Secondary text and borders, providing a softer contrast than Midnight Void. |
| Storm Gray | `#6c7073` | `--color-storm-gray` | Input borders, button borders, and tertiary text— a mid-tone gray for subtle definition. |
| Slate Text | `#595959` | `--color-slate-text` | Body text and navigation links, a dark but not stark gray for readability on light backgrounds. |
| Phantom Gray | `#303233` | `--color-phantom-gray` | Navigation active states and specific dark text elements, a darker variant of Slate Text. |
| Ash Gray | `#8c8c8c` | `--color-ash-gray` | Secondary information text and inactive elements, a lighter gray for less prominent details. |

## Tokens — Typography

### Open Sans
- **Substitute:** system-ui, sans-serif
- **Weights:** 300, 400, 500, 600
- **Sizes:** 12px, 14px, 16px, 18px, 20px, 24px, 32px, 40px
- **Line height:** 1, 1.1, 1.13, 1.17, 1.2, 1.25, 1.33, 1.43, 1.5, 2
- **Letter spacing:** -0.0300em, -0.0200em
- **Role:** The primary typeface for all content, from navigation to body text and headings. Its clean, geometric forms provide excellent readability across various weights and sizes, supporting the tech-focused aesthetic. The varied letter-spacing at larger sizes adds a subtle sense of precision.

### Arial
- **Substitute:** system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 13px
- **Line height:** 1.2
- **Role:** Used for specific, small button texts, maintaining system-level legibility for minor controls.

## Tokens — Type Scale

Minor Third (1.2) from 14px base.

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 12px | 1.5 | -0.03em |
| body | 14px | 1.43 | — |
| body-lg | 16px | 1.33 | — |
| subheading | 18px | 1.25 | — |
| heading | 20px | 1.2 | — |
| heading-lg | 24px | 1.17 | — |
| display-sm | 32px | 1.13 | -0.03em |
| display | 40px | 1.1 | -0.03em |

## Tokens — Spacing

- **Card padding:** 16px

## Tokens — Radius

- **Buttons:** 64px
- **Inputs:** 4px
- **Cards:** 4px
- **heroElements:** 60px
- **navButtons:** 99px
- **specialNav:** 1408px

## Tokens — Elevation

- **Card:** `rgba(0, 0, 0, 0.1) 0px 8px 16px 0px`
- **Navigation Panel:** `rgba(0, 0, 0, 0.1) 0px 16px 16px 0px`

## Layout

The page primarily uses a `max-width` contained layout for content sections but features full-bleed hero sections that dominate the viewport, using dark backgrounds to highlight product photography. Header is sticky and spans full-width. Content sections alternate between visually distinct blocks, with clear vertical spacing, often showcasing product cards in grids or alternating text-left/image-right arrangements. The initial hero pattern features a centered headline over a dark background with a prominent product visual. The overall density is comfortable, ensuring breathing room around product displays and textual information.

## Imagery

This site prominently features high-resolution product photography, often isolated on stark black or white backgrounds, emphasizing the product itself as the hero. Products are shown in tight crops or 3/4 views, highlighting their design and functionality without distracting lifestyle context. Photography is crisp, well-lit, and used full-bleed or contained within clean, often card-like structures. There's a minimal use of abstract graphics or conceptual illustrations, reinforcing the focus on tangible hardware. Icons are mostly monochrome, with minimal stroke weight, adhering to the clean, technical aesthetic.

## Components

### Product Cards Grid

### Announcement Banner

### Button Group & CTA

### Primary Navigation Link
*Main navigation items*

Color Slate Text (#595959) by default, transforms to Phantom Gray (#303233) on hover, with a letter-spacing of -0.02em for a slightly more compact feel. Text size 16px, weight 400. Letter spacing is subtly reduced from -0.03em for display sizes to -0.02em for nav, adding visual stability.

### Global Call to Action Button (Blue)
*Main calls to action*

Background Active Blue (#0070d5), text Arctic Snow (#ffffff). Rounded with 99px border-radius, padding 10px vertically and 16px horizontally. Open Sans, weight 500, size 16px. A vivid, fully saturated accent against the predominantly neutral palette.

### Ghost Text Button (Dark Text, Light BG)
*Minimal interactive text elements*

Transparent background, Midnight Void (#000000) text (or equivalent dark neutral). Minimal padding (5px vertical, 16px horizontal) and 64px radius. Used for 'Leer más' style links that appear button-like but are not primary actions. Example has 64px border radius but no border.

### Compact Navigation Button
*Store button in the utility navigation*

Background Active Blue (#0070d5), text Arctic Snow (#ffffff). Border radius 8px, but potentially squared off on one side (e.g., `0px 8px 8px 0px`). Padding 1px vertically and 6px horizontally. Uses Arial, weight 400, size 13px, for small, functional text.

### Search Input Field
*Site search functionality*

Transparent background, Arctic Snow (#ffffff) text, and Storm Gray (#6c7073) border. Border radius 4px, but potentially squared off on one side (e.g., `4px 0px 0px 4px`). Padding 4px vertically, 12px left. Used for search inputs, contrasting with dark navigation bars.

### Hero Section Header
*Dominant titles on hero sections*

Midnight Void (#000000) or Arctic Snow (#ffffff) text, depends on background. Open Sans, weight 300, size 40px, with -0.03em letter spacing. The light weight at large size creates a sophisticated, almost whispered authority, rather than shouting.

### Utility Navigation Button
*Small interactive icons/buttons in header*

Transparent background, Midnight Void (#000000) text. Round (50% border radius) for icon buttons. Arial, weight 400, size 13px, padding 1px vertical, 6px horizontal. Indicates a functional, system-level interaction.

## Guidelines

### Do

- Do use Midnight Void (#000000) for primary headlines and Arctic Snow (#ffffff) for page backgrounds, maintaining high contrast for product focus.
- Do apply Active Blue (#0070d5) exclusively for primary interactive elements like call-to-action buttons and critical links.
- Do use Open Sans font family for all textual content, opting for weight 300 for display headlines to convey subtle authority.
- Do consistently apply a 64px border-radius for all ghost buttons and minor interactive elements, creating a soft, tactile feel.
- Do utilize the shadow rgba(0, 0, 0, 0.1) 0px 8px 16px 0px for elevated cards, providing subtle depth without being aggressive.
- Do use 10px vertical and 16px horizontal padding for primary buttons to ensure a comfortable tap target.
- Do employ a spacing hierarchy from 4px to 16px for element gaps to maintain a comfortable visual density.

### Don't

- Don't introduce additional saturated colors; the palette relies on a single vibrant blue accent within an achromatic scale.
- Don't use aggressive, hard shadows; elevation should be subtle and support the clean aesthetic.
- Don't deviate from Open Sans; maintain the distinct typographic voice established by its varied weights and specific letter-spacing.
- Don't use sharp, angular corners for buttons; all interactive buttons should have at least a 64px border-radius.
- Don't place ghost buttons directly on highly textured backgrounds without sufficient contrast; they are designed for clean product showcases.
- Don't alter the letter spacing patterns for headlines or navigation; these are carefully set to create a specific visual cadence.
- Don't use more than two levels of elevation (page background, subtle card lift) to preserve the lightweight feel.

## Agent Prompt Guide

### Quick Color Reference
- Text (Primary): #000000
- Background (Primary): #ffffff
- CTA Button: #0070d5
- Border (Input): #6c7073
- Accent (Active Link): #0070d5

### Example Component Prompts
1. Create a Hero Section: full-width, background Midnight Void (#000000). Centered headline 'El mundo en mi bolsillo' (Open Sans, weight 300, 40px, #ffffff, letter-spacing -0.03em). Below it, a ghost button 'Leer más' (Arctic Snow #ffffff text, transparent background, 1px Arctic Snow #ffffff border, 64px radius, 10px vertical 16px horizontal padding).
2. Create a Product Card: background Platinum Gray (#ededed), border-radius 4px, shadow rgba(0, 0, 0, 0.1) 0px 8px 16px 0px. Inside, use Midnight Void (#000000) for product titles (Open Sans, weight 600, 24px) and Slate Text (#595959) for descriptions (Open Sans, weight 400, 16px).
3. Create a Primary CTA Button: background Active Blue (#0070d5), text Arctic Snow (#ffffff), border-radius 99px. Padding 10px vertical, 16px horizontal. Text 'Comprar' (Open Sans, weight 500, 16px).
4. Create a Search Input Field: transparent background, Storm Gray (#6c7073) border, border-radius 4px. Placeholder text Ash Gray (#8c8c8c), input text Arctic Snow (#ffffff) (Open Sans, weight 400, 16px). Padding 4px vertical, 12px left.