---
version: alpha
name: "Serpentine Galleries"
description: "Token-first design system reference for Serpentine Galleries — London's avant-garde art institution, rendered in radical monochrome with asymmetric card shapes and organic custom typography."

colors:
  background: "#ffffff"
  surface: "#000000"
  surface-muted: "#f5f5f5"
  ink: "#141414"
  ink-muted: "#666666"
  on-background: "#141414"
  on-surface: "#ffffff"
  primary: "#000000"
  on-primary: "#ffffff"
  primary-container: "#f0f0f0"
  text-hover: "#1032cf"   # was rgb(16, 50, 207) — link hover state, Google format requires hex
  focus-ring: "#000000"
  border: "#d6d6d6"
  border-dark: "#141414"
  shadow-soft: "#000000"  # was rgba(0, 0, 0, 0.3) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Platanus, 'Times New Roman', Georgia, serif"
    fontSize: 127px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1px
  display:
    fontFamily: "Platanus, 'Times New Roman', Georgia, serif"
    fontSize: 106px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Platanus, 'Times New Roman', Georgia, serif"
    fontSize: 85px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Platanus, 'Times New Roman', Georgia, serif"
    fontSize: 51px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  body-large:
    fontFamily: "'Tstar Pro', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.06
    letterSpacing: 0px
  body:
    fontFamily: "'Noe Text', 'Georgia', 'Times New Roman', serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: 0px
  nav-link:
    fontFamily: "'Tstar Pro', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: 0px
  button-ui:
    fontFamily: "'Noe Text', 'Georgia', 'Times New Roman', serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.3px
  label:
    fontFamily: "'Tstar Pro', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  caption:
    fontFamily: "'Noe Text', 'Georgia', 'Times New Roman', serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.25px

spacing:
  xs: 8px
  sm: 15px
  md: 23px
  lg: 45px
  xl: 56px
  2xl: 68px
  3xl: 90px

rounded:
  none: 0px
  sm: 8px
  md: 15px
  lg: 60px
  corner-cut: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: "2px solid {colors.primary}"
    padding: 15px 24px
  button-primary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: "2px solid {colors.primary}"
    padding: 15px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: "2px solid {colors.primary}"
    padding: 15px 24px
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: "2px solid {colors.primary}"
    padding: 15px 24px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "0px 0px 0px {rounded.corner-cut}"
    border: "1px solid {colors.border}"
    padding: 23px
  card-featured:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "0px 0px 0px {rounded.lg}"
    border: "none"
    padding: 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    border: "1px solid {colors.border}"
    padding: 15px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 15px 16px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.lg}"
    padding: 6px 15px
  badge-inverted:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.lg}"
    padding: 6px 15px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    border: "1px solid {colors.border-dark}"
    padding: 23px 45px
---

# Serpentine Galleries Design System

## Overview

Serpentine's digital identity is the closest thing to walking into a white-walled London gallery while still sitting at a screen. The canvas is pure `{colors.background}` — not warm off-white, not institutional grey, but the hard clarity of gessoed exhibition walls. Against it, Platanus does the radical work: a custom organic typeface with the irregular breathing of hand-lettered stone carving, deployed at display sizes that would feel operatic in any other context (85–127px) but here read simply as serious. The site's chromatic system is as reduced as Malevich — `{colors.primary}` black and `{colors.background}` white, with `{colors.ink-muted}` grey stepping in as the only midtone.

What makes Serpentine typographically unusual is the three-family architecture operating at three entirely different registers. Platanus handles all editorial display — its irregular organic terminals and open counters give monumental headline type the quality of text cut into a building's facade. Tstar Pro, a bold condensed grotesque, drives navigation and sub-headings with the punchy efficiency of a museum gallery label font. Noe Text, a refined serif, does the long-form work of body paragraphs and button copy — providing warmth and readability where Platanus and Tstar would be too muscular. The split is not accidental: it maps precisely to content layers (art / institution / information).

The system's signature spatial gesture is the **asymmetric corner cut**: cards, image frames, and featured content panels use `border-radius: 0 0 0 20px` — a single bottom-left rounded corner in an otherwise rectangular element. At larger sizes this becomes `0 0 0 60px`, creating a soft parenthetical shape that feels archly architectural. Paired with a pervasive `15px` general radius and the warm `{colors.border}` hairline grid, the visual language lands somewhere between Modernist rigour and experimental softness — the exact tension Serpentine programs for.

**Key Characteristics:**
- Pure `{colors.background}` white canvas — hard gallery clarity, no off-white concession
- Platanus custom typeface: organic display at 85–127px with compressed `1.0` line-height
- Tstar Pro bold grotesque for navigation and category labels — punchy institutional legibility
- Noe Text serif for body and captions — warmth and refinement at 12–16px
- Asymmetric corner cuts (`border-radius: 0 0 0 20px` and `0 0 0 60px`) as the brand's spatial signature
- `{colors.primary}` / `{colors.background}` monochrome palette — no chromatic accent in editorial surfaces
- `{colors.text-hover}` (`#1032cf`) as a surprise link hover — latent color that surfaces on interaction
- `{colors.border}` (`#d6d6d6`) hairline borders as the primary structural separator
- `15px` dominant border-radius scale (1,103 occurrences) with `60px` pill for badges and chips
- Foundation grid framework underlying a flexible exhibition-style layout
- Sparse motion — 0.3s / 0.5s ease transitions; opacity fade on link interaction

## Colors

### Primary
- **Gallery White** (`{colors.background}`): The exhibition canvas — primary page background, card backgrounds, button fill on ghost variants. Uncompromising white.
- **Ink Black** (`{colors.ink}`): Near-black `#141414` for primary text. Slightly off pure black for a print-like reading temperature.
- **True Black** (`{colors.primary}`): Pure `#000000` for buttons, inverted surfaces, manifest theme. Where the institution wants maximum contrast.

### Brand Accent
- **Link Blue** (`{colors.text-hover}`): The system's only chromatic accent — appears exclusively on link hover states. Latent color that surfaces on interaction, never in resting states.

### Neutrals & Text
- **Ink Black** (`{colors.ink}`): `#141414` — body text, headings, navigation, all primary editorial copy
- **Muted Grey** (`{colors.ink-muted}`): `#666666` — secondary text, metadata, captions, attribution lines, secondary navigation

### Surfaces & Borders
- **Void Black** (`{colors.surface}`): `#000000` — inverted card backgrounds, dark section surfaces, manifest background
- **Pale Surface** (`{colors.surface-muted}`): `#f5f5f5` — faintly recessed panels, alternate row backgrounds
- **Hairline Border** (`{colors.border}`): `#d6d6d6` — standard 1px separator for cards, list items, content grid
- **Dark Rule** (`{colors.border-dark}`): `#141414` — bottom-only underlines for active states, tabs, selected items

### Shadow
- **Soft Veil** (`{colors.shadow-soft}`): `#000000` at 0.3 opacity in production — used for the single soft modal shadow. Declared as opaque hex; apply at 30% opacity in shadow syntax.

## Typography

### Font Family
- **Display / Organic**: `Platanus` — Serpentine's bespoke serif with irregular organic terminals. Used exclusively at large display scales (51–127px). No Google Font fallback exists; `'Times New Roman', Georgia, serif` approximate the scale weight.
- **Sans / Institutional**: `Tstar Pro Bold` — a condensed bold grotesque used for navigation links, category labels, and sub-headings at 17–28px. Substitute: `'Helvetica Neue', Arial, sans-serif`.
- **Body / Editorial**: `Noe Text` — a refined oldstyle serif at 12–16px for body paragraphs, captions, and button copy. Substitute: `Georgia, 'Times New Roman', serif`.
- All three are self-hosted (`.woff2`); no Google Fonts or Adobe Fonts dependency.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Top-of-page feature headlines, pavilion campaign heroes — Platanus at 127px |
| `display` | Section-level feature headlines — Platanus at 106px |
| `heading-section` | Major section anchors, exhibition titles — Platanus at 85px |
| `heading-sub` | Sub-section heads, event titles — Platanus at 51px |
| `body-large` | Lead text, featured descriptions — Tstar Pro Bold at 28px |
| `nav-link` | Primary navigation, category labels — Tstar Pro Bold at 22px uppercase |
| `label` | Sub-navigation, card labels — Tstar Pro Bold at 17px |
| `body` | Long-form reading, card descriptions — Noe Text at 16px |
| `button-ui` | Button copy, form labels, inline actions — Noe Text Semibold at 15px |
| `caption` | Image captions, metadata, dates — Noe Text Bold at 12px |

### Principles
- **Three typefaces, three functional layers**: Platanus (architecture/art), Tstar Pro (institution/wayfinding), Noe Text (information/reading) — never swap their assigned roles
- **Display weight 400 for Platanus**: The organicity of the face makes weight escalation unnecessary — Platanus reads as monumental at 400 because the letterforms do the work
- **Compressed line-height at display scale**: All Platanus headlines run at `1.0` line-height — the tight stacking emphasizes the mass and weight of editorial type at gallery scale
- **Positive letter-spacing on captions**: `0.25–0.3px` on Noe Text caption/button sizes — a subtle tracking that keeps small serif text from closing in
- **Uppercase for Tstar Pro navigation**: The bold condensed grotesque carries uppercase comfortably — it's a labeling system, not a reading system

## Layout

### Spacing System
The spacing scale is declared in the `spacing:` token block above. Base unit: **7.5px** (per dembrandt extraction — the most common spacing value at 5,523 occurrences), doubled to **15px** for the working module.

Serpentine's spacing feels generous at content density but slightly compressed at the extremes — there's no `120px+` hero breathing room between sections. The institution's programming density informs the spatial density: exhibitions, events, and publications are packed into the grid without long pauses.

### Grid & Container
- Max content width: ~1510px (last breakpoint before margin balancing)
- Content grid: primarily 2–3 column on desktop, collapsing progressively
- Feature images: regularly break container for full-bleed exhibition photography
- Exhibition and event grids: uniform card tiles with `0 0 0 20px` asymmetric radius per card
- Article/editorial pages: centered single-column at ~660–760px for body reading

### Whitespace Philosophy
- **Functional, not generous**: Serpentine's white space is the gallery kind — the wall between artworks, not the spa-like breathing of luxury-product brands. It frames, it doesn't cushion.
- **Content density is intentional**: The homepage stacks exhibitions, events, pavilion news, and shop content in rapid succession. The hairline `{colors.border}` border separates sections without visual drama.
- **Asymmetric corner cuts as breathing points**: The single rounded corner on cards creates a subtle visual rest within otherwise rigid rectangular compositions.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, editorial imagery, body text regions |
| Hairline (Level 1) | `1px solid {colors.border}` | Card borders, list dividers, content grid structure |
| Underline (Level 2) | Bottom-only `1px solid {colors.border-dark}` | Active tabs, selected navigation states |
| Modal Shadow (Level 3) | `rgba(0,0,0,0.3) 0px 32px 68px 0px` | Single modal/overlay lift — the only real shadow in the system |

**Shadow Philosophy**: Serpentine's depth system is borders, not light. The single modal shadow (a wide 68px diffuse) exists purely for overlay legibility — it appears once. Every other container differentiation relies on `{colors.border}` hairlines and background color inversion (`{colors.surface}` black on `{colors.background}` white). This absolute flatness is not minimalist fashion — it's the direct visual syntax of the contemporary art exhibition space, where nothing competes with the work on the walls.

## Shapes

The complete radius scale is declared in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Navigation bars, section dividers, flush image frames |
| `sm` | 8px | Small controls, cookie consent dialog |
| `md` | 15px | General card radius — the dominant rounded shape (1,103 occurrences) |
| `corner-cut` | 20px | Asymmetric single-corner treatment on exhibition cards: `border-radius: 0 0 0 20px` |
| `lg` | 60px | Large pill-adjacent radius: badges, chips, featured image bottom-left accent |
| `pill` | 9999px | Full pill for round CTAs and avatar-style elements |

The corner-cut language is Serpentine's most distinctive spatial signature. By rounding only the bottom-left corner (`border-radius: 0 0 0 20px`), the cards feel simultaneously architectural and provisional — like a pinned exhibition announcement, or a museum label with one folded corner.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — Black filled, white text, sharp-cornered (`{rounded.none}`), `2px solid {colors.primary}` border. The institutional CTA: decisive and flat, like a printed exhibition admission ticket.
- **`button-primary-hover`** — Inverted to white background, black text on hover. The black border stays; the fill evacuates. Clean reversal.
- **`button-secondary`** — White background with `2px solid {colors.primary}` border — the ghost variant for secondary actions. Matches hover state of primary.
- **`button-secondary-hover`** — Fills black on hover, mirrors primary default.

Both button variants are intentionally identical in silhouette — the system uses fill/ghost inversion rather than shape differentiation to distinguish primary from secondary.

### Cards

**Exhibition Card**
- Background: `{colors.background}`
- Border: `1px solid {colors.border}`
- Radius: `0px 0px 0px 20px` (single corner cut) — the brand shape
- Image: full-bleed above, takes the same corner-cut geometry
- Title: `{typography.heading-sub}` Platanus at 51px — monumental even in card context
- Meta: `{typography.caption}` Noe Text at 12px in `{colors.ink-muted}`

**Featured/Hero Card**
- Background: `{colors.background}`
- No border — image bleeds to container edges
- Radius: `0px 0px 0px 60px` (enlarged corner cut for hero scale)
- Full-width exhibition photography with title overlay

### Inputs

- Background: `{colors.background}`, border `1px solid {colors.border}`
- Radius: `{rounded.md}` (15px)
- Focus: border shifts to `{colors.focus-ring}` — the black border sharpens rather than glows
- Text: `{typography.body}` Noe Text at 16px in `{colors.ink}`

### Badges / Tags

**Light Badge**
- Background: `{colors.primary-container}` (`#f0f0f0`)
- Text: `{colors.ink}`
- Radius: `{rounded.lg}` (60px) — large pill for a deliberately soft badge shape
- Typography: `{typography.caption}` Noe Text Bold at 12px

**Inverted Badge**
- Background: `{colors.primary}` black
- Text: `{colors.on-primary}` white
- Same radius and padding — used for active filters, category selection

### Navigation

- Top bar: white, `{typography.nav-link}` Tstar Pro Bold at 22px, bottom border `1px solid {colors.border-dark}`
- Logo: Serpentine wordmark SVG, left-aligned
- Links: no underline by default; hover shifts color to `{colors.text-hover}` at 0.8 opacity
- The navigation is sparse — exhibition-first institutions don't need mega-menus
- Sticky behavior: top bar fixed; transparent/inverted variant appears over full-bleed hero images

## Do's and Don'ts

### Do
- Use pure `{colors.background}` white — the gallery wall is non-negotiable, no warm tinting
- Apply the asymmetric corner cut (`border-radius: 0 0 0 20px`) on exhibition cards and image containers — it is the brand's spatial signature
- Scale up Platanus aggressively — 85–127px for hero headings is correct, not excessive
- Use `{colors.border}` hairlines (`1px solid #d6d6d6`) for all structural separation; defer shadows
- Reserve `{colors.text-hover}` blue (`#1032cf`) for link hover states only — never as a resting accent color
- Pair Platanus (display) + Tstar Pro (UI) + Noe Text (body) in their assigned roles without substitution
- Apply Tstar Pro in uppercase for navigation labels — the condensed grotesque carries it without aggression
- Use `{rounded.md}` (15px) as the default card radius and `{rounded.corner-cut}` (20px) for the asymmetric single-corner variant
- Keep the palette in `{colors.primary}` / `{colors.background}` monochrome for editorial surfaces
- Treat exhibition photography as primary content — give it full-bleed treatment without overlay chrome

### Don't
- Don't add mid-range shadows to cards — the system uses `{colors.border}` hairlines, not elevation
- Don't introduce additional brand colors beyond the link-hover blue — Serpentine's palette is deliberately monochromatic
- Don't set Platanus below 51px — below that scale it loses its character; use Noe Text for body
- Don't use Tstar Pro at weight 400 or body sizes — it is a Bold display/label face only
- Don't apply symmetric border-radius to exhibition cards — the single-corner cut is load-bearing to the brand language
- Don't use `{colors.text-hover}` blue as a surface color or button fill — it lives exclusively in interaction states
- Don't tighten Platanus letter-spacing further below 0px — the face has its own tight rhythm built in
- Don't introduce gradients in editorial surfaces — Serpentine's photography does all the atmospheric work
- Don't use the modal shadow (`rgba(0,0,0,0.3) 0 32px 68px`) outside actual overlay contexts
- Don't round all four corners equally — the asymmetric cut is structural, not a stylistic option

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <420px | Single-column stack, Platanus display scales to ~51px, nav collapses |
| Mobile | 420–601px | Single-column, condensed nav bar, stacked exhibition cards |
| Mobile Large | 601–767px | 2-column card grid begins, captions remain full-width |
| Tablet | 768–992px | 2–3 column grid, full nav visible, display reduces to 85px |
| Desktop | 992–1280px | Full 3-column grid, 106px display, navigation expanded |
| Large Desktop | 1280–1510px | Maximum grid, 127px hero type, hero images full-bleed |

### Touch Targets
- Navigation links: Tstar Pro Bold 22px with 23px padding blocks — comfortable vertical tap target
- Buttons: `15px` padding vertically — 44px+ tap height achieved with line-height
- Exhibition cards: full-card tappable; no separate "read more" hit target needed
- Filter chips: `6px 15px` padding with 60px radius — pill shape provides generous touch area

### Collapsing Strategy
- **Navigation**: top bar compresses from 45px to 23px side padding; at 767px collapses to a hamburger with overlay drawer
- **Platanus headings**: step down — 127px → 85px → 51px → 32px across major breakpoints; the `1.0` line-height is preserved throughout
- **Exhibition grid**: 3–4 columns (desktop) → 2 (tablet) → 1 (mobile), maintaining the asymmetric corner cuts at all sizes
- **Images**: full-bleed at all breakpoints; hero images compress proportionally, maintaining art direction
- **Body type**: Noe Text 16px maintained across all breakpoints — never drops below readable floor

### Image Behavior
- Exhibition photography is full-bleed by default — tiles stretch edge-to-edge within their column
- The `0 0 0 20px` corner cut is applied via `overflow: hidden` + `border-radius` on the parent container, so it clips images correctly at all sizes
- No lazy-blur placeholders — white space holds until the image arrives, matching the gallery blank-wall philosophy

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (`#ffffff`)
- Text: `{colors.ink}` (`#141414`)
- Secondary text: `{colors.ink-muted}` (`#666666`)
- Brand accent: `{colors.primary}` (`#000000`)
- Link hover: `{colors.text-hover}` (`#1032cf`)
- Border: `{colors.border}` (`#d6d6d6`)
- CTA fill: `{colors.primary}` (`#000000`)
- On CTA: `{colors.on-primary}` (`#ffffff`)

### Example Component Prompts

- "Build a Serpentine exhibition card on white (`{colors.background}`). Full-bleed image at top with `border-radius: 0 0 0 20px` (only bottom-left rounded at 20px). Below the image: title in 51px Platanus weight 400 line-height 1.0 color `{colors.ink}`. Meta line in 12px Noe Text Bold `{colors.ink-muted}`. No drop shadow. `1px solid {colors.border}` on the card container."
- "Create a Serpentine hero section. Full-viewport-width exhibition photo with `border-radius: 0 0 0 60px` on the image container. Headline overlaid or below: 127px Platanus weight 400 line-height 1.0 color `{colors.ink}`. Sub-caption in 22px Tstar Pro Bold uppercase `{colors.ink}`. No gradients, no overlay scrim."
- "Design a primary button. Background `{colors.primary}` (`#000000`), text `{colors.on-primary}`, 15px Noe Text Semibold, `2px solid {colors.primary}` border, `0px` border-radius, `15px 24px` padding. On hover: background `{colors.background}`, text `{colors.ink}`, border unchanged."
- "Build a navigation bar. White background, bottom `1px solid {colors.border-dark}`. Left: SVG wordmark. Right: links in 22px Tstar Pro Bold uppercase `{colors.ink}`, spacing 45px horizontal padding. On hover: text opacity 0.8, color shifts toward `{colors.text-hover}`. No drop shadow on the nav."
- "Create a category badge. Background `{colors.primary}` (`#000000`), text `{colors.on-primary}`, 12px Noe Text Bold letter-spacing 0.25px, `60px` border-radius (full pill at small size), padding `6px 15px`."
- "Build an exhibition listing grid — 3 columns desktop, 1 column mobile. Each card: white background, `1px solid {colors.border}` border, `border-radius: 0 0 0 20px`. Image fills the card top half. Below: title in 51px Platanus weight 400; date + location in 12px Noe Text Bold `{colors.ink-muted}`. No card shadow."

### Iteration Guide

1. Start with `{colors.background}` pure white and `{colors.ink}` `#141414` text — never tint the canvas
2. Apply the asymmetric corner cut on every image container and card: `border-radius: 0 0 0 20px` for standard, `0 0 0 60px` for hero scale
3. Scale Platanus aggressively — if it feels too large, it's probably right; 85–127px is the editorial register
4. Use `{colors.border}` hairlines (`1px solid #d6d6d6`) as the structural backbone — never reach for a shadow first
5. Keep the palette strictly `{colors.primary}` / `{colors.background}` monochrome in editorial surfaces; let `{colors.text-hover}` blue surprise only on interaction
6. Assign typefaces by content layer: Platanus = art scale, Tstar Pro = institutional label, Noe Text = readable information
7. `{rounded.md}` (15px) is the default general radius; `{rounded.corner-cut}` (20px) is the brand-specific asymmetric variant
8. Exhibition photography is the hero — give it full-bleed, let nothing compete with the image

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Serpentine Galleries. Brand names and trademarks belong to their respective owners.