Warm neutral canvas to let the vibrant character portraits pop
03
Typography
transitional-serif · geometric-sans
display64px · 700
body18px · 400
caption14px · 500
Serif for display, geometric sans for body text
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous whitespace to separate sections
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(0,0,0,0.1)
0 2px 8px rgba(0,0,0,0.05)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Grid of character cards, followed by a split text section
07
Motion & Interaction
200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Scrolling ticker text
Subtle scale or brightness change on interactive elements · Standard button press state
08
Components
buttonSolid dark pill buttons with white text
cardRounded corner cards with pastel backgrounds for characters
heroFull-width scrolling grid of character portraits
09
Voice & Don'ts
TonePlayful and enthusiastic
HeadlinesLarge, bold serif headlines
CTAsDirect and action-oriented (e.g., 'Connect Wallet', 'Buy')
don't use a dark mode theme — the screenshot shows a light, warm off-white background
don't use sharp, square corners on images — the screenshot shows soft, rounded corners
don't use a monospace font — the screenshot shows a mix of serif and sans-serif
don't use a cold, clinical color palette — the screenshot shows warm, pastel tones
don't use dense, cramped layouts — the screenshot shows generous spacing and a clear grid
don't use overly technical or formal language — the screenshot uses playful, accessible copy
Avoid: Formal language
Avoid: Dark or moody aesthetics
Avoid: Complex jargon
11
System prompt
This is a playful and colorful NFT collection landing page. It features a warm, off-white background with a grid of 3D character portraits on pastel backgrounds. The design DNA is characterized by a mix of a transitional serif for bold headlines and a geometric sans-serif for body text. Key colors are a warm neutral (#F4F3EF) and a vibrant accent (#FF5722). Critical donts: avoid dark mode, sharp corners, or monospace fonts. The layout is clean and generous, with a focus on showcasing the charming character art.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
