thoughtlab___style_reference:
  info: "> crimson flare in obsidian dark"

  theme: "dark"

  info: "ThoughtLab operates in cinematic darkness where a single vivid red mark cuts through near-black silence. Typography is architectural and oversized — 198px display headlines with extreme negative tracking create editorial drama, while body copy stays compact at 15-17px with generous leading. The interface strips away everything nonessential: pill-shaped CTAs, hairline borders, and vast negative space let the messaging and the one red accent command full attention. The iridescent 3D orb hero is the only ornament in an otherwise weightless void where every other element recedes into shadow."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Red | `#fc1c46` | `--color-signal-red` | Primary action buttons, active states, brand mark accent — the sole chromatic note in a monochrome void, making every tap feel deliberate |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Display headlines, button text, high-contrast labels — the brightest text tier, reserved for the loudest statements |"
    info: "| Ash | `#cccccc` | `--color-ash` | Body text, secondary headlines, subtle hairline borders — the workhorse gray that carries most readable content across the dark canvas |"
    info: "| Graphite | `#4c4c4c` | `--color-graphite` | Muted metadata, inactive controls, tertiary borders — recedes into the background when focus should be elsewhere |"
    info: "| Void | `#000000` | `--color-void` | Deepest background areas, icon fills, stark dividers — the absolute dark that anchors the layout |"

  tokens___typography:

    sui___sole_typeface_for_the_entire_system__weight_300_used_at_massive_scale_198px_for_hero_display_creates_editorial_drama_without_weight___the_whisper_quiet_large_headline_is_a_signature_anti_convention_choice__weight_400_handles_body_at_a_compact_15_17px__weight_500_700_reserved_for_navigation_and_button_text__extreme_negative_tracking__0_067em_at_display_tightens_oversized_letterforms_so_headlines_read_as_sculptural_shapes_rather_than_loose_word_clouds_____font_sui:
      - "**Substitute:** Söhne / Suisse Int'l / Inter"
      - "**Weights:** 300, 400, 500, 700"
      - "**Sizes:** 10, 14, 15, 17, 18, 27, 72, 91, 198"
      - "**Line height:** 0.92, 0.96, 1.00, 1.10, 1.15, 1.20, 1.25, 1.50, 2.14"
      - "**Letter spacing:** -0.067em at 198px (-13.27px), -0.020em at 72px (-1.44px), -0.009em at 27px (-0.24px), normal at body sizes"
      - "**Role:** Sole typeface for the entire system. Weight 300 used at massive scale (198px) for hero display creates editorial drama without weight — the whisper-quiet large headline is a signature anti-convention choice. Weight 400 handles body at a compact 15-17px. Weight 500-700 reserved for navigation and button text. Extreme negative tracking (-0.067em at display) tightens oversized letterforms so headlines read as sculptural shapes rather than loose word clouds."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| micro | 10px | 2.14 | — | `--text-micro` |"
      info: "| caption | 14px | 1.2 | — | `--text-caption` |"
      info: "| subheading | 18px | 1.2 | — | `--text-subheading` |"
      info: "| heading-sm | 27px | 1.15 | -0.24px | `--text-heading-sm` |"
      info: "| heading | 72px | 1 | -1.44px | `--text-heading` |"
      info: "| heading-lg | 91px | 0.96 | — | `--text-heading-lg` |"
      info: "| display | 198px | 0.92 | -13.27px | `--text-display` |"

  tokens___spacing___shapes:

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 29 | 29px | `--spacing-29` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 43 | 43px | `--spacing-43` |"
      info: "| 65 | 65px | `--spacing-65` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 86 | 86px | `--spacing-86` |"
      info: "| 108 | 108px | `--spacing-108` |"
      info: "| 126 | 126px | `--spacing-126` |"
      info: "| 180 | 180px | `--spacing-180` |"
      info: "| 198 | 198px | `--spacing-198` |"
      info: "| 216 | 216px | `--spacing-216` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 9999px |"

    layout:

      - "**Section gap:** 86-108px"
      - "**Card padding:** 22px"
      - "**Element gap:** 9px"

  components:

    signal_cta_button:
      role: "Primary action trigger"

      info: "Pill-shaped filled button, 9999px border-radius, #fc1c46 background, #ffffff text at 14-15px weight 500, 9px 22px padding. The only chromatic UI element — its red isolation against pure black makes it impossible to miss. Vertically centered text, no border, no shadow."

    ghost_menu_trigger:
      role: "Navigation expansion"

      info: "Minimal icon-only button with 2px stroke hamburger icon in #ffffff, no background, no border. Positioned at far right of the header bar. 9px padding, square hit area."

    wordmark_lockup:
      role: "Brand identity in header"

      info: "Small red geometric mark (3-4px accent) adjacent to 'THOUGHTLAB®' wordmark in #ffffff, weight 500, 15px. The red mark echoes the CTA color, creating a visual thread from brand to action."

    centered_tagline_bar:
      role: "Header sub-label"

      info: "Single-line descriptor in #cccccc weight 400, 14px, centered horizontally. Sets studio context without competing with the brand mark or CTA. 1.20 line-height."

    display_headline:
      role: "Hero and section titles"

      info: "Sui weight 300 at 91-198px, #ffffff, letter-spacing -0.067em to -0.02em, line-height 0.92-1.00. All-caps treatment for maximum editorial impact. Left-aligned, allowed to break across 3-4 lines. This is the system's signature element — oversized, weightless, architectural."

    hero_subtext:
      role: "Supporting description"

      info: "Body copy in #cccccc, 17px, weight 400, line-height 1.50. Max-width constrained to ~520px for readability. Sits directly below the display headline with 29px margin-top."

    scroll_indicator:
      role: "Scroll affordance"

      info: "(SCROLL) micro-label in #cccccc, 10px, weight 400, line-height 2.14, centered at page bottom. Bracketed uppercase styling is signature — no arrow or icon, just typographic instruction."

    iridescent_orb_visual:
      role: "Hero centerpiece"

      info: "Abstract 3D-rendered dark glass sphere with iridescent chromatic edge (blue/violet/red refraction). Centered-right in the hero, overlapping behind text. Full-bleed scale, no border or frame. The only imagery in the system."

    hairline_divider:
      role: "Section separation"

      info: "1px solid #cccccc or #4c4c4c horizontal rule, full-width or 126px horizontal margins. No padding, no decoration — just a line cutting through darkness."

  do_s_and_don_ts:

    do:
      - "Use 9999px border-radius exclusively for interactive elements (buttons, tags, pills) — the pill shape is the only curvature in the system"
      - "Set hero display headlines at 91-198px in weight 300 with letter-spacing -0.067em — whisper-weight at massive scale is the signature"
      - "Reserve #fc1c46 for exactly one element per viewport — the CTA, active state, or brand mark accent. Never use red for body content or secondary actions"
      - "Maintain body text at 15-17px with line-height 1.50 in #cccccc — compact but breathable, never smaller than 14px for content"
      - "Use 86-108px vertical gaps between major sections — the spaciousness is load-bearing for the cinematic dark feel"
      - "Let headlines left-align and break naturally across multiple lines — never force a single-line headline or use text-align: center for body content"
      - "Keep all surfaces flat — no shadows, no gradients, no glass effects on UI chrome. The 3D orb is the only dimensional element"

    don_t:
      - "Never use a border-radius between 0 and 9999px on buttons or interactive elements — the system is binary: pill or sharp"
      - "Never apply color to body copy other than #cccccc or #ffffff — all chromatic information should be functional (CTA, status, brand mark)"
      - "Never set display headlines below 72px or use weight 500-700 for hero text — the whisper-weight-at-scale is non-negotiable"
      - "Never add card shadows or elevation effects — depth comes from the 3D orb visual and tonal surface shifts, not box-shadow"
      - "Never use more than one red element per screen — diluting the signal red destroys the accent strategy"
      - "Never justify body text or use tight line-heights below 1.20 for copy under 18px — the spacious leading is what makes dark mode readable"
      - "Never add decorative icons, illustrations, or background patterns — the void is the design; if the layout feels empty, add more whitespace, not ornament"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Obsidian Canvas | `#0a0a0a` | Primary page background — near-black surface that swallows everything except lit content |"
    info: "| 2 | Carbon Panel | `#1a1a1a` | Elevated card and section surfaces — barely lighter than the canvas, separation through whisper-quiet tonal shift |"
    info: "| 3 | Smoke Overlay | `#2a2a2a` | Modal and overlay surfaces — the lightest dark tier for elements that must float above the page |"

  elevation:

    info: "The system intentionally uses zero shadows. Depth is communicated through three mechanisms: (1) the 3D orb hero visual is the only dimensional element, (2) surface tonal shifts (3 dark tiers from #0a0a0a to #2a2a2a) separate content layers, and (3) overlap between text and the orb creates spatial tension. This shadowless approach keeps the dark mode feeling weightless and editorial rather than skeuomorphic."

  imagery:

    info: "The system is 99% typographic with a single 3D-rendered abstract orb as the hero visual. The orb is a dark glass sphere with iridescent chromatic edge refraction (blue/violet/red light leaks on the rim), rendered against pure black. No photography, no flat illustrations, no icons beyond minimal navigation glyphs. The 3D object occupies full-bleed scale and overlaps behind headline text, creating depth without requiring elevation on UI surfaces. The treatment is product-showcase quality — the object IS the hero, presented like a luxury product render on a black velvet stage."

  layout:

    info: "Full-bleed dark canvas with no max-width constraint — content breathes to the viewport edges. The header is a single horizontal row: wordmark left, centered tagline, CTA right, menu trigger far-right, with generous 126px horizontal padding. Hero composition is left-aligned display headline with a centered 3D orb overlapping behind/right of the text — a split-composition that uses overlap rather than rigid columns. Sections are separated by 86-108px vertical gaps with optional hairline dividers. No card grids, no multi-column layouts visible in the hero — the system is single-column editorial, letting typography own the page. Navigation is minimal: no mega-menu, no sidebar, no sticky header visible."

  agent_prompt_guide:

    quick_color_reference:
    - "Text (primary): #ffffff"
    - "Text (secondary): #cccccc"
    - "Background (canvas): #0a0a0a"
    - "Border (hairline): #4c4c4c"
    - "Accent (brand mark): #fc1c46"
    - "primary action: #fc1c46 (filled action)"

    3_5_example_component_prompts:

    - "Create a hero section: #0a0a0a full-bleed background. Display headline 'BECOME A CATEGORY OF ONE' in sui weight 300 at 198px, #ffffff, letter-spacing -13.27px, line-height 0.92, left-aligned, all-caps, 126px left padding. Subtext at 17px weight 400, #cccccc, line-height 1.50, 29px margin-top, max-width 520px."

    - "Create a primary action button: #fc1c46 background, #ffffff text, 14px sui weight 500, 9999px border-radius, 9px 22px padding, no border, no shadow. Text uppercase, letter-spacing normal. Padding 7px top/bottom inside."

    - "Create a Primary Action Button: #fc1c46 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "Create a scroll indicator: '(SCROLL)' text in #cccccc, 10px, weight 400, line-height 2.14, centered horizontally, 86px from bottom. Bracketed uppercase, no icon or arrow."

    - "Create a hairline divider: 1px solid #4c4c4c, full-width or 126px horizontal margins, no vertical padding, no decoration."

  similar_brands:

    - "**Active Theory** — Same cinematic dark-canvas approach with a single chromatic accent and oversized editorial typography dominating the hero"
    - "**Ueno** — Agency portfolio with whisper-weight display headlines at extreme scale, dark mode, minimal UI chrome, and generous negative space"
    - "**Resn** — Experimental creative studio using 3D abstract visuals as hero centerpieces against near-black backgrounds with single-color accents"
    - "**Locomotive** — Dark-mode agency site with left-aligned architectural headlines, pill-shaped CTAs, and hairline borders"
    - "**Ramotion** — Minimal dark portfolio aesthetic with flat surfaces, no shadows, and typographic hierarchy carrying the visual weight"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-red: #fc1c46;
          --color-pure-white: #ffffff;
          --color-ash: #cccccc;
          --color-graphite: #4c4c4c;
          --color-void: #000000;
        
          /* Typography — Font Families */
          --font-sui: 'sui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 10px;
          --leading-micro: 2.14;
          --text-caption: 14px;
          --leading-caption: 1.2;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --text-heading-sm: 27px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: -0.24px;
          --text-heading: 72px;
          --leading-heading: 1;
          --tracking-heading: -1.44px;
          --text-heading-lg: 91px;
          --leading-heading-lg: 0.96;
          --text-display: 198px;
          --leading-display: 0.92;
          --tracking-display: -13.27px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-7: 7px;
          --spacing-9: 9px;
          --spacing-22: 22px;
          --spacing-29: 29px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-43: 43px;
          --spacing-65: 65px;
          --spacing-72: 72px;
          --spacing-86: 86px;
          --spacing-108: 108px;
          --spacing-126: 126px;
          --spacing-180: 180px;
          --spacing-198: 198px;
          --spacing-216: 216px;
        
          /* Layout */
          --section-gap: 86-108px;
          --card-padding: 22px;
          --element-gap: 9px;
        
          /* Border Radius */
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-obsidian-canvas: #0a0a0a;
          --surface-carbon-panel: #1a1a1a;
          --surface-smoke-overlay: #2a2a2a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-red: #fc1c46;
          --color-pure-white: #ffffff;
          --color-ash: #cccccc;
          --color-graphite: #4c4c4c;
          --color-void: #000000;
        
          /* Typography */
          --font-sui: 'sui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 10px;
          --leading-micro: 2.14;
          --text-caption: 14px;
          --leading-caption: 1.2;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --text-heading-sm: 27px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: -0.24px;
          --text-heading: 72px;
          --leading-heading: 1;
          --tracking-heading: -1.44px;
          --text-heading-lg: 91px;
          --leading-heading-lg: 0.96;
          --text-display: 198px;
          --leading-display: 0.92;
          --tracking-display: -13.27px;
        
          /* Spacing */
          --spacing-7: 7px;
          --spacing-9: 9px;
          --spacing-22: 22px;
          --spacing-29: 29px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-43: 43px;
          --spacing-65: 65px;
          --spacing-72: 72px;
          --spacing-86: 86px;
          --spacing-108: 108px;
          --spacing-126: 126px;
          --spacing-180: 180px;
          --spacing-198: 198px;
          --spacing-216: 216px;
        
          /* Border Radius */
          --radius-full: 9999px;
        }