transform___style_reference:
  info: "> stage poster pinned to warm blush paper"

  theme: "light"

  info: "Transform uses a theatrical broadside language: a warm blush cream canvas carries the entire site while oversized geometric headlines shout in heavy Walsheim weights. The palette is intentionally limited to three loud accents — spotlight magenta, festival violet, and stage orange — deployed like a punk poster printer's ink set, each one earning its place on a flat, unshadowed surface. Depth comes from full-bleed color blocking, not elevation, so sections read like clipped broadsheets stacked on warm paper. Components are weighty and rectangular; only links and a few interactive chips receive the 50px pill radius, making them feel like stickers pressed onto the page. Typography does the emotional work: weight 700–900 at 56–80px carries theatrical volume, while tight -0.02em tracking keeps the heavy forms from sprawling."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Blush Cardstock | `#f4ede9` | `--color-blush-cardstock` | Page background, nav surface, dominant canvas — the warm paper everything sits on |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, section headings, hairline borders, icon strokes |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surface, dark-section text, button labels on chromatic fills |"
    info: "| Ash Gray | `#d9d9d9` | `--color-ash-gray` | Alternate card surface when a quieter neutral block is needed |"
    info: "| Steel Gray | `#767676` | `--color-steel-gray` | Muted input borders, secondary helper strokes |"
    info: "| Festival Violet | `#340068` | `--color-festival-violet` | Full-bleed section bands, secondary filled CTA, footer background — heavy, immersive, sets the serious stage |"
    info: "| Spotlight Magenta | `#fb00c2` | `--color-spotlight-magenta` | Primary filled CTA (DONATE), pull-quote text, heading borders, interactive emphasis — the loudest ink, reserved for moments that demand attention |"
    info: "| Curtain Orange | `#ff1e00` | `--color-curtain-orange` | Pull-quote attribution, decorative heading borders — the warm third color that gives the palette a poster-like three-ink depth |"

  tokens___typography:

    walsheim___single_family_type_system_used_for_everything_from_nav_to_display__the_broad_weight_range_400_900_carries_the_entire_tonal_system_so_color_never_has_to_shout_alone____font_walsheim:
      - "**Substitute:** Plus Jakarta Sans or Inter for the closest freely available geometric sans with comparable weight range; DM Sans as a fallback"
      - "**Weights:** 400, 700, 800, 900"
      - "**Sizes:** 16px, 18px, 22px, 24px, 40px, 56px, 80px"
      - "**Line height:** 1.00–1.45 (tight on display, generous on body)"
      - "**Letter spacing:** -0.02em across all sizes — tight tracking prevents the heavy weights from feeling slab-like and keeps body text compact"
      - "**Role:** Single-family type system used for everything from nav to display; the broad weight range (400–900) carries the entire tonal system so color never has to shout alone"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 16px | 1.45 | -0.32px | `--text-body-sm` |"
      info: "| body | 18px | 1.45 | -0.36px | `--text-body` |"
      info: "| subheading | 22px | 1.38 | -0.44px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.38 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 40px | 1.2 | -0.8px | `--text-heading` |"
      info: "| heading-lg | 56px | 1.1 | -1.12px | `--text-heading-lg` |"
      info: "| display | 80px | 1 | -1.6px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 50px |"
      info: "| cards | 0px |"
      info: "| links | 50px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 16px"
      - "**Element gap:** 16px"

  components:

    primary_magenta_cta:
      role: "Donate and other high-priority filled action buttons"

      info: "Filled rectangle in Spotlight Magenta (#fb00c2), white (#ffffff) label, no radius (0px), 8px vertical / 16px horizontal padding, Walsheim 700–800 uppercase at 16–18px. Sits on cream or dark sections; the saturated fill against neutral surroundings is the primary visual trigger."

    secondary_violet_cta:
      role: "Lower-priority filled action, event recaps, dark-band call-to-action"

      info: "Filled rectangle in Festival Violet (#340068), white label, 0px radius, 8px / 16px padding, Walsheim 700–800 uppercase. Used when the page context is already light and a second weighty action is needed without repeating the magenta voice."

    ghost_navigation_link:
      role: "Primary nav items, inline text links"

      info: "Black (#000000) text on cream, Walsheim 700 at 16–18px, no underline by default, 50px border-radius reserved for chip/tag treatment. When used as a chip/badge, wraps in a hairline border with the same 50px pill radius."

    header_bar:
      role: "Persistent top navigation across all pages"

      info: "Full-bleed Blush Cardstock (#f4ede9) bar, wordmark 'TRANSFORM' left in Walsheim 800–900 uppercase, nav items inline, DONATE button and outlined social icons right. Vertical padding 8–16px, no shadow, no border."

    hero_stage_panel:
      role: "Above-the-fold performance introduction"

      info: "Full-bleed dark stage photograph as background, left-aligned display headline at 56–80px Walsheim 800–900 in Paper White, sub-line in smaller white body weight, dark violet secondary CTA anchored bottom-left. No gradient overlay; the photograph itself provides the tonal floor."

    pull_quote_band:
      role: "Editorial testimonials, press quotes, voice-of-the-festival moments"

      info: "Full-bleed Festival Violet (#340068) section, left-aligned display-size pull quote in Spotlight Magenta (#fb00c2) at 40–56px Walsheim 700, attribution on a new line in Curtain Orange (#ff1e00) at 22–24px. Carousel pagination dots below in magenta/white."

    section_heading_block:
      role: "Introduces news, archive, programme, and content grids"

      info: "Centered display heading in Ink Black, Walsheim 800–900 at 40–56px, single line where possible. Sits on Blush Cardstock with 48–80px vertical breathing room above and below. No underline, no decoration — the weight and size carry the emphasis."

    news_card:
      role: "Editorial card in content grids (news, opportunities, archive)"

      info: "Top-anchored photograph fills the card, title and meta sit on Paper White (#ffffff) or Ash Gray (#d9d9d9) below the image, 0px radius, no border, no shadow. Grid: 4 columns on desktop, 2 on tablet, 1 on mobile, 16px column gap."

    input_field:
      role: "Newsletter, search, and form fields"

      info: "Ink Black (#000000) text on Paper White, 1px solid Steel Gray (#767676) border, 0px radius, 1px vertical / 2px horizontal padding shown in raw data but typical 12–16px effective padding, Walsheim 400 at 16px. Focus state thickens border to 2px in Ink Black."

    outlined_social_icon:
      role: "Instagram, Facebook, ticket-link icons in header and footer"

      info: "Square or circular outlined glyph in Ink Black (header) or Paper White (footer), ~20–24px box, 1.5–2px stroke, no fill. Sits inline with nav items."

    page_footer:
      role: "Site-wide closing band"

      info: "Full-bleed Festival Violet (#340068) background, Paper White text and links, generous 48–80px vertical padding, multi-column layout for addresses, social, and legal. The dark band visually seals the page against the warm cream body."

    pill_link_chip:
      role: "Tag, category, or filterable inline link"

      info: "50px border-radius pill, Ink Black 1px border on Blush Cardstock fill, Walsheim 700 at 16px, 8px vertical / 16px horizontal padding. The only place 50px radius appears — it signals 'clickable' without needing color."

  do_s_and_don_ts:

    do:
      - "Use Walsheim 700–900 for all headings and display text — never below 700, the heavy weight is the brand's voice"
      - "Use 50px border-radius only on pill chips and link tags, and 0px on everything else — the radius dichotomy is intentional"
      - "Use -0.02em tracking across every size; do not relax it on display headlines"
      - "Anchor the page on the Blush Cardstock (#f4ede9) canvas; let dark sections earn their place as full-bleed bands"
      - "Reserve Spotlight Magenta (#fb00c2) for primary CTAs and editorial emphasis; never use it as a passive background"
      - "Keep the palette to three chromatic accents plus the cream/black/white neutrals; resist adding more colors"
      - "Use full-bleed photographs as section backgrounds with no gradient overlay or border"

    don_t:
      - "Do not introduce shadows, glows, or blur effects — depth is built through flat color, not elevation"
      - "Do not use thin or light weights (under 700) for headings or display text"
      - "Do not round cards, buttons, or images — only pills get radius"
      - "Do not use Curtain Orange (#ff1e00) for buttons or CTAs — it is a decorative editorial accent only"
      - "Do not place content directly on Spotlight Magenta or Festival Violet without testing contrast; always use Paper White for text on these surfaces"
      - "Do not stack more than two chromatic accents in one component — the palette relies on restraint"
      - "Do not use gradients — no gradient tokens exist and the system is deliberately flat"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Blush Cardstock | `#f4ede9` | Default page canvas and nav surface |"
    info: "| 2 | Paper White | `#ffffff` | Card body, button labels on chromatic fills |"
    info: "| 3 | Ash Gray | `#d9d9d9` | Alternate card surface for quieter content blocks |"
    info: "| 4 | Curtain Orange | `#ff1e00` | Section-band accent (rare, used decoratively) |"
    info: "| 5 | Spotlight Magenta | `#fb00c2` | Section-band accent for editorial emphasis |"
    info: "| 6 | Festival Violet | `#340068` | Full-bleed dark bands, footer, immersive sections |"

  elevation:

    info: "No shadows detected and no elevation token is used. Depth is built entirely through flat color blocking — full-bleed sections, contrasted band backgrounds, and saturated fills against the warm cream canvas. Components sit on the surface like clipped paper, never floating."

  imagery:

    info: "Photography is the dominant visual language: large, atmospheric performance shots captured during live shows — stage lighting, audience silhouettes, dancers mid-motion. Images are treated full-bleed with no border, no rounding, and no overlay gradient; the raw photograph is the section. Subjects are stage-focused, high-contrast, often darker and warmer than the page, creating natural visual contrast against the blush canvas. There is no illustration system; the only graphic elements are outlined social icons."

  layout:

    info: "Full-bleed sections stacked vertically with no container constraint at the section level — each band fills the viewport width. Within bands, content is max-width 1200px centered. The page opens with a full-viewport dark photo hero with left-aligned display headline, then alternates between Blush Cardstock and Festival Violet full-bleed bands. Editorial rhythm: hero → cream grid → violet quote band → cream news grid → violet footer. Card grids use 4 columns at desktop collapsing to 2 then 1. Vertical rhythm is generous: 48–80px between sections, 16px between elements within a card. Navigation is a single top bar with a wordmark, inline links, and a right-aligned magenta CTA plus outlined social icons."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #000000"
    - "background: #f4ede9"
    - "border: #000000"
    - "accent: #fb00c2"
    - "primary action: #fb00c2 (filled action)"
    - "dark band: #340068"
    - "editorial accent: #ff1e00"

    info: "Example Component Prompts:"
    - "Create a primary donate button: filled Spotlight Magenta (#fb00c2) background, Paper White (#ffffff) label, Walsheim 800 uppercase at 18px, 8px vertical padding, 16px horizontal padding, 0px border-radius."
    - "Create a pull-quote band: full-bleed Festival Violet (#340068) background, left-aligned display quote in Spotlight Magenta (#fb00c2) at 56px Walsheim 700 with -1.12px tracking, attribution below in Curtain Orange (#ff1e00) at 24px Walsheim 700, 80px vertical padding."
    - "Create a news card: top-anchored full-bleed photograph, 0px border-radius, Paper White (#ffffff) body below, title in Ink Black (#000000) at 22px Walsheim 700 with -0.44px tracking, 16px internal padding."
    - "Create a header bar: Blush Cardstock (#f4ede9) background, wordmark 'TRANSFORM' in Walsheim 900 at 24px uppercase in Ink Black, nav links inline in Walsheim 700 at 18px, magenta DONATE button right-aligned, outlined social icons after it."
    - "Create a section heading: centered Ink Black (#000000) text in Walsheim 900 at 56px with -1.12px tracking, 80px vertical breathing room above and below, single line, no decoration."

  color_pairing_rules:

    info: "The three chromatic accents are designed to work as a three-ink poster set, not as independent UI states. Use them in this hierarchy: Festival Violet for full-bleed immersive bands (footer, quote, feature sections), Spotlight Magenta for the single loudest moment per page (one CTA, one pull-quote, one emphasis), Curtain Orange as a decorative third — almost always a single word or attribution, never a full component. Never combine all three in the same component; two maximum, and only when one is acting as a foreground accent against the other as background."

  similar_brands:

    - "**Barbican Centre** — Performing arts venue using oversized geometric sans-serif headlines, flat color blocking, and dark photographic hero panels with no gradient overlays"
    - "**ICA London** — Contemporary arts institution combining a warm cream canvas with bold magenta-pink accents and heavy display type"
    - "**Bold Italic** — Editorial publication with a blush cream background, saturated three-color accent palette, and flat unshadowed components"
    - "**Haus der Kunst** — Cultural venue using heavy display typography on warm neutral surfaces with full-bleed photographic sections"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-blush-cardstock: #f4ede9;
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-ash-gray: #d9d9d9;
          --color-steel-gray: #767676;
          --color-festival-violet: #340068;
          --color-spotlight-magenta: #fb00c2;
          --color-curtain-orange: #ff1e00;
        
          /* Typography — Font Families */
          --font-walsheim: 'Walsheim', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 16px;
          --leading-body-sm: 1.45;
          --tracking-body-sm: -0.32px;
          --text-body: 18px;
          --leading-body: 1.45;
          --tracking-body: -0.36px;
          --text-subheading: 22px;
          --leading-subheading: 1.38;
          --tracking-subheading: -0.44px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.38;
          --tracking-heading-sm: -0.48px;
          --text-heading: 40px;
          --leading-heading: 1.2;
          --tracking-heading: -0.8px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.12px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -1.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 16px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-full: 50px;
        
          /* Named Radii */
          --radius-tags: 50px;
          --radius-cards: 0px;
          --radius-links: 50px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-blush-cardstock: #f4ede9;
          --surface-paper-white: #ffffff;
          --surface-ash-gray: #d9d9d9;
          --surface-curtain-orange: #ff1e00;
          --surface-spotlight-magenta: #fb00c2;
          --surface-festival-violet: #340068;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-blush-cardstock: #f4ede9;
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-ash-gray: #d9d9d9;
          --color-steel-gray: #767676;
          --color-festival-violet: #340068;
          --color-spotlight-magenta: #fb00c2;
          --color-curtain-orange: #ff1e00;
        
          /* Typography */
          --font-walsheim: 'Walsheim', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 16px;
          --leading-body-sm: 1.45;
          --tracking-body-sm: -0.32px;
          --text-body: 18px;
          --leading-body: 1.45;
          --tracking-body: -0.36px;
          --text-subheading: 22px;
          --leading-subheading: 1.38;
          --tracking-subheading: -0.44px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.38;
          --tracking-heading-sm: -0.48px;
          --text-heading: 40px;
          --leading-heading: 1.2;
          --tracking-heading: -0.8px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.12px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -1.6px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-full: 50px;
        }