---
title: "Aave design system"
variant: extended
source: https://aave.com/
captured_at: 2026-10-12
theme: light
industry: crypto
generator: Design DNA (https://four.wiralomi.com/style/aave-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Aave · Design System

> Quiet finance, illuminated by lavender.

**Theme:** light · **Industry:** crypto · **Source:** https://aave.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Aave presents onchain saving and lending through a bright, spacious homepage balanced by a dramatic dark product showcase. Restrained typography, lavender gradients, and app imagery make complex financial tools feel approachable and polished.

## North star

Pair calm, spacious white layouts with precise lavender accents and one purposeful dark product-showcase band.

## Overview

The page uses white as its main canvas, with pale lavender gradients softening large media sections and a near-black band giving the Aave Pro showcase a clear visual pause. Lavender marks primary actions, selected figures, and highlighted words; gray text keeps supporting copy quiet, while green appears sparingly in financial interface details. Aave Repro is the defining typeface: large, tightly tracked headlines sit above understated body copy and compact navigation. The composition favors centered introductions, broad breathing room, and rounded CTA pills, then shifts into denser layouts for product interfaces, cards, and footer links. Realistic app screens and product-led graphics provide the visual focus rather than decorative photography. Fine borders and subtle shadows distinguish cards without making the mostly flat page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and bright section background; also the contrast color on dark surfaces and CTAs. |
| Obsidian | `#0f0f10` | `--color-obsidian` | surface | Full-width dark Aave Pro showcase band, creating the page’s strongest contrast. |
| Warm Graphite | `#636161` | `--color-warm-graphite` | neutral | Default paragraph and supporting text on the light canvas. |
| Lavender Signal | `#998eff` | `--color-lavender-signal` | brand | Primary download CTA, highlighted headline accents, badges, and recurring lavender gradient. |
| Porcelain Line | `#f4f4f4` | `--color-porcelain-line` | neutral | Thin card and component outlines on white sections. |
| Muted Slate | `#736f73` | `--color-muted-slate` | neutral | Navigation and secondary interface text where a softer gray is needed. |
| Silver Hush | `#bebcbe` | `--color-silver-hush` | neutral | Muted descriptions, footer copy, and low-emphasis supporting text. |
| Lavender Mist | `#e5e5ff` | `--color-lavender-mist` | accent | Pale end of the measured lavender gradient used to soften hero and feature media backgrounds. |
| Violet Link | `#8777ff` | `--color-violet-link` | accent | Learn More link treatment and secondary lavender emphasis. |
| Night Panel | `#1b1a1d` | `--color-night-panel` | surface | Dark inset product cards and interface surfaces within the Aave Pro section. |
| Ink Plum | `#262228` | `--color-ink-plum` | surface | Dark rounded buttons and occasional dark interface details. |
| Deep Umber | `#221d1d` | `--color-deep-umber` | neutral | Measured dark text on cards, navigation, and form elements. |
| Stone Gray | `#8f8e8e` | `--color-stone-gray` | neutral | Secondary measured text for lower-emphasis interface copy. |
| Charcoal Edge | `#2e2e2f` | `--color-charcoal-edge` | neutral | Outline on dark token-market cards inside the product showcase. |
| Smoky Plum | `#3d383d` | `--color-smoky-plum` | neutral | Low-emphasis text and headings in dark interface contexts. |
| Yield Green | `#00d452` | `--color-yield-green` | semantic | Positive earnings and green financial indicators inside app mockups; not a dominant page color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#0f0f10` (Obsidian) · `--color-surface-2` → `#1b1a1d` (Night Panel) · `--color-text` → `#636161` (Warm Graphite) · `--color-text-muted` → `#bebcbe` (Silver Hush) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#f4f4f4` (Porcelain Line) · `--color-accent` → `#998eff` (Lavender Signal) · `--color-accent-2` → `#8777ff` (Violet Link) · `--color-accent-3` → `#00d452` (Yield Green) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#636161` | `#ffffff` | 6.15:1 | AA |
| `#636161` | `#0f0f10` | 3.11:1 | AA-large |
| `#636161` | `#1b1a1d` | 2.82:1 | fail |
| `#bebcbe` | `#ffffff` | 1.89:1 | fail |
| `#bebcbe` | `#0f0f10` | 10.15:1 | AAA |
| `#bebcbe` | `#1b1a1d` | 9.18:1 | AAA |
| `#ffffff` | `#0f0f10` | 19.16:1 | AAA |
| `#ffffff` | `#1b1a1d` | 17.33:1 | AAA |
| `#998eff` | `#ffffff` | 2.74:1 | fail |
| `#998eff` | `#0f0f10` | 7:1 | AAA |

### Gradients

- `linear-gradient(134deg, color(display-p3 0.898039 0.898039 1) 0px, rgb(147, 145, 254) 49.47%, color(display-p3 0.898039 0.898039 1) 91.25%)`
- `linear-gradient(0deg, rgba(239, 237, 255, 0.31) 9.2%, rgba(202, 140, 255, 0.31) 55.91%, rgba(153, 141, 255, 0.31)), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Aave Repro | `--font-body` | webfont | 400, 450, 500, 550 | Primary site typeface for headings, navigation, body copy, buttons, and links. | Inter |
| -apple-system | `--font-apple-system` | system | 600, 500 | Small system-font fallback for heavier interface text. | Inter |
| Inter Variable | `--font-inter-variable` | webfont | 450 | Minor app-interface or fallback text usage. | Inter |

- **Aave Repro:** Use measured regular-to-medium weights; headlines have tight negative tracking, while navigation and buttons stay compact and untransformed.
- **-apple-system:** Measured at 500–600 weight; keep this usage limited to compact emphasis rather than the main typographic voice.
- **Inter Variable:** Appears at a small share; use sparingly and preserve the overall Aave Repro-led typographic character.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 550 | 1.1 | -0.02em | — | Aave Repro | Largest hero headline and major campaign statements. |
| h1 | 40px | 500 | 1.2 | -0.03em | — | Aave Repro | Primary section heading, including the build and trust sections. |
| h2 | 32px | 500 | 1.35 | -0.02em | — | Aave Repro | Secondary feature and subsection headings. |
| h3 | 24px | 450 | 1.35 | -0.03em | — | Aave Repro | Tertiary feature headings and prominent card titles. |
| h4 | 20px | 400 | 1.36 | -0.01em | — | Aave Repro | Compact card titles and smaller section labels. |
| body | 16px | 400 | 1.5 | -0.011em | — | Aave Repro | Explanatory paragraphs, descriptions, and FAQ answers. |
| caption | 13px | 400 | 1.36 | -0.01em | — | Aave Repro | Small labels, metric notes, and understated helper text. |
| button | 14px | 450 | normal | 0 | — | Aave Repro | Compact CTA labels such as Use Aave and Notify Me. |
| nav | 14px | 450 | 1.25 | 0 | — | Aave Repro | Header and footer navigation labels. |
| link | 17px | 500 | normal | -0.01em | — | Aave Repro | Standalone Learn More and other emphasized text links. |

OpenType features in use: `"cv11"`, `"ss07"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 5, 8, 10, 12, 16, 20, 24, 32, 48, 72 px.
- Section rhythm 48px · element gap 8px · card padding 32px · max content width 986px.

Use a centered, comfortable-width content frame, measured at a 986px page maximum, with generous vertical separation between sections. The hero aligns its label, headline, copy, and paired CTAs centrally above full-bleed phone imagery. The metrics and signup content remain restrained and centered; the dark showcase expands into a broad, rounded band with dense product content. Later sections alternate centered feature introductions with multi-column cards, FAQs, and a multi-column footer. The overall density is relaxed, with smaller gaps reserved for related controls.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `24px` · media `50%` · badge `9999px` · link `9999px` · xs `20px` · sm `24px` · md `32px` · pill `9999px`
- Shadow `hairline` (link, card): `rgba(37, 34, 40, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.03) 0px 1px 2px 0px`
- Shadow `hairline-2` (button, section, card): `rgba(37, 34, 40, 0.05) 0px 0px 0px 1px`
- Motion: standard transition `0.15s ease` on interactive elements.

The page is mostly flat: white space, color bands, and fine outlines do most of the work. Cards use measured light borders and subtle hairline shadows rather than pronounced depth. Rounded cards and pill controls separate interaction surfaces; the dark showcase relies on contrast and embedded interface layers, not heavy shadows.

## Imagery

Lead with large, realistic mobile app mockups against a pale lavender-tinted field, centered and overlapping in the hero. The dark showcase uses an embedded product-interface view and compact market cards. Later product imagery becomes dimensional and softly lit, while trust and savings sections use metric cards and a clean chart. The screenshots show no dominant photography or video; keep imagery product-focused and contained within broad section bands.

## Components

### Primary CTA

Lavender pill with white Aave Repro text; used for the hero download action and visually prominent calls to action.

### Secondary link pill

Pale lavender background with violet text, rounded into a pill for Learn More actions.

### Notify form

Email input and dark Notify Me pill grouped in a light, centered newsletter area.

### Metric card

White card with a fine #f4f4f4 border and rounded corners; pairs a prominent figure with a short caption.

### Dark showcase

Large #0f0f10 section containing a product UI preview, light text, and darker token-market cards.

### Hero app mockup

Layered phone-screen imagery centered beneath the hero copy, set against a subtle lavender gradient.

### FAQ row

Plain, spacious question rows with a compact expand control and minimal visual framing.

### Measured component styles

- **Primary button** (“Download on iOS”): background #998eff · text #ffffff · radius 99px · padding 0px 24px · 500 17px Aave Repro
- **Secondary button** (“Notify Me Notify Me”): background #262228 · text #ffffff · radius 99px · padding 8px 16px · 450 16px Aave Repro
- **Link** (“Learn More”): background #f4f3ff · text #8777ff · radius 99px · padding 0px 24px · 500 17px Aave Repro
- **Input**: transparent background · text #221d1d · radius 36px · padding 10px 16px · 400 16px Aave Repro
- **Card** (“6+ Years Of uninterrupted operation.”): transparent background · text #221d1d · border 1px solid #f4f4f4 · radius 24px · padding 32px · 400 16px Aave Repro
- **Badge** (“$12,321”): background #998dff · text #ffffff · border 2px solid #ffffff · radius 28px · padding 3.5px 8px 4.5px 8px · 450 14px Aave Repro
- **Navigation item** (“Aave App”): transparent background · text #262228 · radius 0px · padding 0px · 450 14px Aave Repro

## Do

- Keep the primary canvas white and the page visually calm.
- Use lavender for primary actions and focused highlights.
- Center hero introductions above product imagery.
- Reserve near-black for the dedicated product showcase.
- Use Aave Repro-style rounded sans lettering and tight headlines.
- Separate cards with subtle borders rather than heavy shadows.

## Don't

- Do not make the whole page dark.
- Do not use saturated colors as large background fields.
- Do not crowd the hero with extra navigation or copy.
- Do not replace product imagery with generic lifestyle photography.
- Do not make every section a card grid.
- Do not overuse green outside financial status details.

## Agent prompt

Build a new Aave-style page with a bright white canvas (#ffffff), spacious centered introductions, and product-first imagery. Use Gallery White for the main surface, Warm Graphite (#636161) for supporting copy, and Lavender Signal (#998eff) for primary CTAs and selected emphasis; pair secondary actions with Violet Link (#8777ff). Set headings in an Aave Repro-like sans with compact, tightly tracked display type and restrained body copy. Use broad pale lavender gradients behind app imagery, rounded pill buttons, and fine Porcelain Line (#f4f4f4) card borders. Create one deliberate dark product band in Obsidian (#0f0f10), using Night Panel (#1b1a1d) for inset interface surfaces. Keep layouts relaxed and legible, with product screens, metrics, and clear CTA hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy above paired pill CTAs; full-width lavender-tinted field frames overlapping phone imagery. | primary download CTA, secondary learn-more link | large centered headline, lavender gradient media field, layered app mockups |
| 2 | stats | Centered lending-network heading, three metrics in a row, followed by a compact centered newsletter form. | scanable key metrics, email signup | lavender metric values, minimal form, rounded notification button |
| 3 | product-showcase | Large dark full-width band; centered title and actions above product UI, with market content below. | get-started CTA, learn-more CTA, market strategy browsing | near-black section, dark product interface, outlined market cards |
| 4 | feature-grid | Centered introduction and paired actions above dimensional graphics and a multi-column proof-point area. | start-building CTA, sales contact CTA, browse use cases | centered feature heading, soft lavender backdrop, illustrated product blocks |
| 5 | feature-grid | Broad light section with centered trust heading, a compact grid of proof cards, then a stablecoin chart panel. | trust proof scanning, learn-more link, historical chart viewing | white metric cards, lavender-tinted background, contained chart |
| 6 | faq | Simple question list in a two-column section, with generous white space and a small learn-more link. | expandable questions, related information link | minimal accordion rows, compact plus icons, unframed white background |
| 7 | newsletter | Centered heading, supporting sentence, and email form in a restrained light section. | email capture, notify action | minimal input, dark pill button, soft section backdrop |
| 8 | footer | Multi-column link groups above a brand and social row, followed by small muted legal copy. | grouped navigation, social links, legal information | column-based link lists, brand mark, muted fine print |

## Source CSS custom properties (selected)

```css
--font-app: "Inter Variable", "Inter", sans-serif;
--font-mono: "Aave Repro Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-serif: "Aave Aguzzo", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-regola: "FT Regola Neue", "Inter Variable", "Inter", sans-serif;
--bg-1: color(display-p3 1 1 1/1);
--bg-2: color(display-p3 1 1 1/1);
--bg-3: color(display-p3 0.9803921569 0.9803921569 0.9764705882/1);
--bg-4: color(display-p3 0.968627451 0.9647058824 0.9647058824/1);
--bg-panel: color(display-p3 0.9843137255 0.9843137255 0.9843137255/1);
--border-1: color(display-p3 0.9450980392 0.9450980392 0.9411764706/1);
--border-2: color(display-p3 0.8823529412 0.8823529412 0.8784313725/1);
--border-p-1: color(display-p3 0.1490196078 0.1333333333 0.1568627451/0.1);
--border-p-2: color(display-p3 0.1490196078 0.1333333333 0.1568627451/0.05);
--border-p-3: color(display-p3 0.1490196078 0.1333333333 0.1568627451/0.03);
--fg-1: color(display-p3 0.1294117647 0.1137254902 0.1137254902/1);
--fg-2: color(display-p3 0.3882352941 0.3803921569 0.3803921569/1);
--fg-3: color(display-p3 0.5607843137 0.5568627451 0.5568627451/1);
--fg-4: color(display-p3 0.737254902 0.7333333333 0.7333333333/1);
--push-color: color(display-p3 0 0 1/1);
--primary: color(display-p3 0.5921568627 0.5568627451 1/1);
--primary-text: #fff;
--error-color: color(display-p3 0.9490196078 0.2862745098 0/1);
--menu-icon-surface: color(display-p3 1 1 1/1);
--duration-snappy: 750ms;
--ease-snappy: cubic-bezier(0.175,0.885,0.32,1.1);
--duration-swift: 1800ms;
--ease-swift: cubic-bezier(0.19,1,0.22,1);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/aave-com