atoms___style_reference:
  info: "> obsidian monolith in candlelight — a near-black canvas where a single warm champagne accent cuts like a blade through the darkness"

  theme: "dark"

  info: "Atoms operates in a near-total monochrome discipline: pure black canvases carry warm cream type and a single champagne accent. The system avoids color as decoration and instead uses a tight chromatic scale — cream for text, gold for emphasis, black for depth — to create an atmosphere of industrial precision, like machined titanium under tungsten light. Layout is compact, typographic, and grid-driven: large geometric logo marks, centered headline stacks, and dark bordered cards that hold company information with minimal chrome. Components are flat, low-contrast, and rely on hairline borders rather than shadows for definition. Motion is implied through structure rather than animation; every element reads as placed, not animated."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Champagne Gold | `#c8ad86` | `--color-champagne-gold` | Accent headings, category tags, decorative borders — the only chromatic color in the system, used sparingly to mark emphasis and brand-bearing elements |"
    info: "| Candlelight Cream | `#fff7dd` | `--color-candlelight-cream` | Primary text, hairline borders, icon strokes — warm off-white reads softer than pure white against the black canvas |"
    info: "| Obsidian Black | `#000000` | `--color-obsidian-black` | Page canvas, card surfaces, image backgrounds — absolute black dominates the visual field |"
    info: "| Ember Ash | `#66635f` | `--color-ember-ash` | Muted surface variation, secondary backgrounds, low-emphasis fills |"

  tokens___typography:

    switzer___primary_typeface_for_all_headings__body__and_navigation___a_geometric_sans_with_unusually_tight_tracking_on_display_sizes__0_042em_at_44px_that_creates_a_precision_engineered_feel__weight_400_for_body__500_for_labels_and_tags__the_negative_letter_spacing_on_the_44px_headline_tightens_the_word_shapes_into_compact__machined_forms_____font_switzer:
      - "**Substitute:** Inter, General Sans, Satoshi"
      - "**Weights:** 400, 500"
      - "**Sizes:** 10px, 12px, 14px, 16px, 44px"
      - "**Line height:** 1.00–1.13"
      - "**Letter spacing:** -1.85px at 44px, -0.5px at 16px, 0.18px at 10px"
      - "**Role:** Primary typeface for all headings, body, and navigation — a geometric sans with unusually tight tracking on display sizes (-0.042em at 44px) that creates a precision-engineered feel. Weight 400 for body, 500 for labels and tags. The negative letter-spacing on the 44px headline tightens the word shapes into compact, machined forms."

    system_ui_sans_serif___fallback___system_rendering_for_micro_ui_and_link_text____font_system_ui_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.20"
      - "**Role:** Fallback / system rendering for micro-UI and link text"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | 0.18px | `--text-caption` |"
      info: "| body | 14px | 1.4 | — | `--text-body` |"
      info: "| heading | 44px | 1.13 | -1.85px | `--text-heading` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 100px |"
      info: "| cards | 4px |"
      info: "| buttons | 4px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 32px"
      - "**Element gap:** 8-16px"

  components:

    hero_logo_mosaic:
      role: "Full-bleed brand mark"

      info: "Large geometric/pixelated logo mark centered in the viewport, composed of square tile elements in #c8ad86 with a slightly desaturated, metallic texture. Occupies roughly 40% of the hero viewport height. No background — sits directly on black canvas."

    hero_headline:
      role: "Primary statement type"

      info: "44px Switzer weight 400, color #fff7dd, letter-spacing -1.85px, line-height 1.13. Center-aligned, max-width ~600px. Sentence flows across 3 lines with natural breaks. No color emphasis on individual words."

    ghost_text_link:
      role: "Navigation cue to secondary content"

      info: "Small body-sm text in #fff7dd with an inline arrow glyph (→). No underline, no button chrome. Hover state shifts to #c8ad86. 12px Switzer 400."

    top_navigation_bar:
      role: "Global site navigation"

      info: "Full-width black bar with 36px vertical padding, 40px horizontal padding. Left:"

    company_card:
      role: "Portfolio/company grid item"

      info: "3-column grid card on #000000 background with 1px border in #fff7dd at ~20% opacity (or #c8ad86). 4px border-radius. Padding 32px. Contains: logo area (centered, ~120px tall), company name (14px Switzer 500 #fff7dd), category tag (pill), description (12px #fff7dd 70% opacity), footer links row separated by 2px gaps."

    category_tag_pill:
      role: "Industry/sector label"

      info: "100px border-radius (fully rounded). 1px border in #c8ad86, transparent fill. Text: 10px Switzer 500, color #c8ad86, letter-spacing 0.18px. Padding 4px 10px. Renders as outlined pill."

    company_logo_tile:
      role: "Brand mark display within card"

      info: "Large area (full card width, ~200px tall) with centered logo. Logo rendered in #fff7dd or #c8ad86. No background fill — logo floats on card surface."

    card_footer_link_row:
      role: "External resource links"

      info: "Horizontal row of links ("

    section_header:
      role: "Content section title"

      info: "Large Switzer heading, left-aligned, color #fff7dd. Often overlaps with sticky nav on scroll — uses blend or z-index layering."

    arrow_glyph:
      role: "Directional/link indicator"

      info: "Simple rightward arrow (→) rendered inline with text. 12-14px, inherits text color. Used on ghost links and card footer links."

  do_s_and_don_ts:

    do:
      - "Use #fff7dd for all primary text and hairline borders on black surfaces"
      - "Reserve #c8ad86 exclusively for category tags, accent headings, and decorative borders — never as a full-surface fill"
      - "Apply Switzer with tight negative letter-spacing on all display sizes: -1.85px at 44px, -0.13px at 16px"
      - "Set border-radius to 4px on cards and buttons, 100px on tags and pills only"
      - "Separate cards and sections with 1px hairline borders, never with shadows or background fills"
      - "Keep vertical rhythm tight: 8-16px between related elements, 80px between major sections"
      - "Render all icons and arrows in #fff7dd or #c8ad86 — never introduce additional colors"

    don_t:
      - "Do not use shadows, glows, or blur effects for elevation — define surfaces with borders only"
      - "Do not introduce saturated colors beyond the champagne accent — no blues, greens, or reds"
      - "Do not use pure white (#ffffff) for text — #fff7dd is warmer and on-brand"
      - "Do not add background fills to cards or sections — they sit directly on the black canvas"
      - "Do not use large border-radius values on cards (no 12px, 16px, 24px) — stay at 4px max for rectangles"
      - "Do not apply letter-spacing to body text — keep tracking tight only on 16px+ sizes"
      - "Do not animate color, position, or scale on load — the system is static and placed, not kinetic"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#000000` | Full-bleed page background |"
    info: "| 1 | Card | `#000000` | Company card surface — same as canvas, defined by 1px hairline border |"
    info: "| 2 | Muted Surface | `#66635f` | Subtle background variation for nav or secondary zones |"

  elevation:

    info: "Elevation is achieved through hairline borders and value contrast, never through shadows. Cards sit on the same black canvas, separated only by 1px borders in #fff7dd or #c8ad86. This flat, shadowless approach reinforces the precision-machined, industrial aesthetic — surfaces feel cut from the same material, not stacked."

  imagery:

    info: "Imagery is minimal and structural rather than photographic. The hero features a large geometric/pixelated logo mark composed of square tiles in a metallic champagne tone with subtle texture, functioning as a brand artifact rather than illustration. Company cards contain flat logo marks (wordmarks, monograms, symbol logos) rendered in #fff7dd or #c8ad86 on the card surface. No photography, no lifestyle imagery, no product renders. The visual language is closer to a brand identity guideline than a marketing page — every visual element is logo, type, or geometric form."

  layout:

    info: "Full-bleed dark canvas with centered, max-width 1200px content zones. The hero is a vertical stack: large geometric logo mark, followed by a centered 3-line headline at 44px, followed by a single ghost text link. Navigation is a fixed top bar with the wordmark left and 3 links right. The companies section is a 3-column card grid with consistent card dimensions, each card containing a logo area, name, category tag, description, and external links. Vertical spacing between sections is generous (80px) while spacing within cards is compact (8-16px). Content is always centered or left-aligned — no asymmetric or overlapping layouts."

  agent_prompt_guide:

  quick_color_reference_n__background__000000_n__primary_text__fff7dd_n__accent___emphasis__c8ad86_n__muted_surface__66635f_n__border__fff7dd_at_20_30__opacity__or_c8ad86_for_accent_borders_n__primary_action__no_distinct_cta_color:

  similar_brands:

    - "**Figure AI** — Same near-monochrome dark aesthetic with single warm accent and tight geometric typography for a physical AI/robotics brand"
    - "**Physical Intelligence** — Identical restraint — black canvas, cream type, no decorative imagery, structural logo-forward hero"
    - "**Rivian (early site)** — Premium industrial brand language: absolute black backgrounds, warm off-white text, hairline borders, no shadows"
    - "**VanMoof** — Compact typographic system on dark canvas with single accent and centered headline stacks"
    - "**Nothing (nothing.tech)** — Geometric logo-as-hero treatment and dot-matrix / tile-based visual identity on pure black"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-champagne-gold: #c8ad86;
          --color-candlelight-cream: #fff7dd;
          --color-obsidian-black: #000000;
          --color-ember-ash: #66635f;
        
          /* Typography — Font Families */
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-ui-sans-serif: 'system-ui sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: 0.18px;
          --text-body: 14px;
          --leading-body: 1.4;
          --text-heading: 44px;
          --leading-heading: 1.13;
          --tracking-heading: -1.85px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 32px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-tags: 100px;
          --radius-cards: 4px;
          --radius-buttons: 4px;
        
          /* Surfaces */
          --surface-canvas: #000000;
          --surface-card: #000000;
          --surface-muted-surface: #66635f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-champagne-gold: #c8ad86;
          --color-candlelight-cream: #fff7dd;
          --color-obsidian-black: #000000;
          --color-ember-ash: #66635f;
        
          /* Typography */
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-ui-sans-serif: 'system-ui sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: 0.18px;
          --text-body: 14px;
          --leading-body: 1.4;
          --text-heading: 44px;
          --leading-heading: 1.13;
          --tracking-heading: -1.85px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 100px;
        }