signal_messenger___style_reference:
  info: "> Frosted privacy glass. A nearly white room washed in pale blue light, with one vivid blue line marking every door you can open."

  theme: "light"

  info: "Signal speaks through a frosted privacy glass aesthetic: a nearly monochrome canvas of white and pale blue washes, with one confident blue accent that guides the eye to interactions. The design is deliberately restrained — weight 800 headlines carry all the visual weight alone, surrounded by generous whitespace and almost no ornamentation. Buttons are outlined rather than filled, signaling honesty over persuasion; the only solid color blocks appear in product mockups and the dark slate footer. A distinctive halftone dot illustration style provides the sole decorative personality, rendered entirely in the brand blue. The overall feel is technical documentation elevated to brand: trustworthy, quiet, and precise."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Blue | `#2c6bed` | `--color-signal-blue` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Deep Signal | `#2942ff` | `--color-deep-signal` | Navigation links and brand mark anchors — slightly cooler and more electric than Signal Blue, reserved for chrome-level interaction |"
    info: "| Signal Sky | `#9dbbf8` | `--color-signal-sky` | Hero section wash, large decorative panels — soft periwinkle that bathes the page in brand color without overwhelming |"
    info: "| Signal Mist | `#a5cad5` | `--color-signal-mist` | Secondary feature panel backgrounds — desaturated teal that recedes behind content, used to break the page rhythm without adding chroma |"
    info: "| Ink | `#1b1b1b` | `--color-ink` | Primary body and heading text — soft black at AAA contrast on every surface, the dominant typographic color |"
    info: "| Slate | `#404654` | `--color-slate` | Secondary body text, subdued paragraphs — cool gray with a faint violet cast that echoes the brand blue |"
    info: "| Twilight | `#3c3744` | `--color-twilight` | Footer background — muted purple-black that grounds the page in a warm dark wash without pure black harshness |"
    info: "| Fog | `#e9e9e9` | `--color-fog` | Hairline borders, dividers, footer text — the structural neutral that separates content bands |"
    info: "| Paper | `#f6f6f6` | `--color-paper` | Page canvas — off-white that warms the stark white without going cream |"
    info: "| White | `#ffffff` | `--color-white` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"

  tokens___typography:

    inter___sole_typeface_across_the_entire_site__weight_800_headlines_are_anti_soft___paired_with_tight_1_07_1_14_line_heights_they_create_near_solid_blocks_of_type_that_anchor_the_page__weight_600_handles_buttons_and_subheadings_with_a_confident_mid_weight__weight_400_body_at_1_50_line_height_provides_generous_reading_rhythm__the_extreme_contrast_between_800_display_and_400_body_is_the_typographic_signature_____font_inter:
      - "**Substitute:** system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
      - "**Weights:** 400, 600, 800"
      - "**Sizes:** 16px, 20px, 28px, 40px, 60px"
      - "**Line height:** 1.07–1.50"
      - "**Role:** Sole typeface across the entire site. Weight 800 headlines are anti-soft — paired with tight 1.07–1.14 line-heights they create near-solid blocks of type that anchor the page. Weight 600 handles buttons and subheadings with a confident mid-weight. Weight 400 body at 1.50 line-height provides generous reading rhythm. The extreme contrast between 800 display and 400 body is the typographic signature."

    system_ui___system_ui___detected_in_extracted_data_but_not_described_by_ai____font_system_ui:
      - "**Weights:** 600"
      - "**Sizes:** 20px"
      - "**Line height:** 1.4"
      - "**Role:** system-ui — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.38 | — | `--text-heading-sm` |"
      info: "| heading | 40px | 1.14 | — | `--text-heading` |"
      info: "| display | 60px | 1.07 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "6px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 48 | 48px | `--spacing-48` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| images | 16px |"
      info: "| panels | 16px |"
      info: "| buttons | 8px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.12) 0px 4px 12px 0px, rgba(0, 0, 0, 0.08)...` | `--shadow-md` |"

    layout:

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

  components:

    outlined_primary_action_button:
      role: "Primary CTA across the site — used for 'Get Signal', 'Donate to Signal', and most conversion points"

      info: "White background, 1.5px Signal Blue (#2c6bed) border, Signal Blue text. 8px border-radius. Inter weight 600 at 16px. Horizontal padding 24px, vertical padding 12px. The outlined treatment is deliberate: it reads as an invitation rather than a command, matching the brand's privacy-first, no-pressure voice."

    filled_teal_action_button:
      role: "Secondary or contextual action — used sparingly for in-feature prompts like the encrypted message reveal"

      info: "Solid Signal Mist (#a5cad5) or a deeper teal background, white text. 8px border-radius. Inter weight 600 at 16px. Same padding as outlined variant. Used when the button sits on a light blue panel and needs higher contrast than an outlined button can provide."

    navigation_link:
      role: "Top bar navigation items"

      info: "Deep Signal (#2942ff) text, Inter weight 400 at 16px, no underline by default. Horizontal spacing of 24px between links. Right-aligned in the header bar. No background, no border — pure text interaction."

    display_headline:
      role: "Hero and section-opening headlines"

      info: "Inter weight 800 at 60px (display) or 40px (section heading). Ink (#1b1b1b) color. Line-height 1.07 for display, 1.14 for section headings — the tight leading creates dense, confident type blocks. Left-aligned, no maximum line length enforced."

    body_paragraph:
      role: "Supporting copy under headlines and in feature descriptions"

      info: "Inter weight 400 at 16px, Slate (#404654) for secondary body, Ink (#1b1b1b) for primary body. Line-height 1.50. Max-width roughly 480px in feature sections to maintain comfortable measure."

    hero_phone_mockup_container:
      role: "Product visualization in hero and feature sections"

      info: "Two angled phone mockups (group video call + chat screen) rendered as PNG on the Signal Sky background. No container border or background — the phones float freely. Soft elevation shadow: 0px 4px 12px rgba(0,0,0,0.12), 0px 0px 2px rgba(0,0,0,0.08)."

    feature_content_panel:
      role: "Right-side visual container in 2-column feature sections"

      info: "Signal Mist (#a5cad5) or Signal Sky (#9dbbf8) background, 16px border-radius, soft shadow. Contains either a phone mockup, an encrypted message snippet, or the halftone globe illustration. Padding 30–48px."

    encrypted_message_chip:
      role: "Decorative element demonstrating the encryption feature"

      info: "Filled teal pill with white monospace text showing a random string (e.g. '7a#v9*ht035v:q*') and a small lock icon. Sits inside a feature panel. Demonstrates the product's core promise through visual proof."

    halftone_globe_illustration:
      role: "Decorative illustration in the nonprofit/donation section"

      info: "Earth rendered in concentric Signal Blue dots, with three speech bubbles floating around it. Background is Signal Sky (#9dbbf8). The halftone technique is the site's only decorative illustration style — no other illustration approach is used."

    footer_link_column:
      role: "Organized link groups in the dark footer"

      info: "Column heading in Inter weight 600 at 16px in white. Links in Inter weight 400 at 14px in Fog (#e9e9e9). Vertical spacing 12px between links. Five columns: Organization, Download, Social, Help, plus copyright block on the left."

    signal_mark_lockup:
      role: "Brand identifier in the header"

      info: "Speech-bubble logo in Deep Signal (#2942ff) followed by 'Signal' wordmark in Inter weight 600 at 20px, Ink (#1b1b1b). Left-aligned in the header bar. The mark is always the speech bubble + text — never the bubble alone."

    donate_outlined_button:
      role: "Conversion button in the footer illustration section"

      info: "Same outlined action treatment as the primary CTA: white background, Signal Blue (#2c6bed) border, Signal Blue text. 8px radius, Inter weight 600 at 16px. Sits on the Signal Sky panel."

  do_s_and_don_ts:

    do:
      - "Use Inter weight 800 for all headlines — the extreme weight contrast against 400 body text is the typographic signature"
      - "Set line-height to 1.07 for 60px display text and 1.14 for 40px section headings — the tight leading makes headlines feel architectural"
      - "Use outlined buttons (1.5px Signal Blue border, white fill) as the default CTA style — filled buttons only when sitting on a colored panel"
      - "Apply 8px border-radius to all buttons and 16px to all image/panel containers — the radius gap between interactive and visual elements is intentional"
      - "Use Signal Sky (#9dbbf8) for hero washes and Signal Mist (#a5cad5) for secondary panels — alternate the two blue tones to create page rhythm"
      - "Set body text line-height to 1.50 — the generous leading is required for the 16px body to feel readable at the page's comfortable density"
      - "Limit the brand blue to interactive elements, links, and the halftone illustration — never use it for large decorative fills or backgrounds other than the defined panel washes"

    don_t:
      - "Don't use filled blue buttons on white backgrounds — outlined buttons are the primary CTA pattern and should not be overridden"
      - "Don't add gradients, drop shadows beyond the defined elevation token, or decorative borders — the design relies on flat color bands for structure"
      - "Don't use colors outside the defined palette — no additional chroma, no warm accents, no status colors beyond the blue family"
      - "Don't set headline line-height above 1.20 — loose leading destroys the dense, confident type character"
      - "Don't use pill-shaped buttons (9999px radius) — the 8px radius is a deliberate choice that distinguishes Signal from typical consumer apps"
      - "Don't add photography, abstract graphics, or illustration styles other than the halftone dot technique — the visual personality is singular"
      - "Don't use Inter at weights other than 400, 600, or 800 — 500 and 700 are absent from the type system for a reason; the three-weight gap is the scale"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#f6f6f6` | Page canvas — the base layer everything sits on |"
    info: "| 1 | White | `#ffffff` | Card and component surfaces — elevated above Paper for product mockups and content blocks |"
    info: "| 2 | Signal Sky | `#9dbbf8` | Hero wash and large brand-color panels |"
    info: "| 3 | Signal Mist | `#a5cad5` | Secondary feature panels — a muted teal that breaks the blue rhythm |"
    info: "| 4 | Twilight | `#3c3744` | Footer ground — the only dark surface, anchoring the page bottom |"

  elevation:

    - "**Product mockup cards, elevated feature panels:** `0px 4px 12px 0px rgba(0, 0, 0, 0.12), 0px 0px 2px 0px rgba(0, 0, 0, 0.08)`"

  imagery:

    info: "Imagery is dominated by product photography (phone mockups) and a single distinctive illustration style: halftone dot patterns in Signal Blue. The halftone illustrations depict the Earth, speech bubbles, and people rendered as concentric blue dots — a visual nod to printing and the idea of 'signals' traveling. Photography appears only as phone screenshots showing the app UI in real conversations. No lifestyle photography, no abstract gradients, no stock imagery. The visual personality comes entirely from the halftone dot technique and the two product mockup angles. Icons are minimal, line-style, and monochrome."

  layout:

    info: "Max-width 1200px centered container with generous side gutters. The page is built as a vertical sequence of full-width color bands rather than a continuous white canvas: white sections, pale blue hero, white feature, muted teal feature, white, pale blue footer-illustration band, dark slate footer. Each band spans edge-to-edge while the content inside remains centered. The hero is a 2-column split — text left (roughly 40%), phone mockup right (60%) with the headline left-aligned and the visual right-aligned, creating an asymmetric opening. Feature sections repeat a 2-column pattern alternating text-left/visual-right and text-right/visual-left, establishing a predictable rhythm. Sections are separated by 64–80px of vertical breathing room. Navigation is a minimal top bar with right-aligned text links and the Signal mark left-aligned. The footer is a 5-column link grid on a dark slate background, with copyright and contact on the left."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #1b1b1b"
    - "secondary text: #404654"
    - "background: #ffffff (cards), #f6f6f6 (page canvas)"
    - "border: #e9e9e9"
    - "brand blue: #2c6bed"
    - "hero wash: #9dbbf8"
    - "panel wash: #a5cad5"
    - "footer ground: #3c3744"
    - "primary action: no distinct CTA color"

  example_component_prompts:

    - "**Hero section**: Signal Sky (#9dbbf8) full-bleed background. Two-column layout at 1200px max-width. Left column: 'Speak Freely' display headline at 60px Inter weight 800, #1b1b1b, line-height 1.07. Body text at 16px Inter weight 400, #404654, line-height 1.50, max-width 480px. Outlined action button below: white fill, 1.5px #2c6bed border, #2c6bed text, 8px radius, 12px 24px padding, Inter weight 600 at 16px. Right column: two angled phone mockups with soft shadow (0px 4px 12px rgba(0,0,0,0.12))."

    - "**Feature section card**: White background, 1200px container. Left column: 'Share Without Insecurity' heading at 40px Inter weight 800, #1b1b1b, line-height 1.14. Body paragraph at 16px Inter weight 400, #404654, line-height 1.50. Right column: Signal Mist (#a5cad5) panel, 16px radius, 30–48px padding, containing a filled teal encrypted-message chip (monospace white text on teal fill) with a small lock icon."

    - "**Footer link column**: Twilight (#3c3744) background. Column heading 'Organization' in Inter weight 600 at 16px, #ffffff. Four links below in Inter weight 400 at 14px, #e9e9e9, 12px vertical spacing between links."

    - "**Donate section band**: Signal Sky (#9dbbf8) full-bleed band. Two-column layout: left column is the halftone globe illustration (Signal Blue dots on the sky background, three speech bubbles around the globe), right column has body text in Inter weight 400 at 16px, #404654, followed by an outlined action button ('Donate to Signal') with white fill, #2c6bed border, #2c6bed text, 8px radius."

    - "**Navigation bar**: White background, 1200px max-width container, 12px vertical padding. Left: Signal speech-bubble logo in #2942ff + 'Signal' wordmark in Inter weight 600 at 20px, #1b1b1b. Right: six nav links in #2942ff, Inter weight 400 at 16px, 24px horizontal spacing between links. Language selector at the far right with a globe icon."

  illustration_system:

    info: "Signal uses exactly one illustration style across the entire site: halftone dot patterns. Subjects (Earth, speech bubbles, people) are rendered as concentric circles of Signal Blue dots on a Signal Sky background. Dot sizes vary to create tonal depth — larger dots for darker areas (continents, shadow), smaller dots for lighter areas (oceans, highlight). The effect is deliberately analog, evoking newsprint and printed media. No flat illustrations, no gradient illustrations, no line-art illustrations. When an illustration is needed, it must be halftone dots in Signal Blue (#2c6bed or #2942ff) on Signal Sky (#9dbbf8)."

  button_philosophy:

    info: "Signal's buttons are outlined by default — a deliberate departure from the filled-CTA convention. The reasoning: the brand's voice is invitational, not promotional. An outlined button asks; a filled button demands. The single filled-button exception is used only when a button sits on a colored panel where an outlined treatment would lack contrast (e.g., the encrypted message chip on a Signal Mist panel). This restraint means the outlined blue button becomes the most recognizable UI element on the site — visitors learn to identify it as the conversion point. Never introduce a third button style."

  similar_brands:

    - "**Proton (proton.me)** — Same privacy-first restraint, same blue-only accent palette, same generous whitespace, and the same outlined-button CTA pattern"
    - "**Wire (wire.com)** — Similar messaging-product page structure with 2-column hero and phone mockup, same minimal chrome, and comparable blue accent usage"
    - "**Standard Notes (standardnotes.com)** — Same documentation-like restraint, monochrome canvas with a single accent color, and weight 800 headlines on a light background"
    - "**Element (element.io)** — Same open-source nonprofit visual language, dark slate footer with multi-column links, and minimal navigation chrome"
    - "**Mozilla (mozilla.org)** — Same nonprofit internet-org design language, generous vertical rhythm, and the same pattern of alternating white and pale blue content bands"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-blue: #2c6bed;
          --color-deep-signal: #2942ff;
          --color-signal-sky: #9dbbf8;
          --color-signal-mist: #a5cad5;
          --color-ink: #1b1b1b;
          --color-slate: #404654;
          --color-twilight: #3c3744;
          --color-fog: #e9e9e9;
          --color-paper: #f6f6f6;
          --color-white: #ffffff;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.38;
          --text-heading: 40px;
          --leading-heading: 1.14;
          --text-display: 60px;
          --leading-display: 1.07;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-12: 12px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-48: 48px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 30-48px;
          --element-gap: 12-24px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
        
          /* Named Radii */
          --radius-images: 16px;
          --radius-panels: 16px;
          --radius-buttons: 8px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.12) 0px 4px 12px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px;
        
          /* Surfaces */
          --surface-paper: #f6f6f6;
          --surface-white: #ffffff;
          --surface-signal-sky: #9dbbf8;
          --surface-signal-mist: #a5cad5;
          --surface-twilight: #3c3744;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-blue: #2c6bed;
          --color-deep-signal: #2942ff;
          --color-signal-sky: #9dbbf8;
          --color-signal-mist: #a5cad5;
          --color-ink: #1b1b1b;
          --color-slate: #404654;
          --color-twilight: #3c3744;
          --color-fog: #e9e9e9;
          --color-paper: #f6f6f6;
          --color-white: #ffffff;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.38;
          --text-heading: 40px;
          --leading-heading: 1.14;
          --text-display: 60px;
          --leading-display: 1.07;
        
          /* Spacing */
          --spacing-12: 12px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-48: 48px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.12) 0px 4px 12px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px;
        }