A high-performance sports car for backend development
02
Color
#ffffffInk
rgba(255,255,255,0.5)Ink soft
#000000BG
rgba(255,255,255,0.125)BG soft
#808080Muted
High contrast monochrome palette with subtle texture overlays
03
Typography
geometric-sans · monospace
display56px · 500
heading32px · 500
body16px · 400
caption12px · 500
Display uses geometric sans with tight tracking · Body uses same geometric sans family at regular weight · Mono font used for code snippets · Uppercase transform for labels and metadata
04
Spacing
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
96px
Consistent 4px grid with generous padding
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 40px
1px solid rgba(255,255,255,0.125)
0 4px 24px rgba(0,0,0,0.5)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-width sections with generous padding
07
Motion & Interaction
150msmicro
300mssmall
800msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing
Smooth hover transitions on interactive elements · Staggered fade-in animations for content sections
Subtle opacity and transform changes · Immediate response with visual feedback
08
Components
buttonPill-shaped primary button with solid white background and black text
cardSimple cards with subtle border and background tint
chipSmall uppercase labels with letter spacing
inputMinimal input fields with subtle borders
heroFull-width hero with large typography and code snippet preview
09
Voice & Don'ts
ToneConfident, technical, and developer-focused
HeadlinesBold, direct statements about capability
CTAsClear action-oriented buttons with directional arrows
Don't use colorful gradients — screenshot shows monochrome palette
Don't use serif fonts — screenshot shows geometric sans throughout
Don't use busy backgrounds — screenshot shows clean dark surfaces
Don't use small touch targets — screenshot shows generous padding
Don't use decorative elements — screenshot shows minimal, functional design
Don't use complex animations — screenshot shows subtle, purposeful motion
Captured from the live site · real computed styles
11
System prompt
Payload CMS is a developer-first headless CMS positioned as the modern backend solution for web development. Key visual elements include a dark theme (#000000 background) with white (#ffffff) typography using geometric sans-serif fonts. The design emphasizes bold, large headlines with tight tracking and minimal decorative elements. Critical constraints: maintain strict monochrome palette without colorful accents, use consistent geometric sans typography hierarchy, ensure generous spacing and padding throughout. Avoid serif fonts, gradients, or overly decorative elements that would compromise the clean, technical aesthetic. The interface prioritizes developer experience with code snippets, terminal-style commands, and clear visual hierarchy for technical content.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
