№ aave-com--gho

Aave · Features

Luminous lilac haze, clean geometric sans, airy floating layers of soft glass

Marquee Herominimalism futurist crypto fintechlight

A clean, airy composition featuring a soft green gradient background and centered typography. The visual focus is on two high-fidelity 3D spheres with neon green accents. · crypto landing page, fintech hero section, soft gradient background, 3d asset hero, minimalist web design, neon green accents

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: cool · neon · muted

SwatchHexOKLCHSuggested roleCopy

Hex#08f9bb
OKLCHoklch(87.2% 0.179 167)
RoleDominant
find sites →
Hex#9484f4
OKLCHoklch(67.7% 0.161 288)
RoleSurface
find sites →
Hex#0eab4a
OKLCHoklch(64.8% 0.181 149)
RoleInk
find sites →
Hex#46988b
OKLCHoklch(62.5% 0.083 182)
RoleAccent
find sites →
Hex#96bccf
OKLCHoklch(77.4% 0.049 230)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Aave Repro	72px	550	1.1	-3.6px	Aa Bb Cc
h2	Aave Repro	40px	500	1.2	-1.2px	Aa Bb Cc
h3	Aave Repro	16px	450	1.36	-0.16px	Aa Bb Cc
body	Aave Repro	16px	400	1.4	0	Aa Bb Cc
button	Aave Repro	14px	450	1.4	0	Aa Bb Cc

Spacing scale

48px

72px

100px

182px

Radius scale

0px

16px

24px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #08f9bb;
  --color-surface: #9484f4;
  --color-ink: #0eab4a;
  --color-accent: #46988b;
  --color-detail: #96bccf;
}

/* CSS variables exposed by source */
:root {
  --border-p-1: color(display-p3 0.1490196078 0.1333333333 0.1568627451/0.1);
  --fg-3: color(display-p3 0.5607843137 0.5568627451 0.5568627451/1);
  --border-p-3: color(display-p3 0.1490196078 0.1333333333 0.1568627451/0.03);
  --fg-2: color(display-p3 0.3882352941 0.3803921569 0.3803921569/1);
  --font-mono: "Aave Repro Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --border-1: color(display-p3 0.9450980392 0.9450980392 0.9411764706/1);
  --border-2: color(display-p3 0.8823529412 0.8823529412 0.8784313725/1);
  --font-app: "Inter Variable", "Inter", sans-serif;
  --bg-1: color(display-p3 1 1 1/1);
  --primary-text: #fff;
  --bg-panel: color(display-p3 0.9843137255 0.9843137255 0.9843137255/1);
  --fg-1: color(display-p3 0.1294117647 0.1137254902 0.1137254902/1);
  --bg-4: color(display-p3 0.968627451 0.9647058824 0.9647058824/1);
  --font-serif: "Aave Aguzzo", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --bg-2: color(display-p3 1 1 1/1);
  --fg-4: color(display-p3 0.737254902 0.7333333333 0.7333333333/1);
  --bg-3: color(display-p3 0.9803921569 0.9803921569 0.9764705882/1);
  --font-regola: "FT Regola Neue", "Inter Variable", "Inter", sans-serif;
  --border-p-2: color(display-p3 0.1490196078 0.1333333333 0.1568627451/0.05);
  --primary: color(display-p3 0.5921568627 0.5568627451 1/1);
  --yellow-1: color(display-p3 1 0.768627451 0.1725490196/1);
  --push-color: color(display-p3 0 0 1/1);
  --duration-snappy: 750ms;
  --purple-8: color(display-p3 0.8980392157 0.8980392157 1/1);
  --fp-4: color(display-p3 0.1529411765 0.1333333333 0.1568627451/0.5);
  --icon-purple-5: color(display-p3 0.5764705882 0.568627451 0.968627451/1);
  --purple-6: color(display-p3 0.8156862745 0.8078431373 1/1);
  --gho-2: color(display-p3 0.5764705882 0.9137254902 0.6705882353/1);
  --icon-purple-6: color(display-p3 0.5921568627 0.5568627451 1/1);
  --rich-purple-2: color(display-p3 0.5254901961 0.4705882353 1/1);
  --_number-flow-d: 0;
  --purple-2: color(display-p3 0.5764705882 0.568627451 0.9960784314/1);
  --ease-snappy: cubic-bezier(0.175,0.885,0.32,1.1);
  --icon-purple-2: color(display-p3 0.7921568627 0.7803921569 0.9960784314/1);
  --gho-1: color(display-p3 0.1568627451 0.8274509804 0.3450980392/1);
  --_number-flow-dx: 0px;
  --wallet: color(display-p3 0.0039215686 0.5529411765 1/1);
  --deep-purple: color(display-p3 0.2980392157 0.1215686275 0.368627451/1);
  --fp-0: color(display-p3 0.1450980392 0.1333333333 0.1568627451/1);
  --inset-highlight: rgb(255 255 255/0.15);
  --focus: color(display-p3 0.5960784314 0.5960784314 1/1);
  --fp-5: color(display-p3 0.1529411765 0.1333333333 0.1568627451/0.4);
  --purple-3: color(display-p3 0.5921568627 0.5568627451 1/1);
  --yellow-2: color(display-p3 1 0.8392156863 0.1921568627/1);
  --icon-purple-3: color(display-p3 0.7843137255 0.7803921569 1/1);
  --breakpoint-lg: 1024px;
  --error-color: color(display-p3 0.9490196078 0.2862745098 0/1);
  --fp-2: color(display-p3 0.1529411765 0.1333333333 0.1568627451/0.9);
  --fp-3: color(display-p3 0.1529411765 0.1333333333 0.1568627451/0.65);
  --usdc-1: color(display-p3 0.1529411765 0.4588235294 0.7921568627/1);
  --purple-7: color(display-p3 0.8392156863 0.8352941176 0.9921568627/1);
  --icon-purple-4: color(display-p3 0.7058823529 0.6980392157 1/1);
  --fr-1: color(display-p3 0.9490196078 0.2862745098 0/1);
  --blue-4: color(display-p3 0.9647058824 0.9882352941 0.9960784314/1);
  --usdt-1: color(display-p3 0.1490196078 0.631372549 0.4823529412/1);
  --warm-purple: color(display-p3 0.7568627451 0.5607843137 1/1);
  --menu-icon-surface: color(display-p3 1 1 1/1);
  --fp-6: color(display-p3 0.1529411765 0.1333333333 0.1568627451/0.3);
  --icon-purple-7: color(display-p3 0.5019607843 0.4588235294 1/1);
  --breakpoint-md: 768px;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Aave · Features.
Reference design system (extracted from the live site):
- Palette: #08f9bb, #9484f4, #0eab4a, #46988b, #96bccf
- Typefaces: Aave Repro
- Macrostructure: Marquee Hero
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/aave-com--gho

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Aave Repro

72px

550

1.1

-3.6px

Aa Bb Cc

Aave Repro

40px

500

1.2

-1.2px

Aa Bb Cc

Aave Repro

16px

450

1.36

-0.16px

Aa Bb Cc

body

Aave Repro

16px

400

1.4

Aa Bb Cc

button

Aave Repro

14px

450

1.4

Aa Bb Cc

:root { --color-dominant: #08f9bb; --color-surface: #9484f4; --color-ink: #0eab4a; --color-accent: #46988b; --color-detail: #96bccf; } /* CSS variables exposed by source */ :root { --border-p-1: color(display-p3 0.1490196078 0.1333333333 0.1568627451/0.1); --fg-3: color(display-p3 0.5607843137 0.5568627451 0.5568627451/1); --border-p-3: color(display-p3 0.1490196078 0.1333333333 0.1568627451/0.03); --fg-2: color(display-p3 0.3882352941 0.3803921569 0.3803921569/1); --font-mono: "Aave Repro Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --border-1: color(display-p3 0.9450980392 0.9450980392 0.9411764706/1); --border-2: color(display-p3 0.8823529412 0.8823529412 0.8784313725/1); --font-app: "Inter Variable", "Inter", sans-serif; --bg-1: color(display-p3 1 1 1/1); --primary-text: #fff; --bg-panel: color(display-p3 0.9843137255 0.9843137255 0.9843137255/1); --fg-1: color(display-p3 0.1294117647 0.1137254902 0.1137254902/1); --bg-4: color(display-p3 0.968627451 0.9647058824 0.9647058824/1); --font-serif: "Aave Aguzzo", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --bg-2: color(display-p3 1 1 1/1); --fg-4: color(display-p3 0.737254902 0.7333333333 0.7333333333/1); --bg-3: color(display-p3 0.9803921569 0.9803921569 0.9764705882/1); --font-regola: "FT Regola Neue", "Inter Variable", "Inter", sans-serif; --border-p-2: color(display-p3 0.1490196078 0.1333333333 0.1568627451/0.05); --primary: color(display-p3 0.5921568627 0.5568627451 1/1); --yellow-1: color(display-p3 1 0.768627451 0.1725490196/1); --push-color: color(display-p3 0 0 1/1); --duration-snappy: 750ms; --purple-8: color(display-p3 0.8980392157 0.8980392157 1/1); --fp-4: color(display-p3 0.1529411765 0.1333333333 0.1568627451/0.5); --icon-purple-5: color(display-p3 0.5764705882 0.568627451 0.968627451/1); --purple-6: color(display-p3 0.8156862745 0.8078431373 1/1); --gho-2: color(display-p3 0.5764705882 0.9137254902 0.6705882353/1); --icon-purple-6: color(display-p3 0.5921568627 0.5568627451 1/1); --rich-purple-2: color(display-p3 0.5254901961 0.4705882353 1/1); --_number-flow-d: 0; --purple-2: color(display-p3 0.5764705882 0.568627451 0.9960784314/1); --ease-snappy: cubic-bezier(0.175,0.885,0.32,1.1); --icon-purple-2: color(display-p3 0.7921568627 0.7803921569 0.9960784314/1); --gho-1: color(display-p3 0.1568627451 0.8274509804 0.3450980392/1); --_number-flow-dx: 0px; --wallet: color(display-p3 0.0039215686 0.5529411765 1/1); --deep-purple: color(display-p3 0.2980392157 0.1215686275 0.368627451/1); --fp-0: color(display-p3 0.1450980392 0.1333333333 0.1568627451/1); --inset-highlight: rgb(255 255 255/0.15); --focus: color(display-p3 0.5960784314 0.5960784314 1/1); --fp-5: color(display-p3 0.1529411765 0.1333333333 0.1568627451/0.4); --purple-3: color(display-p3 0.5921568627 0.5568627451 1/1); --yellow-2: color(display-p3 1 0.8392156863 0.1921568627/1); --icon-purple-3: color(display-p3 0.7843137255 0.7803921569 1/1); --breakpoint-lg: 1024px; --error-color: color(display-p3 0.9490196078 0.2862745098 0/1); --fp-2: color(display-p3 0.1529411765 0.1333333333 0.1568627451/0.9); --fp-3: color(display-p3 0.1529411765 0.1333333333 0.1568627451/0.65); --usdc-1: color(display-p3 0.1529411765 0.4588235294 0.7921568627/1); --purple-7: color(display-p3 0.8392156863 0.8352941176 0.9921568627/1); --icon-purple-4: color(display-p3 0.7058823529 0.6980392157 1/1); --fr-1: color(display-p3 0.9490196078 0.2862745098 0/1); --blue-4: color(display-p3 0.9647058824 0.9882352941 0.9960784314/1); --usdt-1: color(display-p3 0.1490196078 0.631372549 0.4823529412/1); --warm-purple: color(display-p3 0.7568627451 0.5607843137 1/1); --menu-icon-surface: color(display-p3 1 1 1/1); --fp-6: color(display-p3 0.1529411765 0.1333333333 0.1568627451/0.3); --icon-purple-7: color(display-p3 0.5019607843 0.4588235294 1/1); --breakpoint-md: 768px; }

Build a landing page in the visual style of Aave · Features. Reference design system (extracted from the live site): - Palette: #08f9bb, #9484f4, #0eab4a, #46988b, #96bccf - Typefaces: Aave Repro - Macrostructure: Marquee Hero Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/aave-com--gho