counterprint___style_reference:
  info: "> white gallery wall, books as art"

  theme: "light"

  info: "Counterprint is a quiet white canvas designed to let bold printed matter do the talking — a publisher's storefront that behaves like a gallery wall rather than a shop. The interface is deliberately monochrome: a pure white stage, hairline gray dividers, and near-black type, with the entire color vocabulary supplied by the photographed books themselves. Every screen follows a strict rhythm: section title on the left, minimal 'View all' pill on the right, then a uniform six-column product grid where the only variation is the cover art. The product images are square, unbordered, and presented without chrome — no card containers, no shadows, no hover decoration — so the editorial photography carries 100% of the visual weight."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Pure Canvas | `#ffffff` | `--color-pure-canvas` | Page and surface background — the entire interface lives on this single white plane |"
    info: "| Ink Black | `#1c1c1c` | `--color-ink-black` | Primary text, product titles, icon strokes, outlined button borders — the only chromatic dark in the system |"
    info: "| Graphite | `#232323` | `--color-graphite` | Secondary text, meta labels, footer copy — a near-identical companion to Ink Black for subtle hierarchy steps |"
    info: "| Slate Mute | `#5f6368` | `--color-slate-mute` | Muted helper text, tertiary metadata, disabled states |"
    info: "| Hairline Gray | `#e5e7eb` | `--color-hairline-gray` | Hairline dividers, card separators, input borders, table rules — the sole structural line color, used at 1px |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Maximum-contrast text and icon fills where the deepest dark is needed |"

  tokens___typography:

    helvetica___sole_typeface_for_every_ui_text_element___navigation__section_headings__product_titles__prices__buttons__and_body_copy__weight_700_for_section_headers_and_product_names_creates_the_only_typographic_distinction_in_the_system__weight_400_handles_everything_else__the_15px_body___20px_header_pairing_is_unusually_small__reinforcing_a_catalog_card_density_rather_than_a_marketing_page_density_____font_helvetica:
      - "**Substitute:** Inter, Neue Haas Grotesk, Arial"
      - "**Weights:** 400, 700"
      - "**Sizes:** 15px, 20px"
      - "**Line height:** 1.00–1.20"
      - "**Letter spacing:** -0.025em (applied at body size, ~-0.375px)"
      - "**Role:** Sole typeface for every UI text element — navigation, section headings, product titles, prices, buttons, and body copy. Weight 700 for section headers and product names creates the only typographic distinction in the system; weight 400 handles everything else. The 15px body / 20px header pairing is unusually small, reinforcing a catalog-card density rather than a marketing-page density."

    gtstandard_m___gtstandard_m___detected_in_extracted_data_but_not_described_by_ai____font_gtstandard_m:
      - "**Weights:** 400"
      - "**Sizes:** 15px"
      - "**Line height:** 1.5"
      - "**Role:** GTStandard-M — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | -0.3px | `--text-caption` |"
      info: "| heading | 20px | 1.2 | — | `--text-heading` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 23 | 23px | `--spacing-23` |"
      info: "| 28 | 28px | `--spacing-28` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| inputs | 15px |"
      info: "| buttons | 9999px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 48px"
      - "**Card padding:** 0px"
      - "**Element gap:** 8px"

  components:

    ghost_pill_button:
      role: "Secondary action — 'View all', 'Load more', navigation actions"

      info: "Pill-shaped (border-radius 9999px), 1px solid #1c1c1c border, white fill, #1c1c1c text. Helvetica 13–15px weight 400. Padding 8px 16px. No hover fill change visible — the button stays outlined. This is the only interactive component in the system."

    product_card:
      role: "Catalog item — one book per card in the product grid"

      info: "Zero-padding card with no border, no background, and no shadow. Square product image at the top (1:1 aspect, flush edges, no border-radius). Below the image: product title in Helvetica 15px weight 700, #1c1c1c, then price in Helvetica 15px weight 400, #1c1c1c on a new line. Gap between image and text: ~8px. Gap between cards: 24–32px horizontal, 32–40px vertical. No hover state, no quick-add button."

    section_header_row:
      role: "Introduces each catalog group ('All Books', 'Counterprint Books')"

      info: "Flex row spanning full content width. Left-aligned section title in Helvetica 20px weight 700, #1c1c1c. Right-aligned Ghost Pill Button ('View all'). Vertical margin below: 24–28px before the product grid begins."

    hero_image_split:
      role: "Full-width editorial banner on the homepage"

      info: "Two equal-width panels side by side, no gap between them, no rounded corners, no borders. Each panel is a tall editorial photograph (roughly 2:3 or 3:4 portrait). Optional small caption in Helvetica 12–13px below each image. This is the only area where imagery occupies full-bleed."

    top_navigation_bar:
      role: "Site-wide header"

      white_background__no_border__left: "brand logo (dot pattern mark). Right: three icon-only controls — hamburger menu, search, cart bag — rendered in #1c1c1c at ~20px. Icons are 1.5px stroke, outlined style. No visible nav text links in the collapsed state."

    search_input:
      role: "Site search trigger overlay (expected in expanded nav)"

      info: "Full-width text input, 1px solid #e5e7eb border, border-radius 15px. White fill. Helvetica 15px placeholder in #5f6368. No focus ring color change detected beyond default browser behavior."

    product_price_label:
      role: "Price display under each product card"

      info: "Helvetica 15px weight 400, #1c1c1c. Format: '£XX.XX GBP'. No sale/strike-through variant, no currency switcher, no tax note."

    image_caption:
      role: "Small label under hero images"

      info: "Helvetica 12–13px weight 400, #1c1c1c. Sits tight against the bottom edge of the hero image with ~4px gap. No italic, no decorative treatment."

  do_s_and_don_ts:

    do:
      - "Keep every UI surface pure white (#ffffff) — never introduce a card background, gray panel, or tinted surface"
      - "Set all borders to 1px solid #e5e7eb — this is the only line color and the sole structural separator"
      - "Use Helvetica weight 700 at 20px for section headers and 15px for product titles; weight 400 for everything else"
      - "Render every button as a 9999px-radius ghost pill with a 1px #1c1c1c border and #1c1c1c text on white"
      - "Maintain a 6-column product grid with 1:1 square product images and zero border-radius on the images"
      - "Let product photography supply all color and visual energy — do not add decorative illustrations, gradients, or background art to the UI"
      - "Use 4px and 8px as the only spacing values for internal gaps; reserve 24–48px for section separation"

    don_t:
      - "Do not introduce a brand accent color, CTA fill color, or any chromatic UI element — the palette is intentionally monochrome"
      - "Do not add shadows, blur effects, or elevation to cards, buttons, or images"
      - "Do not use border-radius on product images or product cards — sharp 0px edges only"
      - "Do not combine Helvetica with a second typeface for body or heading copy — Helvetica is the sole UI font"
      - "Do not add hover color changes, scale transforms, or animation to product cards — they stay static"
      - "Do not use a wider type size than 20px for any section header — the system is calibrated for compact catalog density, not marketing-page heroics"
      - "Do not wrap product images in containers with padding or background — the image must sit directly on the white canvas"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | The single global background — no nested surface layers, no card containers, no elevated panels |"

  elevation:

    info: "No shadows or elevation effects are used. Depth and separation are achieved exclusively through whitespace and hairline 1px #e5e7eb dividers. The product images sit directly on the white canvas with zero offset, reinforcing the gallery-wall metaphor."

  imagery:

    info: "Imagery is the design system. Every product is a printed design book photographed on a solid-color or textured surface, shot straight-on with no lifestyle context. Covers are bold, typographically driven, and saturated — reds, yellows, blues, greens, black — functioning as the sole color source in an otherwise achromatic UI. Hero images are editorial still-lifes (a hand holding a book, stacked books on a red surface) shot at large format and presented full-bleed with no border or rounded corners. There are no illustrations, icons (beyond tiny UI nav icons), abstract graphics, or 3D renders — the photography does all visual work. Image treatment: sharp, unedited edges, no duotone or color grading, no overlay text on the imagery itself."

  layout:

    info: "Full-bleed layout with a max content width of ~1440px centered on the white canvas. The homepage opens with a two-column full-bleed hero image split (equal width, no gap, no border), followed by stacked catalog sections. Each catalog section follows an identical pattern: a single-row section header (title left, 'View all' ghost pill right) sitting on a 24–28px bottom margin, then a six-column product grid with consistent gutters. The product grid repeats down the page in uniform bands — 'All Books', then 'Counterprint Books' — each visually identical in structure, with only the book covers changing. There are no alternating background bands, no dark sections, no feature rows with text-plus-image splits, and no testimonials or social-proof blocks. Navigation is a minimal top bar: brand mark left, three icon controls right (hamburger, search, cart). The overall rhythm is gallery-like — consistent vertical cadence, generous breathing room between sections, and no competing layout patterns competing for attention with the product photography."

  agent_prompt_guide:

    quick_color_reference:
    - "background: #ffffff"
    - "text: #1c1c1c"
    - "muted text: #5f6368"
    - "border: #e5e7eb"
    - "accent: none — system is fully monochrome"
    - "primary action: no distinct CTA color"

    3_example_component_prompts:

    - "**Catalog Section Header**: Full-width row on #ffffff. Left side: section title in Helvetica 20px weight 700, color #1c1c1c. Right side: Ghost Pill Button — 1px solid #1c1c1c border, border-radius 9999px, padding 8px 16px, text 'View all' in Helvetica 13px weight 400, color #1c1c1c, white background. Gap below: 24px."

    - "**Product Card**: No card container, no border, no shadow, no background. Top: 1:1 square product image with 0px border-radius, flush on white. Gap 8px. Below: product title in Helvetica 15px weight 700, #1c1c1c, single line truncated. On next line: price in Helvetica 15px weight 400, #1c1c1c, format '£XX.XX GBP'."

    - "**Hero Image Split**: Two equal-width panels side by side, no gap, no border, 0px border-radius. Each panel contains a full-bleed portrait photograph (approximately 2:3 ratio). Below each image, a caption in Helvetica 12px weight 400, #1c1c1c, with 4px gap from the image bottom."

  similar_brands:

    - "**AnOther Magazine Shop** — Same editorial-gallery approach — white canvas, product photography as the only color, minimal ghost-pill navigation"
    - "**Bookshop.org** — Six-column product grid on white, Helvetica-adjacent type, zero decorative chrome around book covers"
    - "**Mubi Store** — Culturally-curated catalog with a quiet monochrome UI that lets curated product art carry the visual identity"
    - "**Areaware** — Design-object retailer using a flat white layout where the product photography alone provides all color and texture"
    - "**Dashwood Books** — Independent design/photography book publisher with the same editorial wall-of-covers presentation"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-pure-canvas: #ffffff;
          --color-ink-black: #1c1c1c;
          --color-graphite: #232323;
          --color-slate-mute: #5f6368;
          --color-hairline-gray: #e5e7eb;
          --color-pure-black: #000000;
        
          /* Typography — Font Families */
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: -0.3px;
          --text-heading: 20px;
          --leading-heading: 1.2;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-11: 11px;
          --spacing-15: 15px;
          --spacing-19: 19px;
          --spacing-23: 23px;
          --spacing-28: 28px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 48px;
          --card-padding: 0px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-xl: 15px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-inputs: 15px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-pure-canvas: #ffffff;
          --color-ink-black: #1c1c1c;
          --color-graphite: #232323;
          --color-slate-mute: #5f6368;
          --color-hairline-gray: #e5e7eb;
          --color-pure-black: #000000;
        
          /* Typography */
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: -0.3px;
          --text-heading: 20px;
          --leading-heading: 1.2;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-11: 11px;
          --spacing-15: 15px;
          --spacing-19: 19px;
          --spacing-23: 23px;
          --spacing-28: 28px;
        
          /* Border Radius */
          --radius-xl: 15px;
          --radius-full: 9999px;
        }