A high-frequency trading terminal meets sci-fi infrastructure
02
Color
#D06BF8Accent
#FFFFFFInk
rgba(255,255,255,0.70)Ink soft
#0B0A10BG
#121212BG soft
#848895Muted
rgba(255,255,255,0.10)Line
Deep, absolute dark backgrounds with vibrant purple highlights and crisp white typography for maximum readability and futuristic feel.
03
Typography
geometric-sans · monospace
display80px · 400
heading40px · 500
body21px · 400
small16px · 400
Use geometric-sans for all headings and body text to maintain a cohesive, technical feel. · Apply tight negative letter-spacing to large display text for impact. · Ensure monospace is strictly reserved for code snippets or technical data representations.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
4px base unit with generous whitespace to allow the dark UI to breathe.
Full-width dark hero with a 12-column grid for content and partner showcases.
07
Motion & Interaction
220msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Subtle background color transitions on hover · Smooth color and border-color transitions for interactive elements · Transform scaling for button interactions
Subtle background color shifts and icon transforms. · Slight scale-down effect for primary action buttons.
08
Components
buttonPill-shaped primary buttons with dark text on white backgrounds; secondary buttons with dark borders.
cardDark cards with subtle borders and generous padding, often featuring partner logos.
chipSmall, pill-shaped tags for metadata or status indicators.
inputDark input fields with subtle borders and placeholder text.
heroFull-viewport hero section with massive typography and an abstract, vibrant 3D ribbon graphic.
09
Voice & Don'ts
ToneAuthoritative, technical, and visionary.
HeadlinesBold, impactful statements that emphasize scale and performance.
CTAsDirect, action-oriented language like 'Get started' or 'Learn More'.
don't use bright, saturated backgrounds — screenshot shows a deep dark (#0B0A10) theme.
don't use decorative or serif fonts — screenshot shows a clean geometric-sans typeface.
don't use rounded squares for primary buttons — screenshot shows pill-shaped (9999px radius) buttons.
don't use complex drop shadows on UI elements — screenshot shows subtle inset glows or flat borders.
don't use small, cramped typography — screenshot shows large, airy display text with negative letter-spacing.
don't use a wide variety of colors — screenshot shows a strictly limited palette of dark, white, and purple.
Captured from the live site · real computed styles
11
System prompt
Solana's design DNA is a premium, dark-mode developer and fintech platform. It uses a deep, near-black background (#0B0A10) contrasted with crisp white typography and vibrant purple (#D06BF8) accents. The layout is spacious, following a 12-column grid. Typography is centered around clean geometric-sans fonts (Diatype, DSemi) with large, tightly-spaced display headings. Critical design rules: never use bright backgrounds, avoid serif fonts, and maintain the high-contrast dark aesthetic with generous whitespace. Components like buttons and cards utilize pill shapes and subtle inset shadows to create depth without clutter.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
