---
name: Whitney
description: "This site serves as a masterclass in brutalist-adjacent editorial design, proving that extreme restraint and high contrast can create a powerful, premium cultural experience."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  secondary: "#212121"
  tertiary: "#d7ff2d"
  neutral: "#949494"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 65px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 35px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 15px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A stark, high-contrast editorial interface for a contemporary art museum, balancing bold typographic hierarchy with generous white space.

*A crisp, architectural exhibition catalog brought to the web.*

## Colors

High-contrast monochrome palette with a single, aggressive high-chroma accent used sparingly for primary calls to action.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#212121`)** — uses `ink-soft` token
- **Accent (`#d7ff2d`)** — uses `accent` token
- **Muted (`#949494`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** grotesque-sans

- Headlines frequently use uppercase text transformation
- Body copy relies heavily on clean, left-aligned grotesque fonts
- Line heights are relatively tight for display sizes but standard for body copy

## Layout

A strict, highly structured grid layout with clear horizontal rule dividers and distinct content columns.

*Rhythm:* Generous vertical spacing between content blocks and clean horizontal gutters maintain an orderly, uncluttered grid.

## Elevation & Depth

- rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
- Borders: Sharp 1px solid black borders define navigation elements and primary buttons, with occasional 2px variations for emphasis.

## Shapes

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

## Components

- **button:** Buttons are starkly divided into two primary styles: solid black blocks with white uppercase text, and white blocks with black borders and black uppercase text.
- **card:** Content is presented in clean, borderless image-and-text blocks separated by consistent horizontal dividers.
- **chip:** Simple rectangular labels with thin black borders and uppercase text.
- **input:** Clean, rectangular fields with sharp borders and simple styling.
- **hero:** A bold, split-hero layout featuring a large typographic logo treatment on one side and photographic or video content on the other.

## Do's and Don'ts

**Don't:**
- don't use soft shadows — screenshot shows sharp borders or single deep box shadows instead
- don't use muted pastel backgrounds — screenshot shows stark white or pure black backgrounds
- don't use rounded corners broadly — screenshot shows mostly sharp, 0px or 2px corners
- don't use decorative serif fonts — screenshot shows exclusively geometric and grotesque sans-serifs
- don't use gradients — screenshot shows flat, solid blocks of color
- don't hide uppercase transformations — screenshot shows frequent use of uppercase for navigation and CTAs

---

## System Prompt (paste into AI agent)

```
Design a stark, high-contrast editorial interface for a contemporary cultural institution. Use a pure white (#ffffff) background with absolute black (#000000) typography for maximum impact. Employ a bright, high-chroma accent color, specifically lime green (#d7ff2d), strictly for primary calls to action like ticket booking. Typography must rely on geometric and grotesque sans-serif categories, utilizing bold uppercase transformations for navigation and headings to establish a strong hierarchy. Layout should be highly structured, clean, and spacious, utilizing sharp 1px borders and generous white space rather than soft shadows or rounded corners. Maintain an authoritative, direct tone. CRITICAL DONTs: avoid soft drop shadows (use sharp lines), avoid rounded corners (keep edges square), avoid decorative serifs (stick to sans), and avoid pastel backgrounds (keep it strictly monochrome).
```