spline___style_reference:
  info: "> Glowing Forms in the Void"

  theme: "dark"

  info: "The design feels like a creative void, a deep space canvas where ideas materialize as glowing forms. An absolute black (#000000) background serves as this void, making every piece of content feel like it's emitting light. Hierarchy is achieved not through shadows or solid grays, but through layered translucency — panels and buttons are semi-transparent white overlays, creating a glassmorphism effect. The custom Spline Sans typeface is used universally at normal weights, giving headings a confident but understated presence. A single, energetic Spline Blue (#0062ff) is reserved for primary actions, acting as a focused beacon in the minimalist dark environment."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Black | `#000000` | `--color-void-black` | Global page background, the foundational canvas for all content |"
    info: "| Panel Sheen | `#ffffff` | `--color-panel-sheen` | Card and panel surfaces (CSS var: --color-panel-bg) |"
    info: "| Button Sheen | `#ffffff` | `--color-button-sheen` | Secondary button backgrounds (CSS var: --color-btn-bg) |"
    info: "| Bright White | `#ffffff` | `--color-bright-white` | Headlines, primary text, active icons, logos |"
    info: "| Cloud | `#cccccc` | `--color-cloud` | Secondary body text |"
    info: "| Silver | `#999999` | `--color-silver` | Tertiary text, metadata, placeholder text |"
    info: "| Text Dim | `#ffffff` | `--color-text-dim` | Inactive navigation link text |"
    info: "| Nav Background | `#191a1d` | `--color-nav-background` | Opaque background for navigation bar on scroll |"
    info: "| Spline Blue | `#0062ff` | `--color-spline-blue` | Primary CTA buttons — the single, high-energy action color |"
    info: "| Neon Pink | `#ff5cab` | `--color-neon-pink` | Hero graphic accents and illustrative elements |"
    info: "| Golden Orb | `#ffb01f` | `--color-golden-orb` | Hero graphic accents and illustrative elements |"
    info: "| Violet Haze | `#a770ff` | `--color-violet-haze` | Hero graphic accents and illustrative elements |"
    info: "| Emerald Glow | `#47b35f` | `--color-emerald-glow` | Hero graphic accents and illustrative elements |"
    info: "| Code Orange | `#ce9178` | `--color-code-orange` | Syntax highlighting in code blocks |"
    info: "| Code Green | `#6a9955` | `--color-code-green` | Syntax highlighting in code blocks |"
    info: "| Code Blue | `#569cd6` | `--color-code-blue` | Syntax highlighting in code blocks |"

  tokens___typography:

    spline_sans___the_universal_brand_typeface_for_all_ui_text__from_display_headlines_to_body_copy__its_use_at_normal_weights_400_500_gives_the_design_an_approachable__technical_feel__avoiding_the_aggression_of_heavy__bold_headlines_____font_spline_sans:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 13px, 14px, 16px, 18px, 20px, 24px, 36px, 40px, 58px"
      - "**Line height:** 1.15, 1.22, 1.24, 1.25, 1.33, 1.35, 1.38, 1.43, 1.50, 1.56, 1.71"
      - "**Role:** The universal brand typeface for all UI text, from display headlines to body copy. Its use at normal weights (400/500) gives the design an approachable, technical feel, avoiding the aggression of heavy, bold headlines."

    spline_sans_mono___used_exclusively_for_code_snippets_and_technical_text__providing_clear_differentiation_from_ui_copy_____font_spline_sans_mono:
      - "**Substitute:** IBM Plex Mono"
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.50"
      - "**Role:** Used exclusively for code snippets and technical text, providing clear differentiation from UI copy."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.5 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.35 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 40px | 1.25 | — | `--text-heading` |"
      info: "| display | 58px | 1.22 | — | `--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: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 140 | 140px | `--spacing-140` |"
      info: "| 180 | 180px | `--spacing-180` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| pills | 99px |"
      info: "| buttons | 12px |"
      info: "| smallPanels | 16px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 96px"
      - "**Card padding:** 40px"

  components:

    primary_cta_button:
      role: "The main user call-to-action."

      info: "Solid Spline Blue (#0062ff) background with Bright White (#ffffff) text. Uses a 12px radius and generous padding (16px 24px). Font is Spline Sans 16px weight 500."

    secondary_button:
      role: "Secondary actions, like 'Log in' or alternate CTAs."

      info: "Translucent Button Sheen (rgba(255, 255, 255, 0.15)) background with Bright White (#ffffff) text. Uses a 12px radius and 10px 20px padding."

    navigation_link:
      role: "Links within the main header navigation."

      info: "Ghost button style with a transparent background. Text is Text Dim (rgba(255, 255, 255, 0.7)) and becomes Bright White (#ffffff) on hover/active. No border or radius."

    feature_card:
      role: "Large cards used to detail product features or benefits."

      info: "Large container with a Panel Sheen (rgba(255, 255, 255, 0.08)) background, a 24px border radius, and 40px internal padding. Contains heading and body text."

    header_nav_bar:
      role: "Persistent site navigation."

      info: "A full-width container, initially transparent over the hero and transitioning to a translucent Nav Background (#191a1d) on scroll. Contains the logo, navigation links, and primary/secondary buttons."

    logo_marquee_item:
      role: "Displaying partner or customer logos."

      info: "A simple container with a single monochrome logo in Bright White (#ffffff). No background, border, or shadow."

  do_s_and_don_ts:

    do:
      - "Use Void Black (#000000) as the universal background. Never use solid grays."
      - "Achieve depth and hierarchy using translucent white overlays (e.g., rgba(255,255,255,0.08)), not shadows."
      - "Reserve the vibrant Spline Blue (#0062ff) exclusively for primary call-to-action buttons."
      - "Use a 24px radius for large panels/cards and a 12px radius for buttons."
      - "Set all UI text, including headlines, in Spline Sans at a 400 or 500 font weight."
      - "Maintain generous whitespace between sections (approx. 96px) to let content breathe."
      - "Pair any imagery or illustrative elements with the core accent palette (Neon Pink, Golden Orb, Violet Haze)."

    don_t:
      - "Don't use drop shadows or box shadows for elevation."
      - "Don't introduce new saturated colors for UI elements beyond the primary Spline Blue."
      - "Don't use bold (700+) font weights; rely on size and color for typographic hierarchy."
      - "Don't use fully opaque gray backgrounds for any component."
      - "Don't use inconsistent corner radii; stick to the 12px/24px/pill system."
      - "Don't outline buttons or inputs with solid borders; use translucent fills instead."
      - "Don't place text directly on complex background imagery without a text protection scrim or overlay."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void | `#000000` | Global page background |"
    info: "| 1 | Panel | `#ffffff14` | Base card and large container surfaces |"
    info: "| 2 | Interactive | `#ffffff26` | Secondary buttons and interactive surfaces |"

  elevation:

    info: "Elevation is achieved through layered glassmorphism, not shadows. Surfaces are defined by varying opacities of white (e.g., rgba(255, 255, 255, 0.08) for panels) on the pitch-black #000000 background. This creates a sense of depth through emitted light rather than cast shadow, reinforcing the 'glow in the void' aesthetic."

  imagery:

    info: "The visual language is split between abstract and concrete. The hero features amorphous, glowing 3D shapes that are purely atmospheric, setting a futuristic and creative tone. Below this, the imagery switches to product-focused showcases: a grid of thumbnails displaying user-generated 3D scenes and designs. All imagery serves to demonstrate the tool's capabilities, either by evoking creative possibility (abstract) or showing tangible results (showcase). There is no lifestyle photography; the product and its output are the heroes."

  layout:

    info: "The layout leads with a full-bleed, immersive hero section with centered text over an animated visual background. Subsequent content is contained within a centered, max-width (approx. 1280px) column. The page structure is a simple vertical stack of sections separated by generous whitespace (96px+). Content is often arranged in multi-column grids, such as the 5-column community showcase and the multi-column logo marquee, to display information densely but cleanly."

  agent_prompt_guide:

    quick_color_reference:
      - "**Background**: `Void Black` (#000000)"
      - "**Text**: `Bright White` (#ffffff)"
      - "**Secondary Text**: `Silver` (#999999)"
      - "**Primary CTA**: `Spline Blue` (#0062ff)"
      - "**Card Surface**: `Panel Sheen` (rgba(255, 255, 255, 0.08))"

    example_component_prompts:
      - "**Hero Section**: \"Create a full-screen hero section with a `Void Black` (#000000) background. Add a headline 'The all-in-one platform' in `Spline Sans` at 58px font size, `Bright White` (#ffffff) color, and 400 weight. Below it, add a primary CTA button with the text 'Get started — it’s free'. The button should have a `Spline Blue` (#0062ff) background, `Bright White` text, 12px border-radius, and 16px vertical, 24px horizontal padding.\""
      - "**Community Gallery Card**: \"Create a card with a 16px border-radius and a transparent background. Inside, place an image that fills the width. Below the image, add a title 'Product Design' in `Spline Sans` 14px `Bright White` (#ffffff), and a sub-caption '@username' in `Spline Sans` 13px `Silver` (#999999) prefixed with a small user icon.\""
      - "**Feature Section**: \"Create a content section with 96px top/bottom padding. Inside a 1280px max-width container, create a large feature card with a `Panel Sheen` (rgba(255, 255, 255, 0.08)) background, 24px border-radius, and 40px padding. The card should contain a headline 'Where ideas become production-ready' in `Spline Sans` 40px `Bright White` (#ffffff).\""

  similar_brands:

    - "**Linear** — Precision dark-mode UI with a custom sans-serif font and a single, vibrant accent color for key actions."
    - "**Vercel** — Developer-focused dark theme, emphasis on typography, and a minimalist interface with high-contrast elements."
    - "**Framer** — Creative tool for digital products with a polished dark theme, clean typography, and focus on interactive examples."
    - "**Runway** — AI creative tool with a futuristic dark UI, glowing accents, and emphasis on showcasing generated media."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-black: #000000;
          --color-panel-sheen: #ffffff;
          --color-button-sheen: #ffffff;
          --color-bright-white: #ffffff;
          --color-cloud: #cccccc;
          --color-silver: #999999;
          --color-text-dim: #ffffff;
          --color-nav-background: #191a1d;
          --color-spline-blue: #0062ff;
          --color-neon-pink: #ff5cab;
          --color-golden-orb: #ffb01f;
          --color-violet-haze: #a770ff;
          --color-emerald-glow: #47b35f;
          --color-code-orange: #ce9178;
          --color-code-green: #6a9955;
          --color-code-blue: #569cd6;
        
          /* Typography — Font Families */
          --font-spline-sans: 'Spline Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-spline-sans-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.35;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 40px;
          --leading-heading: 1.25;
          --text-display: 58px;
          --leading-display: 1.22;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* 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-40: 40px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-140: 140px;
          --spacing-180: 180px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 96px;
          --card-padding: 40px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 50px;
          --radius-full-2: 56px;
          --radius-full-3: 99px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-pills: 99px;
          --radius-buttons: 12px;
          --radius-smallpanels: 16px;
        
          /* Surfaces */
          --surface-void: #000000;
          --surface-panel: #ffffff14;
          --surface-interactive: #ffffff26;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-black: #000000;
          --color-panel-sheen: #ffffff;
          --color-button-sheen: #ffffff;
          --color-bright-white: #ffffff;
          --color-cloud: #cccccc;
          --color-silver: #999999;
          --color-text-dim: #ffffff;
          --color-nav-background: #191a1d;
          --color-spline-blue: #0062ff;
          --color-neon-pink: #ff5cab;
          --color-golden-orb: #ffb01f;
          --color-violet-haze: #a770ff;
          --color-emerald-glow: #47b35f;
          --color-code-orange: #ce9178;
          --color-code-green: #6a9955;
          --color-code-blue: #569cd6;
        
          /* Typography */
          --font-spline-sans: 'Spline Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-spline-sans-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.35;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 40px;
          --leading-heading: 1.25;
          --text-display: 58px;
          --leading-display: 1.22;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-140: 140px;
          --spacing-180: 180px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 50px;
          --radius-full-2: 56px;
          --radius-full-3: 99px;
        }