# Aave · Design system migration spec

> Source: https://aave.com  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in applying 'mobile-first' fintech aesthetics to a decentralized web protocol, making complex DeFi concepts feel simple and trustworthy.

## 1. Identity DNA

The design system operates like a clean, modern fintech bank branch translated for decentralized finance, prioritizing clarity and trust over novelty. Its identity is built on a stark, high-contrast palette and generous spacing, using a single vibrant lavender accent to guide primary actions without visual noise.

**One-liner:** A decentralized savings platform that makes earning yield as simple as using a mobile banking app.
**Keywords:** decentralized finance · savings · earn · mobile app · protocol
**Analogy:** A clean, modern fintech bank branch adapted for DeFi, focusing on accessibility and trust.

## 2. Color

The color system is defined by high-contrast black ink on soft, off-white surfaces. A single vibrant lavender accent provides the sole chromatic emphasis, reserved exclusively for primary actions and interactive states.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F3F3F8` | card background |
| `--ink` | `#212121` | body text |
| `--ink-soft` | `#636161` | secondary text |
| `--muted` | `#E0DFFF` | placeholder |
| `--accent` | `#9787FF` | single accent |
| `--line` | `rgba(0,0,0,0.05)` | divider |

**Color principle:** High-contrast black ink on soft, off-white surfaces with a single vibrant lavender accent for primary actions.

The principle is strict restraint, using color as a functional highlight against a neutral, readable canvas rather than for decorative effect.

## 3. Typography

Typography employs a geometric sans-serif voice, using tight letter spacing for large display text to create a compact, authoritative feel. The hierarchy is extreme, with distinct weights separating hero headlines from primary body copy.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.1 | 500 | -3.6px | Hero headlines |
| headline | 40px | 1.2 | 500 | -0.5px | Section headlines |
| body | 16px | 1.5 | 400 | -0.1px | Primary body text |
| caption | 14px | 1.2 | 500 | 0.1px | Labels and captions |

**Type rules:**
- Use tight letter spacing (-3.6px) for large display text.
- Primary body text should use a weight of 400.
- Headlines use a weight of 500.

## 4. Spacing

Spacing follows an 8px base grid, creating a predictable rhythm for vertical stacking.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base grid, vertically stacked with generous padding between sections.

## 5. Surfaces

Surfaces achieve depth through minimal means, relying on very subtle, low-opacity borders and flat color differences rather than prominent drop shadows. The approach is nearly flat, using soft background tones to define cards and containers.

- **Radius:** sm 8px · md 12px · lg 20px · pill 9999px
- **Shadows:**
  - 0 6px 20px rgba(0, 0, 0, 0.05)
  - 0 0 0 1px rgba(0, 0, 0, 0.06)
- **Borders:** Very subtle 1px borders using rgba(0, 0, 0, 0.06).

## 6. Layout

The layout skeleton centers a text-heavy hero block, then transitions to a 2-column grid for feature content below the fold. The structure emphasizes large headlines and clear calls-to-action within a spacious, single-column framework.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column hero, transitioning to a 2-column grid for feature cards below the fold.

## 7. Motion & Interaction

Motion philosophy is one of restraint and immediacy, using fast 150-200ms durations for functional feedback only. Subtle color, opacity, and transform transitions confirm interactions without drawing focus from the core content.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle color and opacity transitions on interactive elements (0.15s).
  - Transform transitions for scaling or movement (0.2s ease-out).

- **Hover:** Subtle background color or opacity shift on buttons and links.
- **Click:** Immediate feedback, likely a slight scale or opacity reduction.
- **Transition:** Fast, 150ms transitions for most state changes.
- **Keyboard:** Standard browser focus outlines, no custom visual styles evident in the static shots.

## 8. Voice & Don'ts

The editorial voice is confident, clear, and slightly technical, using short, benefit-oriented headlines and action-specific calls-to-action.

- **Tone:** Confident, clear, and slightly technical but highly accessible.
- **Headline style:** Short, punchy, benefit-oriented statements ('Savings for Everyone', 'The best build').
- **CTA style:** Action-oriented and platform-specific ('Download on iOS', 'Use Aave').
- **Avoid:** Avoid overly dense financial jargon without context. / Avoid cluttering the interface with unnecessary icons or borders. / Avoid aggressive or neon color palettes.

### Don'ts
- ❌ Don't use serif fonts — screenshot shows a geometric sans-serif for all text.
- ❌ Don't use dark mode as the default — screenshot shows a predominantly white and light-gray interface.
- ❌ Don't use sharp, square corners on primary elements — screenshot shows heavily rounded pills and soft radii.
- ❌ Don't use high-contrast, saturated red or green for accents — screenshot uses a muted lavender as the primary accent.
- ❌ Don't center-align all text — screenshot uses left-alignment for body copy and feature descriptions.
- ❌ Don't use drop shadows for depth — screenshot uses very subtle, low-opacity borders or flat color differences for separation.

The system deliberately avoids dense financial jargon, aggressive color, and interface clutter to maintain its accessible, trustworthy fintech aesthetic.

## System Prompt (paste into AI tool)

```
Aave is a decentralized finance (DeFi) protocol landing page designed to look like a premium, accessible fintech mobile app. The design DNA is built on a foundation of geometric sans-serif typography, a high-contrast black-on-white color palette, and a single vibrant lavender (#9787FF) accent for primary actions. The layout is clean, spacious, and centered around a massive hero headline. Critical constraints: always use a fully rounded 'pill' shape for primary buttons, keep the interface strictly light-themed with soft off-white backgrounds, and maintain extreme typographic hierarchy with tight letter spacing on large display text. Never introduce cluttered borders, dark backgrounds, or non-geometric font styles.
```