---
name: Droga5
description: "This site is a masterclass in using massive, bold typography and strict minimalism to project creative authority and scale."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#0000D5"
  neutral: "#949799"
  bg-quiet: "#F4F4F4"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 100px
    lineHeight: 0.95
    fontWeight: 700
    letterSpacing: "-3px"
  heading:
    fontFamily: humanist-sans
    fontSize: 35px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 10px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "1px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#0000D5`)** — uses `accent` token
- **Muted (`#949799`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

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

## Layout

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

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

## Elevation & Depth

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

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## 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.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```