compound___style_reference:
  info: "> ink-on-paper wealth journal — a quiet editorial system where one font at one weight does all the work, and the only color is the cream ribbon at the top of the page."

  theme: "light"

  info: "Compound operates on near-total chromatic silence: one typeface (Monument Grotesk) at a single weight of 400, a fully achromatic palette, and shadows so faint they register as atmosphere rather than depth. Surfaces are nearly invisible — a white canvas, #e5e7eb hairline borders, and 20px rounded cards — so hierarchy is carried entirely by dramatic size jumps (14px body climbing to 60–72px display) and generous whitespace. The only chromatic note in the system is a warm cream announcement bar (#ffe9bf) flush at the very top edge. Interactive elements are deliberately quiet: a single near-black pill button and ghost underlined text links that read as typeset words more than UI chrome. The product preview card — with its subtle four-layer drop shadow and 20px radius — is the one moment of visual thickness in the layout, the only thing the eye can actually grasp as an object."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#171717` | `--color-ink` | Primary text, filled pill buttons, navigation emphasis, logo wordmark — the only dark anchor in an otherwise white system |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, product preview background — the default ground for all content |"
    info: "| Graphite Hairline | `#e5e7eb` | `--color-graphite-hairline` | All structural borders, dividers, card edges, input borders — the most-used color in the system by frequency, defining every container |"
    info: "| Vellum | `#f3f3f3` | `--color-vellum` | Secondary surface fills, subtle hover washes, tertiary panel background — the lightest gray still distinct from white |"
    info: "| Slate | `#6f6f6f` | `--color-slate` | Secondary body text, metadata, icon strokes, tab labels — the primary muted text voice |"
    info: "| Pewter | `#5e5e5e` | `--color-pewter` | Helper text, descriptive captions, micro-copy — darker than Slate for emphasized secondary text |"
    info: "| Ash | `#a0a0a0` | `--color-ash` | Tertiary text, disabled link color, placeholder text — the quietest readable gray |"
    info: "| Carbon | `#222222` | `--color-carbon` | SVG fill and stroke for icons, 3D graphic elements — nearly identical to Ink but reserved for decorative vector work |"
    info: "| Stone | `#c7c7c7` | `--color-stone` | Decorative fills, gradient endpoints, subtle background washes — never used for text or borders |"
    info: "| Cream Notice | `#ffe9bf` | `--color-cream-notice` | Announcement bar background, the single warm accent in the entire system — used only for the top promotional strip |"

  tokens___typography:

    monument_grotesk___the_sole_typeface_for_everything_from_12px_captions_to_72px_display_headlines__no_bold__no_italic__no_light___a_single_weight_does_all_expressive_work__the_dramatic_size_jump_from_18px_subheading_directly_to_36px_heading_creates_a_distinctive_editorial_scale_where_display_type_towers_over_body_text__tight_line_heights_at_display_sizes_1_00_1_11_let_large_type_stack_into_near_solid_blocks_____font_monument_grotesk:
      - "**Substitute:** Inter or General Sans as free alternatives; Söhne if licensed — all are geometric grotesks with similar x-height and neutrality"
      - "**Weights:** 400"
      - "**Sizes:** 12, 13, 14, 16, 18, 36, 48, 58, 60, 72"
      - "**Line height:** 1.00 / 1.10 / 1.11 / 1.25 / 1.33 / 1.38 / 1.43 / 1.50 / 1.56 / 1.71"
      - "**OpenType features:** `\"kern\"`"
      - "**Role:** The sole typeface for everything from 12px captions to 72px display headlines. No bold, no italic, no light — a single weight does all expressive work. The dramatic size jump from 18px subheading directly to 36px heading creates a distinctive editorial scale where display type towers over body text. Tight line-heights at display sizes (1.00–1.11) let large type stack into near-solid blocks."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.38 | — | `--text-subheading` |"
      info: "| heading-sm | 36px | 1.25 | — | `--text-heading-sm` |"
      info: "| heading | 48px | 1.11 | — | `--text-heading` |"
      info: "| heading-lg | 60px | 1.1 | — | `--text-heading-lg` |"
      info: "| display | 72px | 1 | — | `--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: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 176 | 176px | `--spacing-176` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 20px |"
      info: "| icons | 9999px |"
      info: "| buttons | 9999px |"
      info: "| list-items | 28px |"
      info: "| large-cards | 24px |"
      info: "| small-cards | 8px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.01) 0px 128px 51px 0px, rgba(0, 0, 0, 0.0...` | `--shadow-xl` |"
      info: "| xl-2 | `rgba(194, 194, 194, 0.01) 0px 168px 67px 0px, rgba(194, 1...` | `--shadow-xl-2` |"
      info: "| xl-3 | `rgba(207, 207, 207, 0.01) 0px 132px 53px 0px, rgba(207, 2...` | `--shadow-xl-3` |"

    layout:

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

  components:

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

      info: "Full-bleed #ffe9bf background, centered #171717 text at 12–14px Monument Grotesk, vertical padding 7–8px. Contains a text message and a pill-shaped 'Read more' button with #171717 background and white text. Sits flush against the viewport top edge with no border or shadow."

    top_navigation:
      role: "Primary site navigation"

      info: "White background, no border or shadow. Wordmark 'compound' in #171717 at 18–20px left-aligned. Centered nav links at 14px in #171717 with 20px horizontal gap. Right side: 'Sign in' text link and a filled pill button (#171717, white text, 9999px radius, 16px horizontal padding)."

    filled_pill_button:
      role: "Primary action trigger (e.g., 'Get started')"

171717_background__white_text__monument_grotesk_14px__9999px_border_radius__16px_horizontal_padding__8_9px_vertical_padding__no_border__no_shadow__the_only_filled_button_in_the_system:

    ghost_text_link:
      role: "Inline navigation, secondary actions"

      info: "No background, no border, #171717 text at 14px Monument Grotesk with 1px underline. Hover may darken to #000000. Used for nav items, footer links, and inline references."

    product_preview_card:
      role: "Embedded dashboard screenshot in hero"

      info: "White (#ffffff) surface, 20px border-radius, 1px #e5e7eb border, four-layer soft drop shadow (rgba(207,207,207, 0.01→0.1) at distances 8–132px). Contains a full dashboard UI mockup. The only element with visible elevation in the system."

    feature_service_card:
      role: "Service category tile in feature row"

      info: "Transparent or #f3f3f3 background, no border, 20px radius. Contains a small purple/icon indicator (visible in data as chromatic accent), a 14–16px label in #171717, and a 12–14px description in #6f6f6f. Arranged in a 4-column row."

    publication_logo_card:
      role: "Press feature showcase"

f3f3f3_background__20px_radius__no_border__no_shadow__contains_a_centered_brand_logo_y_combinator__axios__investmentnews_at_grayscale__arranged_in_a_3_column_row_with_a_left_aligned__featured_in__label:

    section_divider:
      role: "Section transition with label"

      info: "Thin 1px #e5e7eb horizontal line spanning the content width, with a centered 14px #6f6f6f label (e.g., 'Our approach') sitting on the line as a break in the stroke."

    hero_display_headline:
      role: "Primary page headline"

      info: "60–72px Monument Grotesk weight 400, #171717, line-height 1.00–1.10, centered. Single sentence broken across two lines, never more than 12–14 words total. No subtitle or eyebrow — the headline stands alone."

    circular_icon_container:
      role: "Icon wrapper for UI indicators"

      info: "9999px border-radius, 32–40px diameter, #f3f3f3 or white background, contains a 16–20px monochrome icon. Used for feature icons, tab indicators, and chart markers."

    stats_metric_row:
      role: "Performance data display"

      info: "Inline row with a 12px #6f6f6f label (e.g., 'Projected net worth 2029') above a 24–36px #171717 value (e.g., '$16.2M'). Change indicators use a small green up-arrow icon — the only place a non-grayscale chromatic accent appears in product UI."

  do_s_and_don_ts:

    do:
      - "Use only Monument Grotesk at weight 400 — never introduce bold, italic, or a second typeface"
      - "Use 9999px border-radius for all buttons, tags, and icon containers"
      - "Use 20px border-radius for all cards and content containers"
      - "Use #e5e7eb for all borders and dividers — never darker than #dbdbdb"
      - "Space sections with 80px vertical gaps to let the whitespace carry hierarchy"
      - "Keep the palette strictly achromatic — the only color is #ffe9bf for the announcement bar"
      - "Use four-layer soft shadows with 0.01–0.10 opacity for any elevated element"

    don_t:
      - "Never introduce a chromatic accent color outside the cream announcement bar"
      - "Never use a typeface other than Monument Grotesk or add a second weight"
      - "Never use sharp corners on cards or buttons — all corners are rounded"
      - "Never use heavy or dark drop shadows — opacity must stay below 0.10"
      - "Never use background colors other than #ffffff, #f3f3f3, or #ffe9bf for full surfaces"
      - "Never reduce section gaps below 64px — the whitespace is the hierarchy"
      - "Never add decorative borders, outlines, or colored strokes to text or headings"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Default page background, the ground all content sits on |"
    info: "| 1 | Vellum Surface | `#f3f3f3` | Secondary panels, publication logo cards, subtle hover fills |"
    info: "| 2 | Graphite Edge | `#e5e7eb` | Borders and dividers — the structural line between surfaces |"
    info: "| 3 | Stone Accent | `#c7c7c7` | Decorative vector fills, gradient endpoints, depth without weight |"
    info: "| 4 | Cream Notice | `#ffe9bf` | Announcement bar — the single warm chromatic surface, always at the very top |"

  elevation:

    - "**Product Preview Card:** `rgba(207, 207, 207, 0.01) 0px 132px 53px 0px, rgba(207, 207, 207, 0.05) 0px 74px 44px 0px, rgba(207, 207, 207, 0.09) 0px 33px 33px 0px, rgba(207, 207, 207, 0.1) 0px 8px 18px 0px`"
    - "**Link hover lift:** `rgba(0, 0, 0, 0.01) 0px 128px 51px 0px, rgba(0, 0, 0, 0.02) 0px 72px 43px 0px, rgba(0, 0, 0, 0.03) 0px 32px 32px 0px, rgba(0, 0, 0, 0.04) 0px 8px 18px 0px`"
    - "**List container:** `rgba(194, 194, 194, 0.01) 0px 168px 67px 0px, rgba(194, 194, 194, 0.05) 0px 94px 57px 0px, rgba(194, 194, 194, 0.09) 0px 42px 42px 0px, rgba(194, 194, 194, 0.1) 0px 10px 23px 0px`"

  imagery:

    info: "Imagery is restrained and editorial. The signature visual is a large translucent gray 3D helix/ribbon form floating behind the hero text — rendered in #c7c7c7 to #8f8f8f gradients, it acts as atmospheric depth rather than a literal object. The only product imagery is the embedded dashboard UI screenshot framed in a Product Preview Card. Publication logos (Y Combinator, Axios, InvestmentNews) appear in grayscale on Vellum cards. There is no photography, no lifestyle imagery, no human figures — the system communicates through typography and the abstract 3D form alone."

  layout:

    info: "The page follows a centered, max-width-contained layout at ~1200px. The hero is a single centered display headline (60–72px) with no eyebrow or subheading, positioned over a large translucent 3D graphic. A Product Preview Card sits centered below the hero. Below the fold, a 4-column row of service cards spans the width, followed by a 3-column row of publication logos. Sections are separated by 80px vertical gaps or thin divider lines with centered labels. Navigation is a single clean bar — wordmark left, centered links, action button right. The overall rhythm is vertical-stack with generous breathing room; no sidebar, no asymmetric compositions, no overlapping content."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #171717"
    - "background: #ffffff"
    - "border: #e5e7eb"
    - "accent: #ffe9bf (announcement bar only)"
    - "secondary surface: #f3f3f3"
    - "primary action: #171717 (filled action)"

    example_component_prompts:

    - "**Hero Section**: White (#ffffff) background. Centered headline at 72px Monument Grotesk weight 400, #171717, line-height 1.00. A translucent gray 3D ribbon graphic in #c7c7c7 to #8f8f8f gradient floats behind the text. A Product Preview Card (white, 20px radius, 1px #e5e7eb border, four-layer soft shadow) sits centered below the headline showing a dashboard mockup."

    - "**Feature Service Card Row**: Four cards in a row. Each card has a #f3f3f3 background, 20px radius, no border, 24px padding. Contains a 14px #171717 label and a 12px #6f6f6f description below it. 16px gap between cards. Section sits between two 80px vertical gaps."

    - "**Filled Pill Button**: #171717 background, white text, Monument Grotesk 14px weight 400, 9999px border-radius, 16px horizontal padding, 8px vertical padding. No border, no shadow. Use this for the single primary action on any page."

    - "**Section Divider**: 1px #e5e7eb horizontal line spanning the content width (~1200px). A centered 14px #6f6f6f label sits on the line, breaking the stroke. 64px vertical padding above and below."

    - "**Announcement Bar**: Full-bleed #ffe9bf background strip at viewport top. Centered #171717 text at 14px Monument Grotesk with a small filled pill button (#171717, white text, 9999px radius, 8px vertical padding). 7px vertical padding. No border, no shadow, sits flush against the top edge."

  similar_brands:

    - "**Wealthfront** — Same achromatic palette with a single dark CTA and generous whitespace; both treat wealth management as a quiet editorial product"
    - "**Mercury** — Identical single-weight grotesque typography, white-canvas minimalism, and pill-shaped dark buttons as the only interactive color"
    - "**Public.com** — Monochrome investing interface that relies on type size and whitespace for hierarchy rather than accent colors"
    - "**Modern Treasury** — Same editorial financial-publication aesthetic with centered max-width layout, hairline borders, and 20px card radii"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #171717;
          --color-paper: #ffffff;
          --color-graphite-hairline: #e5e7eb;
          --color-vellum: #f3f3f3;
          --color-slate: #6f6f6f;
          --color-pewter: #5e5e5e;
          --color-ash: #a0a0a0;
          --color-carbon: #222222;
          --color-stone: #c7c7c7;
          --color-cream-notice: #ffe9bf;
        
          /* Typography — Font Families */
          --font-monument-grotesk: 'Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.38;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.25;
          --text-heading: 48px;
          --leading-heading: 1.11;
          --text-heading-lg: 60px;
          --leading-heading-lg: 1.1;
          --text-display: 72px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-128: 128px;
          --spacing-160: 160px;
          --spacing-176: 176px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 14px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 20px;
          --radius-icons: 9999px;
          --radius-buttons: 9999px;
          --radius-list-items: 28px;
          --radius-large-cards: 24px;
          --radius-small-cards: 8px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.01) 0px 128px 51px 0px, rgba(0, 0, 0, 0.02) 0px 72px 43px 0px, rgba(0, 0, 0, 0.03) 0px 32px 32px 0px, rgba(0, 0, 0, 0.04) 0px 8px 18px 0px;
          --shadow-xl-2: rgba(194, 194, 194, 0.01) 0px 168px 67px 0px, rgba(194, 194, 194, 0.05) 0px 94px 57px 0px, rgba(194, 194, 194, 0.09) 0px 42px 42px 0px, rgba(194, 194, 194, 0.1) 0px 10px 23px 0px;
          --shadow-xl-3: rgba(207, 207, 207, 0.01) 0px 132px 53px 0px, rgba(207, 207, 207, 0.05) 0px 74px 44px 0px, rgba(207, 207, 207, 0.09) 0px 33px 33px 0px, rgba(207, 207, 207, 0.1) 0px 8px 18px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-vellum-surface: #f3f3f3;
          --surface-graphite-edge: #e5e7eb;
          --surface-stone-accent: #c7c7c7;
          --surface-cream-notice: #ffe9bf;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #171717;
          --color-paper: #ffffff;
          --color-graphite-hairline: #e5e7eb;
          --color-vellum: #f3f3f3;
          --color-slate: #6f6f6f;
          --color-pewter: #5e5e5e;
          --color-ash: #a0a0a0;
          --color-carbon: #222222;
          --color-stone: #c7c7c7;
          --color-cream-notice: #ffe9bf;
        
          /* Typography */
          --font-monument-grotesk: 'Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.38;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.25;
          --text-heading: 48px;
          --leading-heading: 1.11;
          --text-heading-lg: 60px;
          --leading-heading-lg: 1.1;
          --text-display: 72px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-128: 128px;
          --spacing-160: 160px;
          --spacing-176: 176px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 14px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.01) 0px 128px 51px 0px, rgba(0, 0, 0, 0.02) 0px 72px 43px 0px, rgba(0, 0, 0, 0.03) 0px 32px 32px 0px, rgba(0, 0, 0, 0.04) 0px 8px 18px 0px;
          --shadow-xl-2: rgba(194, 194, 194, 0.01) 0px 168px 67px 0px, rgba(194, 194, 194, 0.05) 0px 94px 57px 0px, rgba(194, 194, 194, 0.09) 0px 42px 42px 0px, rgba(194, 194, 194, 0.1) 0px 10px 23px 0px;
          --shadow-xl-3: rgba(207, 207, 207, 0.01) 0px 132px 53px 0px, rgba(207, 207, 207, 0.05) 0px 74px 44px 0px, rgba(207, 207, 207, 0.09) 0px 33px 33px 0px, rgba(207, 207, 207, 0.1) 0px 8px 18px 0px;
        }