<!--
ROLE: You are a senior product designer + frontend engineer pair.
TASK: Treat the DESIGN.md below as the SINGLE SOURCE OF TRUTH for visual style.
Every component you produce in this codebase must:
  • Reuse the color tokens declared in YAML frontmatter (no ad-hoc hex values)
  • Use the typography scale (display / h1 / h2 / body / label / mono) verbatim
  • Match the radius scale (button / card / pill) to the named tier
  • Honor the elevation table for shadows
  • Respect the motion section (durations, easings, reduced-motion)
  • Pass the contrast pairs in the accessibility section
INPUT: Project files at ${CWD}.
OUTPUT: Code, not paragraphs. Quote the relevant section number when you cite a token (e.g. "per §3 Typography Rules").
PRINCIPLE: A token used once is a one-off; a token used three times is a system. Prefer system fidelity over local cleverness.
-->

---
name: Aave
tagline: 'Ghost-soft DeFi — lavender #978fff on white, custom Aave Repro sans, pastel gradients in a usually-brutalist lending space.'
updated_at: 2026-05-28T23:13:45.033Z
published_at: 2026-05-28T23:13:45.033Z
author: webdesignhot
source_url: https://aave.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [saas]
tags: [light, friendly, sans, crypto, defi, gradient]
preview_swatch: ['#ffffff', '#978fff', '#211d1d']
related: [uniswap, metamask, arbitrum]
description: 'Aave is the rare DeFi lending protocol that decided softness is on-brand. The canvas is pure white `#ffffff`, body and headings sit in the custom Aave Repro sans (h1 at 72px / weight 500), and the signature color is a friendly lavender-purple `#978fff` — the same hue carried by Aave''s ghost mascot and the site''s pastel gradient washes. Near-black text `#211d1d` keeps reading warm rather than clinical. Where Compound and Curve leaned brutalist black-and-blue, Aave leaned approachable: pill-radius CTAs (50px and beyond), gentle gradient registers, and a mascot that makes a multibillion-dollar lending market feel safe. The voice is calm and reassuring — "Use Aave", "Earn interest" — never hype. The whole brand reads as friendly-DeFi: serious enough to custody real capital, soft enough that a first-time supplier isn''t scared off.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-muted
  border: border
  ring: border-brand
colors:
  bg: '#ffffff'
  bg-soft: '#f7f6ff'
  bg-lavender: '#f1eeff'
  surface: '#ffffff'
  surface-soft: '#faf9ff'
  surface-strong: '#f1eeff'
  brand: '#978fff'
  brand-hover: '#857cf5'
  brand-pressed: '#6f63ff'
  brand-deep: '#5b4fee'
  brand-strong: '#5448d6'
  brand-tint: '#ece9ff'
  brand-soft: '#c9c3ff'
  on-brand: '#ffffff'
  text: '#211d1d'
  text-strong: '#000000'
  text-muted: '#5c5658'
  text-soft: '#8a8488'
  text-faint: '#c4c0c2'
  text-on-brand: '#ffffff'
  link: '#5b4fee'
  link-hover: '#5448d6'
  selected-bg: '#ece9ff'
  border: '#e8e6ec'
  border-strong: '#d5d2dd'
  border-soft: '#f2f1f6'
  border-brand: '#978fff'
  gradient-pink: '#ffb8e6'
  gradient-peach: '#ffd6b8'
  gradient-mint: '#b8f0d6'
  gradient-sky: '#b8d6ff'
  success: '#1bbf8a'
  warning: '#f5b948'
  danger: '#f0506e'
  info: '#5b4fee'

typography:
  display:
    family: '"Aave Repro", system-ui, -apple-system, BlinkMacSystemFont, sans-serif'
    weights: [500, 600, 700]
  body:
    family: '"Aave Repro", system-ui, -apple-system, BlinkMacSystemFont, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 88, weight: 500, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-lg:      { size: 72, weight: 500, lineHeight: 1.05, tracking: '-0.025em', family: display }
    h1:              { size: 72, weight: 500, lineHeight: 1.05, tracking: '-0.022em', family: display }
    h2:              { size: 48, weight: 500, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h3:              { size: 32, weight: 500, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h4:              { size: 24, weight: 500, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h5:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    eyebrow:         { size: 13, weight: 600, lineHeight: 1.2,  tracking: '0.08em',   family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    button:          { size: 16, weight: 500, lineHeight: 1.0,  tracking: '0',        family: body }
    metric:          { size: 40, weight: 500, lineHeight: 1.0,  tracking: '-0.015em', family: display }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }

radius:
  micro: 4
  sm: 8
  md: 12
  lg: 16
  xl: 24
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 72

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.22, 1, 0.36, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 360
  reduced-motion: 'respects prefers-reduced-motion: reduce'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  card: '0 2px 16px rgba(151, 143, 255, 0.08)'
  card-hover: '0 12px 32px rgba(151, 143, 255, 0.16)'
  brand-glow: '0 8px 28px rgba(151, 143, 255, 0.28)'
  modal: '0 24px 64px rgba(33, 29, 29, 0.18)'

accessibility:
  contrast-text-on-bg: 16.7
  contrast-text-on-brand: 6.1
  contrast-white-on-brand: 2.7
  focus-ring: '3px solid #978fff'
  reduced-motion-honored: true

components:
  button-primary:   { bg: brand, text: text, padding: '14px 28px', radius: pill, font: button }
  button-dark:      { bg: text, text: on-brand, padding: '14px 28px', radius: pill, font: button }
  button-secondary: { bg: brand-tint, text: brand-strong, padding: '12px 26px', radius: pill, font: button }
  button-ghost:     { bg: transparent, text: text, border: border, padding: '12px 24px', radius: pill }
  card:             { bg: surface, radius: 24, padding: 24, shadow: 'card' }
  metric-card:      { bg: surface-soft, radius: 16, padding: 20, border: '1px solid border-soft' }
  pill:             { bg: surface-strong, text: text, radius: pill, padding: '6px 14px', font: 'label' }
  input:            { bg: surface-soft, border: '1px solid border', text: text, radius: 12, padding: '12px 16px', focus-border: brand }

lineage:
  summary: 'Aave (Finnish for "ghost") began life in 2017 as ETHLend before its 2020 rebrand to Aave under founder Stani Kulechov. The rename brought the ghost — a friendly, rounded mascot that signals trust and softness in a category dominated by brutalist black-and-blue interfaces. The lavender-purple `#978fff` is the ghost''s color, carried through pastel gradient washes (pink, peach, mint, sky) that give the marketing site a warm, almost candy register. The custom Aave Repro sans handles every heading and body line — a low-contrast geometric grotesque set at large display sizes (h1 at 72px / weight 500) with tight tracking. Pure white canvas, near-black `#211d1d` text. Where Compound and Curve leaned terminal-brutalist, Aave deliberately leaned approachable to make a multibillion-dollar money market feel safe enough for first-time depositors. The voice is calm: "Use Aave", "Earn interest", "Supply and borrow" — protocol confidence without crypto hype.'
  influences:
    - { name: 'Stani Kulechov (founder, ETHLend → Aave 2020)', role: 'origin and the ghost-mascot rebrand', url: 'https://en.wikipedia.org/wiki/Aave' }
    - { name: 'Aave ghost mascot', role: 'friendly softness defining the lavender brand register', url: 'https://aave.com' }
    - { name: 'Uniswap', role: 'DeFi peer that also chose playful-color over brutalism', url: 'https://uniswap.org' }
    - { name: 'Compound / Curve', role: 'brutalist DeFi peers Aave differentiated against with pastel softness', url: 'https://compound.finance' }
    - { name: 'Stripe marketing aesthetic', role: 'gradient-wash + clean-sans fintech reference', url: 'https://stripe.com' }
---

## 1. Visual Theme & Atmosphere

Aave is the rare DeFi lending protocol that decided softness is the point. The canvas is pure white `#ffffff`, body and headings sit in the custom **Aave Repro** sans (h1 at 72px, weight 500), and the signature color is a friendly lavender-purple `#978fff` — the same hue carried by Aave's ghost mascot and the pastel gradient washes that drift behind hero sections. Near-black text `#211d1d` is warm rather than clinical: it has a faint red lean (R slightly above G/B) that keeps the page from feeling like a terminal.

Where Compound and Curve leaned brutalist — monospace, hard black, electric blue, no rounding — Aave leaned the opposite direction. The ghost ("aave" is Finnish for ghost) is the organizing metaphor: rounded, weightless, reassuring. That softness propagates into the whole system. CTAs are deeply pill-radiused (the live site samples a 50px supply button and a 1584px-radius "Download on iOS" pill — effectively a full pill). Gradient registers in pink, peach, mint, and sky pastels appear as ambient washes, never as flat fills on functional surfaces.

The brand operates in two registers at once. There's a **dark register** — a near-black `#211d1d` pill used for high-intent product entry ("Use Aave") — and a **lavender register** — the `#978fff` brand pill used for softer asks ("Download on iOS", "Get started"). Both share the same pill geometry; the color signals intent weight, not hierarchy of importance. A site visitor reads the dark button as "enter the app" and the lavender button as "explore."

The product itself is the hero. Aave's marketing pattern is the live market table — supply APY, borrow APY, total value locked — rendered in clean Aave Repro numerals inside soft 16-24px-radius cards. Numbers are the proof; the design's job is to make billions of dollars in TVL feel calm and legible. Metrics use a 40px display weight so they read as confident statements, not nervous tickers.

The result is friendly-DeFi: serious enough to custody real capital, soft enough that a first-time supplier isn't scared off. Pastel gradients, a ghost, and lavender-on-white turn an intimidating money market into something that feels like it wants you to succeed.

**Key Characteristics:**
- Pure white canvas `#ffffff` + warm near-black text `#211d1d`
- Signature lavender-purple `#978fff` (the ghost's color)
- Custom **Aave Repro** sans for display and body alike
- Large display headings (h1 72px / weight 500) with tight tracking
- Deep pill-radius CTAs (50px+, up to full-pill)
- Dual button register: dark pill (high intent) + lavender pill (soft ask)
- Pastel gradient washes — pink, peach, mint, sky — as ambient background
- The Aave ghost mascot as trust signal
- Live market-table metrics as product hero, 40px display numerals
- Calm, reassuring voice — never crypto hype
- Soft lavender-tinted shadows, generous 24px card radius

## 2. Color Palette & Roles

### Primary
- **Background** (`#ffffff`): pure white page canvas.
- **Bg Soft** (`#f7f6ff`): faint lavender-tinted alternate section background.
- **Bg Lavender** (`#f1eeff`): soft lavender wash behind feature blocks.
- **Text** (`#211d1d`): warm near-black for all body and headings.

### Brand — Aave Lavender
- **Brand** (`#978fff`): the ghost's lavender-purple, primary brand pill and accent.
- **Brand Hover** (`#857cf5`): one step deeper on hover.
- **Brand Pressed** (`#6f63ff`): active/pressed state.
- **Brand Deep** (`#5b4fee`): used where white text needs ≥5:1 contrast (links, deep CTAs).
- **Brand Strong** (`#5448d6`): strongest tier, link-hover and high-contrast text-on-purple.
- **Brand Tint** (`#ece9ff`): selection wash, secondary-button fill.
- **Brand Soft** (`#c9c3ff`): muted lavender for chips and inactive accents.

### Dark Register (high-intent CTA)
- **Text-as-button** (`#211d1d`): the near-black pill used for "Use Aave" / app-entry.
- **On-brand** (`#ffffff`): white label on the dark pill.

### Gradient Pastels (ambient only)
- **Gradient Pink** (`#ffb8e6`), **Peach** (`#ffd6b8`), **Mint** (`#b8f0d6`), **Sky** (`#b8d6ff`): the four pastel washes that compose hero gradients. Never used as functional UI fills.

### Neutral / Text
- **Text Muted** (`#5c5658`): secondary copy, captions.
- **Text Soft** (`#8a8488`): tertiary, helper text.
- **Text Faint** (`#c4c0c2`): placeholders, disabled.

### Surface
- **Surface** (`#ffffff`): card background.
- **Surface Soft** (`#faf9ff`): inset inputs, metric cards.
- **Surface Strong** (`#f1eeff`): pills, token chips.

### Borders
- **Border** (`#e8e6ec`): default hairline.
- **Border Strong** (`#d5d2dd`): emphasized dividers.
- **Border Soft** (`#f2f1f6`): faintest separation.
- **Border Brand** (`#978fff`): focus ring, selected card outline.

### Semantic
- **Success** (`#1bbf8a`): positive APY, confirmed states.
- **Warning** (`#f5b948`): health-factor caution, alerts.
- **Danger** (`#f0506e`): liquidation risk, errors.
- **Info** (`#5b4fee`): informational, also link color.

## 3. Typography Rules

### Font Family
- **Display + Body**: **Aave Repro** — a custom low-contrast geometric grotesque used for everything from 72px headlines to 13px labels. Falls back to `system-ui` → `-apple-system` → `BlinkMacSystemFont` → `sans-serif`.
- **Mono**: system mono stack (`ui-monospace`, `SFMono-Regular`, `SF Mono`, `Menlo`) for wallet addresses and hashes.

### Hierarchy

| Role | Font | Size | Weight | LH | Tracking |
|------|------|------|--------|-----|----------|
| display-hero | Aave Repro | 88 | 500 | 1.0 | -0.03em |
| display-lg | Aave Repro | 72 | 500 | 1.05 | -0.025em |
| h1 | Aave Repro | 72 | 500 | 1.05 | -0.022em |
| h2 | Aave Repro | 48 | 500 | 1.1 | -0.018em |
| h3 | Aave Repro | 32 | 500 | 1.2 | -0.012em |
| h4 | Aave Repro | 24 | 500 | 1.25 | -0.005em |
| h5 | Aave Repro | 20 | 600 | 1.3 | 0 |
| eyebrow | Aave Repro | 13 | 600 | 1.2 | 0.08em UPPER |
| metric | Aave Repro | 40 | 500 | 1.0 | -0.015em |
| body-lg | Aave Repro | 18 | 400 | 1.55 | 0 |
| body | Aave Repro | 16 | 400 | 1.55 | 0 |
| body-sm | Aave Repro | 14 | 400 | 1.5 | 0 |
| label | Aave Repro | 13 | 500 | 1.4 | 0 |
| button | Aave Repro | 16 | 500 | 1.0 | 0 |
| caption | Aave Repro | 12 | 500 | 1.4 | 0.02em |
| address | system mono | 13 | 400 | 1.5 | 0 |

### Principles
- **Aave Repro for everything.** One typeface carries display through caption — the brand never mixes in a second sans. Mono is reserved strictly for addresses and hashes.
- **Weight 500 dominates display.** Headlines are medium, not bold — the softness comes from weight restraint, not thin strokes. Confident, never aggressive.
- **Tight tracking scales with size.** Hero −0.03em down to 0 at body. The negative tracking on large display knits letterforms into calm, solid headlines.
- **Generous body line-height (1.55).** Reading comfort over density; the page breathes.
- **Large numerals for metrics.** APY and TVL figures use the 40px display tier so financial numbers read as confident statements.
- **Mixed-case display, uppercase eyebrows.** Headlines are sentence case; only the small 13px eyebrows go uppercase with 0.08em tracking.
- **No italics for emphasis.** Emphasis comes from weight (500→600) and the lavender accent, not slant.

## 4. Component Stylings

### Buttons (4 variants — all pill-radius)

**Primary (lavender)** — the soft ask:
- bg `#978fff`, text `#211d1d` (near-black on lavender = 6.1:1, AA), 16px Aave Repro 500
- Padding 14×28, radius 9999 (pill, sampled live at 50px+)
- Hover: bg `#857cf5`, subtle lift `translateY(-1px)` + brand-glow shadow
- Note: if a *white* label is required on lavender, deepen the fill to `#5b4fee` (white = 5.5:1) — `#978fff` with white text only passes at 2.7:1 (decorative).

**Dark (high-intent)** — the app-entry CTA ("Use Aave"):
- bg `#211d1d`, text `#ffffff` (15:1, AAA), 16px Aave Repro 500
- Padding 14×28, radius 9999 (pill)
- Hover: bg lightens to `#352f2f`, slight scale 1.02

**Secondary (tint)**:
- bg `#ece9ff` (brand-tint), text `#5448d6` (brand-strong), pill radius
- Padding 12×26; hover: bg `#dedaff`

**Ghost**:
- bg transparent, text `#211d1d`, 1px `#e8e6ec` border, pill radius, padding 12×24
- Hover: bg `#faf9ff`, border `#d5d2dd`

### Cards
- bg white `#ffffff`, **24px radius**, padding 24
- Soft lavender-tinted shadow `0 2px 16px rgba(151,143,255,0.08)`
- Hover: shadow deepens to `0 12px 32px rgba(151,143,255,0.16)`, optional `border-brand` outline on selection

### Metric Cards (the market-table cells)
- bg `#faf9ff` (surface-soft), **16px radius**, padding 20, 1px `#f2f1f6` border
- 40px Aave Repro 500 numeral on top, 13px muted label below
- Positive APY rendered in `#1bbf8a` (success), risk values in `#f0506e` (danger)

### Badges / Tags / Pills
- **Token pill**: bg `#f1eeff` (surface-strong), pill radius, token icon + symbol, 13px label
- **Status badge**: pill, tinted fill matching semantic role (success-tint / warning-tint / danger-tint) with darker text
- **Network chip**: pill radius, network-color dot + name, soft border

### Inputs / Forms
- bg `#faf9ff` (surface-soft), 1px `#e8e6ec` border, **12px radius**, padding 12×16
- Placeholder `#c4c0c2`, value `#211d1d`
- Focus: border `#978fff`, 3px `rgba(151,143,255,0.3)` ring
- Amount inputs (supply/borrow) use larger 24px display type, right-aligned, with a "MAX" lavender ghost button

### Navigation
- 72px sticky header, white bg, faint bottom border `#f2f1f6` on scroll
- Aave ghost wordmark left, top-level nav center (Markets / Stake / Governance / Docs)
- Right: a lavender or dark "Use Aave" pill CTA
- Mobile: hamburger collapsing the center nav into a sheet

## 5. Layout Principles

### Spacing System
- Base unit **4px**. Scale: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
- Component padding clusters at 16-24px; section rhythm at 96-128px.

### Grid & Container
- Page max width **1280px**, centered, with 24px gutters that widen at desktop.
- Prose blocks cap at **720px** for readability.
- Market tables span full container width; feature blocks use a 12-column grid (3-up desktop, 2-up tablet, stacked mobile).

### Whitespace Philosophy
- Whitespace is the brand's calm. Generous vertical rhythm (96-128px between sections) lets pastel gradient washes breathe behind content without crowding.
- Cards are never wall-to-wall — there's always lavender-tinted negative space framing them.

### Section Cadence
- Hero (gradient wash + 72px headline + dual CTA) → live market metrics → feature trio → trust/security band → footer.
- Each section alternates between pure white and a faint `#f7f6ff` / `#f1eeff` lavender background to segment without hard dividers.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| Micro | 4 | indicators, tiny chips |
| Standard | 8 | tooltips, small controls |
| Comfortable | 12 | **inputs**, dropdowns |
| Relaxed | 16 | **metric cards** |
| Featured | 24 | **default cards** (product hero) |
| Pill | 9999 | **all buttons + token pills** |

Aave runs soft across the board. The default card radius (24px) is at the upper end of the DeFi range, and buttons go fully pill. There are no sharp corners anywhere in the functional UI — every surface echoes the rounded ghost.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 | none | flat sections on white |
| 1 | `0 2px 16px rgba(151,143,255,0.08)` | resting cards |
| 2 | `0 12px 32px rgba(151,143,255,0.16)` | card hover |
| 3 | `0 8px 28px rgba(151,143,255,0.28)` | brand-glow on primary CTA hover |
| 4 | `0 24px 64px rgba(33,29,29,0.18)` | modals, wallet sheet |

### Shadow Philosophy
Shadows are lavender-tinted, not neutral-grey. Resting elevation is whisper-soft (8% alpha) so cards feel like they float a millimeter above white rather than casting hard depth. The brand-glow on CTA hover is the one place opacity climbs (28%) to make the lavender pill feel reachable. Modals are the only neutral-shadowed surface, using the warm near-black at 18% for a grounded overlay.

## 8. Interaction & Motion

### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — material-style for most transitions.
- **Emphasized**: `cubic-bezier(0.22, 1, 0.36, 1)` — gentle overshoot for entrances and the ghost mascot's float.

### Durations
- **Fast** 150ms: hover color/shadow shifts.
- **Standard** 240ms: dropdowns, card expand, tab switches.
- **Slow** 360ms: section reveals, modal open.

### Per-component micro-states
- **Primary CTA**: hover → deeper lavender + `translateY(-1px)` + brand-glow (240ms standard).
- **Card**: hover → shadow level 1→2, optional brand-border fade (240ms).
- **Metric numerals**: count-up animation on scroll-into-view (emphasized, ~800ms once).
- **Token selector**: 240ms slide-down dropdown with soft fade.
- **Ghost mascot**: slow idle float (emphasized ease, ~3s loop) — purely decorative.

### Page transitions
- Section content fades up 16px on scroll-into-view (emphasized, staggered ~60ms per item).
- Gradient washes shift hue subtly over a long loop — ambient, never attention-grabbing.

### Reduced motion
- Respects `prefers-reduced-motion: reduce`: count-ups jump to final value, ghost float and gradient drift freeze, fades become instant. No essential information lives in motion.

## 9. Accessibility & A11y

### Computed contrast pairs (from live tokens)
- **Text on bg** — `#211d1d` on `#ffffff` = **16.7:1** (AAA, all sizes).
- **Near-black on brand** — `#211d1d` on `#978fff` = **6.1:1** (AA, all sizes). This is the *correct* primary-button pairing: dark text on lavender.
- **White on brand** — `#ffffff` on `#978fff` = **2.7:1** (fails AA). The live "Download on iOS" pill uses white-on-lavender, which only passes for large/decorative text — for real white-on-purple labels, deepen to `#5b4fee` (= **5.5:1**, AA) or `#5448d6` (= **6.4:1**).
- **White on dark CTA** — `#ffffff` on `#211d1d` = **15:1** (AAA).
- **Link** — `#5b4fee` on `#ffffff` = **5.7:1** (AA).

### Focus indicators
- 3px `#978fff` focus ring (or `rgba(151,143,255,0.5)` outer glow) on all interactive elements. Never remove outline without an equivalent.

### ARIA patterns
- Token selectors as `role="combobox"` with `aria-expanded`.
- Market table as a real `<table>` with scope headers; APY/risk values get `aria-label` spelling out the number and unit.
- Health-factor color is paired with text/icon so risk isn't conveyed by color alone.

### Keyboard nav
- Full tab order through nav → hero CTA → market rows → footer. Modal/wallet sheet traps focus and restores on close. Esc closes overlays.

### Screen reader hints
- Truncated addresses expose the full value via `aria-label` and a copy button. Gradient washes and the ghost mascot are `aria-hidden`.

### Reduced motion
- All count-ups, floats, and gradient drift honor `prefers-reduced-motion: reduce`.

## 10. Responsive Behavior

| Breakpoint | Width | Behavior |
|------------|-------|----------|
| mobile | <640 | hero 72→40px, single-column, nav → hamburger, CTAs full-width |
| tablet | 640–1024 | 2-up feature grid, market table scrolls horizontally |
| desktop | 1024–1280 | 3-up grid, full market table, dual-CTA hero |
| wide | >1536 | content caps at 1280, gradient washes extend to viewport edges |

- **Touch targets**: minimum 44×44px; pill CTAs are comfortably taller on mobile.
- **Per-component collapsing**: nav center links collapse into a sheet; market table becomes horizontally scrollable cards on mobile; metric cards stack single-column.
- **Image / gradient behavior**: pastel gradient washes scale to fill but reduce intensity on small screens to preserve text contrast. Ghost mascot shrinks and may drop on the smallest breakpoint.
- **Container queries**: market-table cells switch from row to stacked label/value layout below a card-width threshold rather than a viewport breakpoint.

## 11. Content & Voice

### Tone
**Calm and reassuring.** Aave talks like a trustworthy institution that happens to be friendly — plain language about supplying, borrowing, and earning, with zero crypto hype, moon-talk, or urgency theater. Confidence comes from clarity, not exclamation points.

### Microcopy patterns
- Primary CTA: **"Use Aave"** / **"Get started"** / **"Supply"** / **"Borrow"**
- Secondary: **"Download on iOS"** / **"Read the docs"** / **"View markets"**
- Errors: **"Insufficient balance to supply"** / **"Health factor too low to borrow"**
- Loading: **"Confirming transaction…"**
- Success: **"Supplied 1,000 USDC — earning 3.2% APY"**

### Empty states
- Calm and instructive: **"No positions yet. Supply an asset to start earning."** — paired with the ghost mascot and a single lavender CTA.

### CTA verb conventions
- **Use / Supply / Borrow / Earn / Stake / Withdraw** — direct financial verbs.
- Avoid: "ape in", "to the moon", "🚀", urgency countdowns, or any speculative framing. Aave is a money market, not a casino.

## 12. Dark Mode & Theming

The marketing site (`aave.com`) is **light-only** — pure white canvas with the lavender brand and pastel gradient washes. The Aave **app** (`app.aave.com`) ships a dark theme: a deep near-black `#1b1a1f`-class background with the lavender `#978fff` brand carried through unchanged, and the pastel gradients dimmed to subtle glows. When building a dark variant of this system, keep `#978fff` as the constant brand anchor, swap white surfaces for warm-dark `#1b1a1f`/`#26242b`, lift text to `#f5f3f7`, and reduce gradient-wash opacity so it reads as ambient light rather than color blocks.

## 13. Lineage & Influences

Aave began in 2017 as **ETHLend**, a peer-to-peer lending dApp, before its 2020 rebrand to Aave — Finnish for "ghost" — under founder Stani Kulechov. The rename brought the mascot: a friendly, rounded ghost that signals trust and approachability in a category otherwise dominated by brutalist black-and-blue terminals. The ghost's lavender-purple `#978fff` became the brand anchor, extended into pastel gradient washes (pink, peach, mint, sky) that give the marketing site a warm, almost candy register entirely unlike the austere DeFi default.

Typographically, Aave commissioned **Aave Repro**, a custom low-contrast geometric grotesque, and uses it everywhere from 72px headlines (weight 500) to 13px labels — a single-typeface discipline that keeps the system coherent. The choice to lean soft was strategic: where Compound and Curve courted power-users with dense brutalism, Aave deliberately designed to make a multibillion-dollar money market feel safe enough for first-time depositors. It shares that playful-color-over-brutalism instinct with Uniswap, and borrows gradient-wash-plus-clean-sans fintech polish from the Stripe lineage.

**Named influences:**
- **Stani Kulechov (founder)** — ETHLend → Aave 2020 rebrand and the ghost identity
- **The Aave ghost mascot** — friendly softness defining the lavender register
- **Uniswap** — DeFi peer that also chose playful color over brutalism
- **Compound / Curve** — brutalist DeFi peers Aave differentiated against
- **Stripe marketing aesthetic** — gradient-wash + clean-sans fintech reference

## 14. Do's and Don'ts

### Do
- **Use lavender `#978fff` for the brand pill and accents** — it's the ghost's color, the single identity anchor.
- **Pair dark text `#211d1d` on lavender CTAs** (6.1:1, AA) — that's the correct contrast.
- **Use the dark `#211d1d` pill for high-intent app entry** ("Use Aave").
- **Set everything in Aave Repro** (or system-ui fallback) at weight 500 for display.
- **Go pill-radius on every button, 24px on cards.**
- **Render metrics large** (40px display) — APY and TVL are the proof.
- **Use pastel gradients as ambient washes only** — pink/peach/mint/sky behind heroes.
- **Keep the voice calm and reassuring** — plain financial language.
- **Tint shadows lavender** `rgba(151,143,255,…)`, soft and low-alpha.
- **Honor `prefers-reduced-motion`** — freeze the ghost and gradient drift.

### Don't
- **Don't substitute the lavender.** `#978fff` is the brand, not a generic Tailwind purple.
- **Don't put white text on `#978fff`** for body-size labels — it fails at 2.7:1. Deepen to `#5b4fee`+ first.
- **Don't mistake "Accept All" for brand.** That dark pill is the cookie banner, not a brand CTA.
- **Don't introduce a second typeface.** Aave Repro carries the whole system.
- **Don't use sharp corners.** Everything echoes the rounded ghost.
- **Don't apply gradient pastels to functional fills** — they're ambient background only.
- **Don't use brutalist DeFi aesthetics** — monospace-everywhere, hard black, electric blue. Soft lavender IS Aave.
- **Don't add crypto hype** — no "ape in", rockets, or urgency countdowns.
- **Don't hard-shadow with neutral grey** — shadows are lavender-tinted.
- **Don't anthropomorphize the ghost into a hype character** — it's a calm trust signal, used sparingly.

## 15. Agent Prompt Guide

### Quick Color Reference
- bg: `#ffffff`
- text: `#211d1d`
- brand (Aave lavender): `#978fff` / hover `#857cf5`
- brand-deep (white-text-safe): `#5b4fee`
- dark CTA pill: `#211d1d` (white text)
- brand-tint (secondary fill): `#ece9ff`
- gradient pastels: pink `#ffb8e6` · peach `#ffd6b8` · mint `#b8f0d6` · sky `#b8d6ff`
- border: `#e8e6ec`
- success `#1bbf8a` · danger `#f0506e`

### Example Component Prompts

> Build an Aave-style hero: pure white canvas with a soft pastel gradient wash (lavender → pink → sky) drifting behind. 72px Aave Repro weight-500 headline "Earn interest on your crypto" with -0.022em tracking. Below it a dark `#211d1d` pill CTA "Use Aave" (white text) next to a lavender `#978fff` pill "Download on iOS" (dark `#211d1d` text). Calm, lots of whitespace.

> Design an Aave market table: full-width container, rows of metric cards on `#faf9ff` 16px-radius surfaces. Each cell: 40px Aave Repro 500 numeral on top (supply APY in green `#1bbf8a`), 13px muted `#5c5658` label below. Soft lavender shadow `0 2px 16px rgba(151,143,255,0.08)`.

> Render an Aave supply card: white surface, 24px radius, lavender-tinted shadow. Asset row with token pill (`#f1eeff` bg, icon + "USDC"), a large 24px right-aligned amount input with a lavender "MAX" ghost button, and a full-width lavender `#978fff` "Supply" pill CTA with dark text at the bottom.

> Build an Aave primary button: lavender `#978fff` fill, near-black `#211d1d` 16px Aave Repro 500 label, pill radius, padding 14×28. Hover: bg `#857cf5`, lift 1px, lavender brand-glow shadow. (If white text is required, deepen fill to `#5b4fee`.)

> Design an Aave dark CTA: near-black `#211d1d` pill, white 16px Aave Repro 500 "Use Aave", padding 14×28, radius 9999. Hover: lighten to `#352f2f`, scale 1.02.

> Create an Aave empty state: centered ghost mascot illustration, 24px Aave Repro 500 "No positions yet", 16px muted helper line "Supply an asset to start earning", single lavender `#978fff` pill CTA "Supply".

### Iteration Guide

1. **White canvas + lavender `#978fff` + Aave Repro + the ghost.** That quartet is the brand.
2. **Dark text on lavender CTAs** (6.1:1) — never white text on `#978fff` for labels.
3. **Two CTA registers**: dark `#211d1d` pill for app entry, lavender pill for soft asks. Same pill geometry, different intent.
4. **Pill buttons, 24px cards, 12px inputs.** Nothing sharp.
5. **Pastel gradient washes are ambient only** — behind heroes, never on functional fills.
6. **Metrics go large** (40px display) — the live market table is the product hero.
7. **Lavender-tinted soft shadows**, low alpha, floating-not-grounded.
8. **Calm reassuring voice** — reject crypto hype, urgency, and brutalist DeFi aesthetics. Soft lavender IS Aave.