---
version: alpha
name: Tate
description: Light design system extracted from www.tate.org.uk (DOM-true values, Emblematic extractor 0.2.0, 2026-11-12).
colors:
  background: "#FFFFFF"
  on-surface: "#1A1A1A"
  on-surface-variant: "#767676"
  color-4: "#0072CE"
  outline: "#DDDDDD"
  color-6: "#00000066"
  color-7: "#85DEE7"
  color-8: "#394AAB"
  color-9: "#313131"
typography:
  display-lg:
    fontFamily: Tate
    fontSize: 58px
    fontWeight: 400
    lineHeight: 1.276
    letterSpacing: 0.11em
  headline-md:
    fontFamily: Tate
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.196
    letterSpacing: 0.11em
  body-md:
    fontFamily: Tate
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.588
  body-sm:
    fontFamily: Tate
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.11em
rounded:
  full: 9999px
spacing:
  xxs: 5px
  xs: 8px
  sm: 10px
  md: 12px
  lg: 13px
  xl: 16px
  2xl: 20px
  3xl: 24px
  4xl: 32px
  5xl: 56px
  6xl: 152px
  base: 8px
  container: 1136px
components:
  button-primary:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.background}"
    rounded: 0px
    padding: 10px
    height: 48px
  button-secondary:
    backgroundColor: "{colors.color-7}"
    textColor: "{colors.on-surface}"
    rounded: 0px
    padding: 9.6px
    height: 33.2px
  input:
    backgroundColor: "{colors.background}"
    rounded: 0px
    padding: 7.5px
    height: 48px
---

# Tate

> Extracted from [https://www.tate.org.uk/](https://www.tate.org.uk/) on 2026-11-12 by Emblematic. Every value below was read from the rendered DOM (computed styles, `document.fonts`, and the fonts Chrome actually used to paint text), not estimated from pixels. When the YAML front matter and this prose disagree, the YAML wins. Copy values from this file exactly; don't transcribe them from memory. Don't copy logos, imagery, illustrations or marketing copy.

## Overview

Tate uses a light canvas (#FFFFFF) with a palette. Type is set in **Tate** (display + body), with 17px body text. Layout: 1136px container, top-fixed navigation, 14 sections. Built with jquery, google-tag-manager, fastly.

## Colors

Area-weighted from painted backgrounds, text and borders on the 1440px light capture. Roles are inferred from usage (largest background, most text, interactive fills). Every hex is an exact computed value; a role marked *unverified* is a best guess that has not passed review, so its canonical token (e.g. `primary`) is left out of the front matter.

| Token | Hex | OKLCH | Role | Share of paint | CSS variable |
|---|---|---|---|---|---|
| `background` | `#FFFFFF` | 1 0 0 | bg | 72.6% | — |
| `on-surface` | `#1A1A1A` | 0.218 0 0 | text | 5.1% | — |
| `on-surface-variant` | `#767676` | 0.566 0 0 | muted | 2.8% | — |
| `color-4` | `#0072CE` | 0.55 0.166 252.2 | accent *(unverified)* | 0.20% | — |
| `outline` | `#DDDDDD` | 0.898 0 0 | border | 0.08% | — |
| `color-6` | `#00000066` (on bg `#999999`) | 0 0 0 | other | 8.7% | — |
| `color-7` | `#85DEE7` | 0.848 0.086 204 | other | 4.2% | — |
| `color-8` | `#394AAB` | 0.453 0.156 271.3 | other | 4.1% | — |
| `color-9` | `#313131` | 0.313 0 0 | other | 2.1% | — |

**Accent not verified.** The best candidate is `#0072CE` (most-used chromatic color on controls, links and text, confidence 0.66). Treat it as a guess until reviewed.

Contrast: text on background 17.4:1, muted text 4.54:1.

The site does not change under `prefers-color-scheme: dark`.

## Typography

| Family | Role | Weights | Share of text | Source |
|---|---|---|---|---|
| **Tate** (CSS: `Tate regular`) | display, body | 400 | 100.0% | webfont |

Scale (px): 12, 14, 16, 17, 20, 22, 46, 58. Effective ratio ≈ 1.359 (close to a perfect fourth). Body 17px at line-height 1.588; display 58px with tracking 0.11em. Headings are upper case. On a 390px viewport the body is 16px and display 32px.

## Layout

Spacing follows a 8px base unit; the most used steps are 5, 8, 10, 12, 13, 16, 20, 24, 32, 56, 152px. Sections open with about 73px of space before their first line of text. Content sits in a 1136px container. Text density 0.096 (text area / page area).

Section order (desktop). Kinds below the review threshold are shown as *section*:

1. **nav** (64px, bg #FFFFFF)
2. **hero** (405px, bg #FFFFFF)
3. **section** — “Our galleries” (151px, bg #FFFFFF)
4. **section** — “Tate St Ives” (398px, bg #FFFFFF)
5. **section** — “What's on across Tate” (167px, bg #FFFFFF)
6. **section** — “Ana Mendieta” (765px, bg #FFFFFF)
7. **section** — “Tate Members” (466px, bg #85DEE7)
8. **section** — “Support” (125px, bg #FFFFFF)
9. **section** — “Support Tate Liverpool” (450px, bg #394AAB)
10. **section** — “Shop” (125px, bg #FFFFFF)
11. **section** — “Gifts” (439px, bg #FFFFFF)
12. **section** — “Explore online” (141px, bg #FFFFFF)
13. **section** — “Tate Kids” (345px, bg #FFFFFF)
14. **footer** — “Our Galleries” (619px, bg #FFFFFF)

## Shapes

Dominant corner radius 0px; radii in use: pill. Borders: hairline (1px).

## Components

- **button-primary**: backgroundColor `#1A1A1A`, textColor `#FFFFFF`, rounded `0px`, padding `10px 16px`, height `48px`, fontFamily `Tate`, fontSize `17px`, fontWeight `400` (e.g. “Join today”)
- **button-secondary**: backgroundColor `#85DEE7`, textColor `#1A1A1A`, rounded `0px`, padding `9.6px 12px`, height `33.2px`, fontFamily `Tate`, fontSize `14px`, fontWeight `400` (e.g. “Become a Member”)
- **input**: rounded `0px`, height `48px`, padding `7.5px 16px`, backgroundColor `#FFFFFF`, border `1px solid #767676`

## Do's and Don'ts

- Do set body copy in Tate at 17px / 1.588.
- Don't introduce font weights beyond 400.
- Don't add drop shadows; depth comes from tone and borders.
- Do keep corners at 0px for most controls.
- Do snap spacing to multiples of 8px.
- Don't copy this site's logos, illustrations, photography or copy; use the system, not the brand assets.

## Provenance

Spec v2, extractor 0.2.0. Render quality: **ok**. Vision pass: not run. Fields below confidence 0.7 are hedged or left out above: `color.accent_strategy`, `color.roles.accent`, `layout.columns`, `layout.hero`, `layout.section_count`, `sections[].kind`, `space.section_padding_px`. Full per-field provenance is in `spec.json`.