quicken___style_reference:
  info: "> electric violet on white marble"

  theme: "mixed"

  info: "Quicken's design system orbits a single electric violet — vivid #471cff — that acts as the power source for every interactive element against a clean white canvas. The visual personality is confident financial-tech: a custom geometric sans (Haffer) sets the voice with tight negative tracking that tightens further as type grows, creating density and authority without weight. Dark violet sections (#0f0733) alternate with white bands to create rhythm, while soft lavender card borders (#dbd3ff, #bbc5fa) replace the usual gray dividers and reinforce brand identity at every edge. Components lean rounded and pill-shaped: cards use 16px corners, buttons stretch to 400px radius, and shadows are nearly absent — depth comes from color contrast and border treatment, not elevation."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Voltage Violet | `#471cff` | `--color-voltage-violet` | Primary action buttons, active nav items, key links, brand emphasis — the single chromatic pulse of the interface; everything else defers to it |"
    info: "| Deep Iris | `#0f0733` | `--color-deep-iris` | Dark section backgrounds, hero canvas, high-contrast text on light surfaces — the midnight counterpart that anchors alternating dark bands |"
    info: "| Signal Red | `#eb0130` | `--color-signal-red` | Promotional accents, sale/urgency indicators, highlight strokes — used sparingly to flag attention without competing with the primary violet |"
    info: "| Lilac Whisper | `#dbd3ff` | `--color-lilac-whisper` | Soft card and container borders — a low-contrast violet edge that brands outlines without adding visual weight |"
    info: "| Periwinkle Mist | `#bbc5fa` | `--color-periwinkle-mist` | Cooler card border tone for grouping and container edges — second step in the violet border scale for layered cards |"
    info: "| Coral Burst | `#ff5a43` | `--color-coral-burst` | Error and warning badge fills, alert pills — warm contrast against the cool violet system |"
    info: "| Aqua Pop | `#7ae7fb` | `--color-aqua-pop` | Decorative badge backgrounds, hero trust-pill fill — cool cyan that brightens dark sections |"
    info: "| Ink Black | `#18181f` | `--color-ink-black` | Primary body and heading text, dominant border color, icon strokes — the near-black that carries all readable content |"
    info: "| Carbon | `#494949` | `--color-carbon` | Secondary text, muted nav, supporting borders — the mid-gray step between ink and white |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page and card backgrounds, text on dark surfaces, button fills for ghost variants |"
    info: "| Frost Blue | `#f0f5fa` | `--color-frost-blue` | Subtle surface tint for alternating bands, header backgrounds — barely-there cool wash |"
    info: "| Linen Gray | `#eaecf7` | `--color-linen-gray` | Table dividers, hairline borders in data-heavy layouts — a cool neutral that doesn't fight the violet palette |"

  tokens___typography:

    haffer___single_family_system_for_everything_from_body_to_display__weight_400_carries_body__nav__and_table_text__weight_600_handles_headings__buttons__and_emphasis__the_custom_geometric_construction_gives_a_contemporary_financial_tech_voice___rounder_apertures_than_inter__tighter_terminals_than_geist_____font_haffer:
      - "**Substitute:** Inter, DM Sans, or General Sans"
      - "**Weights:** 400, 600"
      - "**Sizes:** 12, 13, 14, 16, 17, 18, 19, 20, 22, 26, 30, 48, 60"
      - "**Line height:** 1.0–2.0 (tight 1.0–1.2 on display, comfortable 1.4–1.5 on body)"
      - "**Letter spacing:** -0.045em at 60px, -0.033em at 30px, -0.030em at 20px and below"
      - "**Role:** Single-family system for everything from body to display. Weight 400 carries body, nav, and table text; weight 600 handles headings, buttons, and emphasis. The custom geometric construction gives a contemporary financial-tech voice — rounder apertures than Inter, tighter terminals than Geist."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.03px | `--text-caption` |"
      info: "| body-sm | 14px | 1.4 | -0.03px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.03px | `--text-body` |"
      info: "| subheading | 20px | 1.31 | -0.03px | `--text-subheading` |"
      info: "| heading-sm | 26px | 1.2 | -0.033px | `--text-heading-sm` |"
      info: "| heading | 30px | 1.16 | -0.033px | `--text-heading` |"
      info: "| heading-lg | 48px | 1 | -0.045px | `--text-heading-lg` |"
      info: "| display | 60px | 1 | -0.045px | `--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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 400px |"
      info: "| tags | 100px |"
      info: "| cards | 16px |"
      info: "| badges | 20px |"
      info: "| buttons | 400px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.15) 10px 20px 30px 0px` | `--shadow-xl` |"

    layout:

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

  components:

    primary_action_button:
      role: "Main CTA for conversion moments"

      info: "Pill shape (400px radius), background #471cff, white text at 16px Haffer weight 600, padding 12px 24px, no border. Hover deepens the violet fill. The signature interactive element of the system."

    ghost_action_button:
      role: "Secondary CTA paired beside a primary"

      info: "Pill shape (400px radius), transparent background, 1.5px border in #471cff, text in #471cff at 16px Haffer weight 600, padding 12px 24px. Mirrors the primary's shape but defers visually — violet outline against white card."

    hero_headline:
      role: "Top-of-page value proposition"

      info: "White text at 60px Haffer weight 600, line-height 1.0, letter-spacing -0.045em. Sits on Deep Iris (#0f0733) background. Below it, 18px body text in #dbd3ff or white at 80% opacity for subtitle."

    trust_badge_pill:
      role: "Social proof or category label above hero headline"

      info: "Rounded pill (100–400px radius), background #7ae7fb or #f0f5fa, text in #18181f at 13px Haffer weight 600, padding 8px 16px. The cyan variant on the hero creates the only cool color interruption on dark sections."

    pricing_tier_card:
      role: "Product plan comparison on pricing sections"

      info: "White background, 16px corner radius, 1.5px border in #bbc5fa or #dbd3ff, padding 24px. Contains tier icon (violet square 32px), plan name at 20px weight 600, description at 14px, strikethrough original price + bold monthly price + red promotional badge. Drop shadow rgba(0,0,0,0.15) 10px 20px 30px for depth on white."

    promotional_badge:
      role: "Highlight discount or urgency markers"

      info: "Rounded pill (20px radius), background #eb0130 or #ff5a43, white text at 12px Haffer weight 600, padding 4px 8px. The red-on-white micro-badge attached to strikethrough prices."

    feature_showcase_card:
      role: "Dark-section feature highlight with illustration"

      info: "Deep Iris (#0f0733) background, 16px corner radius, padding 0 (image bleeds to edges). Upper portion is a full-bleed product visualization; lower portion is white with heading at 26px weight 600, body at 16px, and a violet text link."

    feature_comparison_table:
      role: "Side-by-side plan feature matrix"

      info: "White background, row dividers in #eaecf7 (1px), column headers with violet icon tiles (#471cff background, 16px radius, 40px square) above plan names at 16px weight 600. Checkmarks for included features rendered in a small green or violet circle."

    top_navigation_bar:
      role: "Persistent site navigation"

      info: "White background, 400px pill radius on nav items and CTA, 16px Haffer weight 400 for links, 600 for active item in #471cff. Quicken logo in #471cff at top-left. Sign-in link right-aligned. Sticky on scroll."

    phone_mockup_frame:
      role: "Hero product visualization"

      info: "iPhone-style frame with thin black bezel, slight 3D rotation (-10° to -15°), floating beside headline. Screen content is white with Haffer type and data visualizations. Sits on Deep Iris hero background."

    centered_section_header:
      role: "Transitional section introduction"

      info: "Centered heading at 48px Haffer weight 600, #18181f, letter-spacing -0.045em, with optional violet pill button (#471cff, white text, 400px radius) directly below. White background section."

    inline_feature_icon:
      role: "Category indicator on pricing and feature cards"

      info: "32×32px square with 8px radius, #471cff background, white line-icon centered. Marks each plan tier or feature category without adding label noise."

  do_s_and_don_ts:

    do:
      - "Use Voltage Violet (#471cff) exclusively for the single most important action per screen — never split attention across multiple violet CTAs"
      - "Set card borders to Lilac Whisper (#dbd3ff) or Periwinkle Mist (#bbc5fa) instead of neutral gray to reinforce brand identity at every edge"
      - "Set all buttons to 400px border-radius — pill shapes are non-negotiable in this system and signal action"
      - "Tighten letter-spacing progressively: -0.030em at 16px, -0.033em at 26–30px, -0.045em at 48px+"
      - "Alternate between white and Deep Iris (#0f0733) sections to create rhythm — never let two dark sections sit adjacent without a white break"
      - "Anchor dark sections with white text at full opacity; use Lilac Whisper (#dbd3ff) for secondary text on dark rather than dimmed white"
      - "Use Signal Red (#eb0130) only for discount badges and urgency — never as a replacement for the primary action color"

    don_t:
      - "Don't introduce new hues — the system is binary: violet accents on white, or white on Deep Iris"
      - "Don't use drop shadows on components other than the pricing card stack — depth should come from color and border"
      - "Don't use sharp 0px or minimal 4px corner radii on cards — 16px is the minimum card radius and buttons must stay pill-shaped"
      - "Don't place body text below 14px or above 18px — the system avoids both micro-copy and large body type"
      - "Don't use #18181f and #000000 interchangeably — #000000 is reserved for navigation chrome; body text uses #18181f"
      - "Don't add gradients — the system is flat by design; depth comes from violet-to-Deep-Iris section contrast"
      - "Don't use weight 400 for headings or weight 600 for body — the binary weight assignment is part of the typographic signature"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Page Canvas | `#ffffff` | Default light page background and card surfaces |"
    info: "| 2 | Frost Band | `#f0f5fa` | Subtle alternating section tint, header strip |"
    info: "| 3 | Deep Iris | `#0f0733` | Dark hero sections and feature card surfaces |"

  elevation:

    - "**Pricing Card:** `rgba(0, 0, 0, 0.15) 10px 20px 30px 0px`"

  imagery:

    info: "Product screenshots take center stage, rendered as iPhone mockups floating at slight rotation angles against the Deep Iris hero background — the device is the hero, not lifestyle photography. Secondary visuals are flat data visualizations (charts, projected cash flow lines, budget breakdowns) rendered in violet, cyan, and white directly on dark card surfaces. Illustrations are absent — the system relies on real product UI, trust badges, and large numeric headlines. Photography is not used; the visual language is pure product-and-data."

  layout:

    info: "Max-width 1200px centered container with generous side padding. The hero is full-bleed Deep Iris (#0f0733) with asymmetric text-left/product-right composition at 60/40 split. Below the hero, content alternates: white pricing-card row (3-column grid), white centered comparison section, then 2×2 dark feature-card grid. Section gaps are 80px with consistent 24px card padding. Navigation is a clean white sticky top bar with centered nav links and right-aligned sign-in. Grid systems favor 2-column and 3-column arrangements; the layout never exceeds 3 columns of cards."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #18181f"
    - "background: #ffffff"
    - "border: #dbd3ff or #bbc5fa"
    - "accent: Voltage Violet #471cff"
    - "primary action: #471cff (filled action)"
    - "dark surface: #0f0733"

    example_component_prompts:

    - "Create a Primary Action Button: #471cff background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "Create a pricing tier card: white background, 16px corner radius, 1.5px border in #bbc5fa, padding 24px. A violet icon tile (32×32px, #471cff, 8px radius) sits top-left. Plan name at 20px Haffer weight 600 #18181f below. Description at 14px #494949. A price line showing $3.99/month at 22px weight 600, a strikethrough $7.00 at 14px #494949, and a Signal Red badge (#eb0130, white text, 20px radius, 4px 8px padding) reading '50% off'. Feature checklist below with small violet checkmarks. Footer row: filled Voltage Violet button + ghost violet button, both 400px radius."

    - "Create a feature showcase card: Deep Iris (#0f0733) background, 16px radius, full-bleed product visualization in the upper 60% (chart or UI mock in violet/cyan/white). Lower 40% is white with 24px padding, heading at 26px Haffer weight 600 #18181f, body at 16px #494949, and a violet text link (#471cff, no underline by default, underline on hover)."

    - "Create a comparison table: white background, 1px row dividers in #eaecf7, three columns. Each column header has a 40×40px violet icon tile (#471cff, 8px radius) above the plan name at 16px weight 600. Feature rows at 16px weight 400 #18181f on the left, with violet circle checkmarks (8px filled #471cff) in the appropriate cells."

    - "Create a centered section header: white background, 48px Haffer weight 600 #18181f heading centered with -0.045em letter-spacing, and a Voltage Violet pill button (#471cff, white text, 400px radius, 12px 24px padding) centered 16px below."

  similar_brands:

    - "**Plaid** — Same fintech authority through tight custom sans-serif type, violet/indigo dark sections alternating with white, and pill-shaped CTAs"
    - "**Mercury** — Dark-mode hero sections with white display type, single accent color (Mercury's gold vs Quicken's violet), and clean borderless card grids"
    - "**Notion** — Single-brand-color accent system on white with geometric sans type, pill buttons, and borderless minimal elevation"
    - "**Linear** — Tight typographic tracking that intensifies at large sizes, flat surfaces, and single-accent-color action language"
    - "**Brex** — Dark hero with large display headlines, product mockup floating at angle, and white-card pricing tiers with pill CTAs"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-voltage-violet: #471cff;
          --color-deep-iris: #0f0733;
          --color-signal-red: #eb0130;
          --color-lilac-whisper: #dbd3ff;
          --color-periwinkle-mist: #bbc5fa;
          --color-coral-burst: #ff5a43;
          --color-aqua-pop: #7ae7fb;
          --color-ink-black: #18181f;
          --color-carbon: #494949;
          --color-pure-white: #ffffff;
          --color-frost-blue: #f0f5fa;
          --color-linen-gray: #eaecf7;
        
          /* Typography — Font Families */
          --font-haffer: 'Haffer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.03px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.03px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.03px;
          --text-subheading: 20px;
          --leading-subheading: 1.31;
          --tracking-subheading: -0.03px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.033px;
          --text-heading: 30px;
          --leading-heading: 1.16;
          --tracking-heading: -0.033px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -0.045px;
          --text-display: 60px;
          --leading-display: 1;
          --tracking-display: -0.045px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-100: 100px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 100px;
          --radius-full-2: 400px;
        
          /* Named Radii */
          --radius-nav: 400px;
          --radius-tags: 100px;
          --radius-cards: 16px;
          --radius-badges: 20px;
          --radius-buttons: 400px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.15) 10px 20px 30px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-frost-band: #f0f5fa;
          --surface-deep-iris: #0f0733;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-voltage-violet: #471cff;
          --color-deep-iris: #0f0733;
          --color-signal-red: #eb0130;
          --color-lilac-whisper: #dbd3ff;
          --color-periwinkle-mist: #bbc5fa;
          --color-coral-burst: #ff5a43;
          --color-aqua-pop: #7ae7fb;
          --color-ink-black: #18181f;
          --color-carbon: #494949;
          --color-pure-white: #ffffff;
          --color-frost-blue: #f0f5fa;
          --color-linen-gray: #eaecf7;
        
          /* Typography */
          --font-haffer: 'Haffer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.03px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.03px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.03px;
          --text-subheading: 20px;
          --leading-subheading: 1.31;
          --tracking-subheading: -0.03px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.033px;
          --text-heading: 30px;
          --leading-heading: 1.16;
          --tracking-heading: -0.033px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -0.045px;
          --text-display: 60px;
          --leading-display: 1;
          --tracking-display: -0.045px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-100: 100px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 100px;
          --radius-full-2: 400px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.15) 10px 20px 30px 0px;
        }