---
name: Guggenheim
description: "This design is worth including as a prime example of a refined, institutional museum aesthetic that uses typography and layout to let art take center stage."
version: alpha

colors:
  background: "#ffffff"
  primary: "#171717"
  secondary: "#393939"
  neutral: "#999999"
  line: "rgba(23,23,23,0.2)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.35
    fontWeight: 400
    letterSpacing: "0.16px"

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

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

---

## Overview

A refined, institutional design system for a world-class art museum.

*A curated gallery wall in a Brutalist building.*

## Colors

High-contrast monochrome for maximum art focus.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#171717`)** — uses `ink` token
- **Secondary text (`#393939`)** — uses `ink-soft` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(23,23,23,0.2)`)** — uses `line` token

## Typography

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

- Use uppercase for primary navigation and brand elements.
- Use a wide letter-spacing for large display text.
- Maintain high contrast between ink and background.

## Layout

Full-width media hero followed by a wide content grid.

*Rhythm:* 4px grid with consistent 32px/40px gutters.

## Elevation & Depth

- Borders: 1px solid #171717

## Shapes

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

## Components

- **button:** Rectangular, black text on white background with a 1px black border.
- **card:** Borderless, large-format artwork images with text below.
- **hero:** Full-bleed, high-impact photography or video with centered white typography.

## Do's and Don'ts

**Don't:**
- Don't use bright accent colors — screenshot shows a monochrome palette.
- Don't use rounded corners on buttons — screenshot shows sharp, rectangular borders.
- Don't use drop shadows on elements — screenshot shows flat, clean surfaces.
- Don't use decorative or script fonts — screenshot shows a clean, geometric grotesque-sans.
- Don't use complex gradients — screenshot shows solid black and white backgrounds.
- Don't use centered body text — screenshot shows left-aligned navigation and artwork captions.

---

## System Prompt (paste into AI agent)

```
This is a refined, institutional design system for a world-class art museum. The visual identity is built on a high-contrast monochrome palette using #171717 for ink and #ffffff for background, with #393939 as a secondary ink. Typography is a custom grotesque-sans category with wide tracking on display elements and clear, functional body text. The layout is grid-based with 32px gutters and a 1280px container, prioritizing large-scale imagery. Critical don'ts include: don't use bright accent colors; don't use rounded corners; don't use drop shadows. The voice is authoritative and cultured, focusing on clear calls to action and uppercase navigation.
```