peggy___style_reference:
  info: "> monochrome art gallery on a winter morning — the only color comes from the work on the walls"

  theme: "light"

  info: "Peggy operates as a curated white-cube gallery translated to the web: an entirely monochrome interface that treats color as something the artwork supplies, not the chrome. The page is anchored by Reckless, a contemporary serif used at whisper weight (300) for display and regular weight (400) for mid-tier headings — this single typographic decision is what separates Peggy from the sea of geometric-sans art marketplaces. Inter handles all UI chrome at 12-16px, Monument Grotesk micro-caps label the footer's category architecture. Surfaces are flat and almost invisible: #f4f4f4 canvas, #ffffff cards, hairline #f4f4f4 borders, with one dark surface (#141414) reserved for the app-download notification strip and the primary CTA. There is no brand color, no gradient, no decorative elevation — the system earns its atmosphere through generous negative space, squareness (no rounded corners except pill-masked photography), and the trust that real art and real type are enough."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Gallery White | `#ffffff` | `--color-gallery-white` | Card surfaces, input fields, button text on dark fills, nav surface over dark strips |"
    info: "| Canvas Mist | `#f4f4f4` | `--color-canvas-mist` | Page background; also functions as the universal hairline border (borderColor 572 occurrences across every context) — the system draws structure with the canvas color itself |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, logo, nav labels, body copy — the strongest type color, never used as a surface |"
    info: "| Charcoal | `#141414` | `--color-charcoal` | High-contrast neutral action fill for primary buttons on light surfaces. |"
    info: "| Fog | `#e2e8f0` | `--color-fog` | Muted accents, icon fills at rest, secondary surface tint, subtle dividers where Canvas Mist is too light |"
    info: "| Graphite | `#666666` | `--color-graphite` | Secondary/muted text — helper copy, metadata in transaction cards, footer body, link at rest |"

  tokens___typography:

    reckless___all_display_and_heading_copy__weight_300_at_the_largest_sizes_48_60px_is_the_signature_move___most_gallery_marketplace_sites_use_600_700_serif_weights__the_light_cut_reads_as_editorial_restraint_rather_than_shouting_authority__weight_400_takes_over_for_20_36px_subheadings__line_height_collapses_from_1_40_at_20px_to_1_00_at_60px__letting_large_display_text_sit_tight_like_a_magazine_cover_____font_reckless:
      - "**Substitute:** Cormorant Garamond, Lora, or PT Serif for close editorial spirit; no system serif substitutes the specific warmth of Reckless"
      - "**Weights:** 300, 400"
      - "**Sizes:** 20px, 30px, 36px, 48px, 60px"
      - "**Line height:** 1.00, 1.11, 1.20, 1.40"
      - "**Role:** All display and heading copy. Weight 300 at the largest sizes (48-60px) is the signature move — most gallery/marketplace sites use 600-700 serif weights; the light cut reads as editorial restraint rather than shouting authority. Weight 400 takes over for 20-36px subheadings. Line-height collapses from 1.40 at 20px to 1.00 at 60px, letting large display text sit tight like a magazine cover."

    inter___all_ui_chrome__nav_labels__button_text__body_paragraphs__helper_copy__card_metadata__inter_is_deliberately_invisible_here___it_serves_reckless_by_getting_out_of_the_way__weight_500_appears_in_nav_and_active_states__400_is_the_body_default__line_height_opens_up_to_1_50_at_16px_for_paragraph_readability_____font_inter:
      - "**Substitute:** system-ui, -apple-system, Segoe UI"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 14px, 16px"
      - "**Line height:** 1.33, 1.43, 1.50"
      - "**Role:** All UI chrome: nav labels, button text, body paragraphs, helper copy, card metadata. Inter is deliberately invisible here — it serves Reckless by getting out of the way. Weight 500 appears in nav and active states; 400 is the body default. Line-height opens up to 1.50 at 16px for paragraph readability."

    monument_grotesk___footer_column_labels__product___partners___company___support___get_the_app__and_the_copyright_line__acts_as_a_structural_label_typeface___small_caps_category_architecture_under_a_serif_body__strictly_12px__weight_400__used_at_11_occurrences__signaling_intentional_scarcity_____font_monument_grotesk:
      - "**Substitute:** Space Grotesk, Inter at weight 500 with letter-spacing 0.08em"
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.33"
      - "**Role:** Footer column labels ('Product', 'Partners', 'Company', 'Support', 'Get the App') and the copyright line. Acts as a structural label typeface — small caps category architecture under a serif body. Strictly 12px, weight 400, used at 11 occurrences, signaling intentional scarcity."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.33 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 30px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 36px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 48px | 1.11 | — | `--text-heading-lg` |"
      info: "| display | 60px | 1 | — | `--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: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 168 | 168px | `--spacing-168` |"

    border_radius:

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

    layout:

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

  components:

    top_navigation_bar:
      role: "Primary site chrome"

      info: "White background, 1px bottom border in #f4f4f4, 16px vertical padding, 48px horizontal padding. Left: Peggy glyph logo (black mark). Right: 'Join Peggy' filled CTA. No other links visible in the header — navigation is intentionally minimal, consistent with the gallery-catalog feel."

    download_app_notification_strip:
      role: "Dismissible app-promo bar"

      info: "Full-width #141414 background, white text. Left: close (×) icon + Peggy app-icon tile in white #f4f4f4 square. Center: 'Download the Peggy App' headline (Inter 14px weight 500, white) with sub-copy 'Install the app and sign in to get started.' (Inter 12px, #e2e8f0). Right: cloud-download icon. 48px vertical padding. This is the only dark band on the page outside the CTA button."

    primary_filled_cta_button:
      role: "Main conversion action (e.g. 'Join Peggy')"

141414_background__ffffff_text__inter_14px_weight_500__0px_border_radius_sharp_rectangle__16px_horizontal____12px_vertical_padding__single_line__no_icon__sits_as_a_deliberate_weight_anchor_against_the_white_field___the_only_black_rectangle_in_the_interface:

    ghost_text_link:
      role: "Secondary inline action (e.g. 'Learn more')"

      info: "No background, no border, Inter 14px weight 500, #000000 text. Underline appears on hover. Used inside feature panels where a filled button would be too heavy."

    split_hero_section:
      role: "Above-the-fold brand statement"

      info: "Two-column layout on #f4f4f4 canvas, no top/bottom borders. Left column (roughly 50%): display headline in Reckless 60px weight 300, line-height 1.00, #000000 — multi-line, tight tracking. Below at 24px gap: sub-copy in Inter 16px weight 400, #000000, 2 lines max. Right column: full-bleed photograph masked to 9999px border-radius (pill shape), no caption. The pill-masked image is Peggy's signature visual element."

    section_header_editorial:
      role: "Introduces an explanatory section"

      info: "Reckless 36px weight 400, #000000, line-height 1.20. Sits left-aligned with generous left margin (48px). No eyebrow text, no decorative rule — the serif heading alone anchors the section."

    royalty_transaction_card:
      role: "Data row showing a resale payout"

ffffff_surface__1px_f4f4f4_border__0px_radius__16px_padding__internal_grid__left_column___small_24px_square_artwork_thumbnail___title__royal_flush__2021__inter_14px_weight_500__000000_with__sold_on__date___year__inter_12px__666666_beneath__right_column__dollar_amount_inter_14px_weight_500__000000_with__royalties_paid__inter_12px__666666_beneath__cards_stack_vertically_with_8px_gap__no_shadows:

    trust_badge_cell:
      role: "Reassurance row item (6 across)"

      info: "Centered icon (24px, #000000, solid filled style for lock/shield/shipping, line for museum/pricing/community) above label in Inter 14px weight 500, #000000. No background, no border, no padding — sits on the #f4f4f4 canvas as a bare typographic/icon unit. 6 cells in a single row, separated by 1px #f4f4f4 vertical dividers between adjacent cells."

    gallery_cta_panel:
      role: "Conversion block for gallery partners"

      info: "Two-column on #ffffff surface (one level above canvas). Left: 'Interested in joining as a gallery?' (Reckless 30px weight 400) over body copy in Inter 16px #000000, with a 'Learn more' ghost link below. Right: full-bleed gallery interior photograph, no border, no mask. 48px outer padding."

    footer_column:
      role: "Site map link group"

      info: "Five columns on #f4f4f4 canvas, top border 1px #f4f4f4 (effective divider by negative space). Column heading: Monument Grotesk 12px weight 400, #000000, uppercase tracking. Links below: Inter 14px weight 400, #666666, 8px row gap, 0px padding. No hover color shift documented — subtle and quiet."

    footer_copyright_bar:
      role: "Legal/social strip"

      info: "Below the link columns, 1px top border #f4f4f4, 24px vertical padding. Left: '© Peggy . {year}' in Monument Grotesk 12px #666666. Right: social icon cluster (Facebook, Instagram, X) in 20px solid #000000 squares with no radius."

    hero_photograph_pill_masked:
      role: "Artwork/contextual imagery"

      info: "The only recurring shape in the system. 9999px border-radius creates a stadium/pill crop. Full-bleed within its container, no caption, no border, no shadow. The pill silhouette over the flat canvas is what makes the photography feel like a gallery object rather than a web image."

    decorative_brushstroke_curve:
      role: "Background motif on the 'What are royalties?' section"

      info: "A large organic #000000 line/curve that sweeps behind the transaction cards, partially extending past the section edges. Not an icon or illustration — a printed-mark motif. No other decorative graphics appear elsewhere on the site; this single gesture is the entire ornamental vocabulary."

  do_s_and_don_ts:

    do:
      - "Use Reckless at weight 300 for any display-size heading (48px and above); the light cut is the brand's typographic signature — using 600+ breaks the editorial tone"
      - "Set the CTA background to #141414 with #ffffff text, 0px border-radius, Inter 14px weight 500; this is the only filled button style in the system"
      - "Mask all artwork and lifestyle photography to 9999px border-radius — the pill silhouette is how Peggy signals 'this is art' without color or framing"
      - "Use #f4f4f4 for both the page background AND 1px hairline borders; the canvas color doing double duty as the divider keeps the palette at six colors total"
      - "Reserve Inter for everything below 20px; Reckless handles 20px and up; Monument Grotesk stays at 12px for footer category labels only"
      - "Maintain the monochrome constraint — do not introduce chromatic brand colors, gradients, or colored status pills; trust the artwork to provide color"
      - "Use 128px vertical breathing room between major sections; the page earns its gallery feel through space, not decoration"

    don_t:
      - "Do not add rounded corners (4px, 8px, 12px) to cards, buttons, or inputs — the system is deliberately sharp-edged, reserving curvature for pill-masked photography only"
      - "Do not use colored badges, tags, or status pills (no green for success, no red for error) — the palette is grayscale only; communicate status through text or icon shape"
      - "Do not use Reckless at weight 400 for display-size text; the serif loses its whisper quality and reads as ordinary at 60px"
      - "Do not apply drop shadows, colored glows, or colored borders to elevate cards — elevation is expressed through surface color contrast (#f4f4f4 canvas vs #ffffff card), never through shadow"
      - "Do not place CTAs anywhere except inside the top nav and as the primary action of a section; ghost links handle all secondary actions"
      - "Do not use Monument Grotesk for body copy or headings — it is a 12px label-only typeface; using it elsewhere breaks the typographic hierarchy"
      - "Do not introduce illustrations, icons with chromatic fills, or decorative gradients; the brushstroke curve is the only ornamental element and it should not be replicated"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f4f4f4` | Page background and the default border color — one neutral does both jobs to keep the palette lean |"
    info: "| 1 | Card | `#ffffff` | Elevated panels (royalty transaction cards, feature cells) sitting on the canvas |"
    info: "| 2 | Inverted Strip | `#141414` | Full-bleed dark band for the download-app notification and the only filled CTA |"

  imagery:

    info: "Photography-first, zero illustration except for one decorative black brushstroke curve on the 'What are royalties?' section. Imagery is art-object photography (framed paintings, gallery interiors) and lifestyle context (a yellow chair beside a framed piece) — always high-key, well-lit, gallery-quality. Treatment is full-bleed within a pill mask (9999px radius) for hero and feature imagery, and rectangular for the gallery CTA panel. No duotone, no color grading — images are shown as-shot. Icons are solid black silhouettes (lock, shipping box, shield-check, museum, dollar, person) in a 6-cell trust row, and a single cloud-download icon in the notification strip. Image density is low: one photograph per section maximum, relying on typography and whitespace to carry the layout."

  layout:

    info: "Full-bleed sections on a #f4f4f4 canvas, each section ~128px vertical padding, no visible section borders (the canvas color itself separates them). Hero is a 50/50 split: serif headline left, pill-masked photograph right. The 'What are royalties?' section inverts the split: illustration+transaction cards left, serif body copy right. Trust badges form a single 6-column row separated by 1px hairlines. Gallery CTA is a 2-column card on white. Footer is a 5-column link grid with a single-row copyright/social strip below. Navigation is a minimal top bar (logo left, one CTA right) with a full-bleed dark download-app strip immediately beneath it. The layout rhythm is gallery-catalog: quiet, spacious, typographically driven, with photographs acting as punctuation rather than wallpaper."

  agent_prompt_guide:

    quick_color_reference:
    - "canvas/background: #f4f4f4"
    - "card surface: #ffffff"
    - "primary text: #000000"
    - "muted text: #666666"
    - "border/hairline: #f4f4f4"
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "*Hero section*: #f4f4f4 background, no border. Left half: display headline 'Artists deserve compensation on every sale of their work' in Reckless 60px weight 300, #000000, line-height 1.00. 24px below: sub-copy in Inter 16px weight 400, #000000, max 2 lines. Right half: full-bleed photograph of a framed artwork in an interior, masked to 9999px border-radius, no caption or border. 128px vertical padding, max-width 1200px centered."

    - "*Royalty transaction card row*: four stacked cards on #f4f4f4 canvas. Each card: #ffffff background, 1px #f4f4f4 border, 0px radius, 16px padding. Internal layout: 24px square artwork thumbnail + title in Inter 14px weight 500 (#000000) + 'Sold on {date}' in Inter 12px #666666 on the left; dollar amount in Inter 14px weight 500 (#000000) + 'Royalties Paid' in Inter 12px #666666 on the right. 8px gap between cards."


    - "*Trust badge row*: single horizontal row of 6 cells on #f4f4f4 canvas, separated by 1px #f4f4f4 vertical dividers. Each cell: 24px solid #000000 icon centered (lock, shipping box, shield-check, museum frame, dollar bill, person silhouette) above label in Inter 14px weight 500 #000000. No background, no border, no padding on the cell itself."

    - "*Footer column*: on #f4f4f4 canvas with a 1px #f4f4f4 top border. Column heading in Monument Grotesk 12px weight 400 #000000. Below: list of links in Inter 14px weight 400 #666666 with 8px row gap. 5 columns total, equal width, 48px horizontal padding."

  similar_brands:

    - "**Artsy** — Same serif-display-headline + monochrome palette approach, same gallery-marketplace positioning, same trust that art photography provides the color"
    - "**1stDibs** — Same editorial serif at large sizes over a near-white canvas, same luxury restraint, same pill-or-sharp photographic crops"
    - "**The Weave Shop / Saint Paul Editions** — Same weight-300 serif display, same near-zero chromatic palette, same reliance on pill-masked photography to signal 'art object'"
    - "**SSENSE (editorial mode)** — Same generous 128px section rhythm, same all-grayscale discipline, same single-weight-anchor CTA against a white field"
    - "**Arc'teryx (product pages)** — Same sharp-edged components, no rounded buttons, no shadows, one dark-on-light CTA, photograph does all the visual work"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-gallery-white: #ffffff;
          --color-canvas-mist: #f4f4f4;
          --color-ink-black: #000000;
          --color-charcoal: #141414;
          --color-fog: #e2e8f0;
          --color-graphite: #666666;
        
          /* Typography — Font Families */
          --font-reckless: 'Reckless', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-monument-grotesk: 'Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.2;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.11;
          --text-display: 60px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-168: 168px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 128px;
          --card-padding: 16px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-images: 9999px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #f4f4f4;
          --surface-card: #ffffff;
          --surface-inverted-strip: #141414;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-gallery-white: #ffffff;
          --color-canvas-mist: #f4f4f4;
          --color-ink-black: #000000;
          --color-charcoal: #141414;
          --color-fog: #e2e8f0;
          --color-graphite: #666666;
        
          /* Typography */
          --font-reckless: 'Reckless', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-monument-grotesk: 'Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.2;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.11;
          --text-display: 60px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-168: 168px;
        
          /* Border Radius */
          --radius-full: 9999px;
        }