v_a_c___style_reference:
  info: "> Gallery wall on a drafting table. The starkness of a printed exhibition catalog where every margin, weight, and registration mark is deliberate."

  theme: "light"

  info: "V–A–C reads like a printed exhibition catalog translated to the web: pure white paper, pure black ink, and not a single chromatic pixel. The entire system is achromatic — typography does all the expressive work, and it does so at a single weight (400) across both body and display. The signature is the V—A—C registration line stretching full-bleed across the top of every screen, turning the page header into an architectural measurement mark. Layout is a strict three-column card grid where each card is a museum wall label: full-bleed image, tiny ↗ metadata link, and a tight two-line title — separated by 250px+ of vertical breathing room between rows. No shadows, no rounded corners, no gradients, no accent color. The visual language is the visual restraint."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#000000` | `--color-ink` | Primary text, all borders, card outlines, link color, arrow glyphs, V—A—C registration marks |"
    info: "| Paper | `#ffffff` | `--color-paper` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |"
    info: "| Graphite | `#999999` | `--color-graphite` | Diagonal category watermarks on cards, subtle decorative strokes — the only third tone in the system |"

  tokens___typography:

    diagramatika_text___body_copy__metadata_links__card_titles__list_items__navigation__all_ui_text__the_only_weight_used_is_400___no_bold__no_medium__no_light__this_even_single_weight_voice_is_the_defining_typographic_choice__nothing_shouts__everything_reads_at_the_same_conversational_volume_____font_diagramatika_text:
      - "**Substitute:** Inter, Söhne, or system-ui at weight 400 only"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 20px"
      - "**Line height:** 1.00–1.15"
      - "**Role:** Body copy, metadata links, card titles, list items, navigation, all UI text. The only weight used is 400 — no bold, no medium, no light. This even single-weight voice is the defining typographic choice: nothing shouts, everything reads at the same conversational volume."

    diagramatika_display___larger_headings__hero_text__featured_card_titles__despite_the_name__used_at_the_same_400_weight_as_body___the_distinction_is_size_and_tight_line_height_0_88_0_90_which_lets_lines_of_large_type_lock_together_into_a_dense_block__the_absence_of_weight_contrast_between_display_and_text_is_anti_convention__most_systems_use_600_700_for_headings_____font_diagramatika_display:
      - "**Substitute:** GT Sectra, Söhne Breit, or Suisse Int'l at weight 400 with tight tracking"
      - "**Weights:** 400"
      - "**Sizes:** 24px, 34px, 35px"
      - "**Line height:** 0.88–1.15"
      - "**Role:** Larger headings, hero text, featured card titles. Despite the name, used at the same 400 weight as body — the distinction is size and tight line-height (0.88–0.90) which lets lines of large type lock together into a dense block. The absence of weight contrast between display and text is anti-convention; most systems use 600-700 for headings."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 16px | 1.15 | — | `--text-caption` |"
      info: "| subheading | 20px | 1.1 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 0.9 | — | `--text-heading-sm` |"
      info: "| heading-lg | 35px | 0.88 | — | `--text-heading-lg` |"

  tokens___spacing___shapes:

    base_unit: "6px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 35 | 35px | `--spacing-35` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 150 | 150px | `--spacing-150` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 150px"
      - "**Card padding:** 0px"
      - "**Element gap:** 5px"

  components:

    event_card:
      role: "Primary content unit — displays an event, screening, installation, or exhibition"

      info: "Three-column grid item. Full-bleed image (square or landscape, 0px radius) occupies the top of the card slot. Below the image: a small metadata line prefixed with ↗ (e.g., '↗ Film screening, 11 Jun 2026') in 16px Diagramatika Text. Title in 24–35px Diagramatika Display, 400 weight, line-height 0.88–0.90, #000000, wrapping to 2–3 lines. No card border, no shadow, no background fill — the card exists only in the white space of the grid. A diagonal category watermark (Architecture, Observation) at ~45° rotation in #999999 may overlay the right edge of the card in 16px text."

    v_a_c_registration_bar:
      role: "Site-wide page header — functions as both navigation and brand mark"

      info: "A 1px #000000 horizontal line spanning the full viewport width, positioned at the very top of the page. Three letter labels (V, A, C) sit on this line at left edge, center, and right edge respectively — functioning as registration marks like a printer's alignment guide. An upward arrow (↑) appears beneath the 'A'. The letter spacing between V—A—C is extremely wide, with long em-dash-like gaps. Typography: 20px Diagramatika Text, 400 weight, #000000."

    arrow_metadata_link:
      role: "Event type + date label above each card title"

      info: "Plain text link prefixed with ↗ (north-east arrow glyph). Format: '↗ Film screening, 11 Jun 2026' or '↗ Installation'. 16px Diagramatika Text, 400 weight, #000000. No underline by default. Dates always in numeric '11 Jun 2026' format. Functions as both a category tag and a link to event details."

    diagonal_category_watermark:
      role: "Category indicator overlaid on select cards"

      info: "Text rotated approximately 30–45° in light gray (#999999), positioned along the right edge of a card. 16px Diagramatika Text, 400 weight. Examples seen: 'Architecture', 'Observation'. Creates a subtle classification system without color or borders. Optional — appears only on cards in specific categories."

    left_edge_language_switcher:
      role: "Locale toggle pinned to the left viewport edge"

      info: "Stacked text 'Ru / En' in 16px Diagramatika Text, 400 weight, #000000, positioned at the bottom-left edge of the viewport, oriented horizontally. Minimal — no border, no background, just text flush to the edge."

    right_edge_vertical_navigation:
      role: "Primary section navigation pinned to the right viewport edge"

      info: "Vertically stacked section links reading top-to-bottom along the right edge: 'About · Projects · Publishing' (and likely more sections). 16px Diagramatika Text, 400 weight, #000000, rotated 90° so text reads bottom-to-top. Separated by middle dots (·). This edge-pinned navigation is signature — it frames the content like the margins of a printed page."

    cookie_consent_banner:
      role: "GDPR/cookie notice"

      info: "Small text banner ('We use cookies ×') positioned at bottom-right. 16px Diagramatika Text, 400 weight, #000000, with an × close glyph. No background, no border, no box — just dismissible text floating over the content."

  do_s_and_don_ts:

    do:
      - "Use only #000000, #ffffff, and #999999. Never introduce color — the achromatic system is the identity."
      - "Set every text element to weight 400. Do not use bold, medium, light, or any other weight. The flat single-weight voice is the design."
      - "Apply 0px border-radius to all elements — images, cards, buttons, tags. The geometry is sharp and architectural."
      - "Prefix every event-type metadata link with the ↗ arrow glyph. It is the universal marker for 'clickable event detail'."
      - "Maintain the V—A—C registration bar on every page with the three letters at left/center/right on a 1px black line."
      - "Use the 250–275px vertical gap between card rows. The generous inter-row breathing room is what makes the grid feel like gallery wall spacing, not a product card list."
      - "Set display headings to line-height 0.88–0.90. The tight leading makes large type lock into a dense block, not airy paragraphs."

    don_t:
      - "Do not add brand colors, accent colors, or semantic state colors (no green for success, no red for error). The system is deliberately colorless."
      - "Do not use bold or semibold weights. Do not increase font-weight on hover or active states — use underline or color shift instead."
      - "Do not apply border-radius, box-shadow, or gradients. Surfaces are flat, edges are sharp, and there is no elevation system."
      - "Do not use centered text alignment for card titles or body copy. Text is left-aligned in a strict grid."
      - "Do not reduce the vertical gap between card rows below 150px. The spacious row separation is essential to the gallery feel."
      - "Do not use colored icons, filled icons, or multi-color illustrations. Icons should be single-stroke black outlines or typographic glyphs (↗, ×, ·)."
      - "Do not add background colors, tinted overlays, or section bands. The page is one continuous white field — section distinction comes from whitespace and grid rhythm, not color."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Page canvas — the entire site sits on pure white |"
    info: "| 1 | Image Field | `#f5f5f5` | Implicit neutral behind unloaded card images (placeholder gray before media renders) |"

  elevation:

    info: "The design uses zero elevation. No box-shadows, no border-radius, no background tints distinguish cards from the page surface. The 3-column grid structure alone provides spatial organization. This is a deliberate editorial-print translation to web: cards behave like printed page items in a catalog, not like interactive UI components."

  imagery:

    info: "Photography dominates — event documentation, film stills, exhibition installation shots, portrait photography. All images are full-bleed within their grid cell with no cropping masks, no rounded corners, and no overlay treatments. The imagery is documentary and editorial: film festival stills show raw cinematic moments (actors mid-performance, audience reactions, architectural spaces), not stylized product shots. Color in images is permitted because the chrome around them is strictly achromatic — the photographs are the only source of visual color on the page. Image aspect ratios vary between landscape and square within the same row, creating an intentional editorial irregularity. No illustrations, no abstract graphics, no decorative imagery."

  layout:

    info: "Full-bleed layout with a strict three-column card grid. The V—A—C registration bar spans the entire viewport width at the top. Content sits in a max-width ~1440px centered container with generous side margins. Each row contains exactly three cards; the vertical gap between rows is 250–275px — far more than typical card grids, creating a gallery-walk rhythm. Within each card: image fills the top of the column width, then a tight stack of metadata link + title text below. Left and right viewport edges host pinned navigation (language switcher bottom-left, section nav right edge) that frames the content. No sidebar, no full-width hero section, no alternating band layouts — the entire page is one continuous white field with the same 3-column rhythm repeating. Content is left-aligned, never centered."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000"
    - "subtle/decorative: #999999"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "**Event Card (grid item):** Place a full-bleed landscape or square image at the top of a 3-column grid cell (0px radius, no border, no shadow). Below the image, add a 16px Diagramatika Text line in #000000 reading '↗ Film screening, 11 Jun 2026' (the ↗ prefix is required). Below that, a title in 34px Diagramatika Display, weight 400, line-height 0.88, #000000, left-aligned, wrapping to 2–3 lines. No card background, no border, no padding around the cell content beyond column gap of 20px."

    - "**V—A—C Registration Header:** Draw a 1px #000000 horizontal line across the full viewport width at the very top of the page. Place three labels on this line: 'V' flush left, 'A' centered, 'C' flush right. Each in 20px Diagramatika Text, weight 400, #000000. Add a small ↑ arrow glyph beneath the centered 'A'. The spacing between V and A, and A and C, should be wide — roughly 40% of viewport width each."

    - "**Right Edge Vertical Navigation:** Pin a vertical text block to the right edge of the viewport, rotated 90° (reads bottom-to-top). Content: 'About · Projects · Publishing' separated by middle dots. 16px Diagramatika Text, weight 400, #000000. Position at roughly 40% from the top of the viewport."

    - "**Diagonal Category Watermark:** Overlay a text element on a card, rotated 30° clockwise, positioned along the right edge of the card. Content: 'Architecture' or 'Observation'. 16px Diagramatika Text, weight 400, color #999999. Low contrast — it's a subtle classification mark, not a heading."

    - "**Page Grid Composition:** Build a 3-column grid with 20px column gap and 258px row gap. No row should contain fewer than 3 items. The massive row gap is essential — it creates the gallery wall cadence. No background fill on the grid container; it sits directly on the white page canvas."

  similar_brands:

    - "**ICA (Institute of Contemporary Arts)** — Same strict editorial grid, achromatic palette, and museum-label-style card layout with image + small metadata + title stacked vertically"
    - "**SculptureCenter** — Same zero-colorfulness approach, 3-column event grid, sharp 0px radius geometry, and typographic-only hierarchy at a single weight"
    - "**Printed exhibition catalogs (e.g., MoMA PS1, Tate publications)** — The V—A—C design is a direct digital translation of a printed art-institution catalog — same registration marks, same row gap, same flat ink-on-paper feel"
    - "**KW Institute for Contemporary Art** — Same minimal achromatic aesthetic, single-weight typography, and generous whitespace that frames content like a gallery wall rather than a website"
    - "**e-flux Announcements** — Same archival, catalog-like density of event listings in a simple grid, with dates in numeric format and no decorative color or chrome"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-graphite: #999999;
        
          /* Typography — Font Families */
          --font-diagramatika-text: 'Diagramatika Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-diagramatika-display: 'Diagramatika Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.15;
          --text-subheading: 20px;
          --leading-subheading: 1.1;
          --text-heading-sm: 24px;
          --leading-heading-sm: 0.9;
          --text-heading-lg: 35px;
          --leading-heading-lg: 0.88;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-20: 20px;
          --spacing-35: 35px;
          --spacing-40: 40px;
          --spacing-150: 150px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 150px;
          --card-padding: 0px;
          --element-gap: 5px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-image-field: #f5f5f5;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-graphite: #999999;
        
          /* Typography */
          --font-diagramatika-text: 'Diagramatika Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-diagramatika-display: 'Diagramatika Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.15;
          --text-subheading: 20px;
          --leading-subheading: 1.1;
          --text-heading-sm: 24px;
          --leading-heading-sm: 0.9;
          --text-heading-lg: 35px;
          --leading-heading-lg: 0.88;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-20: 20px;
          --spacing-35: 35px;
          --spacing-40: 40px;
          --spacing-150: 150px;
        }