solana___style_reference:
  info: "> neon aurora in a midnight void — flowing magenta and violet ribbons suspended against pure black"

  theme: "dark"

  solana_operates_in_a_midnight_void: "a near-black canvas punctuated by flowing neon aurora graphics in violet, magenta, and green. The system is deliberately monochromatic — white and warm-gray typography carry all communication weight, while the only chromatic presence comes from the brand's signature flowing wave illustrations, never from interface chrome. Components are whisper-thin: 1px hairline borders, pill-shaped controls at 9999px radius, and cards that float on barely-distinguishable dark surfaces. The custom Diatype typeface, with its tightly negative letter-spacing that tightens further at display sizes, gives every headline a compressed, futuristic confidence. Buttons achieve a subtle 3D embossed effect through a layered shadow stack that pairs a soft drop shadow with inset white highlights — the chrome looks pressed into the surface rather than floating above it. Density is comfortable, never packed; the page breathes with generous section gaps and lets the aurora graphics do the visual heavy lifting."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Black | `#000000` | `--color-void-black` | Page canvas, deepest background layer — the void against which everything else floats |"
    info: "| Obsidian | `#0d0c11` | `--color-obsidian` | Card surfaces, elevated panels — a barely-perceptible warm purple-black lift from the canvas |"
    info: "| Charcoal Press | `#121212` | `--color-charcoal-press` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Onyx | `#12151d` | `--color-onyx` | Navigation bar background, sticky header surface |"
    info: "| Smoke | `#050505` | `--color-smoke` | Secondary canvas tone, gradient terminus — the deepest non-pure-black |"
    info: "| Graphite | `#3e3c41` | `--color-graphite` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Ash | `#848895` | `--color-ash` | Muted text, secondary navigation labels, icon strokes in resting state |"
    info: "| Fog | `#ababba` | `--color-fog` | Body text, descriptions, secondary copy — warm gray that softens white's intensity |"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Primary headings, high-emphasis text, icon fills, reversed button text |"
    info: "| Hairline | `#eaecf0` | `--color-hairline` | Ultra-subtle borders at low opacity — defines card edges and input fields against the void |"

  tokens___typography:

    diatype___primary_typeface_for_all_ui___body_text__headings__buttons__navigation__the_geometric__slightly_condensed_forms_paired_with_aggressively_negative_letter_spacing_give_every_line_a_compressed__technical_authority__weight_300_for_display_headlines_creates_a_whisper_confident_tone__weight_400_for_body__weight_500_for_emphasis__letter_spacing_tightens_proportionally___0_04em_at_display_sizes___0_01em_at_body_sizes_____font_diatype:
      - "**Substitute:** Inter, Geist, Satoshi"
      - "**Weights:** 300, 400, 500"
      - "**Sizes:** 16, 18, 20, 21, 24, 28, 36, 40, 64, 88"
      - "**Line height:** 1.00–1.56"
      - "**Letter spacing:** -0.04em at 88px, -0.03em at 40-64px, -0.02em at 24-36px, -0.01em at 16-21px"
      - "**Role:** Primary typeface for all UI — body text, headings, buttons, navigation. The geometric, slightly condensed forms paired with aggressively negative letter-spacing give every line a compressed, technical authority. Weight 300 for display headlines creates a whisper-confident tone; weight 400 for body; weight 500 for emphasis. Letter-spacing tightens proportionally: -0.04em at display sizes, -0.01em at body sizes."

    dsemi___reserved_for_the_solana_wordmark_and_select_nav_micro_labels_at_12_14px__the_heavy_weight_at_micro_sizes_acts_as_a_brand_signature___a_condensed_monospaced_bold_that_contrasts_diatype_s_lighter_geometric_forms_____font_dsemi:
      - "**Substitute:** JetBrains Mono Bold, Space Mono Bold"
      - "**Weights:** 700"
      - "**Sizes:** 12, 14"
      - "**Line height:** 1.14, 1.33"
      - "**Role:** Reserved for the Solana wordmark and select nav micro-labels at 12-14px. The heavy weight at micro sizes acts as a brand signature — a condensed monospaced bold that contrasts Diatype's lighter geometric forms."

    ui_sans_serif___ui_sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_ui_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 21px"
      - "**Line height:** 1.5"
      - "**Role:** ui-sans-serif — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.33 | -0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.56 | -0.16px | `--text-body` |"
      info: "| body-lg | 18px | 1.5 | -0.18px | `--text-body-lg` |"
      info: "| subheading | 21px | 1.4 | -0.21px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.22 | -1.08px | `--text-heading` |"
      info: "| heading-lg | 64px | 1.13 | -2.56px | `--text-heading-lg` |"
      info: "| display | 88px | 1 | -3.52px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 4px |"
      info: "| cards | 12px |"
      info: "| badges | 9999px |"
      info: "| inputs | 12px |"
      info: "| buttons | 9999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.17) 0px 2px 4px 1px, rgba(255, 255, 255, ...` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    pill_primary_button:
      role: "Primary action trigger"

      info: "9999px border-radius (full pill). Background #121212 with the signature embossed shadow stack. Text: Diatype 16px weight 500, #ffffff. Padding: 10px 20px. Includes a leading icon (arrow/triangle) before the label. The inset white highlights make the pill look like it catches light from above."

    pill_ghost_button:
      role: "Secondary action, view-all links"

      info: "9999px border-radius. Transparent or #0d0c11 background with #eaecf0 border at low opacity. Text: Diatype 14-16px weight 400, #ababba or #ffffff. Padding: 8px 20px. Used for less prominent actions like 'View all'."

    carousel_arrow_button:
      role: "Horizontal scroll navigation"

      info: "Circular button (9999px radius), ~40px diameter. #121212 background with #eaecf0 border. Contains a left/right chevron in #ababba. Shadow-less — sits flat on the surface."

    navigation_bar:
      role: "Persistent site header"

      info: "Full-width sticky bar at #12151d background. Left: Solana wordmark (DSemi 14px weight 700, #ffffff) with the triple-bar logo mark. Center: nav links (Diatype 14px weight 400, #ababba) with chevron dropdowns. Right: search input, language selector. Padding: 12px 24px. Height ~56px."

    search_input:
      role: "Global search and AI prompt"

      info: "Rounded input with 12px radius. Background: #0d0c11. Border: 1px #eaecf0 at low opacity. Placeholder: 'Search or ask AI' in Diatype 14px #848895. Includes a keyboard shortcut badge ('⌘K') in the right corner. Padding: 8px 16px."

    event_card:
      role: "Promotional content tile for conferences and hackathons"

      info: "12px border-radius. Full-bleed gradient or photographic background. Contains overlaid event branding text in large display type, date, and location. No visible border — the card edge is defined by the imagery. Dimensions vary; typically 1:1.2 aspect ratio in horizontal carousels."

    content_card:
      role: "Article or feature card"

      12px_border_radius__background: "#0d0c11. Border: 1px #eaecf0 at very low opacity. Padding: 24px. Contains a small icon mark, headline (Diatype 24-28px weight 400, #ffffff), and optional body text in #ababba. No drop shadow — the border alone defines the edge."

    partner_logo_strip:
      role: "Social proof and trust signals"

      info: "Horizontal row of 6-8 partner logos (Western Union, Visa, Worldpay, Circle, PayPal, Fiserv). Logos rendered in their native brand colors or in #ababba monochrome. Centered, no dividers, generous spacing between logos."

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

      info: "Full-width dark canvas with the aurora gradient (linear-gradient black to #14001d). Left-aligned headline at 64-88px Diatype weight 300, #ffffff. Sub-text at 18px Diatype weight 400, #ababba. Primary pill button below. Flowing wave SVG graphics occupy the right 60% of the viewport, extending beyond the fold."

    floating_chat_bubble:
      role: "AI assistant entry point"

      info: "Fixed bottom-right element. Dark pill shape with #eaecf0 border. Solana logo mark + 'Ask AI' label in Diatype 14px #ffffff. Sits independently from the page flow — always visible regardless of scroll position."

    section_heading:
      role: "Subsection title anchor"

      info: "Diatype 40-64px weight 300, #ffffff. Two-line structure common (e.g., 'Meet Solana IRL. / Build connections.'). Left-aligned. No accompanying decorative element — relies on size and weight contrast for hierarchy."

  do_s_and_don_ts:

    do:
      - "Use the void black (#000000) as the base canvas for all pages — never introduce a light background section"
      - "Apply Diatype weight 300 for all display and hero headlines; reserve weight 500 only for button labels and short emphasis runs"
      - "Set border-radius to 9999px for every button, tag, and pill-shaped element — the pill is a brand signature"
      - "Use the embossed button shadow stack (inset white highlights + soft drop shadow) on all primary actions to maintain the pressed-glass feel"
      - "Reference the aurora gradient (black to #14001d) as the only acceptable canvas gradient — it creates depth for the wave graphics"
      - "Keep all body and description text in #ababba Fog; reserve pure white exclusively for headings and high-emphasis labels"
      - "Use 12px radius for cards and content containers, 4px for small UI elements — never default to 8px"

    don_t:
      - "Do not introduce a chromatic CTA color — all primary actions use the dark embossed pill with white text"
      - "Do not use drop-shadow elevation on cards or panels; the system defines surface layers through background luminance shifts, not shadows"
      - "Do not break the negative letter-spacing pattern at any size — tracking loosens the brand's compressed authority"
      - "Do not use decorative gradients on UI components (buttons, cards, inputs) — gradients belong only in the hero aurora and event imagery"
      - "Do not set border-radius to 0 or to common defaults like 8px on interactive elements; the radius scale is 4/12/9999 only"
      - "Do not place light or white surfaces in the interface — the entire system lives in the void"
      - "Do not use saturated colors for icons, badges, or status indicators; all functional UI is monochrome"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Void | `#000000` | Base page canvas — the absolute background |"
    info: "| 2 | Obsidian | `#0d0c11` | Card surfaces, content containers |"
    info: "| 3 | Charcoal | `#121212` | Elevated buttons, hover-state surfaces |"
    info: "| 4 | Onyx | `#12151d` | Sticky navigation, persistent UI chrome |"

  elevation:

    - "**Pill Button:** `rgba(0, 0, 0, 0.17) 0px 2px 4px 1px, rgba(255, 255, 255, 0.29) 0px -4px 12px 0px inset, rgba(255, 255, 255, 0.4) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px -1px 0px 0px inset`"

  imagery:

    info: "The signature visual element is the flowing aurora wave: smooth, ribbon-like 3D curves in violet, magenta, and electric green that sweep horizontally across the hero canvas. These are rendered as soft, semi-transparent gradient meshes — not sharp line art — giving them a nebulous, atmospheric quality. Event cards feature full-bleed photographic and graphic composites with heavy gradient overlays. Partner logos appear in their native brand colors but small and contained. Product and protocol imagery is absent from the homepage; the aurora and event photography carry all visual weight."

  layout:

    info: "Full-bleed dark canvas, no max-width constraint on background color — content containers are max-width 1280px centered. Hero is left-aligned text occupying the left 40% with aurora wave graphics filling the right 60% and bleeding off-screen. Sections stack vertically with 80px gaps, alternating between black canvas and slightly elevated obsidian surfaces. Content blocks are 2-column or 3-column grids: event cards in horizontal carousels (3 visible at once with edge bleed), content cards in 2-up splits, partner logos in single horizontal rows. Navigation is a single sticky top bar at 56px height. No sidebar, no footer columns visible above the fold — the page prioritizes generous vertical breathing room over information density."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ffffff (headings), #ababba (body), #848895 (muted)"
    - "background: #000000 (canvas), #0d0c11 (cards), #121212 (buttons)"
    - "border: #eaecf0 (hairline, use at low opacity)"
    - "accent: no distinct UI accent color — brand presence comes from aurora graphics, not interface chrome"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    - "*Create a hero section.* Full-width #000000 canvas with the aurora gradient (linear-gradient(0deg, #000000, #14001d)). Headline left-aligned at 88px Diatype weight 300, #ffffff, letter-spacing -3.52px. Sub-text at 18px Diatype weight 400, #ababba. Below: pill button — 9999px radius, #121212 background, white text 'Get started' at 16px weight 500, with the signature embossed shadow stack and a leading arrow icon. Right side: flowing violet-magenta-green wave SVG graphics filling 60% width."

    - "*Create a content card.* 12px border-radius, #0d0c11 background, 1px #eaecf0 border at 8% opacity, 24px padding. Small triple-bar icon at top-left in #ababba. Headline at 28px Diatype weight 400, #ffffff. No drop shadow — the border alone defines the edge."

    - "*Create a search input.* 12px border-radius, #0d0c11 background, 1px #eaecf0 border at 12% opacity. Placeholder 'Search or ask AI' in Diatype 14px #848895. Right-side keyboard badge '⌘K' in a 4px-radius sub-pill with #3e3c41 background. Padding: 8px 16px. Width: 240px."

    - "*Create a navigation bar.* Full-width sticky, #12151d background, 56px height, 24px horizontal padding. Left: Solana wordmark (DSemi 14px weight 700) with triple-bar logo. Center: 5 nav links (Learn, Developers, Products, Network, Community) in Diatype 14px weight 400, #ababba, with chevron icons. Right: search input + language selector."

    - "*Create an event card for a carousel.* 12px border-radius, no visible border. Background: a gradient composite image (photo of a cityscape with a violet-to-green gradient overlay). Overlaid text: event name at 40px Diatype weight 700 in white, date and location at 16px Diatype weight 400 in #ffffff at 80% opacity. Card aspect ratio 1:1.2, displayed in a horizontal scrolling row with edge bleed."

  similar_brands:

    - "**Polygon Labs** — Same dark-void canvas with flowing neon-purple wave graphics in the hero, and similarly compressed geometric sans-serif headlines at display sizes"
    - "**Ethereum.org** — Dark theme with minimal UI chrome, white-only typography hierarchy, and large display headlines that dominate the viewport"
    - "**Vercel** — Pure black canvas with high-contrast white type, ultra-thin hairline borders, and pill-shaped controls — same anti-decorative philosophy"
    - "**Linear** — Near-identical typographic restraint: custom geometric sans-serif, aggressively negative letter-spacing at display sizes, dark elevated surfaces defined by background shifts rather than shadows"
    - "**Stripe** — Similar gradient-based hero illustrations that create atmospheric depth without UI noise, and the same compressed weight-300 headline treatment at hero scale"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-black: #000000;
          --color-obsidian: #0d0c11;
          --color-charcoal-press: #121212;
          --color-onyx: #12151d;
          --color-smoke: #050505;
          --color-graphite: #3e3c41;
          --color-ash: #848895;
          --color-fog: #ababba;
          --color-bone-white: #ffffff;
          --color-hairline: #eaecf0;
        
          /* Typography — Font Families */
          --font-diatype: 'Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dsemi: 'DSemi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.56;
          --tracking-body: -0.16px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.18px;
          --text-subheading: 21px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.21px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.48px;
          --text-heading: 36px;
          --leading-heading: 1.22;
          --tracking-heading: -1.08px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1.13;
          --tracking-heading-lg: -2.56px;
          --text-display: 88px;
          --leading-display: 1;
          --tracking-display: -3.52px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-nav: 4px;
          --radius-cards: 12px;
          --radius-badges: 9999px;
          --radius-inputs: 12px;
          --radius-buttons: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.17) 0px 2px 4px 1px, rgba(255, 255, 255, 0.29) 0px -4px 12px 0px inset, rgba(255, 255, 255, 0.4) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px -1px 0px 0px inset;
        
          /* Surfaces */
          --surface-void: #000000;
          --surface-obsidian: #0d0c11;
          --surface-charcoal: #121212;
          --surface-onyx: #12151d;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-black: #000000;
          --color-obsidian: #0d0c11;
          --color-charcoal-press: #121212;
          --color-onyx: #12151d;
          --color-smoke: #050505;
          --color-graphite: #3e3c41;
          --color-ash: #848895;
          --color-fog: #ababba;
          --color-bone-white: #ffffff;
          --color-hairline: #eaecf0;
        
          /* Typography */
          --font-diatype: 'Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dsemi: 'DSemi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.56;
          --tracking-body: -0.16px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.18px;
          --text-subheading: 21px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.21px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.48px;
          --text-heading: 36px;
          --leading-heading: 1.22;
          --tracking-heading: -1.08px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1.13;
          --tracking-heading-lg: -2.56px;
          --text-display: 88px;
          --leading-display: 1;
          --tracking-display: -3.52px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.17) 0px 2px 4px 1px, rgba(255, 255, 255, 0.29) 0px -4px 12px 0px inset, rgba(255, 255, 255, 0.4) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px -1px 0px 0px inset;
        }