Aave Violet
#998effPrimary 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
aave.com
aave.comWebsite preview
The design language
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.
Color palette
brand
neutral
Obsidian
#221d1dDominant dark surface, body text in light sections, primary nav text — the near-black that anchors the Pro and Markets bands
Inkwell
#0f0f10High-contrast neutral action fill for primary buttons on light surfaces.
Charcoal
#000000Pure-black fallbacks for fills, strokes, and high-contrast borders
Iron
#636161Body text, muted paragraph copy, secondary nav text — carries the bulk of reading weight in light sections
Graphite
#858387Medium-neutral helper text, secondary borders, placeholder fills
Pewter
#8f8e8eIcon strokes, tertiary borders, disabled-state outlines
Ash
#bcbbbbHairline dividers, subtle fills, low-emphasis SVG strokes
Bone
#f6f7f4Off-white card surface, light icon borders, tinted secondary background — the warm neutral behind badges and product pills
Paper
#ffffffPage canvas, card surfaces, light button fills, text in dark sections
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
72px · 500 · 1 · -3.6px trackingThe quick brown fox jumps
heading-lg
40px · 500 · 1.05 · -1.24px trackingThe quick brown fox jumps
heading
32px · 500 · 1.1 · -0.96px trackingThe quick brown fox jumps
heading-sm
24px · 500 · 1.2 · -0.6px trackingThe quick brown fox jumps
subheading
20px · 500 · 1.2 · -0.4px trackingThe quick brown fox jumps
text-18
18px · 500 · 1.36The quick brown fox jumps
text-17
17px · 500 · 1The quick brown fox jumps
body
16px · 400 · 1.5 · -0.16px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Aave Repro
- 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
- Fallback
- Inter (close in x-height and neutrality) or General Sans for the same calm, geometric feel
- Features
- "ss07"
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
Additional typeface
Inter
- Weights
- 400, 700
- Sizes
- 10px, 14px
- Line height
- 0.8, 1.5
- Letter spacing
- -0.0060em
- Fallback
- Inter
- Features
- "ss07"
Reserve typeface for compact nav utility labels where Aave Repro is not loaded — appears as a fallback rather than a stylistic counterpoint
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 64-96px
- Card padding
- 24px
- Element gap
- 8px
Border radius
cards
20pxbadges
8pxinputs
20pxbuttons
1584px (full pill)nav-items
8pxcards-featured
24pxbuttons-secondary
50pxSpacing scale
1px3px4px6px8px9px10px12px14px16px20px23px24px32px48px51px64px72px80px100px119px120px150px176px203pxGuidelines
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
Components
Primary Violet Pill Button
Hero CTA and any single dominant action on a sectionFilled #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
Primary action inside a light section (mirror to violet pill on dark sections)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
Primary action on a dark sectionFilled #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
Secondary action alongside a primary CTATransparent 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
Tertiary action with chromatic emphasisTransparent 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
Top-level site navigation across light and dark sectionsHorizontal 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
Section label that introduces a product bandPill 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)
Three-column feature card on the Markets / Pro sectionsBackground #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)
Phone mockup container or app preview surfaceWhite #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
Form input across the Pro dashboard and any form contextBackground #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
Large numeric display inside app and dashboard screensDisplay-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
Title-plus-CTA row that introduces a content sectionTwo-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.
Surfaces & elevation
Level 0
Page Canvas
#ffffffBase light-section background, hero top wash
Level 1
Lavender Wash
#ece6ffHero backdrop — soft violet gradient blooming downward into the phone mockup band
Level 2
Warm Card
#f6f7f4Light-section secondary surface, product badge backgrounds
Level 3
Midnight
#221d1dDark-section primary surface, feature card fill
Level 4
Abyss
#0f0f10Inverted button fill, deepest surface for high-contrast CTAs
Elevation is rationed. The entire shadow vocabulary is a single 1px-hairline-plus-soft-20px-blur recipe used only on floating surfaces like nav dropdowns; cards and CTAs rest on flat contrast alone. This keeps the dense DeFi data legible without competing with the violet accent for visual weight.
Floating Nav / Dropdown
rgba(0, 0, 0, 0.05) 0px 6px 20px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px
Layout & imagery
Layout
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.
Imagery
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.
Design notes
Agent 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** 1. Create a Primary Action Button: #998eff background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 3. **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. 4. **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. 5. **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
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
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
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
