---
name: The Broad
description: "This site is a perfect example of institutional gallery design, balancing bold branding with a clean, unobtrusive layout that prioritizes the visual art."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#333F48"
  tertiary: "#D6001C"
  neutral: "#687697"
  bg-quiet: "#F3F3F3"
  line: "rgba(51, 63, 72, 1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "1.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.43
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 5px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 15px
  lg: 16px
  xl: 23px
  2xl: 24px
  3xl: 48px

---

## Overview

A high-contrast, exhibition-focused museum site using bold red accents and clean sans-serif typography to showcase art.

*A clean, institutional gallery space with bold graphic signage and generous white walls.*

## Colors

High-contrast exhibition design using a neutral white/grey canvas with a dominant, high-chroma red for primary branding and actions.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#333F48`)** — uses `ink` token
- **Accent (`#D6001C`)** — uses `accent` token
- **Muted (`#687697`)** — uses `muted` token
- **Borders (`rgba(51, 63, 72, 1.0)`)** — uses `line` token

## Typography

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

- Text transform uppercase is heavily used for navigation, labels, and headings.
- Typography is kept strictly within the sans-serif category for a clean, institutional look.
- Line heights are kept tight for headings and standard for body text to ensure readability.

## Layout

A split hero layout with a large image and solid color text block, transitioning to a multi-column grid for content.

*Rhythm:* A consistent 4px base grid is applied, with standard padding used for navigation and interactive elements.

## Elevation & Depth

- rgba(0, 0, 0, 0.06) 0px 13px 20px 0px
- rgba(0, 0, 0, 0.26) 0px 3px 16px 0px
- Borders: 1px solid #333F48 for primary borders, with occasional 2px accents.

## Shapes

- `sm`: 4px
- `md`: 5px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Solid primary buttons with uppercase text and tight padding, alongside outlined secondary buttons.
- **card:** Image-heavy cards with simple text captions and aligned status indicators (e.g., 'On View').
- **hero:** A large split-panel hero featuring a full-width photography block and a high-contrast solid color panel with messaging.

## Do's and Don'ts

**Don't:**
- Don't use decorative serif fonts — the screenshot shows a strict sans-serif institutional style.
- Don't use muted or pastel accent colors — the screenshot shows a vibrant, high-chroma red (#D6001C) as the sole dominant accent.
- Don't use rounded corners on major components — the screenshot shows sharp, square edges for panels and large buttons.
- Don't obscure artwork with heavy overlays — the screenshot shows clean, unobstructed photography.
- Don't use complex multi-column grids for primary navigation — the screenshot shows a clear, single-line top navigation bar.
- Don't rely on subtle color shifts for interaction — the screenshot shows high-contrast buttons and clear, distinct sections.

---

## System Prompt (paste into AI agent)

```
This is a museum and gallery website for 'The Broad'. The design DNA is institutional, clean, and high-contrast, designed to let contemporary artwork stand out. The primary palette is a clean white (#FFFFFF) background with a neutral dark grey (#333F48) for ink and a singular, dominant high-chroma red (#D6001C) for accents and calls to action. The typography relies on a clean grotesque-sans category, using uppercase text heavily for headings and navigation to create a bold, graphic feel. Critical donts include avoiding decorative serifs, avoiding muted pastel accents, and ensuring artwork is never obscured by heavy UI elements or complex gradients.
```