zora___style_reference:
  info: "> Neon gallery on graphite glass.\n\n{"

  theme: "light"

  info: "Zora operates as a stark digital gallery: a near-monochrome canvas where only neon-grade color earns screen space. The interface is ruthlessly compact — 11–17px type, 4–8px gaps, pill-shaped controls — letting the artwork carry visual weight while the chrome recedes. MonumentGrotesk's geometric neutrality, set tight at -0.015em, reads more like UI labels than prose, reinforcing a tool-like, transactional posture. Color appears as deliberate shock: one radioactive green for purchase actions, one hot pink for secondary emphasis, and otherwise pure grayscale. Elevation is suppressed; cards sit flat with hairline edges rather than shadow stacks."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Black | `#121212` | `--color-void-black` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Graphite | `#4d4d4d` | `--color-graphite` | Secondary text, body copy, icons, nav labels, metadata |"
    info: "| Fog Gray | `#878787` | `--color-fog-gray` | Muted helper text, tertiary metadata, inactive icon strokes |"
    info: "| Ash | `#cacaca` | `--color-ash` | Placeholder text, light borders, disabled strokes |"
    info: "| Hairline | `#e6e6e6` | `--color-hairline` | Input borders, dividers, subtle separators |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Canvas background, card surfaces, button text on dark fills |"
    info: "| Reactor Green | `#00df00` | `--color-reactor-green` | Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Voltage Pink | `#ff00f0` | `--color-voltage-pink` | Secondary accent for live indicators, countdown timers, hot tags, creator highlights |"
    info: "| Onyx | `#000000` | `--color-onyx` | Icon fills, logo mark, maximum-contrast text on light backgrounds |"

  tokens___typography:

    monumentgrotesk___sole_typeface_across_all_ui__nav_labels__body_text__button_text__metadata__card_titles__the_custom_geometric_grotesque_s_compressed_forms_and_uniform_410_500_weights_create_a_label_density_voice_rather_than_a_reading_voice__it_treats_copy_as_ui_chrome__not_as_prose__no_display_weight_contrast_is_used___hierarchy_is_achieved_through_size_and_color__not_weight_amplitude_____font_monumentgrotesk:
      - "**Substitute:** Inter, Geist, or Space Grotesk at 400/500/600"
      - "**Weights:** 410, 450, 500, 600"
      - "**Sizes:** 11px, 13px, 15px, 16px, 17px"
      - "**Line height:** 1.09–1.41"
      - "**Letter spacing:** -0.015em (consistent across all sizes — tight tracking reinforces the compact, utility-driven rhythm)"
      - "**OpenType features:** `\\"ss01\\" on, \\"cv11\\" on (if available in substitute)`"
      - "**Role:** Sole typeface across all UI: nav labels, body text, button text, metadata, card titles. The custom geometric grotesque's compressed forms and uniform 410–500 weights create a label-density voice rather than a reading voice; it treats copy as UI chrome, not as prose. No display-weight contrast is used — hierarchy is achieved through size and color, not weight amplitude."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.25 | — | `--text-caption` |"
      info: "| body-sm | 13px | 1.25 | — | `--text-body-sm` |"
      info: "| body | 15px | 1.25 | — | `--text-body` |"
      info: "| body-lg | 16px | 1.25 | — | `--text-body-lg` |"
      info: "| heading-sm | 17px | 1.25 | — | `--text-heading-sm` |"

  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: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| pills | 9999px |"
      info: "| badges | 999px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `oklch(0.880331 0.276486 138.811 / 0.75) -4px 0px 8px 0px,...` | `--shadow-sm` |"
      info: "| md | `rgba(0, 0, 0, 0.05) 0px 5px 10px 0px, rgba(0, 0, 0, 0.07)...` | `--shadow-md` |"

    layout:

      - "**Section gap:** 24px"
      - "**Card padding:** 12px"
      - "**Element gap:** 8px"

  components:

    buy_button_primary_action:
      role: "Purchase CTA on every collectible card"

      info: "Background #00df00, text #121212 at 15px MonumentGrotesk weight 500, padding 10px 16px, border-radius 8px. No shadow. The radioactive green is the only fill color in the system that isn't grayscale; it makes the transaction unmistakable against the monochrome feed. Letter-spacing -0.015em."

    sign_up_button_dark_fill:
      role: "Account creation in top-right header"

      info: "Background #121212, text #ffffff at 13px MonumentGrotesk weight 500, padding 8px 16px, border-radius 8px. The dark inverted counterpart to the green Buy button; serves the secondary auth action."

    log_in_button_ghost:
      role: "Returning-user entry in top-right header"

      info: "Transparent background, text #121212 at 13px MonumentGrotesk weight 500, padding 8px 16px, no border, border-radius 8px. Sits to the left of the Sign Up button with minimal visual weight."

    follow_button_pill_outline:
      role: "Subscribe to a creator in the right rail"

      info: "Background #121212, text #ffffff at 13px MonumentGrotesk weight 500, padding 8px 16px, border-radius 9999px. Fully pill-shaped. Inverted dark fill against the white card."

    collectible_card_feed_post:
      role: "Primary content unit in the center feed"

      info: "Flat white surface, no shadow, border-radius 12px. Contains: creator header row (avatar 32px circular + name + timestamp), 1:1 or 4:5 media fill, action bar (heart, comment, share icons in #4d4d4d), title at 15px weight 500 #121212, Buy button right-aligned. Cards stack vertically with 12–16px gap; separated by #e6e6e6 hairlines."

    left_navigation_rail:
      role: "Persistent icon-based navigation column"

      info: "Fixed 56px-wide left column, icons only (no labels), vertically centered, 24px vertical gap between icons. Icon color #4d4d4d default, #121212 active. A circular avatar sits at the top; a hamburger menu at the bottom. Background white, no border."

    top_search_bar:
      role: "Global search/command input"

      info: "Centered in the top bar, ~480px wide, 8px border-radius, background #ffffff, border #e6e6e6 1px. Placeholder 'Search' in #cacaca. Left-aligned search icon in #878787. No visible focus ring — relies on border color shift."

    suggested_follows_panel:
      role: "Right-rail discovery unit"

      info: "Header 'Suggested follows' at 13px weight 600 #121212, three rows of avatar + username + Follow button. Avatars 40px circular. Buttons are dark pill (#121212 bg, white text, 9999px radius). No card container — sits directly on canvas with internal spacing."

    price_timer_bar:
      role: "Live auction status on collectible cards"

      info: "Horizontal bar beneath media showing current bid in #121212 at 15px weight 500, countdown timer in #ff00f0 at 15px weight 500 (right-aligned). Thin #e6e6e6 top border separates from media."

    qr_code_cta_widget:
      role: "App-download prompt overlay bottom-right"

      info: "Fixed position card, white background, 12px border-radius, 1px #e6e6e6 border. Contains a QR code, 'Get the App' header at 13px weight 600, 'Learn More' link in #4d4d4d. No shadow."

    comment_input_field:
      role: "Inline comment composer on each card"

      info: "Borderless or #e6e6e6 1px border, 8px border-radius, placeholder 'Add a comment...' in #cacaca at 15px. No visible label. Sits below the action bar with 8px gap."

    zora_logo_mark:
      role: "Brand identifier in bottom-left corner"

      info: "Wordmark 'Zora' in MonumentGrotesk weight 500 at 15px #4d4d4d. Unobtrusive, anchored to the page corner. No logo symbol — pure typographic mark."

  do_s_and_don_ts:

    do:
      - "Use #00df00 exclusively for purchase/buy actions — never for decoration, tags, or non-transactional UI"
      - "Set all text at -0.015em letter-spacing; the tight tracking is part of the system's visual identity, not optional"
      - "Keep card padding at 12px and element gaps at 8px or 4px — the compact density is intentional, not cramped"
      - "Use 9999px border-radius for all social actions (Follow) and 8px for transactional actions (Buy, Log In) — the radius difference signals intent"
      - "Reserve #ff00f0 for time-sensitive or live-status indicators (countdown timers, live auctions, real-time pulses)"
      - "Place all navigation icons in a persistent 56px left rail with no labels — icon-only navigation is part of the gallery-tool language"
      - "Use MonumentGrotesk weight 500 for all interactive elements and weight 410/450 for body metadata to create subtle hierarchy without weight contrast"

    don_t:
      - "Don't add shadows to cards — surfaces sit flat against the canvas, elevation is expressed by background contrast only"
      - "Don't introduce additional accent colors beyond #00df00 and #ff00f0 — the two-color neon system is deliberately limited"
      - "Don't use weights above 600 — the type system is calibrated for label density, not editorial display"
      - "Don't center-align body text or card titles — left-align everything except hero headlines"
      - "Don't use border-radius values other than 8px (buttons/inputs), 12px (cards), or 9999px (pills) — mixing radii breaks the system"
      - "Don't add gradients to UI chrome — the gray gradient is reserved for skeleton/loading states only"
      - "Don't use color to indicate state on form inputs — use border color shift (#cacaca → #121212) instead of fills"

  elevation:

    - "**QR Code Download Widget:** `rgba(0, 0, 0, 0.05) 0px 5px 10px 0px, rgba(0, 0, 0, 0.07) 0px 15px 25px 0px`"
    - "**Featured Element Glow (rare):** `oklch(0.880331 0.276486 138.811 / 0.75) -4px 0px 8px 0px, oklch(0.880331 0.276486 138.811 / 0.97) 4px 0px 8px 0px`"

  imagery:

    the_visual_language_is_image_first: "the product IS imagery. Collectible media (photography, 3D renders, digital art, fashion editorials) fills square or portrait cards at full bleed with no frame or padding. Images are presented raw and uncropped, treated as gallery objects rather than marketing content. The surrounding UI recedes into near-invisibility — grayscale chrome, no decorative graphics, no lifestyle photography, no illustration. The only non-photographic visuals are UI icons (thin-line, monochrome, ~20px) and a single sphere logo at top-left. The aesthetic borrows from contemporary art platforms: the object is the content, the frame is invisible."

  layout:

    info: "Three-column desktop layout with a fixed 56px left icon rail, a fluid-width center feed (~600px content width), and a ~280px right discovery panel. The top bar is minimal: logo or search centered, auth actions right-aligned, no traditional nav links. The center feed is a single vertical column of full-width collectible cards stacking at 12–16px intervals. No hero section, no banner, no carousel — the feed IS the homepage. Navigation is icon-only and persistent. On mobile, the left rail and right panel collapse; the feed becomes the sole column. The overall density is gallery-tight: every pixel earns its place, breathing room is minimal, and visual hierarchy comes from image size and accent color rather than whitespace."

  agent_prompt_guide:

  quick_color_reference_n__text__121212_n__background__ffffff_n__border__e6e6e6_n__accent__ff00f0_secondary__for_live_timer_states_n__primary_action__no_distinct_cta_color:

  elevation_philosophy:

    info: "Zora deliberately suppresses elevation. Cards sit flush against the white canvas with zero shadow or border definition — their boundaries are implied by the media content and action bar, not by visual framing. The only shadows in the system appear on the QR download widget and on a rare green-glow effect (oklch green tinted shadow) on featured elements, both at extremely low frequency. This is a gallery-influenced choice: the artwork should feel mounted on a wall, not floating in a UI. Depth is communicated through z-index stacking and the fixed left rail's implied permanence, not through drop shadows."

  similar_brands:

    - "**Foundation** — Same ultra-minimalist NFT marketplace aesthetic: flat cards, grayscale chrome, single vivid accent for buy actions, icon-only navigation"
    - "**Sound.xyz** — Compact label-density typography, pill-shaped action buttons, near-monochrome palette with one neon accent for the primary transaction"
    - "**Farcaster / Warpcast** — Three-column social feed layout (nav rail + center feed + right discovery), tight typographic rhythm, and the deliberate use of one bright accent color against a grayscale field"
    - "**Are.na** — Gallery-first content presentation: imagery fills frames edge-to-edge, UI chrome is nearly invisible, no decorative graphics or marketing visuals compete with the content"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-black: #121212;
          --color-graphite: #4d4d4d;
          --color-fog-gray: #878787;
          --color-ash: #cacaca;
          --color-hairline: #e6e6e6;
          --color-pure-white: #ffffff;
          --color-reactor-green: #00df00;
          --color-voltage-pink: #ff00f0;
          --color-onyx: #000000;
        
          /* Typography — Font Families */
          --font-monumentgrotesk: 'MonumentGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.25;
          --text-body-sm: 13px;
          --leading-body-sm: 1.25;
          --text-body: 15px;
          --leading-body: 1.25;
          --text-body-lg: 16px;
          --leading-body-lg: 1.25;
          --text-heading-sm: 17px;
          --leading-heading-sm: 1.25;
        
          /* Typography — Weights */
          --font-weight-w410: 410;
          --font-weight-w450: 450;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
        
          /* Layout */
          --section-gap: 24px;
          --card-padding: 12px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-full: 999px;
          --radius-full-2: 9999px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-pills: 9999px;
          --radius-badges: 999px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
        
          /* Shadows */
          --shadow-sm: oklch(0.880331 0.276486 138.811 / 0.75) -4px 0px 8px 0px, oklch(0.880331 0.276486 138.811 / 0.97) 4px 0px 8px 0px;
          --shadow-md: rgba(0, 0, 0, 0.05) 0px 5px 10px 0px, rgba(0, 0, 0, 0.07) 0px 15px 25px 0px;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-black: #121212;
          --color-graphite: #4d4d4d;
          --color-fog-gray: #878787;
          --color-ash: #cacaca;
          --color-hairline: #e6e6e6;
          --color-pure-white: #ffffff;
          --color-reactor-green: #00df00;
          --color-voltage-pink: #ff00f0;
          --color-onyx: #000000;
        
          /* Typography */
          --font-monumentgrotesk: 'MonumentGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.25;
          --text-body-sm: 13px;
          --leading-body-sm: 1.25;
          --text-body: 15px;
          --leading-body: 1.25;
          --text-body-lg: 16px;
          --leading-body-lg: 1.25;
          --text-heading-sm: 17px;
          --leading-heading-sm: 1.25;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-full: 999px;
          --radius-full-2: 9999px;
        
          /* Shadows */
          --shadow-sm: oklch(0.880331 0.276486 138.811 / 0.75) -4px 0px 8px 0px, oklch(0.880331 0.276486 138.811 / 0.97) 4px 0px 8px 0px;
          --shadow-md: rgba(0, 0, 0, 0.05) 0px 5px 10px 0px, rgba(0, 0, 0, 0.07) 0px 15px 25px 0px;
        }