active_theory___style_reference:
  info: "> observatory dome at midnight — a single instrument glowing in void, surrounded by instrument-panel micro-labels"

  theme: "dark"

  active_theory_s_interface_is_an_abyss: "near-total black canvas swallowed by a single luminous 3D artifact, with chrome reduced to whisper-thin uppercase labels and hairline rules. The visual language borrows from architectural drafting and particle physics — a monospaced geometric typeface (nbarchitekt) labels every interface element while a serif (Times) handles the rare body passage, creating tension between technical precision and editorial warmth. UI elements exist at the periphery: a pill-shaped top-right nav connected by a drawn line, a small cookie consent anchored bottom-right. Color is almost entirely achromatic; the sole chromatic note is a desaturated midnight violet used sparingly on the cookie accept affordance, never reaching for hero or marketing prominence. The design system essentially says: the 3D piece IS the interface, and every chrome element should defer to it."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Black | `#000000` | `--color-void-black` | Page canvas, modal backdrops, particle field background |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Primary text, nav labels, button text on dark fills |"
    info: "| Graphite Border | `#4d4d4d` | `--color-graphite-border` | Hairline dividers, faint structural rules |"
    info: "| Steel Border | `#808080` | `--color-steel-border` | Outlined button borders, secondary dividers |"
    info: "| Fog Border | `#999999` | `--color-fog-border` | Tertiary button borders, low-emphasis rules |"
    info: "| Ash Link | `#c6c6c6` | `--color-ash-link` | Muted link color, secondary informational text |"
    info: "| Midnight Violet | `#343755` | `--color-midnight-violet` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"

  tokens___typography:

    nbarchitekt___signature_technical_label_typeface_for_navigation__buttons__and_micro_copy__its_architectural_monospaced_character_gives_the_interface_a_drafting_blueprint_quality___uppercase_10_12px_labels_at_tight_tracking_feel_like_instrument_markings_rather_than_ui_text__substitute__space_mono_or_ibm_plex_mono_for_similar_geometric_technical_character_____font_nbarchitekt:
      - "**Substitute:** Space Mono, IBM Plex Mono"
      - "**Weights:** 400, 700"
      - "**Sizes:** 10, 12, 14"
      - "**Line height:** 1.20, 1.50, 3.00"
      - "**Letter spacing:** normal"
      - "**Role:** Signature technical-label typeface for navigation, buttons, and micro-copy. Its architectural/monospaced character gives the interface a drafting-blueprint quality — uppercase 10–12px labels at tight tracking feel like instrument markings rather than UI text. Substitute: Space Mono or IBM Plex Mono for similar geometric-technical character."

    times___system_serif_used_for_body_passages_and_link_text_at_16px__the_serif_choice_against_an_all_caps_geometric_label_font_creates_a_deliberate_editorial_system_contrast___times_carries_readability__nbarchitekt_carries_identity__substitute__any_system_serif_georgia__times_new_roman_____font_times:
      - "**Substitute:** Georgia, Times New Roman"
      - "**Weights:** 400"
      - "**Sizes:** 16"
      - "**Line height:** 1.20, 1.88"
      - "**Role:** System serif used for body passages and link text at 16px. The serif choice against an all-caps geometric label font creates a deliberate editorial/system contrast — Times carries readability, nbarchitekt carries identity. Substitute: any system serif (Georgia, Times New Roman)."

    arial___button_fallback_at_13px__functions_as_a_system_safety_net_for_nbarchitekt_rendering___same_role__neutral_sans_execution_____font_arial:
      - "**Substitute:** Helvetica, system-ui"
      - "**Weights:** 400"
      - "**Sizes:** 13"
      - "**Line height:** 1.20"
      - "**Role:** Button fallback at 13px. Functions as a system safety net for nbarchitekt rendering — same role, neutral sans execution."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | — | `--text-caption` |"
      info: "| body | 14px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 16px | 1.88 | — | `--text-body-lg` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 28 | 28px | `--spacing-28` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| panels | 12px |"
      info: "| buttons | 5px |"
      info: "| pillButtons | 500px |"

    layout:

      - "**Card padding:** 12-18px"
      - "**Element gap:** 6px"

  components:

    connected_pill_nav:
      role: "Primary site navigation — two labels with a drawn connector line"

      info: "Top-right floating nav. Two nbarchitekt uppercase labels (e.g. 'WORK' and 'CONTACT') at 10–12px, weight 700, white, separated by a 1px white horizontal rule. Container has 500px border-radius forming a capsule. No background fill — the pill shape is implied by the connector line and the label positioning. Padding ~6px vertical, ~13px horizontal."

    outlined_ghost_button:
      role: "Secondary action — cookie reject, optional dismiss"

      info: "Transparent fill, 1px border in #999999 or #808080, 5px radius, nbarchitekt or Arial 13px uppercase text in white. Horizontal padding 18px, vertical padding 1–4px. No fill on hover state in the data; relies on border and text contrast."

    violet_filled_button:
      role: "Cookie-consent accept affordance — the only chromatic button in the system"

      info: "Background #343755 (midnight violet), white text, 5px radius. NBarchitekt or Arial 13px uppercase. Padding ~6px vertical, ~18px horizontal. Functions as a system utility button rather than a marketing CTA — its muted desaturated indigo avoids competing with the 3D centerpiece."

    cookie_consent_panel:
      role: "Bottom-right regulatory overlay"

      info: "Anchored bottom-right at ~20px margin. 12px radius, 1px border in #4d4d4d, black fill matching the canvas (no surface lift — differentiated only by border). Body text in Times 16px white at line-height 1.88, with 'PRIVACY NOTICE' underlined as a link in #c6c6c6. Contains one violet filled button and one outlined ghost button side by side with ~6px gap."

    label_tag:
      role: "Micro-copy for section markers, metadata, instrument labels"

      info: "nbarchitekt 10–12px, weight 400, uppercase, white, tracking normal. Used sparingly to mark UI zones in the same way architectural drawings annotate components. No background, no border — text alone."

    3d_centerpiece:
      role: "Hero visual artifact — the page's actual subject"

      info: "A WebGL/Three.js rendered orb composed of concentric translucent rings with a hexagonal core, emitting amber particle sparks and leaving fluid ribbon trails. Centered on the void canvas, occupying roughly the central third of the viewport. No fixed dimensions — responsive to canvas."

    particle_field:
      role: "Atmospheric background layer behind the centerpiece"

      info: "Sparse amber/orange spark particles (implied by screenshot glow) scattered across the black canvas with low density. Provides depth cues and motion parallax without competing with the centerpiece."

    hairline_divider:
      role: "Structural separation between nav elements, modal edges, and UI regions"

      info: "1px solid line in #4d4d4d or #ffffff. Used to delineate UI zones on the black canvas since fills are suppressed. The drawn connector line in the pill nav is the signature application of this primitive."

    muted_link:
      role: "Inline links within body or consent text"

      info: "Times 16px, #c6c6c6, underlined. Sits within paragraph copy at the same size and line-height as surrounding text. The underlined treatment in #c6c6c6 (not the default link blue) is the signature choice — links feel like editorial annotations, not interactive chrome."

  do_s_and_don_ts:

    do:
      - "Use #000000 as the sole canvas color across all sections — never introduce gray fills, light backgrounds, or surface lifts"
      - "Set all UI labels in nbarchitekt uppercase at 10–14px; reserve Times 16px serif exclusively for paragraph body copy"
      - "Use 1px hairlines in #4d4d4d or #ffffff to delineate UI zones instead of background fills or shadows"
      - "Apply 500px radius only to the connected pill navigation; use 5px radius for all other buttons, 12px for any panel container"
      - "Let the 3D centerpiece own the visual field; position all chrome (nav, modals) in the corners with generous negative space"
      - "Use #343755 midnight violet only for the cookie-consent accept button — never extend it to marketing CTAs, tags, or icons"
      - "Set button padding to 1–6px vertical and 13–18px horizontal — the system favors compact, almost flush controls"

    don_t:
      - "Do not introduce colored backgrounds, gradients, or surface fills — the void-black canvas is non-negotiable"
      - "Do not use shadows or elevation effects to differentiate UI layers; use borders and positioning instead"
      - "Do not use sans-serif system fonts (Inter, Helvetica) for labels — nbarchitekt's architectural character defines the brand"
      - "Do not apply the #343755 violet to any element other than the cookie-consent accept button"
      - "Do not center-align large blocks of body copy or stack text-heavy sections — the site is visual-first, text-sparse"
      - "Do not use more than two typefaces on a single surface (nbarchitekt + Times for body, or nbarchitekt + Arial for buttons)"
      - "Do not add marketing CTAs, pricing tables, or feature grids — this design system serves an immersive portfolio, not a product surface"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void | `#000000` | Full-bleed page canvas, particle field, hero background |"
    info: "| 1 | Instrument Panel | `#000000` | Modal and elevated UI surfaces — same black as canvas, differentiated by thin border, not by fill |"

  elevation:

    info: "Elevation is intentionally absent. The design uses pure flat black (#000000) for both the canvas and modal surfaces, differentiating UI layers only through 1px hairline borders in #4d4d4d and through spatial positioning in the corners. This is a deliberate choice consistent with the void-canvas concept: any shadow or surface lift would imply a 'ground plane' that contradicts the infinite-black aesthetic. Modal and panel containers feel like cutouts in the same darkness, not cards floating above it."

  imagery:

    info: "The site's visual language is dominated by a single WebGL-rendered 3D centerpiece: concentric translucent rings wrapping a hexagonal core, emitting amber particle sparks and leaving fluid ribbon trails. This is the only visual subject — no photography, no illustration, no product screenshots, no decorative graphics. The particle field around it is sparse and atmospheric, not information-dense. The 3D piece sits centered on a pure black void, occupying roughly the central third of the viewport, and functions as both hero and ongoing ambient content. Iconography is minimal or absent; what little UI exists uses text labels in the architectural nbarchitekt typeface rather than iconography. Imagery-to-text ratio is extremely high visual-to-text — the 3D object IS the page."

  layout:

    info: "The layout is a full-bleed immersive canvas with no max-width container. The hero fills the entire viewport as a single dark void centered on the 3D artifact. Chrome is pushed to the absolute corners: the connected pill nav floats top-right with a thin connector line, and the cookie consent anchors bottom-right. There is no grid system, no card layout, no sidebar, no hero-with-columns split. Section rhythm is defined by full-viewport scenes rather than vertical bands — the page reads as a single continuous dark stage. Navigation is minimal and persistent (always-visible top-right). Content density is extremely low: one visual artifact, two nav labels, one consent panel."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #ffffff (primary), #c6c6c6 (muted/links)"
    - "background: #000000 (canvas + panels)"
    - "border: #4d4d4d (hairline), #808080 / #999999 (button borders)"
    - "accent: #343755 (midnight violet — cookie accept only)"
    - "primary action: no distinct CTA color"

  3_5_example_component_prompts:

    - "**Connected Pill Nav**: Top-right floating. Two nbarchitekt 12px weight 700 uppercase white labels ('WORK' and 'CONTACT') connected by a 1px white horizontal line. Container has 500px border-radius, no fill, transparent background. Padding 6px vertical, 13px horizontal."

    - "**Cookie Consent Panel**: Bottom-right anchored at 20px margin. 12px border-radius, 1px #4d4d4d border, #000000 fill, padding 16px. Times 16px white body at line-height 1.88 with 'PRIVACY NOTICE' as underlined #c6c6c6 link. Two buttons: one violet filled (#343755, white text, 5px radius, nbarchitekt 13px) and one outlined ghost (transparent, 1px #999999 border, 5px radius, white text)."

    - "**Outlined Ghost Button**: Transparent fill, 1px #999999 border, 5px border-radius, Arial or nbarchitekt 13px white uppercase text, padding 4px vertical and 18px horizontal."

    - "**Muted Inline Link**: Times 16px, #c6c6c6, underlined, sitting inline within a Times 16px white body paragraph at line-height 1.88."

    - "**Label Tag**: nbarchitekt 10px weight 400 uppercase white, no background, no border, used as a standalone section marker with 6px margin to surrounding elements."

  similar_brands:

    - "**Resn** — Same dark immersive canvas with a single WebGL artifact as the visual subject, chrome pushed to corners, minimal text"
    - "**Locomotive** — Dark-mode creative agency sites with full-bleed visual showcases and sparse instrument-panel UI typography"
    - "**Tool** — Abyss-black canvas with a luminous 3D centerpiece, uppercase technical labels, and almost no conventional page chrome"
    - "**Unit9** — Immersive agency aesthetic with single dark scene, particle atmosphere, and nav reduced to thin text + hairline"
    - "**Active Theory (peers like Very Rare Surrounding)** — Architectural-drafting micro-labels on void backgrounds with WebGL 3D as the page's primary content"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-black: #000000;
          --color-pure-white: #ffffff;
          --color-graphite-border: #4d4d4d;
          --color-steel-border: #808080;
          --color-fog-border: #999999;
          --color-ash-link: #c6c6c6;
          --color-midnight-violet: #343755;
        
          /* Typography — Font Families */
          --font-nbarchitekt: 'nbarchitekt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-body-lg: 16px;
          --leading-body-lg: 1.88;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-28: 28px;
        
          /* Layout */
          --card-padding: 12-18px;
          --element-gap: 6px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-xl: 12px;
          --radius-full: 500px;
        
          /* Named Radii */
          --radius-panels: 12px;
          --radius-buttons: 5px;
          --radius-pillbuttons: 500px;
        
          /* Surfaces */
          --surface-void: #000000;
          --surface-instrument-panel: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-black: #000000;
          --color-pure-white: #ffffff;
          --color-graphite-border: #4d4d4d;
          --color-steel-border: #808080;
          --color-fog-border: #999999;
          --color-ash-link: #c6c6c6;
          --color-midnight-violet: #343755;
        
          /* Typography */
          --font-nbarchitekt: 'nbarchitekt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-body-lg: 16px;
          --leading-body-lg: 1.88;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-28: 28px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-xl: 12px;
          --radius-full: 500px;
        }