pipe___style_reference:
  info: "> midnight darkroom with one ember"

  theme: "dark"

  info: "Pipe runs on a midnight editorial language: pitch-black canvas, a single warm orange brand accent, and one large-format photograph anchoring each section. The system is deliberately sparse — only one chromatic color in the entire palette, used sparingly as a switch-on signal for action and brand identity. Typography is a single-family geometric grotesque at one weight (400) doing all the work, with display sizes set at extremely tight line-heights (0.70) to feel sculpted rather than typeset. Surfaces are flat with no shadows; elevation is communicated through the single half-step from #000000 to #1a1a1a. Components are small, light, and bordered rather than filled — orange appears only when something must be acted upon. The overall effect is a darkroom where a single ember glows against graphite."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ember | `#e2572c` | `--color-ember` | Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Page canvas, full-bleed backgrounds, image surrounds |"
    info: "| Graphite | `#1a1a1a` | `--color-graphite` | Card surfaces, elevated panels, the one step up from canvas |"
    info: "| Steel | `#808080` | `--color-steel` | Muted body text, secondary labels, inactive UI — sits at AA contrast against Obsidian |"
    info: "| Fog | `#f5f5f5` | `--color-fog` | Hairline borders on dark cards, light surface alternates if used |"
    info: "| Snow | `#ffffff` | `--color-snow` | Primary text and headings on dark, inverse text on light cards |"

  tokens___typography:

    suisse___the_only_typeface__single_weight_400_used_for_everything_from_10px_micro_labels_to_80px_display_headlines__the_signature_move_is_the_display_at_80px_with_a_0_70_line_height___headlines_feel_carved_rather_than_set__tracking_is_tight_at_display__0_0070em_and_slightly_open__0_0060em_at_caption_sizes_for_legibility_____font_suisse:
      - "**Substitute:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 10, 12, 13, 14, 16, 20, 24, 32, 80"
      - "**Line height:** 0.70, 1.10, 1.24, 1.25, 1.33, 1.37, 1.40, 1.42, 1.43, 1.50, 1.63, 1.90"
      - "**Letter spacing:** -0.0070em at display (80px), +0.0060em at caption (10-14px)"
      - "**OpenType features:** `\"kern\"`"
      - "**Role:** The only typeface. Single weight (400) used for everything from 10px micro-labels to 80px display headlines. The signature move is the display at 80px with a 0.70 line-height — headlines feel carved rather than set. Tracking is tight at display (-0.0070em) and slightly open (+0.0060em) at caption sizes for legibility."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.5 | 0.06px | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.25 | — | `--text-heading` |"
      info: "| display | 80px | 0.7 | -0.56px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 16px |"
      info: "| pills | 9999px |"
      info: "| images | 16px |"
      info: "| buttons | 8px |"

    layout:

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

  components:

    primary_cta_button_ember:
      role: "Filled orange button for the single most important action on a page (e.g. 'Book a demo')"

      info: "Background #e2572c, text #ffffff, border-radius 8px, padding 16px 24px, Suisse 400 16px, no shadow. The only filled button in the system."

    ghost_text_link:
      role: "Inline and navigation links in body or header"

      info: "No background, no border. Text color #ffffff or #e2572c when active. 16px Suisse 400. The 'Demo' nav link uses #e2572c color as an active state marker."

    navigation_header:
      role: "Top-level site navigation"

      info: "Transparent or #000000 background, no border. Logo left, nav items centered or left-aligned at 13-14px Suisse 400 in #ffffff, 'Sign in' as ghost link and 'Demo' as orange text link on the right. Vertical padding ~24px."

    hero_photograph_panel:
      role: "Full-bleed image anchoring the hero section"

      info: "Large editorial photograph at 16px border-radius, occupying roughly the right half of the viewport. No overlay, no border. Photographs carry the visual weight that color and illustration don't."

    graphite_card:
      role: "Content card on dark canvas"

      info: "Background #1a1a1a, optional 1px Fog #f5f5f5 border, 16px border-radius, padding 32-48px. Text inside is #ffffff for headings, #808080 for body."

    image_card:
      role: "Card pairing a photograph with a caption or label"

      info: "16px border-radius on the image, caption below in 13-14px Suisse 400 #808080. No card background — sits directly on the Obsidian canvas."

    pill_tag:
      role: "Category labels, status indicators"

      info: "9999px border-radius, 1px hairline border in #808080 or #f5f5f5, transparent background, 12-13px Suisse 400 text in #808080, padding 4px 12px."

    footer:
      role: "Site footer"

      info: "Obsidian #000000 background, columns of ghost text links in #808080 at 13px Suisse 400, logo and brand mark in #ffffff."

    hero_headline_block:
      role: "Left-aligned hero text block with brand-color emphasis word"

      info: "Display text at 80px Suisse 400, line-height 0.70, letter-spacing -0.56px. The lead word ('Pipe') colored #e2572c; remaining text #ffffff. Subhead at 16-20px in #808080 below. Generous left padding matching the image edge."

    ghost_outline_button:
      role: "Secondary action where the primary CTA already exists"

      info: "1px border in #808080, transparent background, #ffffff text, 8px border-radius, 16px 24px padding. Rarer than the primary — used when a page needs two actions."

  do_s_and_don_ts:

    do:
      - "Use #e2572c Ember exclusively for primary action backgrounds and the single brand-emphasis word in a headline — never for body text, borders, or decoration"
      - "Set display headlines at 80px with line-height 0.70 and letter-spacing -0.56px to achieve the sculpted, carved look"
      - "Communicate elevation through the #000000 → #1a1a1a surface step and hairline Fog borders, never with box-shadows"
      - "Use 16px radius for cards and images, 8px for buttons, 9999px only for pill tags"
      - "Apply the +0.0060em tracking on any text 14px or smaller for legibility on dark backgrounds"
      - "Anchor every hero section with a full-bleed editorial photograph at 16px radius — let imagery carry visual weight that color and illustration don't"
      - "Keep section gaps between 64-80px to maintain the comfortable, editorial rhythm"

    don_t:
      - "Don't introduce a second chromatic color — the single-accent system is the brand's signature restraint"
      - "Don't use box-shadows on any component; elevation is surface-tone only"
      - "Don't set display text at line-height above 1.0 — the 0.70 tight setting is what makes headlines feel carved"
      - "Don't use more than one font weight (400) — bolding is not available; use size and color contrast instead"
      - "Don't fill buttons with neutral colors (#ffffff or #1a1a1a) as primary actions — Ember is the only CTA fill"
      - "Don't use #808080 for interactive text on #1a1a1a — the contrast falls below AA at smaller sizes; reserve Steel for non-interactive muted labels on #000000"
      - "Don't center-align body text or headlines; the system is left-aligned throughout"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#000000` | Full-bleed page background, image surrounds, dark bands |"
    info: "| 1 | Card | `#1a1a1a` | Elevated panels, bordered cards, content blocks |"
    info: "| 2 | Light Surface | `#f5f5f5` | Rare light alternates, image cards on light sections |"

  elevation:

    info: "No shadows. Elevation is communicated exclusively through the half-step surface change from Obsidian #000000 to Graphite #1a1a1a, plus hairline Fog #f5f5f5 borders. The flatness is deliberate — the darkroom aesthetic rejects ambient occlusion in favor of stark layering."

  imagery:

    info: "Photography is the primary visual language. Full-bleed editorial photographs anchor hero sections and major content blocks — warm-toned, documentary-style imagery of people in real working environments (phones, laptops, workspace objects). Photographs are treated at 16px border-radius with no overlay or filter, sitting directly on the Obsidian canvas. No illustrations, no 3D renders, no abstract graphics. The image-to-text ratio is high on hero sections (~50/50 split) and drops on content sections. Icons are minimal and not a primary visual element. The overall effect is editorial/magazine rather than product-screenshot-driven."

  layout:

    info: "Full-bleed dark canvas with content max-width ~1280px centered. The hero pattern is a split composition: left half holds the headline block + CTA, right half holds a large editorial photograph. Navigation is a minimal top bar (transparent on Obsidian) with logo left, nav center, account links right — no sticky behavior apparent, no mega-menu. Below the hero, sections alternate as full-width bands on Obsidian with generous 64-80px vertical gaps. Content blocks within sections are typically 2-column (text + image) or 3-column card grids. No sidebar. No centered stacked layouts — everything is left-aligned. The rhythm is spacious and editorial, with breathing room between sections rather than compact information density."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ffffff"
    - "background: #000000"
    - "border: #f5f5f5"
    - "accent: #e2572c"
    - "muted text: #808080"
    - "card surface: #1a1a1a"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "Create a content card on dark canvas: #1a1a1a Graphite background, 1px hairline #f5f5f5 Fog border, 16px border-radius, 32px padding. Heading at 24px Suisse 400 in #ffffff. Body at 16px in #808080. No shadow."

    - "Create a navigation header: transparent background on #000000 canvas. Logo mark in #ffffff left. Nav items at 13px Suisse 400 in #ffffff, spaced with 24px gap. 'Demo' link at far right in #e2572c Ember as the active accent. No border, no shadow."

    - "Create a pill tag: 9999px border-radius, 1px #808080 border, transparent fill, #808080 text at 12px Suisse 400, 4px 12px padding."

    - "Create a footer: #000000 background, 3-4 columns of ghost text links at 13px in #808080, brand logo in #ffffff. 48px vertical padding."

  similar_brands:

    - "**Ramp** — Same dark-mode editorial approach with a single warm accent color and full-bleed photography in heroes"
    - "**Plaid** — Minimal dark canvas, single chromatic accent, oversized display headlines, left-aligned editorial layout"
    - "**Mercury** — Dark-mode fintech with restrained palette, large-format photography, and geometric grotesque typography"
    - "**Linear** — Single-weight geometric sans-serif, tight display tracking, near-monochrome dark UI with one accent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ember: #e2572c;
          --color-obsidian: #000000;
          --color-graphite: #1a1a1a;
          --color-steel: #808080;
          --color-fog: #f5f5f5;
          --color-snow: #ffffff;
        
          /* Typography — Font Families */
          --font-suisse: 'Suisse', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --tracking-caption: 0.06px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --text-display: 80px;
          --leading-display: 0.7;
          --tracking-display: -0.56px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 64-80px;
          --card-padding: 24-48px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-pills: 9999px;
          --radius-images: 16px;
          --radius-buttons: 8px;
        
          /* Surfaces */
          --surface-canvas: #000000;
          --surface-card: #1a1a1a;
          --surface-light-surface: #f5f5f5;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ember: #e2572c;
          --color-obsidian: #000000;
          --color-graphite: #1a1a1a;
          --color-steel: #808080;
          --color-fog: #f5f5f5;
          --color-snow: #ffffff;
        
          /* Typography */
          --font-suisse: 'Suisse', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --tracking-caption: 0.06px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --text-display: 80px;
          --leading-display: 0.7;
          --tracking-display: -0.56px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        }