A precision-engineered developer tool with the aesthetic of a modern fintech dashboard.
02
Color
#4FF7D1Accent
#FFFFFFInk
#C5CAE9Ink soft
#0D1318BG
#162129BG soft
#293945BG quiet
#C5CACEMuted
rgba(255,255,255,0.1)Line
Dark mode foundation with high-contrast neon accents for critical call-to-actions.
03
Typography
geometric-sans · ui-monospace
display64px · 800
body16px · 400
Use Inter (geometric-sans) for all UI and body text. · Maintain tight negative letter-spacing for large display headlines. · Use a clean, highly legible geometric sans-serif for all UI elements.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px base scale providing clear, breathable padding and gaps.
05
Surfaces
sm · 4px
md · 12px
lg · 16px
pill · 9999px
1px solid rgba(255,255,255,0.1)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-width dark sections with centered, constrained content blocks.
07
Motion & Interaction
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth color and background-color transitions on hover states. · Subtle opacity changes for interactive elements.
Smooth background-color and text-color transitions over 150-200ms. · Immediate visual feedback with reduced opacity or color shift.
08
Components
buttonHigh-contrast pill buttons with neon backgrounds and dark text.
cardSubtle bordered cards with dark backgrounds and soft rounded corners.
chipSmall pill-shaped labels with muted backgrounds.
inputClean input fields with subtle borders and dark backgrounds.
heroMassive centered text-heavy hero with prominent neon accent elements.
09
Voice & Don'ts
ToneAuthoritative, technical, and forward-looking.
HeadlinesShort, punchy, and highly descriptive technical statements.
CTAsDirect, action-oriented commands with neon emphasis.
don't use white backgrounds — screenshot shows a deep dark (#0D1318) foundation.
don't use decorative serif fonts — screenshot shows a clean, geometric sans-serif.
don't use multiple accent colors — screenshot shows neon mint green (#4FF7D1) as the sole dominant high-chroma accent.
don't use soft drop shadows — screenshot shows subtle 1px borders and background color shifts for elevation.
don't use small, cramped spacing — screenshot shows generous padding (e.g., 40px, 128px) around content blocks.
don't use lowercase for all headlines — screenshot shows standard title case or sentence case for technical statements.
Avoid: Avoid informal or casual language.
Avoid: Avoid generic marketing fluff without technical substance.
Captured from the live site · real computed styles
11
System prompt
This is a modern developer tools SaaS site for a database platform. The design uses a very dark, cool-toned background (#0D1318) contrasted with a high-energy neon mint accent (#4FF7D1). Typography relies on a clean geometric sans-serif with large, tightly tracked headlines and highly legible body text. Layouts are spacious and centered, emphasizing clarity and technical authority. Critical don'ts include: avoid light backgrounds, avoid decorative fonts, avoid multiple competing accent colors, and avoid heavy drop shadows. The voice is technical, direct, and focused on modern infrastructure.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
