CURATED · OPEN · FREE

Aave

A decentralized savings platform that makes earning yield as simple as using a mobile banking app.

01

Identity DNA

A clean, modern fintech bank branch adapted for DeFi, focusing on accessibility and trust.

02

Color

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

03

Typography

geometric-sans · mono

• display72px · 500
• headline40px · 500
• body16px · 400
• caption14px · 500

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.

04

Spacing

8px base grid, vertically stacked with generous padding between sections.

05

Surfaces

Very subtle 1px borders using rgba(0, 0, 0, 0.06).

0 6px 20px rgba(0, 0, 0, 0.05) · 0 0 0 1px rgba(0, 0, 0, 0.06)

06

Layout

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

07

Motion & Interaction

Subtle color and opacity transitions on interactive elements (0.15s). · Transform transitions for scaling or movement (0.2s ease-out).

Subtle background color or opacity shift on buttons and links. · Immediate feedback, likely a slight scale or opacity reduction.

08

Components

• button High-contrast primary buttons (lavender bg, white text) and subtle secondary buttons (light lavender bg, purple text). Fully rounded (pill shape).
• card Soft, slightly rounded cards (radius 12-20px) on a very subtle background with minimal borders.
• chip Not prominently featured, but tag-like elements use the muted lavender background.
• input Not visible in the provided screenshots.
• hero A centered, text-heavy hero with a massive 72px display font, a descriptive subtitle, and two side-by-side CTAs.

09

Voice & Don'ts

• Tone Confident, clear, and slightly technical but highly accessible.
• Headlines Short, punchy, benefit-oriented statements ('Savings for Everyone', 'The best build').
• CTAs Action-oriented and platform-specific ('Download on iOS', 'Use Aave').

• 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.
• Avoid: Avoid overly dense financial jargon without context.
• Avoid: Avoid cluttering the interface with unnecessary icons or borders.
• Avoid: Avoid aggressive or neon color palettes.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko