moonli___style_reference:
  info: "> Electric lime on white canvas — one vivid room carved out of monochrome space, framed by generous rounded edges."

  theme: "light"

  moonli_runs_on_radical_color_minimalism: "a white canvas, black type, and one electrifying lime accent that appears as a single massive atmospheric block rather than scattered UI elements. The lime (#b8ff65) functions as a room, not a highlight — it floods the hero entirely and reappears in section backgrounds, never as a button fill or icon tint. Everything else is pure black-on-white, anchored by generous 30-40px border radii that soften the stark monochrome contrast. DM Sans carries the entire typographic system across a wide weight range, with tight letter-spacing that scales aggressively negative at display sizes (-0.05em at 58px). Line illustrations in black on the green surfaces add personality and warmth without breaking the two-color discipline. The result reads as confident, almost poster-like — like a single bright object in a gallery of white walls."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Lime Voltage | `#b8ff65` | `--color-lime-voltage` | Atmospheric section backgrounds, hero block — the single chromatic voice of the system, used at full-section scale rather than as UI accent |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary text, all borders, all icons, scroll-indicator fill, logo mark |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page background, card surfaces, nav element fills |"
    info: "| Fog White | `#f3f3f3` | `--color-fog-white` | Secondary card surface, alternating section backgrounds |"
    info: "| Ash Border | `#e2e2e2` | `--color-ash-border` | Card borders, hairline dividers on white surfaces |"
    info: "| Smoke | `#757575` | `--color-smoke` | Muted helper text, secondary metadata, caption-level information |"

  tokens___typography:

    dm_sans___sole_typeface___weight_700_for_display_and_headings__500_for_navigation_and_subheadings__400_for_body_and_captions__the_aggressive_negative_tracking_at_display_sizes__0_05em_at_58px_is_signature__dm_sans_becomes_a_compressed__poster_like_headline_tool_rather_than_a_neutral_body_face__at_body_sizes_tracking_relaxes_to__0_01em__giving_copy_a_natural_rhythm_without_feeling_mechanical_____font_dm_sans:
      - "**Substitute:** Inter, Satoshi, General Sans"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 14px, 16px, 24px, 38px, 48px, 58px"
      - "**Line height:** 1.08 (display), 1.13–1.17 (large headings), 1.26 (subheadings), 1.45–1.50 (body), 1.75 (body-sm/captions)"
      - "**Letter spacing:** -0.05em at 58px, -0.03em at 38–48px, -0.01em at 14–24px"
      - "**Role:** Sole typeface — weight 700 for display and headings, 500 for navigation and subheadings, 400 for body and captions. The aggressive negative tracking at display sizes (-0.05em at 58px) is signature: DM Sans becomes a compressed, poster-like headline tool rather than a neutral body face. At body sizes tracking relaxes to -0.01em, giving copy a natural rhythm without feeling mechanical."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.75 | — | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | — | `--text-body-sm` |"
      info: "| subheading | 24px | 1.26 | — | `--text-subheading` |"
      info: "| heading-sm | 38px | 1.17 | — | `--text-heading-sm` |"
      info: "| heading | 48px | 1.13 | — | `--text-heading` |"
      info: "| display | 58px | 1.08 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 184 | 184px | `--spacing-184` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 40px |"
      info: "| cards | 30px |"
      info: "| buttons | 40px |"
      info: "| circles | 9999px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 40-70px"
      - "**Card padding:** 30-40px"
      - "**Element gap:** 20-25px"

  components:

    lime_hero_block:
      role: "Primary hero — full-width atmospheric section"

      info: "Full-width #b8ff65 background, 30px border-radius, padded 40-70px. Black DM Sans 58px/1.08/weight 700/letter-spacing -0.05em headline centered or left-aligned. Black line illustrations flanking the text on left and right. Black body copy at 16px/1.5 underneath."

    white_content_card:
      role: "Standard surface for information blocks"

ffffff_background__1px_e2e2e2_border__30px_border_radius__30_40px_padding__contains_black_headings_at_38_48px_and_body_at_16px:

    network_logo_card:
      role: "Horizontal scroll card showing a blockchain network"

ffffff_background__1px_e2e2e2_border__30px_border_radius__20px_padding__network_name_in_dm_sans_500_at_24px__logo_icon_as_circular_48_56px_element_on_the_right_side:

    charity_circle:
      role: "Circular badge for charity/cause logos in the Giving Back section"

      info: "Perfect circle (9999px radius), #f3f3f3 background, black logo inside at ~50% fill. Arranged in grid."

    nav_pill_button:
      role: "Primary navigation CTA (Stake Now)"

ffffff_background__1px_e2e2e2_border__40px_border_radius__12px_vertical___20px_horizontal_padding__text_in_dm_sans_500_at_16px__000000:

    ghost_nav_link:
      role: "Standard navigation text item"

      info: "No background, no border. DM Sans 500 at 16px, #000000. Horizontal spacing 25px between items."

    scroll_down_indicator:
      role: "Floating circular button prompting scroll"

000000_fill__perfect_circle__48px__white_chevron_icon_centered__positioned_overlapping_section_boundary:

    two_column_feature_section:
      role: "Giving Back and similar split layouts"

      info: "Lime green left column (#b8ff65) paired with Fog White right column (#f3f3f3), both 30px border-radius. Left holds heading + body + illustration; right holds logo grid + supporting copy."

    logo_mark:
      role: "Brand identity in nav and footer"

      info: "Black circular icon (~36px) containing a white abstract curve mark, followed by 'moonli' wordmark in DM Sans 500 at ~20px, #000000."

    line_illustration_block:
      role: "Decorative visual on green surfaces"

      info: "Black single-weight line art depicting 3D objects (books, coins, monitors, crystals). Drawn at ~1.5px stroke, no fill. Positioned at edges of lime sections."

  do_s_and_don_ts:

    do:
      - "Use #b8ff65 only as a full-section or full-card background — never as a button fill, text color, or icon tint"
      - "Apply 30px border-radius to all cards and 40px to all nav-pill elements"
      - "Use DM Sans 700 with letter-spacing -0.05em for any text at 48px or above"
      - "Keep all icons, borders, and text #000000 — the system is binary between black and white, with lime as the only third voice"
      - "Use line illustrations (single-weight black strokes, no fill) to add personality on lime surfaces"
      - "Pair sections as adjacent rounded blocks rather than separating with dividers — the 30px radius and color contrast create the structure"
      - "Center the page at ~1200px max-width; let white margins breathe"

    don_t:
      - "Never use #b8ff65 as a CTA button background or link color — the lime is atmospheric, not interactive"
      - "Avoid introducing additional chromatic colors — no blues, purples, or status hues. The system is two-tone plus lime"
      - "Don't apply shadows or gradients — the design is strictly flat with border-defined elevation"
      - "Avoid sharp corners below 30px on cards or containers — small radii break the system's softness"
      - "Don't use letter-spacing looser than -0.01em at body sizes or tighter than -0.05em at display"
      - "Never place lime text on white or white text on lime at small sizes — keep it large to preserve the 17.5:1 contrast"
      - "Avoid photographic imagery, gradients, or filled illustrations — line art in black is the only visual language"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Page canvas, nav background |"
    info: "| 1 | Fog White | `#f3f3f3` | Secondary card surface, alternating sections |"
    info: "| 2 | Lime Voltage | `#b8ff65` | Atmospheric hero and feature block backgrounds |"

  elevation:

    info: "No shadows. Elevation is expressed through border color (1px #e2e2e2) and surface color shifts (white → fog → lime). The system is strictly flat; depth comes from layering rounded blocks, not from drop shadows."

  imagery:

    info: "No photography. All visuals are hand-drawn line illustrations in single-weight black strokes (approximately 1.5px) depicting geometric 3D objects — monitors, coins, books, crystals, pyramids, coins on stacks. Illustrations sit on lime backgrounds and function as atmospheric decoration rather than explanatory content. Third-party logos (network chains, charities) appear as small monochrome marks inside circular or pill containers. The visual density is low — illustrations occupy generous negative space and never overlap or crowd the typography."

  layout:

    info: "Centered, max-width ~1200px contained layout. The hero is a full-width lime block with centered headline and flanking line illustrations. Below, a horizontally scrolling row of network cards (#ffffff, 30px radius) sits inside a fog-white container. Two-column sections follow a repeating pattern: one lime column paired with one fog-white column, each 30px radius, creating a yin-yang rhythm. Generous vertical spacing (40-70px between sections). Navigation is a minimal top bar with a pill-shaped CTA on the right. The overall density is spacious — white space dominates, with content blocks floating as discrete rounded cards rather than filling the page edge-to-edge."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "surface: #f3f3f3"
    - "border: #e2e2e2"
    - "accent (atmospheric only): #b8ff65"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "Create a hero section: full-width #b8ff65 background, 30px border-radius, 60px vertical padding. Headline at 58px DM Sans weight 700, #000000, letter-spacing -0.05em, line-height 1.08. Subtext at 16px DM Sans weight 400, #000000, line-height 1.5. Black single-stroke line illustrations flanking the text."

    - "Create a network card: #ffffff background, 1px #e2e2e2 border, 30px border-radius, 20px padding. Network name at 24px DM Sans weight 500, #000000. Circular logo icon (48px) on the right side."

    - "Create a nav bar: #ffffff background, centered at 1200px max-width. Logo (black circle + 'moonli' wordmark in DM Sans 500) on the left. Nav links at 16px DM Sans weight 500, #000000, 25px horizontal spacing. 'Stake Now' button on the right: #ffffff background, 1px #e2e2e2 border, 40px border-radius, 12px 20px padding, DM Sans 500 at 16px."

    - "Create a two-column feature block: left column #b8ff65 with 30px border-radius, right column #f3f3f3 with 30px border-radius. Left column has 38px DM Sans 700 heading + 16px body + black line illustration. Right column has a 3×2 grid of charity circles (#f3f3f3 background, perfect circle, black logo inside)."

    - "Create a scroll-down indicator: 48px perfect circle, #000000 fill, white chevron-down icon centered. Positioned overlapping the boundary between the lime hero and the next white section."

  similar_brands:

    - "**Linear** — Same ultra-minimal palette discipline with one accent color, generous rounded corners, and tight letter-spacing on display headings"
    - "**Evervault** — Similar poster-like hero blocks with full-bleed color washes and bold sans-serif display type"
    - "**Ledger (corporate site)** — Same crypto/blockchain domain with stark monochrome UI and rounded card surfaces"
    - "**Cove** — Shared two-tone aesthetic (white + single vivid accent) with large border-radius and confident display type"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-lime-voltage: #b8ff65;
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-fog-white: #f3f3f3;
          --color-ash-border: #e2e2e2;
          --color-smoke: #757575;
        
          /* Typography — Font Families */
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.75;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --text-subheading: 24px;
          --leading-subheading: 1.26;
          --text-heading-sm: 38px;
          --leading-heading-sm: 1.17;
          --text-heading: 48px;
          --leading-heading: 1.13;
          --text-display: 58px;
          --leading-display: 1.08;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-184: 184px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40-70px;
          --card-padding: 30-40px;
          --element-gap: 20-25px;
        
          /* Border Radius */
          --radius-3xl: 30px;
          --radius-3xl-2: 40px;
        
          /* Named Radii */
          --radius-nav: 40px;
          --radius-cards: 30px;
          --radius-buttons: 40px;
          --radius-circles: 9999px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-fog-white: #f3f3f3;
          --surface-lime-voltage: #b8ff65;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-lime-voltage: #b8ff65;
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-fog-white: #f3f3f3;
          --color-ash-border: #e2e2e2;
          --color-smoke: #757575;
        
          /* Typography */
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.75;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --text-subheading: 24px;
          --leading-subheading: 1.26;
          --text-heading-sm: 38px;
          --leading-heading-sm: 1.17;
          --text-heading: 48px;
          --leading-heading: 1.13;
          --text-display: 58px;
          --leading-display: 1.08;
        
          /* Spacing */
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-184: 184px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-3xl: 30px;
          --radius-3xl-2: 40px;
        }