aave_com___style_reference:
  info: "> neon violet threading twilight — a light lavender noon collapses into a midnight product surface, and one electric violet is the only color that survives the transition."

  theme: "mixed"

  aave_operates_as_a_dual_mood_system: "a sunlit lavender hero dissolves into a near-black product surface, with vivid violet (#998eff) threading both halves as the sole chromatic accent. Typography runs on a custom display family (Aave Repro) held in a narrow 400–500 weight range — hierarchy comes from generous size jumps and aggressive negative tracking, not from going bold. Components are soft and pill-shaped by default: 20px is the workhorse corner radius, 1584px marks the full-pill CTA, and elevation is essentially absent — a single soft shadow recipe appears on floating elements only. The result reads as a fintech app that absorbed crypto's electric energy and SaaS's editorial restraint simultaneously, presenting dense DeFi mechanics through a calm, high-contrast canvas."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Aave Violet | `#998eff` | `--color-aave-violet` | Primary CTA fill, outlined action borders, category label accent, decorative icon strokes — the single chromatic thread across light and dark sections; warm enough to feel alive against matte black without becoming aggressive |"
    info: "| Obsidian | `#221d1d` | `--color-obsidian` | Dominant dark surface, body text in light sections, primary nav text — the near-black that anchors the Pro and Markets bands |"
    info: "| Inkwell | `#0f0f10` | `--color-inkwell` | High-contrast neutral action fill for primary buttons on light surfaces. |"
    info: "| Charcoal | `#000000` | `--color-charcoal` | Pure-black fallbacks for fills, strokes, and high-contrast borders |"
    info: "| Iron | `#636161` | `--color-iron` | Body text, muted paragraph copy, secondary nav text — carries the bulk of reading weight in light sections |"
    info: "| Graphite | `#858387` | `--color-graphite` | Medium-neutral helper text, secondary borders, placeholder fills |"
    info: "| Pewter | `#8f8e8e` | `--color-pewter` | Icon strokes, tertiary borders, disabled-state outlines |"
    info: "| Ash | `#bcbbbb` | `--color-ash` | Hairline dividers, subtle fills, low-emphasis SVG strokes |"
    info: "| Bone | `#f6f7f4` | `--color-bone` | Off-white card surface, light icon borders, tinted secondary background — the warm neutral behind badges and product pills |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, light button fills, text in dark sections |"

  tokens___typography:

    aave_repro___sole_brand_typeface_across_headlines__body__ui__and_nav___the_400_450_500_spread_is_deliberately_narrow__so_hierarchy_is_created_through_size_and_tight_tracking_rather_than_weight_contrast____font_aave_repro:
      - "**Substitute:** Inter (close in x-height and neutrality) or General Sans for the same calm, geometric feel"
      - "**Weights:** 400, 450, 500"
      - "**Sizes:** 13px, 14px, 15px, 16px, 17px, 18px, 20px, 24px, 32px, 40px, 72px"
      - "**Line height:** 1.0–1.5"
      - "**Letter spacing:** -3.6px at 72px, -1.24px at 40px, -0.96px at 32px, -0.6px at 24px, -0.4px at 20px, -0.16px at 16px, -0.084px at 14px, 0.13px at 13px"
      - "**OpenType features:** `\"ss07\"`"
      - "**Role:** Sole brand typeface across headlines, body, UI, and nav — the 400→450→500 spread is deliberately narrow, so hierarchy is created through size and tight tracking rather than weight contrast"

    inter___reserve_typeface_for_compact_nav_utility_labels_where_aave_repro_is_not_loaded___appears_as_a_fallback_rather_than_a_stylistic_counterpoint____font_inter:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 700"
      - "**Sizes:** 10px, 14px"
      - "**Line height:** 0.8, 1.5"
      - "**Letter spacing:** -0.0060em"
      - "**OpenType features:** `\"ss07\"`"
      - "**Role:** Reserve typeface for compact nav utility labels where Aave Repro is not loaded — appears as a fallback rather than a stylistic counterpoint"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.5 | 0.13px | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.2 | -0.4px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.6px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.1 | -0.96px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.05 | -1.24px | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -3.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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 176 | 176px | `--spacing-176` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 20px |"
      info: "| badges | 8px |"
      info: "| inputs | 20px |"
      info: "| buttons | 1584px (full pill) |"
      info: "| nav-items | 8px |"
      info: "| cards-featured | 24px |"
      info: "| buttons-secondary | 50px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| lg | `rgba(0, 0, 0, 0.05) 0px 6px 20px 0px, rgba(0, 0, 0, 0.06)...` | `--shadow-lg` |"

    layout:

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

  components:

    primary_violet_pill_button:
      role: "Hero CTA and any single dominant action on a section"

      info: "Filled #998eff background, #ffffff text, 1584px border-radius (fully pill), 14px 24px padding, 14–16px Aave Repro weight 500, leading icon optional. Used for 'Download on iOS' and equivalent download/launch actions."

    dark_inverted_pill_button:
      role: "Primary action inside a light section (mirror to violet pill on dark sections)"

      info: "Filled #0f0f10 background, #ffffff text, 1584px border-radius, 14px 24px padding, Aave Repro 14–16px weight 500. The 'Use Aave' nav button and any dark-mode equivalent of the violet CTA."

    light_pill_button:
      role: "Primary action on a dark section"

      info: "Filled #ffffff background, #221d1d text, 50px border-radius, 14px 24px padding, Aave Repro 16px weight 500. The 'Get Started' CTA on the Aave Pro dark band."

    ghost_outline_button:
      role: "Secondary action alongside a primary CTA"

      info: "Transparent background, 1px border (#ffffff on dark, #221d1d on light), text matching the border, 50px border-radius, 14px 24px padding. The 'Learn More' pairing button."

    outlined_violet_button:
      role: "Tertiary action with chromatic emphasis"

      info: "Transparent background, 1px #998eff border, #998eff text, 50px border-radius, 14px 24px padding. Used when an action needs to feel on-brand but secondary to the filled violet CTA."

    adaptive_navigation_bar:
      role: "Top-level site navigation across light and dark sections"

      info: "Horizontal bar with logo at left (Aave mark + wordmark in #221d1d or #ffffff depending on section), centered link group (Products, Resources, Developers, About) in 14px Aave Repro 450, and a dark pill CTA at right. Nav item padding 8px 6px, link color tracks the section: #221d1d in light, #ffffff in dark."

    product_badge:
      role: "Section label that introduces a product band"

      info: "Pill containing a small violet icon (16–20px) + label text ('Aave App', 'Aave Pro'). Background #f6f7f4, text #221d1d, 8px border-radius, 8px 12px padding, 14px Aave Repro 450. Floats centered above section headlines."

    feature_card_dark:
      role: "Three-column feature card on the Markets / Pro sections"

      info: "Background #221d1d (sits on the midnight band), 20px border-radius, 24px padding, no border, no shadow. Contains a violet category label in 14px Aave Repro 500 ('General purpose', 'Predictable', 'Strategy-specific'), a white title in 20px weight 500, and a body paragraph in 14px Iron (#636161 inverted to #bcbbbb on dark)."

    app_screen_card_light:
      role: "Phone mockup container or app preview surface"

      info: "White #ffffff surface, 20px border-radius, sits on the lavender hero wash. Houses the iOS device render; no internal padding concern since the device art is the content."

    input_field:
      role: "Form input across the Pro dashboard and any form context"

      info: "Background #ffffff, 1px border #bcbbbb, 20px border-radius, 12px 16px padding, 14px Aave Repro 400 placeholder text in #858387, focus state thickens border to #998eff."

    stat_highlight:
      role: "Large numeric display inside app and dashboard screens"

      info: "Display-weight numeral (40–72px Aave Repro 500) in #221d1d or #ffffff, paired with a small violet delta or label (e.g. '6.50% APY' in 14px weight 500 #998eff). The visual hook of every phone and dashboard mockup."

    section_divider_header:
      role: "Title-plus-CTA row that introduces a content section"

      info: "Two-column row inside a 1200px container: left side holds a display-size heading (40px Aave Repro 500) and a one-sentence subhead in 18px Iron; right side holds a single ghost or outlined action button. Used to open the Markets band."

  do_s_and_don_ts:

    do:
      - "Use 1584px border-radius for any filled CTA — the pill shape is non-negotiable and defines the brand's button language"
      - "Reserve #998eff for actions and accents only; never use it for body text, borders on cards, or large background washes beyond the hero lavender gradient"
      - "Set display text at 72px / weight 500 / letter-spacing -3.6px — the aggressive negative tracking at large sizes is what makes headlines feel custom rather than templated"
      - "Hold the type system to weights 400–500; escalate hierarchy through size and tracking before reaching for bolder weights"
      - "Apply the 20px radius as the default for cards, inputs, and secondary buttons; 8px is reserved for badges and nav items"
      - "Use the lavender hero wash (#ffffff fading to ~#ece6ff) only at the top of marketing pages; product sections must start on a #221d1d surface"
      - "Pair every dark-section CTA group as a filled white pill + a ghost outlined pill; never use two filled buttons in the same pair"

    don_t:
      - "Don't introduce a second chromatic accent — the entire interface is monochrome plus #998eff, and adding another hue will break the dual-surface system"
      - "Don't use shadows on cards or buttons; the only sanctioned shadow is the soft 6px-blur recipe on floating nav elements"
      - "Don't set body text larger than 18px or smaller than 14px; the scale is deliberate and the gaps between sizes carry the rhythm"
      - "Don't break the light → dark page sequence; every page must transition through a hard surface change between the marketing hero and any product detail"
      - "Don't apply bold (600+) weights; the 400–500 spread is the signature, and a heavier weight reads as off-brand at any size"
      - "Don't use #998eff as a background fill for anything larger than a button or a small badge — at scale it overwhelms the dark surfaces and loses its CTA clarity"
      - "Don't use color alone to signal state in the dark sections; pair violet emphasis with a weight or size change so the meaning survives in monochrome"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Base light-section background, hero top wash |"
    info: "| 1 | Lavender Wash | `#ece6ff` | Hero backdrop — soft violet gradient blooming downward into the phone mockup band |"
    info: "| 2 | Warm Card | `#f6f7f4` | Light-section secondary surface, product badge backgrounds |"
    info: "| 3 | Midnight | `#221d1d` | Dark-section primary surface, feature card fill |"
    info: "| 4 | Abyss | `#0f0f10` | Inverted button fill, deepest surface for high-contrast CTAs |"

  elevation:

    - "**Floating Nav / Dropdown:** `rgba(0, 0, 0, 0.05) 0px 6px 20px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px`"

  imagery:

    info: "Imagery is product-surface driven, not lifestyle. The hero anchors on three iOS device renders arranged in a tight fanned cluster, each showing a different stat highlight (interest rate, weekly balance, projected yield) on pure-white screens. The Pro section uses a full browser chrome with dashboard UI — nav, search bar, and a markets table — rendered as a flat dark-mode screenshot. No photography, no illustration, no decorative 3D: every visual is either a real product capture or a UI mockup. Icons are line-based, ~1.5px stroke, monochrome (#998eff for accents, #636161 or #ffffff for neutral). The restraint is deliberate — the interface is the visual."

  layout:

    info: "Centered max-width 1200px container with generous outer gutters. The hero is a full-bleed lavender wash with a centered headline, subhead, CTA pair, and a fanned phone cluster below. The page then hard-cuts to a full-bleed black Pro band: centered badge, display heading, white/dark button pair, and a centered browser-mockup screenshot. The Markets band continues the dark surface with a two-column section header (title left, ghost CTA right) and a three-column feature card grid below. Vertical rhythm is wide — 64–96px between bands — and content is always centered, never asymmetric. Navigation is a flat top bar that swaps its color from dark-on-light to light-on-dark as the user scrolls past the hero."

  agent_prompt_guide:

    quick_color_reference:
    - "text-primary-light: #221d1d"
    - "text-primary-dark: #ffffff"
    - "text-muted: #636161"
    - "border-default: #bcbbbb"
    - "accent: #998eff (Aave Violet)"
    - "surface-light: #ffffff"
    - "surface-dark: #221d1d"
    - "primary action: #998eff (filled action)"

    example_component_prompts:
    - "Create a Primary Action Button: #998eff background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."


    - "**Three-column feature card grid**: 3 cards in a row, each 20px radius, #221d1d background, 24px padding, no border or shadow. Card content: violet category label in 14px Aave Repro weight 500 #998eff, white title in 20px weight 500 #ffffff, body in 14px #bcbbbb. 24px gap between cards."

    - "**Input field**: White #ffffff background, 1px #bcbbbb border, 20px radius, 12px 16px padding. Placeholder text 14px Aave Repro weight 400 in #858387. On focus, border becomes #998eff."

    - "**Stats display inside a phone screen**: 40–56px Aave Repro weight 500 numeral in #221d1d, with a 14px Aave Repro weight 500 violet label ('6.50% APY') directly above. Sits inside a white phone screen on a lavender hero wash."

  dual_surface_architecture:

    info: "Aave deliberately runs two parallel color systems: a light canvas (#ffffff, #f6f7f4, #221d1d text) for marketing/hero surfaces, and a dark canvas (#221d1d, #0f0f10, #ffffff text) for product surfaces. The bridge is #998eff — it is the only color that is correct in both contexts, used as the CTA fill, the outlined-action border, the category label, and the stat delta. When extending the system, never introduce a second accent; instead, reuse violet at varying weights (fill, stroke, text) across both surfaces. This is the system."

  weight_restraint:

    info: "The custom typeface (Aave Repro) is held in a narrow 400/450/500 weight spread. This is a signature choice: instead of jumping to 700 for emphasis, Aave leans on size jumps and tight letter-spacing (down to -0.05em at 72px) to create hierarchy. The result is a system that feels editorial rather than aggressive — appropriate for a financial product where shouting undermines trust."

  similar_brands:

    - "**Lido Finance** — Same dual light-and-dark section architecture with a single chromatic accent, pill-shaped CTAs, and tight-tracked custom or near-custom display type on a DeFi product surface"
    - "**Compound Labs** — Shared DeFi-product visual grammar: nearly flat dark product surfaces, white pill CTAs inside dark bands, and a single restrained accent color used sparingly for actions"
    - "**Linear** — Same tight 400–500 weight type, aggressive negative tracking at large sizes, and a 'one accent does everything' philosophy across mixed light/dark marketing layouts"
    - "**Uniswap** — Shared pink-as-accent restraint on otherwise monochrome surfaces, soft-cornered (20px-range) cards, and a clear light-to-dark band rhythm across product and protocol pages"
    - "**Phantom Wallet** — Same violet-leaning accent, pill buttons, and a hero phone-mockup trio that mirrors Aave's app marketing band almost beat for beat"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-aave-violet: #998eff;
          --color-obsidian: #221d1d;
          --color-inkwell: #0f0f10;
          --color-charcoal: #000000;
          --color-iron: #636161;
          --color-graphite: #858387;
          --color-pewter: #8f8e8e;
          --color-ash: #bcbbbb;
          --color-bone: #f6f7f4;
          --color-paper: #ffffff;
        
          /* Typography — Font Families */
          --font-aave-repro: 'Aave Repro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --tracking-caption: 0.13px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.6px;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --tracking-heading: -0.96px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: -1.24px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -3.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w450: 450;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-176: 176px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-96px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 50px;
          --radius-full-2: 1584px;
        
          /* Named Radii */
          --radius-cards: 20px;
          --radius-badges: 8px;
          --radius-inputs: 20px;
          --radius-buttons: 1584px (full pill);
          --radius-nav-items: 8px;
          --radius-cards-featured: 24px;
          --radius-buttons-secondary: 50px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.05) 0px 6px 20px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-lavender-wash: #ece6ff;
          --surface-warm-card: #f6f7f4;
          --surface-midnight: #221d1d;
          --surface-abyss: #0f0f10;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-aave-violet: #998eff;
          --color-obsidian: #221d1d;
          --color-inkwell: #0f0f10;
          --color-charcoal: #000000;
          --color-iron: #636161;
          --color-graphite: #858387;
          --color-pewter: #8f8e8e;
          --color-ash: #bcbbbb;
          --color-bone: #f6f7f4;
          --color-paper: #ffffff;
        
          /* Typography */
          --font-aave-repro: 'Aave Repro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --tracking-caption: 0.13px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.6px;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --tracking-heading: -0.96px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: -1.24px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -3.6px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-176: 176px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 50px;
          --radius-full-2: 1584px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.05) 0px 6px 20px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
        }