---
version: alpha
name: Double You Management
description: Gallery-grade editorial minimalism for a creative talent agency — OT Scholar serif paired with Untitled Sans, pure black ink on white, squared corners everywhere, and whisper-quiet UI chrome that lets the roster photography carry the page.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f7f7"
  ink: "#000000"
  ink-secondary: "#333333"
  ink-muted: "#9a9a9a"

  # Accents (sparse — system/state only)
  primary: "#000000"        # CTAs read as black ink, not a brand hue
  link: "#1199ff"           # #19f — interactive link blue
  highlight: "#aeff52"       # acid-green selection/highlight accent
  error: "#ff4949"

  # Neutral scale
  gray-100: "#f7f7f7"
  gray-400: "#9a9a9a"
  gray-700: "#333333"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

  # Borders
  border: "#000000"
  border-soft: "#f7f7f7"

typography:
  display-hero:
    fontFamily: "OT Scholar, Newsreader, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: 0px
  section-heading:
    fontFamily: "OT Scholar, Newsreader, Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0px
  sub-heading:
    fontFamily: "OT Scholar, Newsreader, Georgia, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px
  body-large:
    fontFamily: "Untitled Sans, Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0.12px
  body:
    fontFamily: "Untitled Sans, Inter, Helvetica, Arial, sans-serif"
    fontSize: 14.7px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.09px
  body-medium:
    fontFamily: "Untitled Sans Medium, Inter, Helvetica, Arial, sans-serif"
    fontSize: 14.7px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0.09px
  caption:
    fontFamily: "Untitled Sans, Inter, Helvetica, Arial, sans-serif"
    fontSize: 12.8px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.12px
  label:
    fontFamily: "Untitled Sans Medium, Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.15px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  md: 10px
  pill: 999px
  circle: 9999px

components:
  # Primary CTA — black ink, squared
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    borderColor: "{colors.ink}"

  # Secondary — outlined, transparent fill over white
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    borderColor: "{colors.ink}"

  # Pill toggle (filter / view switch)
  toggle-pill:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border-soft}"

  # Roster / portfolio card — image-led, no chrome
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.background}"

  # Newsletter / search input — underline minimal
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    borderColor: "{colors.ink}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"

  # Avatar / circular thumbnail
  avatar:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.circle}"
    width: 40px
    height: 40px
    borderColor: "{colors.border-soft}"

  # Top navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 16px 24px
    borderColor: "{colors.background}"

  # Name / role tag under roster image
  meta-label:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 0px
---

# Double You Management Design System

## Overview

Double You Management is a creative talent agency, and its website behaves like a gallery wall rather than a product page. The system is built on a single, deliberate restraint: pure white canvas (`{colors.background}`), pure black ink (`{colors.ink}`), and almost nothing else. Every decorative impulse is suppressed so the roster photography — the actual product — fills the frame edge to edge. This is minimalism as curation, not as trend.

The typographic backbone is a two-voice system. **OT Scholar**, a contemporary serif, carries names, titles, and editorial headings — it gives the page its couture, print-magazine register. **Untitled Sans** handles all running UI text, navigation, captions, and metadata in a quiet neutral grotesque, with a dedicated Medium cut for emphasis. The pairing is the entire identity: a serif that signals taste and a sans that signals function, with the agency's neue-haas-grotesk fallback ensuring the sans voice degrades gracefully.

Chrome is engineered to disappear. Corners are squared (`{rounded.none}`) almost everywhere — cards, buttons, and inputs sit as crisp rectangles, echoing the proportions of a printed lookbook. The only rounded exceptions are functional: pill-shaped filter toggles (`{rounded.pill}`) and circular avatar thumbnails. Color appears only as system signal — an interactive link blue (`{colors.link}`), an acid-green highlight (`{colors.highlight}`) for selection, and a single error red. None of it is decorative; the brand "color" is black.

**Key Characteristics:**
- Pure black ink on pure white — the brand palette is achromatic by design
- Two-voice type: OT Scholar serif for names/headings, Untitled Sans for all UI
- Squared corners (`{rounded.none}`) everywhere except pill toggles and circular avatars
- Image-first roster cards with zero card chrome — photography is the design
- Near-zero letter-spacing (0.09px–0.15px) — quiet, editorial, un-engineered
- Single weight strategy: 400 regular, 500 (Untitled Sans Medium) for emphasis only
- Color reserved strictly for state: link blue, acid-green highlight, error red

## Colors

### Primary
- **Black** (`{colors.ink}`): All primary text, headings, CTA fills, underlines. The brand's defining tone.
- **White** (`{colors.background}`): Page canvas, card surfaces, button text on dark.
- **Ink Secondary** (`{colors.ink-secondary}`): Body emphasis, slightly softened from pure black.
- **Ink Muted** (`{colors.ink-muted}`): Roster metadata, role descriptors, tertiary labels.

### System & State
- **Link Blue** (`{colors.link}`): Interactive text links (`#19f`).
- **Highlight** (`{colors.highlight}`): Acid-green selection/highlight accent — the one expressive color.
- **Error** (`{colors.error}`): Form validation errors.

### Neutral Scale
- **Gray 100** (`{colors.gray-100}`): Subtle surface tint, toggle background.
- **Gray 400** (`{colors.gray-400}`): Muted metadata text.
- **Gray 700** (`{colors.gray-700}`): Secondary body text.

### Borders
- **Border** (`{colors.border}`): Black 1px rules, input underlines, outlined buttons.
- **Border Soft** (`{colors.border-soft}`): Faint dividers and toggle outlines.

## Typography

### Font Family
- **Serif (headings, names)**: `OT Scholar`, fallback `Newsreader, Georgia, serif`
- **Sans (UI, body)**: `Untitled Sans` / `Untitled Sans Medium`, fallback `Inter, Helvetica, Arial, sans-serif`
- **Agency fallback**: `neue-haas-grotesk-display` (Typekit) backs the sans voice

### Hierarchy

The complete scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | Lead serif headings, featured names |
| `section-heading` | Section titles, category headers |
| `sub-heading` | Sub-sections, talent names in grid |
| `body-large` | Intro / lead paragraphs |
| `body` | Standard running UI and reading text |
| `body-medium` | Emphasized UI text (Untitled Sans Medium) |
| `caption` | Roster metadata, image captions |
| `label` | Nav links, buttons, toggles, micro-labels |

### Principles
- **Two voices, strict roles**: serif (OT Scholar) announces; sans (Untitled Sans) operates. Never mix them within one role.
- **Near-zero tracking**: letter-spacing stays between 0.09px and 0.2px — the type is set to read as print, not as engineered UI.
- **Weight discipline**: 400 is the default; 500 (the dedicated Medium cut) is the only emphasis. No bold in body.
- **Serif for the human element**: people's names and editorial copy get the serif; chrome and function get the sans.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. The rhythm is generous and gallery-like — large gaps (`{spacing.3xl}`–`{spacing.4xl}`) between sections let imagery breathe.

### Grid & Container
- Roster grid: responsive multi-column image grid, edge-to-edge
- Talent cards stack image → serif name → muted role caption
- Generous gutters; whitespace separates rather than rules

### Whitespace Philosophy
- **The image is the design**: chrome recedes so photography dominates.
- **Print rhythm**: spacing echoes a lookbook spread — wide margins, calm vertical pacing.
- **Squared grid**: rectangular cards aligned to a strict grid, no rounded softening.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Cards, buttons, inputs, images — the default |
| `md` | 10px | Rare soft container exception |
| `pill` | 999px | Filter toggles, view switches |
| `circle` | 9999px | Avatar thumbnails |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Black fill, white label, squared. The default CTA.
- **`button-secondary`** — White fill, black 1px outline, squared.
- **`toggle-pill`** — Pill-shaped filter/view toggle on a soft gray surface.

### Cards
- **`card`** — Zero chrome: image-led roster tile with no border or radius. Photography carries it.

### Inputs
- **`input`** — Underline-only minimal field (newsletter, search), black 1px baseline rule.

### Navigation
- **`nav-bar`** — White, borderless top bar. Untitled Sans label-size links in black.

### Distinctive Components
- **`avatar`** — Circular thumbnail, the lone round shape against a squared system.
- **`meta-label`** — Muted serif/sans caption under roster images naming talent + role.

## Do's and Don'ts

### Do
- Keep the canvas pure white and ink pure black — the palette is achromatic
- Use OT Scholar serif for names and editorial headings, Untitled Sans for all UI
- Square every corner by default; reserve rounding for pill toggles and avatars
- Let roster photography fill the frame with zero card chrome
- Keep letter-spacing near zero — set type like print
- Use color only as system signal (link blue, highlight green, error red)

### Don't
- Don't introduce a decorative brand color — black is the brand
- Don't round card or button corners — squared is the identity
- Don't add borders or shadows to roster images
- Don't use bold weights in body — 500 Medium is the ceiling
- Don't mix the serif and sans within a single role
- Don't crowd the grid — whitespace is the curation

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column roster, stacked nav |
| Tablet | 600–1024px | 2-column image grid |
| Desktop | 1024–1440px | Multi-column roster, full margins |
| Large | >1440px | Centered, generous gallery margins |

### Collapsing Strategy
- Roster grid: multi-column → 2-column → single column
- Navigation: inline label links → drawer/menu on mobile
- Section spacing compresses but stays generous
- Images maintain aspect ratio and squared corners at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Black `{colors.ink}`
- Background: White `{colors.background}`
- Heading text: Black `{colors.ink}` in OT Scholar serif
- Body text: `{colors.gray-700}` in Untitled Sans
- Link: Link Blue `{colors.link}`
- Roster metadata: Ink Muted `{colors.ink-muted}`

### Example Component Prompts
- "Create a roster grid of talent cards: each is a full-bleed image (squared corners, no border) with a serif name (OT Scholar 20px, `{colors.ink}`) and a muted role caption (Untitled Sans 12.8px, `{colors.ink-muted}`) stacked below."
- "Build a primary CTA: black fill `{colors.ink}`, white label `{colors.on-ink}`, squared corners (0px radius), 12px 24px padding, Untitled Sans Medium 12px."
- "Design a newsletter input: underline-only, black 1px baseline, no box, Untitled Sans 14.7px, near-zero letter-spacing."
- "Make a filter toggle: pill shape (999px), soft gray surface `{colors.surface-soft}`, black label, 6px 14px padding."

### Iteration Guide
1. Default every corner to 0px — only toggles (pill) and avatars (circle) round
2. Serif (OT Scholar) for names/headings, sans (Untitled Sans) for everything functional
3. Black on white is the whole palette; color is reserved for link/highlight/error only
4. Strip card chrome — let photography be the visual
5. Keep letter-spacing near zero so type reads as print, not UI

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Double You Management. Brand names and trademarks belong to their respective owners.