mekaverse___style_reference:
  info: "> monochrome gallery for digital artifacts — a pure black void where a rendered world hangs like a museum piece, and all UI is white ink on matte black glass."

  theme: "dark"

  info: "MekaVerse is a cinematic web3 game portal where the interface dissolves and the rendered world takes the stage. The entire UI is a monochrome shell — pure black canvas, white type, single charcoal button — built to frame massive full-bleed 3D artwork without competing with it. Typography does almost all the work: a single custom geometric sans (Roobert) stacked at extreme sizes with aggressive negative line-height for hero titles, and a quiet monospaced face (GT America Mono) whispering UI chrome in 10–12px. Surfaces are flat — no shadows, no gradients, no chromatic accent — the game art provides all color and depth. Every chrome element is featherweight: hairline 1px borders, 2px corner radii on interactive controls, and text-only hover states. The system reads less like a website and more like a gallery wall where the 3D world is the only object in the room."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void | `#000000` | `--color-void` | Page canvas, image overlays, nav background — pure black lets full-bleed 3D renders carry every chromatic moment while UI chrome disappears into the background |"
    info: "| Bone | `#ffffff` | `--color-bone` | Hairline borders, dividers, input outlines, and card edges on light surfaces. |"
    info: "| Charcoal | `#444345` | `--color-charcoal` | Filled action buttons (Explore, Connect Wallet) and the one elevated surface level above the void — a soft dark step that reads as pressed-in rather than raised, keeping the flat-gallery feel |"
    info: "| Frost | `#e2e2e2` | `--color-frost` | Hairline borders, divider lines, subtle structural edges — visible only where it separates two dark surfaces or wraps a control |"
    info: "| Ash | `#b8bab9` | `--color-ash` | Subtle surface tone for inactive UI blocks and muted containers — sits between Void and Bone, used sparingly to indicate a non-default resting state |"

  tokens___typography:

    roobert___all_display__hero__and_heading_type__a_single_geometric_grotesque_used_at_extreme_sizes___80px_for_hero_titles_with_line_height_0_78_produces_a_tightly_stacked_monumental_mark_rather_than_a_flowing_headline__the_choice_to_render_a_custom_display_face_at_weight_400_not_700_is_the_signature__the_type_whispers_authority_rather_than_shouting_it__substitute__inter_at_matching_weights_if_roobert_is_unavailable_____font_roobert:
      - "**Substitute:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 26px, 30px, 80px"
      - "**Line height:** 0.78 (hero), 1.00 (sub), 1.15 (body)"
      - "**Letter spacing:** normal"
      - "**OpenType features:** `\"liga\" 0`"
      - "**Role:** All display, hero, and heading type. A single geometric grotesque used at extreme sizes — 80px for hero titles with line-height 0.78 produces a tightly stacked monumental mark rather than a flowing headline. The choice to render a custom display face at weight 400 (not 700) is the signature: the type whispers authority rather than shouting it. Substitute: Inter at matching weights if Roobert is unavailable."

    gt_america_mono___all_chrome__nav__micro_labels__and_link_text__the_monospaced_face_is_deliberately_anti_display___it_reads_as_system_instrumentation_rather_than_editorial_design__which_keeps_the_ui_subordinate_to_the_3d_world__tracking_at__0_02em_tightens_the_mono_rhythm_for_a_quieter_presence_at_10_12px__substitute__jetbrains_mono_at_matching_weight_____font_gt_america_mono:
      - "**Substitute:** JetBrains Mono"
      - "**Weights:** 400"
      - "**Sizes:** 10px, 12px"
      - "**Line height:** 1.00 (nav), 1.30 (body micro)"
      - "**Letter spacing:** -0.0200em"
      - "**Role:** All chrome, nav, micro-labels, and link text. The monospaced face is deliberately anti-display — it reads as system instrumentation rather than editorial design, which keeps the UI subordinate to the 3D world. Tracking at -0.02em tightens the mono rhythm for a quieter presence at 10–12px. Substitute: JetBrains Mono at matching weight."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1 | -0.2px | `--text-caption` |"
      info: "| heading-sm | 26px | 1.15 | — | `--text-heading-sm` |"
      info: "| heading | 30px | 1 | — | `--text-heading` |"
      info: "| display | 80px | 0.78 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 116 | 116px | `--spacing-116` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 2px |"
      info: "| cards | 10px |"
      info: "| buttons | 2px |"
      info: "| containers | 20px |"

    layout:

      - "**Card padding:** 20px"
      - "**Element gap:** 20px"

  components:

    top_navigation_bar:
      role: "Sticky transparent header overlaid on full-bleed artwork"

      info: "Transparent background with 1px Frost (#e2e2e2) bottom border at ~10% opacity, logo left, nav links centered, Connect Wallet right. Height driven by content (~40px), sits at top:0 over rendered scenes. Nav items use GT America Mono 12px, white, with 25px horizontal padding and 7px gap between links."

    connect_wallet_button:
      role: "Primary persistent action in the nav"

      info: "Charcoal (#444345) filled button, 2px radius, GT America Mono 10–12px uppercase, Bone (#ffffff) text, ~10px 20px padding, 1px Frost border optional. Reads as a quiet terminal button rather than a marketing CTA."

    explore_action_button:
      role: "Hero call-to-action below stacked display title"

      info: "Charcoal (#444345) fill, 2px radius, 1px Frost (#e2e2e2) border, GT America Mono 10–12px label, Bone text. Sits flush-left beneath the hero headline with 20px top margin. Deliberately understated — the artwork above it is the real hero."

    hero_stacked_title:
      role: "Section title overlaid on full-bleed rendered art"

      info: "Three lines of Roobert 80px / weight 400 / line-height 0.78, Bone (#ffffff), left-aligned with generous left margin (~60–80px). Each line underlined by a 1px Frost hairline that extends across roughly 30% of the title width — a distinguishing mark, not a generic divider. Letter-spacing 0; the tight line-height creates the stacked monumental effect."

    underline_mark:
      role: "Signature horizontal rule beneath display titles"

      info: "1px tall Frost (#e2e2e2) line positioned directly under each line of stacked hero text, extending from the left edge of the text to approximately the midpoint of the longest line. This is a recurring brand device, not a generic underline."

    nav_link:
      role: "Header navigation item"

      info: "GT America Mono 12px, -0.02em tracking, Bone text, no underline at rest. 25px horizontal padding, 3–7px gap to neighbor. Hover state: 1px Frost bottom border appears without shifting layout."

    logo_lockup:
      role: "Brand identifier in nav"

      info: "MekaVerse wordmark with a small geometric glyph to the left (diamond/cross mark). White on transparent, sits at top-left of nav with 25px left padding. ~20px height."

    art_frame:
      role: "Full-bleed rendered artwork container"

      info: "No padding, no border, no shadow — the rendered 3D scene fills the viewport edge-to-edge. Aspect ratio is free per section; the UI is simply laid on top with absolute positioning. This is the design system's central content primitive."

    section_container:
      role: "Wraps overlaid text or interactive content over an art frame"

      info: "Transparent background, no border, padded from viewport edges (20–30px). Content is positioned with absolute or flex alignment and never receives its own card treatment — it floats over the art."

    subtitle_text:
      role: "Secondary headline or label under a hero title"

      info: "Roobert 30px, weight 400, line-height 1.0, Bone (#ffffff). Used for 'Season 2' style secondary marks. No underline."

    ui_caption:
      role: "Micro-labels, counters, badges, wallet indicator"

      info: "GT America Mono 10px, line-height 1.0, -0.02em tracking, Bone or Frost text. Used for cart counters, wallet status pills, and any 10px-or-smaller metadata."

  do_s_and_don_ts:

    do:
      - "Use #000000 as the page canvas beneath every full-bleed artwork and let renders carry all color and light"
      - "Set hero titles in Roobert 80px weight 400 with line-height 0.78 — the tight stacking is the signature, not an accident"
      - "Reserve #ffffff for type and high-contrast borders; never use it as a fill surface"
      - "Use GT America Mono 10–12px with -0.02em tracking for all chrome, nav, and micro-labels"
      - "Render buttons as 2px-radius Charcoal (#444345) fills with 1px Frost border — pressed-in, never raised"
      - "Place a 1px Frost underline mark beneath each line of stacked hero text extending to roughly 30–50% of the line width"
      - "Let rendered artwork bleed to the viewport edge; never wrap art in a card with padding or a border"

    don_t:
      - "Do not introduce any chromatic color — the palette is monochrome by design, and one accent will shatter the gallery frame"
      - "Do not apply box-shadow to any element; elevation is communicated only through the surface stack and hairline borders"
      - "Do not use a system font for display copy — Roobert (or Inter substitute) at weight 400 is the voice; sans-serif heavy weights break the whisper-authority effect"
      - "Do not give cards or containers radii larger than 20px; the 2px / 10px / 20px triad is the entire system"
      - "Do not center-align hero titles; they are always left-aligned with the underline mark extending rightward"
      - "Do not use line-height above 1.0 for any display-size text — the stacked monumental mark depends on aggressive negative leading"
      - "Do not add a footer chrome pattern (links, legal text, social icons in a row) unless the design calls for it; the page ends where the art ends"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void | `#000000` | Universal page canvas behind all rendered artwork and beneath all UI |"
    info: "| 1 | Charcoal | `#444345` | First elevation step — filled action buttons and inline control surfaces that need to lift off the void without casting shadow |"
    info: "| 2 | Ash | `#b8bab9` | Muted panel or disabled-state surface, used only when a non-interactive block needs a visible material |"

  elevation:

    info: "The design uses no shadows. Elevation is communicated exclusively through the three-step neutral surface stack (Void → Charcoal → Ash) and through 1px hairline borders in Frost. Every element should feel pressed onto the black canvas, not floating above it. Never introduce box-shadow."

  imagery:

    info: "Full-bleed 3D rendered game artwork is the entire visual language. Every section is dominated by a painted-rendered diorama — fantasy castles on green islands, icy fortresses, mecha-characters on white dunes — shown edge-to-edge with no framing. Art treatment is high-detail cinematic with deep atmospheric depth, saturated mid-tones (greens, blues, warm whites) that contrast with the black UI overlay. There is no photography, no flat illustration, no iconography beyond a small logo glyph. Icons visible are minimal: a small diamond/cross mark in the logo. The visual hierarchy is: art (100% of viewport) > display type (overlay) > chrome (corners only)."

  layout:

    info: "Full-bleed cinematic scroll. Every viewport-sized section is a rendered scene extending edge-to-edge with no horizontal margins. Text and controls are absolutely positioned over the art — typically bottom-left or center-left — with generous left padding (25–80px). Sections stack vertically with 0px gap between them; the page reads as a continuous film strip of rendered worlds. Navigation is a single transparent sticky bar at the top. There are no card grids, no sidebar, no max-width content columns; the only 'columns' are the implicit left-aligned text block and the right-aligned nav. The layout is essentially: [transparent nav] → [full-bleed art + overlaid hero] → [full-bleed art + overlaid title] → [full-bleed art + overlaid title] repeated to scroll length."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #ffffff"
    - "background: #000000"
    - "border: #e2e2e2"
    - "surface elevation: #444345"
    - "muted surface: #b8bab9"
    - "primary action: #444345 (filled action)"

  example_component_prompts:

    - "**Hero Stacked Title Block** — Overlay on a full-bleed image at viewport-bottom-left. Headline at 80px Roobert weight 400, #ffffff, line-height 0.78, left-aligned with 60px left padding. Three lines stacked: each followed by a 1px #e2e2e2 underline extending to ~40% of that line's width."

    - "**Transparent Top Nav** — Sticky bar, 1px #e2e2e2 bottom border at 30% opacity, 40px height. Logo lockup (white wordmark + small diamond glyph) flush-left with 25px padding. Nav links (Home / Gallery / Shop) in GT America Mono 12px, #ffffff, -0.02em tracking, 25px horizontal padding, 7px gap. Connect Wallet button (#444345 fill, #ffffff text, GT America Mono 10px, 2px radius, 1px #e2e2e2 border) flush-right."

    - "**Explore Button** — #444345 background, 2px radius, 1px #e2e2e2 border, GT America Mono 12px label in #ffffff, padding 10px 20px. No shadow. Sits 20px below the hero title block, flush-left."

    - "**UI Caption / Cart Counter** — GT America Mono 10px, #ffffff, line-height 1.0, -0.02em tracking. Inline with a parent nav link, 3px left margin."

    - "**Section Over a Rendered Artwork** — No background, no border, no shadow. Viewport-sized <section> with a 3D render as background-image filling 100% width and height. A text block absolutely positioned at left: 60px, bottom: 80px, in Roobert 80px / weight 400 / line-height 0.78 / #ffffff, with the 1px #e2e2e2 underline marks beneath each line."

  underline_mark_system:

    info: "The 1px Frost (#e2e2e2) horizontal line beneath each line of stacked display text is a brand-defining mark, not a generic underline. Rules: it sits 0–4px below the text baseline, extends from the left edge of the first glyph to roughly 30–50% of the line width, never more than 60%, and never wraps or breaks. Every display title must use it. Subtitles and body copy never do."

  the_2px_rule:

    info: "The 2px border-radius is applied to every interactive control — buttons, nav pills, toggle states. This is not a default; it is an opinion. The 2px keeps corners sharp and architectural against the 3D art, where any larger radius would feel toy-like and any 0 would feel unfinished. Cards may go to 10px; large containers to 20px; nothing exceeds 20px."

  similar_brands:

    - "**Azuki** — Same full-bleed cinematic 3D artwork with left-aligned white display type overlaid on rendered scenes, and a transparent sticky nav"
    - "**Doodles** — Same monochrome chrome wrapping a colorful illustrated world; UI disappears so the art is the only object in the room"
    - "**Loot (Foundation)** — Same anti-design approach: near-zero color, tiny mono labels, oversized stacked display type, and the product itself is the visual"
    - "**RTFKT** — Same web3 product-portal feel — black canvas, white type, rendered 3D hero scenes that dominate every viewport"
    - "**Yuga Labs (Otherside)** — Same world-building game-portal aesthetic with full-bleed rendered dioramas and whisper-quiet UI chrome in mono type"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void: #000000;
          --color-bone: #ffffff;
          --color-charcoal: #444345;
          --color-frost: #e2e2e2;
          --color-ash: #b8bab9;
        
          /* Typography — Font Families */
          --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-america-mono: 'GT America Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --tracking-caption: -0.2px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.15;
          --text-heading: 30px;
          --leading-heading: 1;
          --text-display: 80px;
          --leading-display: 0.78;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-116: 116px;
        
          /* Layout */
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 10px;
          --radius-2xl: 20px;
        
          /* Named Radii */
          --radius-nav: 2px;
          --radius-cards: 10px;
          --radius-buttons: 2px;
          --radius-containers: 20px;
        
          /* Surfaces */
          --surface-void: #000000;
          --surface-charcoal: #444345;
          --surface-ash: #b8bab9;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void: #000000;
          --color-bone: #ffffff;
          --color-charcoal: #444345;
          --color-frost: #e2e2e2;
          --color-ash: #b8bab9;
        
          /* Typography */
          --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-america-mono: 'GT America Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --tracking-caption: -0.2px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.15;
          --text-heading: 30px;
          --leading-heading: 1;
          --text-display: 80px;
          --leading-display: 0.78;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-116: 116px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 10px;
          --radius-2xl: 20px;
        }