CURATED · OPEN · FREE

Droga5

A premium creative agency site leveraging massive, bold typography and cinematic photography to project authority.

agencyadvertising

↓ Download design system (49 MB)Open in OpenDesign

Visit: https://droga5.com

📦 Browse pack contents →

Identity DNA

CreativeBoldAuthoritativeModernGlobal

A master architect showcasing a landmark portfolio with clean, bold precision.

Color

#0000D5Accent

#000000Ink

#FFFFFFBG

#F4F4F4BG quiet

#949799Muted

rgba(0,0,0,0.1)Line

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

Typography

grotesque-sans · humanist-sans · monospace

display100px · 700
heading35px · 400
body16px · 400
caption10px · 400

Display typography is center-aligned for maximum impact. · Uppercase transformation is used for small metadata labels.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous whitespace around massive typography to maintain legibility and visual weight.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 0px

Minimal; mostly borderless, relying on pure contrast and spacing.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

200msmicro

300mssmall

500msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

Smooth, fast color and background transitions on interactive elements.

Subtle color shifts or reveals. · Immediate visual feedback with smooth transitions.

Components

button Solid black rectangle with white text, no rounded corners.
card Edge-to-edge photographic panels with text overlays.
hero A massive, center-aligned headline followed by a full-width video or image.

Voice & Don'ts

Tone Confident, authoritative, and professional.
Headlines Declarative statements presented in massive, tight-tracking bold type.
CTAs Direct and simple, like 'Read More' or 'See what we do'.

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
Avoid: Playful or casual language
Avoid: Rounded or bubbly shapes
Avoid: Overly decorative typefaces

Inside the pack — real screenshots

Droga5 — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko