A bold, geometric gateway to decentralized finance, blending technical precision with approachable, playful aesthetics.
02
Color
#0A0A0AInk
#3D065FInk soft
#FFF0E6BG
#E5FFC3BG soft
#F7F9FCBG quiet
#573D46Muted
rgba(10,10,10,0.1)Line
A bold, high-contrast palette that uses expressive, saturated colors against soft pastels to create visual interest.
03
Typography
geometric-sans · monospace
display120px · 700
h148px · 600
body16px · 400
caption12px · 400
Headlines use extremely tight line-heights and letter-spacing for impact. · Body text maintains high legibility with standard weight. · UI labels and navigation use a medium weight.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
A consistent 4px base grid with a linear scale for predictable, harmonious spacing.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Minimal, relying on background color contrast and strong typography for separation.
A centered, column-driven layout with large, expressive hero sections and a grid-based feature showcase.
07
Motion & Interaction
137msmicro
367mssmall
550msmedium
cubic-bezier(0.4, 1.35, 0.5, 0.97)easing
Bouncy, elastic easing on transforms for a playful feel. · Smooth opacity fades for element transitions. · Eased delays for staggered entry animations.
Subtle transforms and color shifts on interactive elements. · Minimal visual feedback beyond standard focus states.
08
Components
buttonPill-shaped, high-contrast (black or dark purple with white text) buttons with generous padding.
cardColorful, rounded-corner cards with solid background fills and no visible borders, used for feature highlights.
chipNot a prominent element in this view.
inputSimple, pill-shaped input fields with clean borders.
heroMassive, tightly stacked typography dominating the viewport, accompanied by abstract geometric illustrations.
09
Voice & Don'ts
ToneConfident, direct, and empowering, positioning the product as an essential tool.
HeadlinesShort, impactful, and action-oriented phrases presented in massive, bold typography.
CTAsSimple, direct calls to action ('GET METAMASK') in high-contrast pill buttons.
Don't use thin, lightweight fonts for headlines — the screenshot shows extremely heavy, bold display typography.
Don't use a dark mode as default — the primary backgrounds are soft pastels like peach and lime green.
Don't apply heavy box shadows to cards — the screenshot shows flat, colorful surfaces without drop shadows.
Don't use sharp, rectangular buttons — the screenshot shows consistently pill-shaped (high-radius) buttons.
Don't create dense, text-heavy layouts — the screenshot shows generous whitespace and large, impactful type.
Don't use a muted, monochromatic color palette — the screenshot shows vibrant, multi-colored sections.
Captured from the live site · real computed styles
11
System prompt
Design a bold, expressive Web3 product site that feels both technically credible and approachably playful. Use a core palette of soft peach (#FFF0E6) and lime (#E5FFC3) backgrounds with deep purple (#3D065F) and dark teal (#013330) for high contrast. Typography should be a mix of an ultra-bold geometric display font for massive headlines and a clean, geometric sans-serif for body copy. Key interactions should feel bouncy and elastic. CRITICAL: Never use thin fonts for headings; always use pill-shaped buttons; avoid default dark mode; keep layouts spacious with large text; do not add heavy shadows to cards; ensure colors are vibrant and high-contrast.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
