passwords___style_reference:
  info: "> Secure Airlock Behind Glass. A system that moves from the protective dark of an airlock to the bright clarity of a control room."

  theme: "mixed"

  info: "The design feels like a high-security airlock transitioning into a well-lit control room. An immersive, deep-space dark hero (#1D1D21) establishes a serious, secure atmosphere, which gives way to crisp white (#FFFFFF) content sections focused on informational clarity. The signature brand blue (#145FE4) is used exclusively for calls-to-action and active states, acting like an indicator light confirming interaction. Typography is a key differentiator; the custom font `agileSans` at large sizes with tight negative letter-spacing creates dense, architectural headlines. Buttons are distinctly full-pill (9999px radius), contrasting with the generally sharp, un-rounded cards, creating a focused tension between interactive and container elements."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Brand Blue | `#145fe4` | `--color-brand-blue` | Primary CTAs, active links, focus indicators — the single point of interactive confirmation. |"
    info: "| Hero Fade | `linear-gradient(180deg, #1d1d21 25%, #145fe4 70%, #99beff 100%)` | `--color-hero-fade` | Hero background — creates a deep, atmospheric transition from dark space to brand blue. |"
    info: "| White | `#ffffff` | `--color-white` | Main content backgrounds, card surfaces, text on dark backgrounds. |"
    info: "| Onyx | `#000000` | `--color-onyx` | Primary text on light backgrounds. |"
    info: "| Deep Space | `#1d1d21` | `--color-deep-space` | Hero and footer backgrounds. |"
    info: "| Void | `#242529` | `--color-void` | Secondary dark surfaces. |"
    info: "| Graphite | `#303136` | `--color-graphite` | Secondary text on light backgrounds, navigation links. |"
    info: "| Ash | `#d7d7db` | `--color-ash` | Borders on light backgrounds, disabled states. |"
    info: "| Warning Tan | `#cbb88` | `--color-warning-tan` | Top announcement banner background — a muted, temporary accent for site-wide notices. |"

  tokens___typography:

    agilesans___the_primary_brand_font__used_for_everything_from_display_headlines_to_body_copy__its_tight_negative_letter_spacing_at_large_sizes_creates_a_dense__architectural_look__lighter_weights_300_are_reserved_for_the_largest_headlines__creating_authority_through_restraint__while_mid_weights_400__500_are_used_for_body_copy_and_ui_elements_____font_agilesans:
      - "**Substitute:** Inter, Manrope"
      - "**Weights:** 300, 350, 400, 500"
      - "**Sizes:** 14px, 16px, 18px, 20px, 32px, 40px, 48px, 64px, 88px, 128px"
      - "**Line height:** 1.10, 1.20, 1.25, 1.43, 1.50, 1.60"
      - "**Letter spacing:** -0.0230em, -0.0200em"
      - "**Role:** The primary brand font, used for everything from display headlines to body copy. Its tight negative letter-spacing at large sizes creates a dense, architectural look. Lighter weights (300) are reserved for the largest headlines, creating authority through restraint, while mid-weights (400, 500) are used for body copy and UI elements."

    ui_sans_serif___used_for_minor_body_text__likely_as_a_fallback_or_for_specific_cross_platform_ui_contexts_where_the_custom_font_might_not_load_____font_ui_sans_serif:
      - "**Substitute:** System UI"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.50"
      - "**Role:** Used for minor body text, likely as a fallback or for specific cross-platform UI contexts where the custom font might not load."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.5 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.43 | — | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.25 | -0.74px | `--text-heading-sm` |"
      info: "| heading | 48px | 1.2 | -1.1px | `--text-heading` |"
      info: "| heading-lg | 64px | 1.1 | -1.47px | `--text-heading-lg` |"
      info: "| display | 88px | 1.1 | -2.02px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

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

    layout:

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

  components:

    primary_cta_button:
      role: "The main call-to-action."

      a_pill_shaped_button__background: "Brand Blue (#145fe4). Text: White (#ffffff). Radius: 9999px. Padding: 10px 24px. Font: agileSans, weight 500."

    secondary_cta_button:
      role: "A secondary call-to-action, typically used on dark backgrounds."

      info: "A pill-shaped outline button. Background: transparent. Border: 1px solid White (#ffffff). Text: White (#ffffff). Radius: 9999px. Padding: 10px 24px."

    integration_list_item:
      role: "Represents a linked third-party service in a list."

      info: "A clickable row with a White (#ffffff) background. Padding: 16px 24px. Radius: 8px. Border: 1px solid Ash (#d7d7db). Contains a logo, title text, and a chevron icon."

    business_personal_toggle:
      role: "Switches between two primary user segments."

      info: "A pill-shaped switch with a static background. An inner, smaller pill of Brand Blue (#145fe4) indicates the selected state ('Business' or 'Personal'). Radius: 9999px."

    navigation_header:
      role: "Sticky header for primary site navigation."

      info: "White (#ffffff) background with a 1px bottom border in Ash (#d7d7db). Navigation links use Graphite (#303136) text. The primary 'Get started free' button is a filled Primary CTA Button."

    interactive_text_link:
      role: "An in-text link to another page or section."

      info: "Text in Brand Blue (#145fe4), typically followed by a '→' character. No underline by default, likely added on hover."

    announcement_banner:
      role: "A site-wide, non-critical notification at the top of the page."

      info: "A full-width bar with a Warning Tan (#cbb88e) background. Text is Onyx (#000000)."

  do_s_and_don_ts:

    do:
      - "Use Brand Blue (#145fe4) exclusively for primary CTAs, links, and active state indicators."
      - "Apply tight negative letter-spacing (-1px to -2px) to all headlines (48px and larger)."
      - "Employ 9999px radius for all buttons to create the signature pill shape."
      - "Contrast fully-rounded buttons with modestly rounded cards (16px) and list items (8px)."
      - "Use the Deep Space (#1d1d21) to Brand Blue gradient solely for hero sections."
      - "Maintain a clear visual hierarchy with generous vertical spacing between sections (80px+)."
      - "Use Agile Sans for all typography to maintain brand consistency."

    don_t:
      - "Do not use Brand Blue for static headlines or body text."
      - "Avoid using rounded corners on main layout containers; reserve rounding for interactive elements and cards."
      - "Do not apply shadows to buttons or in-line elements."
      - "Avoid introducing new saturated colors; the palette is intentionally monochrome with a single blue accent."
      - "Do not use system fonts for headings; the custom font is a critical brand element."
      - "Avoid small padding on cards; use a minimum of 24px to ensure they feel spacious."
      - "Do not use outlines on primary filled buttons."

  elevation:

    - "**Feature Card:** `box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);`"

  imagery:

    info: "The visual language is product-centric and informational. It primarily uses clean product UI screenshots, often contained within abstract shapes or simplified browser chrome. There is no lifestyle photography. Icons are monochrome and line-style. A grid of grayscale customer logos provides social proof. The overall approach is to use visuals to explain functionality and build trust, not to create abstract mood."

  layout:

    info: "Starts with a full-bleed, viewport-height hero section featuring a centered headline stack over a dark gradient background. The main content that follows is contained within a centered max-width layout (~1200px) on a white background. Sections alternate between centered headline blocks, 3-column feature card grids, and 2-column text-and-image blocks. The navigation header is sticky, starting transparent over the hero and transitioning to a solid white with a bottom border upon scrolling."

  agent_prompt_guide:

    quick_color_reference:

      - "**Text (Light BG):** `#000000` (Onyx)"
      - "**Text (Dark BG):** `#ffffff` (White)"
      - "**Background (Light):** `#ffffff` (White)"
      - "**Background (Dark):** `#1d1d21` (Deep Space)"
      - "**CTA / Accent:** `#145fe4` (Brand Blue)"
      - "**Border:** `#d7d7db` (Ash)"

    example_component_prompts:

      - "**Hero Section:** \"Create a full-bleed hero section with a `linear-gradient(180deg, #1d1d21 25%, #145fe4 70%)` background. Add a headline 'Secure access for every human' using `agileSans` at 88px, weight 300, color `#ffffff`, with -2.02px letter-spacing. Below it, add a sub-headline 'Visibility and control for humans' at 20px, weight 400, color `#ffffff`. Include a primary CTA button: background `#145fe4`, text `#ffffff`, radius 9999px, padding `10px 24px`.\""

      - "**Feature Card Grid:** \"On a white page background, generate a 3-column grid of cards. Each card must have: `backgroundColor: #ffffff`, `padding: 24px`, `borderRadius: 16px`, and a subtle `box-shadow: 0 4px 12px 0 rgba(0,0,0,0.05)`. The card headline should be `agileSans` 32px weight 400 color `#000000`, body text 16px weight 400 color `#303136`, and a link with text `Learn more →` in 16px weight 500 color `#145fe4`.\""

      - "**Integration List Item:** \"Design a clickable list item for a technology integration. The container should be a white rectangle with `padding: 16px 24px`, `borderRadius: 8px`, and a `1px solid #d7d7db` border. Inside, align left a 24x24px placeholder for a logo and the text 'GitHub Actions' in `agileSans` 16px weight 500, color `#000000`. On the right, place a black chevron-right icon.\""

  similar_brands:

    - "**Linear** — Similar dark-mode aesthetic, precision typography, and use of a single, functional accent color."
    - "**Vercel** — Shared dark/light theme approach, geometric sans-serif typography, and developer-focused branding."
    - "**Stripe** — Emphasis on high-quality custom typography, structured grid layouts, and use of gradients in key brand moments."
    - "**Figma** — Use of a strong primary brand color for CTAs, clean UI presentation, and a balance between technical and approachable design."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-brand-blue: #145fe4;
          --color-hero-fade: #145fe4;
          --gradient-hero-fade: linear-gradient(180deg, #1d1d21 25%, #145fe4 70%, #99beff 100%);
          --color-white: #ffffff;
          --color-onyx: #000000;
          --color-deep-space: #1d1d21;
          --color-void: #242529;
          --color-graphite: #303136;
          --color-ash: #d7d7db;
          --color-warning-tan: #cbb88;
        
          /* Typography — Font Families */
          --font-agilesans: 'agileSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.43;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.74px;
          --text-heading: 48px;
          --leading-heading: 1.2;
          --tracking-heading: -1.1px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.47px;
          --text-display: 88px;
          --leading-display: 1.1;
          --tracking-display: -2.02px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-w350: 350;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-2xl: 16px;
          --radius-3xl: 25px;
          --radius-full: 9999px;
          --radius-full-2: 99999px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-inputs: 8px;
          --radius-buttons: 9999px;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-brand-blue: #145fe4;
          --color-hero-fade: #145fe4;
          --color-white: #ffffff;
          --color-onyx: #000000;
          --color-deep-space: #1d1d21;
          --color-void: #242529;
          --color-graphite: #303136;
          --color-ash: #d7d7db;
          --color-warning-tan: #cbb88;
        
          /* Typography */
          --font-agilesans: 'agileSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.43;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.74px;
          --text-heading: 48px;
          --leading-heading: 1.2;
          --tracking-heading: -1.1px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.47px;
          --text-display: 88px;
          --leading-display: 1.1;
          --tracking-display: -2.02px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-2xl: 16px;
          --radius-3xl: 25px;
          --radius-full: 9999px;
          --radius-full-2: 99999px;
        }