monad___style_reference:
  info: "> Monospaced technical journal on cream paper — quiet, precise, editorial."

  theme: "light"

  info: "Monad renders as a quiet editorial document on warm parchment: cream canvas, charcoal ink, and a single near-gray lavender card surface carry the entire UI. The signature move is type — a humanist serif at 400 weight for headlines paired with a monospaced font for nearly all UI text creates a technical-journal feel that is rare in B2B SaaS. Color is almost completely absent from the interface; the peach, lavender, and mint tones that exist are confined to the data-flow diagram in the hero, where they behave as soft atmospheric washes rather than brand accents. Components are flat and confident: 100px pill buttons, 40px-radius cards, hairline borders in near-black, and a single soft ambient shadow — nothing is heavy, nothing is glossy. The overall rhythm is generous breathing room, centered text stacks, and horizontal flow lines that suggest movement without animation."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Parchment Cream | `#f6f3f1` | `--color-parchment-cream` | Page canvas, nav background, badge surfaces — the warm off-white base that makes the entire interface feel like paper rather than screen |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, icon strokes, hairline borders, and the dominant outline color across nav, cards, and dividers |"
    info: "| Charcoal | `#242424` | `--color-charcoal` | Primary action button fill, badge borders, elevated surface — filled CTAs sit slightly off pure black for visual softness |"
    info: "| Graphite | `#4e4d4d` | `--color-graphite` | Body and heading text at lower contrast, secondary card borders, muted UI elements |"
    info: "| Slate Shadow | `#3d3d3d` | `--color-slate-shadow` | Tertiary borders and decorative strokes where pure black would feel too heavy |"
    info: "| Warm Stone | `#797776` | `--color-warm-stone` | Muted helper text, link underlines, and low-emphasis labels |"
    info: "| Lavender Mist | `#cfdaf5` | `--color-lavender-mist` | Card surface tint — the only non-grayscale surface color, used as a gentle wash to separate elevated content from the cream canvas |"
    info: "| Peach to Periwinkle Wash | `linear-gradient(rgba(255, 148, 115, 0.8) 7%, rgba(160, 181, 235, 0.8) 83.82%)` | `--color-peach-to-periwinkle-wash` | Decorative gradient endstop in the data-flow diagram — soft atmospheric color, never used as a UI accent |"
    info: "| Mint to Periwinkle Wash | `linear-gradient(rgb(160, 181, 235), rgb(167, 252, 205))` | `--color-mint-to-periwinkle-wash` | Decorative gradient in the data-flow diagram aura — appears as a soft green glow around the central processing node |"

  tokens___typography:

    untitled_serif___all_headlines_and_display_text__anti_convention__weight_400_not_600_700_lets_the_serif_shapes_whisper___authority_comes_from_the_typeface_s_humanist_proportions_and_generous_negative_tracking__not_from_boldness_____font_untitled_serif:
      - "**Substitute:** Source Serif 4, Lora, or PT Serif"
      - "**Weights:** 400"
      - "**Sizes:** 24px, 28px, 32px, 40px, 80px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** -0.0200em"
      - "**Role:** All headlines and display text. Anti-convention: weight 400 (not 600-700) lets the serif shapes whisper — authority comes from the typeface's humanist proportions and generous negative tracking, not from boldness."

    abc_diatype_mono___body_text__navigation__buttons__badges__tags__and_all_functional_ui_copy__the_monospaced_treatment_for_non_code_text_is_the_system_s_most_distinctive_choice___it_gives_every_label_the_visual_weight_of_a_typeset_annotation__reinforcing_the_technical_journal_metaphor_____font_abc_diatype_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, or Berkeley Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 14px, 16px, 18px, 20px, 28px"
      - "**Line height:** 1.30-1.35"
      - "**Letter spacing:** -0.0200em"
      - "**Role:** Body text, navigation, buttons, badges, tags, and all functional UI copy. The monospaced treatment for non-code text is the system's most distinctive choice — it gives every label the visual weight of a typeset annotation, reinforcing the technical-journal metaphor."

    untitled_sans___secondary_body_text_fallback___appears_minimally__likely_for_paragraphs_where_monospaced_character_widths_would_be_distracting_at_length____font_untitled_sans:
      - "**Substitute:** Inter, Söhne, or system-ui"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.35"
      - "**Letter spacing:** -0.0200em"
      - "**Role:** Secondary body text fallback — appears minimally, likely for paragraphs where monospaced character widths would be distracting at length"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.3 | -0.24px | `--text-caption` |"
      info: "| body-sm | 14px | 1.35 | -0.28px | `--text-body-sm` |"
      info: "| body | 16px | 1.35 | -0.32px | `--text-body` |"
      info: "| subheading | 18px | 1.35 | -0.36px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | -0.64px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.2 | -0.8px | `--text-heading-lg` |"
      info: "| display | 80px | 1.2 | -1.6px | `--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: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 200 | 200px | `--spacing-200` |"
      info: "| 216 | 216px | `--spacing-216` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 100px |"
      info: "| cards | 40px |"
      info: "| inputs | 8px |"
      info: "| buttons | 100px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.1) 0px 0px 10px 0px` | `--shadow-md` |"

    layout:

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

  components:

    filled_cta_button:
      role: "Primary action trigger in nav and hero"

      info: "Charcoal (#242424) background, Parchment Cream (#f6f3f1) text, ABC Diatype Mono 14px weight 500, 100px border-radius, 10px vertical × 24px horizontal padding, no shadow. Includes a subtle arrow chevron in cream."

    ghost_outline_button:
      role: "Secondary action trigger paired with the filled CTA"

      info: "Transparent background, 1px Ink Black (#000000) border, Ink Black text, ABC Diatype Mono 14px weight 500, 100px border-radius, 10px vertical × 24px horizontal padding."

    navigation_bar:
      role: "Sticky top-level navigation"

      info: "Parchment Cream background, 1px bottom hairline border in Ink Black, logo left, mono nav links center, filled and ghost CTAs right. Links are ABC Diatype Mono 14px, uppercase tracking implied by mono character width."

    announcement_bar:
      role: "Top-of-page promotional strip"

      info: "Full-width Ink Black background, Parchment Cream text in ABC Diatype Mono 12-14px, inline CTA pill button in cream with black text. Dismissible with a close icon."

    source_destination_tag:
      role: "Pill-shaped labels in the data-flow diagram"

      info: "White or Parchment background, 1px Ink Black border, 100px border-radius, left-aligned icon + ABC Diatype Mono 12-14px label, 8px 16px padding. These float on connector lines in the hero diagram."

    feature_card:
      role: "Content card in the 'How Monad Works' section"

      info: "Lavender Mist (#cfdaf5) background, no border, 40px border-radius, 40px padding, soft ambient shadow (rgba(0,0,0,0.1) 0 0 10px). Contains a small icon, serif heading, and mono body text. The right side often features a decorative gradient illustration (peach/lavender/mint)."

    faq_accordion_item:
      role: "Expandable question row in the FAQ section"

      info: "No background, no border-radius, 1px hairline bottom border in Ink Black at 20-30% opacity, ABC Diatype Mono 16px question text in Ink Black, plus/minus icon right-aligned. Expanded state reveals body text below in Graphite."

    data_flow_diagram:
      role: "Hero visualization showing sources → processing → destinations"

      info: "Full-width composition spanning below the hero text. Left column stacks source tags (ANY SOURCE, CLOUD LOGS, VULNERABILITIES, IAM ACTIVITY, EDR ALERTS, SAAS AUDIT LOGS, ASSET INVENTORY). Center contains a soft mint-green radial glow with a processing node and small status badges (EVENT, INGEST, ROUTE, NORMALIZE). Right column stacks destination tags (SIEM, CLOUD STORAGE, XDR, DATA LAKE, ANY DESTINATION). Thin connector lines link sources to center to destinations."

    processing_status_badge:
      role: "Small inline labels in the data flow diagram"

      info: "Tiny pill tags (100px radius) with mono text at 10-12px. Success states use a subtle green dot prefix; neutral states use a gray dot. No background fill, just a hairline border."

    decorative_gradient_panel:
      role: "Right-side illustration within feature cards"

      info: "Soft translucent gradients blending peach (#ff9473), lavender (#a0b5eb), mint (#a7fccd), and amber (#e2c161) at 60-80% opacity. Always contained within the card's 40px radius. Never used as a CTA or interactive element."

    footer_link_group:
      role: "Column-based footer navigation"

      info: "Section headings in ABC Diatype Mono 12px weight 500 with positive tracking (0.050em), uppercase. Links below in mono 14px weight 400, Graphite color, 12px row gap."

  do_s_and_don_ts:

    do:
      - "Use Untitled Serif weight 400 for all headlines — never bold, never black-weight."
      - "Use ABC Diatype Mono for every functional UI label: buttons, nav, tags, badges, and short body text."
      - "Apply 100px border-radius to all buttons, tags, and pill-shaped elements."
      - "Apply 40px border-radius to all card and panel surfaces."
      - "Keep the canvas Parchment Cream (#f6f3f1) — never switch to pure white, which would break the editorial warmth."
      - "Use the soft ambient shadow (rgba(0,0,0,0.1) 0 0 10px) sparingly — only on elevated cards, never on buttons or nav."
      - "Confine all chromatic color to decorative gradient illustrations; the UI itself stays near-grayscale."

    don_t:
      - "Don't use bold or semibold weights for serif headlines — the 400 weight is the signature."
      - "Don't use a proportional sans-serif for body text or nav — mono is the system's identity."
      - "Don't add saturated brand colors as accents, underlines, or active states — the palette is intentionally restrained."
      - "Don't use square or 4-8px corner radii on interactive elements — pills (100px) and generous rounding (40px) are required."
      - "Don't place colored gradients behind text or use them as section backgrounds — they belong only in decorative illustration panels."
      - "Don't use heavy drop shadows or layered elevation — the system relies on one subtle 10px ambient shadow."
      - "Don't break the cream canvas with white or near-white surfaces — the warmth must persist across all page levels."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Parchment Canvas | `#f6f3f1` | Page background — warm cream off-white that defines the editorial paper feel |"
    info: "| 1 | Lavender Card | `#cfdaf5` | Elevated card surface — subtle near-gray lavender tint separates content blocks from the canvas |"
    info: "| 2 | Charcoal Surface | `#242424` | Dark elevated surface for CTAs and badges — the only non-warm surface in the system |"

  elevation:

    - "**Feature Card:** `rgba(0, 0, 0, 0.1) 0px 0px 10px 0px`"

  imagery:

    info: "Monad's visual language is almost entirely diagrammatic and typographic — no photography, no product screenshots, no lifestyle imagery. The hero centers on a data-flow diagram: pill-shaped source tags on the left, a glowing processing node in the center (surrounded by a soft mint-green radial wash), and destination tags on the right, all connected by thin horizontal flow lines. Feature cards pair a text block with a decorative gradient panel on the right — these panels use translucent peach, lavender, mint, and amber gradients with abstract geometric shapes (circles, rounded squares, constellation-like dots). Icons throughout are minimal line-art glyphs in Ink Black at consistent stroke weight. The overall density is text-dominant; imagery serves as atmospheric accent rather than content."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000 (Ink Black)"
    - "background: #f6f3f1 (Parchment Cream)"
    - "card surface: #cfdaf5 (Lavender Mist)"
    - "border / hairline: #000000 at 1px"
    - "muted text: #4e4d4d (Graphite)"
    - "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."

    - "**Feature Card**: Lavender Mist (#cfdaf5) background, 40px border-radius, 40px padding, shadow rgba(0,0,0,0.1) 0 0 10px. Left column: small icon, then heading in Untitled Serif 24px weight 400, then body in ABC Diatype Mono 16px color #4e4d4d. Right column: decorative gradient panel (peach to lavender, 60-80% opacity) contained within the card radius."

    - "**Pill Source Tag**: White or transparent background, 1px #000000 border, 100px border-radius, 8px/16px padding. Left-aligned 14px icon in #000000, then label in ABC Diatype Mono 12px weight 400 color #000000, 8px gap between icon and text."

    - "**FAQ Accordion Row**: Full-width row, no background, 1px bottom border in #000000 at 20% opacity. Question text in ABC Diatype Mono 16px color #000000. Plus/minus icon right-aligned, 1.5px stroke in #000000. 24px vertical padding."

    - "**Announcement Bar**: Full-width #000000 background, 48px height, centered content. Text in ABC Diatype Mono 13px color #f6f3f1. Inline link or pill button in #f6f3f1 with #000000 text, 100px radius."

  similar_brands:

    - "**Linear** — Same restrained, near-monochromatic palette with a single dark filled CTA pill and ghost outline secondary — but Monad pushes further with warm cream and a serif/mono type pairing."
    - "**Stripe** — Similar confidence in using generous whitespace, centered text stacks, and 100px pill buttons for CTAs; both systems rely on layout precision rather than color to create hierarchy."
    - "**Vercel** — Shares the minimal-chrome, hairline-border, single-shadow approach with a monochromatic UI — Monad differs by using warm cream and serif headlines instead of Vercel's pure grayscale and geometric sans."
    - "**Resend** — Both use monospaced fonts for functional UI text, warm off-white canvases, and restrained color palettes — a shared technical-editorial sensibility."
    - "**Cursor** — Similar pill-shaped CTAs, clean centered hero layouts, and confident use of near-zero colorfulness in the core interface while letting illustrations carry chromatic accents."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment-cream: #f6f3f1;
          --color-ink-black: #000000;
          --color-charcoal: #242424;
          --color-graphite: #4e4d4d;
          --color-slate-shadow: #3d3d3d;
          --color-warm-stone: #797776;
          --color-lavender-mist: #cfdaf5;
          --color-peach-to-periwinkle-wash: #ff9473;
          --gradient-peach-to-periwinkle-wash: linear-gradient(rgba(255, 148, 115, 0.8) 7%, rgba(160, 181, 235, 0.8) 83.82%);
          --color-mint-to-periwinkle-wash: #a7fccd;
          --gradient-mint-to-periwinkle-wash: linear-gradient(rgb(160, 181, 235), rgb(167, 252, 205));
        
          /* Typography — Font Families */
          --font-untitled-serif: 'Untitled Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-abc-diatype-mono: 'ABC Diatype Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-untitled-sans: 'Untitled Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --tracking-caption: -0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.35;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.35;
          --tracking-body: -0.32px;
          --text-subheading: 18px;
          --leading-subheading: 1.35;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.64px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.8px;
          --text-display: 80px;
          --leading-display: 1.2;
          --tracking-display: -1.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-200: 200px;
          --spacing-216: 216px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 40px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-3xl: 40px;
          --radius-full: 100px;
          --radius-full-2: 2000px;
        
          /* Named Radii */
          --radius-tags: 100px;
          --radius-cards: 40px;
          --radius-inputs: 8px;
          --radius-buttons: 100px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
        
          /* Surfaces */
          --surface-parchment-canvas: #f6f3f1;
          --surface-lavender-card: #cfdaf5;
          --surface-charcoal-surface: #242424;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment-cream: #f6f3f1;
          --color-ink-black: #000000;
          --color-charcoal: #242424;
          --color-graphite: #4e4d4d;
          --color-slate-shadow: #3d3d3d;
          --color-warm-stone: #797776;
          --color-lavender-mist: #cfdaf5;
          --color-peach-to-periwinkle-wash: #ff9473;
          --color-mint-to-periwinkle-wash: #a7fccd;
        
          /* Typography */
          --font-untitled-serif: 'Untitled Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-abc-diatype-mono: 'ABC Diatype Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-untitled-sans: 'Untitled Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --tracking-caption: -0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.35;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.35;
          --tracking-body: -0.32px;
          --text-subheading: 18px;
          --leading-subheading: 1.35;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.64px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.8px;
          --text-display: 80px;
          --leading-display: 1.2;
          --tracking-display: -1.6px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-200: 200px;
          --spacing-216: 216px;
        
          /* Border Radius */
          --radius-3xl: 40px;
          --radius-full: 100px;
          --radius-full-2: 2000px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
        }