---
name: New Museum
description: "A perfect example of institutional avant-garde design that uses extreme typography and high-chroma color to establish an immediate, disruptive brand presence."
version: alpha

colors:
  background: "#BEFF00"
  primary: "#0A4B50"
  secondary: "#0A4B50"
  tertiary: "#BEFF00"
  neutral: "#E5E7EB"
  bg-soft: "#BEFF00"
  bg-quiet: "#0A4B50"
  line: "rgba(10, 75, 80, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.44px"
  h1:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.44px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 6px
  lg: 9999px
  pill: 9999px

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

---

## Overview

A bold contemporary art museum site using high-voltage color blocks and oversized display typography.

*An aggressive lime-green canvas for institutional experimentation.*

## Colors

High-voltage acid green paired with deep teal for maximum visual tension.

- **Background (`#BEFF00`)** — uses `bg` token
- **Primary text (`#0A4B50`)** — uses `ink` token
- **Secondary text (`#0A4B50`)** — uses `ink-soft` token
- **Accent (`#BEFF00`)** — uses `accent` token
- **Muted (`#E5E7EB`)** — uses `muted` token
- **Borders (`rgba(10, 75, 80, 1)`)** — uses `line` token

## Typography

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

- Use display font (Neographik) exclusively for massive section headers and the logo.
- Use body font (Akkurat) for navigation, event details, and standard copy.
- Maintain tight negative letter spacing on display text for a dense, architectural feel.

## Layout

Full-width color blocks containing 4-column grid layouts for events and video cards.

*Rhythm:* Generous whitespace around massive typography and image blocks to allow the bold colors to breathe.

## Elevation & Depth

- Borders: Minimal use of borders; color blocks are defined by solid background transitions.

## Shapes

- `sm`: 4px
- `md`: 6px
- `lg`: 9999px
- `pill`: 9999px

## Components

- **button:** High-contrast dark teal pill-shaped buttons for primary actions like TICKETS.
- **card:** Simple image-and-text grid cards for events and videos without visible containers.
- **chip:** Small uppercase text labels for event categories (e.g., Community, Workshop).
- **input:** Minimalist search functionality integrated into the top navigation bar.
- **hero:** Full-bleed background video or image with massive, screen-filling typography overlaid.

## Do's and Don'ts

**Don't:**
- Don't use muted or pastel colors — screenshot shows vibrant acid green (#BEFF00) as the primary brand color.
- Don't use standard serif typography — screenshot shows bold, all-caps grotesque display fonts.
- Don't use subtle background textures or gradients — screenshot shows solid, flat color blocks.
- Don't use heavy drop shadows or 3D effects — screenshot shows flat, graphic composition.
- Don't use standard left-aligned, small-margin text — screenshot shows massive text overlays that break standard grid boundaries.
- Don't use complex container borders — screenshot shows clean, borderless separation between color sections.

---

## System Prompt (paste into AI agent)

```
Design a bold, contemporary cultural institution website. Use a high-voltage acid green (#BEFF00) as the primary background and a deep teal (#0A4B50) for primary text and dark sections. Typography must be heavy, all-caps grotesque-sans for massive display headings with tight letter spacing, paired with a clean geometric sans-serif for body text. Layout should be full-bleed and grid-based, featuring oversized text overlays on top of high-quality photography or video. CRITICAL: Never use subtle colors or traditional serifs; avoid rounded containers and drop shadows; ensure text is large, bold, and unapologetic.
```