# Droga5 · Design system migration spec

> Source: https://droga5.com  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in using massive, bold typography and strict minimalism to project creative authority and scale.

## 1. Identity DNA

The design system operates like a master architect's portfolio: each element is placed with clean, bold precision to showcase landmark work without distraction. It's a construction of authority through stark contrast and monumental scale, where every decision reinforces creative command.

**One-liner:** A premium creative agency site leveraging massive, bold typography and cinematic photography to project authority.
**Keywords:** Creative · Bold · Authoritative · Modern · Global
**Analogy:** A master architect showcasing a landmark portfolio with clean, bold precision.

## 2. Color

The color system is a disciplined study in high contrast, built on a strict black-and-white foundation. A single, sharp blue accent is reserved for essential editorial punctuation, creating focal points without breaking the monochrome authority.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F4F4F4` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#949799` | placeholder |
| `--accent` | `#0000D5` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Strict high-contrast black-and-white base with a single, sharp blue accent for editorial punctuation.

The principle is absolute restraint: color exists only to punctuate, never to decorate.

## 3. Typography

The typographic voice is defined by massive, bold grotesque-sans headlines that dominate the visual field. Display text is center-aligned for maximum impact, while small metadata uses uppercase transformation to maintain hierarchy.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 100px | 0.95 | 700 | -3px | Hero headline |
| heading | 35px | 1.2 | 400 | 0px | Section headlines |
| body | 16px | 1.5 | 400 | 0px | Body copy |
| caption | 10px | 1.4 | 400 | 1px | Uppercase captions and tags |

**Type rules:**
- Display typography is center-aligned for maximum impact.
- Uppercase transformation is used for small metadata labels.

## 4. Spacing

Spacing follows a rhythm of generous whitespace, providing essential breathing room around the monumental typography.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace around massive typography to maintain legibility and visual weight.

## 5. Surfaces

Surface treatment is deliberately flat and borderless, relying on pure contrast and spatial separation to define depth. Shadows and decorative borders are absent, forcing the composition to speak through scale and negative space alone.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Minimal; mostly borderless, relying on pure contrast and spacing.

## 6. Layout

The layout skeleton is a bold alternation between full-bleed photographic sections and expansive white-space text blocks. This creates a cinematic, chapter-like progression where each work or statement occupies the entire viewport.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero sections alternating with generous white-space text blocks.

## 7. Motion & Interaction

Motion philosophy favors subtlety and speed, with transitions focused on state changes rather than choreography. All interactive feedback—color shifts, reveals—occurs within a consistent, fast 0.3s ease-out curve to maintain a sense of immediate precision.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth, fast color and background transitions on interactive elements.

- **Hover:** Subtle color shifts or reveals.
- **Click:** Immediate visual feedback with smooth transitions.
- **Transition:** Consistent 0.3s ease-out for state changes.
- **Keyboard:** Standard focus management for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, authoritative, and professional, matching the visual weight of the design. Headlines are declarative statements in massive, tight-tracking bold type, while calls-to-action remain direct and simple.

- **Tone:** Confident, authoritative, and professional.
- **Headline style:** Declarative statements presented in massive, tight-tracking bold type.
- **CTA style:** Direct and simple, like 'Read More' or 'See what we do'.
- **Avoid:** Playful or casual language / Rounded or bubbly shapes / Overly decorative typefaces

### Don'ts
- ❌ don't use rounded corners — screenshot shows sharp, square edges on all buttons and containers
- ❌ don't use a colorful palette — screenshot shows a strict black, white, and single blue accent scheme
- ❌ don't use centered, light typography — screenshot shows massive, bold, black headlines with tight tracking
- ❌ don't use busy grids or complex card layouts — screenshot shows large, full-bleed photographic sections
- ❌ don't use small, cramped spacing — screenshot shows generous whitespace around the massive typography
- ❌ don't use decorative or script fonts — screenshot shows a clean, geometric grotesque-sans for headlines

The system deliberately avoids rounded corners, bubbly shapes, playful language, and decorative typefaces, treating these as direct contradictions to its core principle of authoritative clarity.

## System Prompt (paste into AI tool)

```
This site is a premium creative agency portfolio (Droga5) characterized by a stark, high-contrast black-and-white palette with a single, sharp blue accent (#0000D5). The typography is its defining feature: massive, bold, tightly-tracked grotesque-sans headlines (like DroteskNo5) dominate the visual field, often center-aligned for maximum impact. The layout is a series of full-bleed photographic sections alternating with generous white-space text blocks. Key design rules include: absolute use of square corners (no border-radius), strict minimal color palette, and massive scale for display text. Critical donts: never use rounded UI elements, never use a multi-color palette, never use small or light display typography, and never clutter the layout with complex grids or small cards.
```