A quiet, confident announcement blog post for a developer audience.
02
Color
#e3e8efInk
#b4bcd0Ink soft
#0f1225BG
#1a2035BG soft
#6b7394Muted
rgba(107, 115, 148, 0.4)Line
High-contrast dark mode with cool blue undertones, prioritizing readability and focus.
03
Typography
grotesque-sans · monospace
display36px · 500
body16px · 400
Geist is used for both display and body text, maintaining a consistent technical aesthetic. · Paragraphs have generous line-height (1.6) to ensure readability of dense text on a dark background. · Bold weight (700) is used sparingly for emphasis within paragraphs.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Vertical rhythm is established through consistent paragraph spacing and list item gaps.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Minimal borders, primarily used for subtle separation or list item markers.
06
Layout
720container
1columns
24pxgutter
768breakpoints
Single-column centered text layout with generous margins for maximum readability.
07
Motion & Interaction
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Subtle color and text-decoration transitions on interactive elements.
Subtle color transition on hover for interactive elements. · Standard click behavior.
08
Components
buttonNo buttons visible.
cardNo cards visible.
chipNo chips visible.
inputNo inputs visible.
heroText-based hero with large grainy logo marks, a prominent heading, and introductory paragraphs.
09
Voice & Don'ts
ToneProfessional, sincere, and community-focused.
HeadlinesDirect, declarative, and celebratory.
CTAsInformative links within the text.
Don't use a white background — screenshot shows a dark navy/blue-black background.
Don't use a serif font for body text — screenshot shows a clean sans-serif (Geist) throughout.
Don't add colorful accents or bright buttons — screenshot relies on monochromatic white/gray text on dark.
Don't use a multi-column grid layout — screenshot shows a single-column centered text layout.
Don't add heavy drop shadows or glassmorphism effects — screenshot uses a flat, matte surface.
Don't use a justified text alignment — screenshot uses left-aligned text.
Captured from the live site · real computed styles
11
System prompt
This is a minimalist, dark-mode developer blog post announcing the acquisition of NuxtLabs by Vercel. The design prioritizes readability and focus with a centered single-column layout. Key colors are a deep navy background (#0f1225) and cool gray/white text (#e3e8ef). The typography uses the Geist sans-serif family for all text, creating a clean, technical aesthetic. The system should avoid colorful accents, complex layouts, or any non-sans-serif typography. Critical don'ts: don't use a white background, don't use serif fonts, don't add colorful accents or buttons, don't use multi-column layouts, don't use heavy shadows, and don't use justified text.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
