---
name: Tate
description: "Worth including as a prime example of a refined, institutional web design that balances bold graphic elements with a minimalist, user-centric framework."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1A1A1A"
  secondary: "#313131"
  tertiary: "#FFDB23"
  neutral: "#767676"
  bg-soft: "#F8F8F8"
  line: "rgba(26,26,26,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 46px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "2px"
  h2:
    fontFamily: humanist-sans
    fontSize: 22px
    lineHeight: 1.27
    fontWeight: 400
    letterSpacing: "5px"
  body:
    fontFamily: humanist-sans
    fontSize: 17px
    lineHeight: 1.58
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "normal"
  nav:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.14
    fontWeight: 400
    letterSpacing: "1px"

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

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

---

## Overview

A refined cultural website for Tate galleries, featuring bold typography, vibrant hero sections, and a clean, grid-based layout.

*A minimalist gallery catalog with bold editorial photography.*

## Colors

High-contrast neutrality (black/white/gray) punctuated by a single bold yellow for focus, allowing photography to provide the primary visual richness.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1A1A1A`)** — uses `ink` token
- **Secondary text (`#313131`)** — uses `ink-soft` token
- **Accent (`#FFDB23`)** — uses `accent` token
- **Muted (`#767676`)** — uses `muted` token
- **Borders (`rgba(26,26,26,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Section titles use wide tracking (uppercase) to establish hierarchy.
- Body text remains at a comfortable 17px size for readability.
- Hero titles are large but maintain a regular font weight.

## Layout

A rigid 12-column grid system with a centered maximum-width container.

*Rhythm:* Generous vertical rhythm with consistent 16px/32px padding between content blocks.

## Elevation & Depth

- rgb(128, 128, 128) 0px 0px 5px 0px
- Borders: Minimal use of borders, primarily for subtle underlines (1px) on navigation items or interactive elements.

## Shapes

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

## Components

- **button:** Solid black or teal blocks with white text and right-pointing arrows, emphasizing clear calls to action.
- **card:** Image-forward cards with minimal or no background styling, relying on generous white space between grid items.
- **hero:** A split-layout hero featuring a vibrant, full-bleed image on one side and a solid-colored block (e.g., yellow) with high-contrast typography on the other.

## Do's and Don'ts

**Don't:**
- Don't use drop shadows for elevation — the design relies on flat color blocks and white space for hierarchy.
- Don't use multiple competing accent colors — the palette is strictly black, white, gray, and one specific yellow/teal.
- Don't use serif fonts — the typography is strictly sans-serif, emphasizing a modern, clean aesthetic.
- Don't use heavily rounded corners — buttons and cards use minimal or sharp corners.
- Don't clutter the layout with dense text blocks — maintain generous spacing and focus on imagery.
- Don't use bold font weights — even the largest display text uses a regular (400) weight.

---

## System Prompt (paste into AI agent)

```
A refined cultural website for Tate galleries, prioritizing clarity, accessibility, and a clean, grid-based editorial layout. The visual identity is built on high-contrast neutrals (black #1A1A1A, white #FFFFFF, gray #767676) punctuated by a bold yellow accent (#FFDB23). Typography is strictly sans-serif (humanist for body, geometric for display) with generous tracking for headers. Critical donts: avoid serif fonts, do not use multiple accent colors, and maintain the generous white space that allows photography to dominate the visual hierarchy.
```