A clean, whiteboard-like space for rigorous startup validation.
02
Color
#0D1F2DInk
#FFFFFFBG
#6B7C8DMuted
rgba(0,0,0,0.1)Line
High contrast between deep navy ink and pure white background for focus and authority.
03
Typography
geometric-sans
display48px · 700
body18px · 400
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent multiples of 4px for precise vertical rhythm.
05
Surfaces
sm · 4px
md · 6px
lg · 8px
pill · 999px
1px solid border for subtle definition, no heavy shadows.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Centered, single-column layout with generous whitespace.
07
Motion & Interaction
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Simple fade-in for content load.
Subtle color shift or underline on interactive elements. · Immediate visual feedback on button press.
08
Components
buttonSolid dark fill for primary action, outline style for secondary action.
heroCentered, minimal hero with large bold title, concise subtitle, and two clear action buttons.
09
Voice & Don'ts
ToneProfessional, direct, and trustworthy.
HeadlinesBold, concise, and action-oriented.
CTAsClear, benefit-driven phrases.
Don't use vibrant gradients or colorful accents — the screenshot shows a strictly monochromatic palette of navy, gray, and white.
Don't use playful or rounded typography — the screenshot displays a bold, geometric sans-serif font for a professional tone.
Don't add heavy drop shadows or complex card textures — the screenshot shows a flat, clean layout with no shadows.
Don't use small, cramped layouts — the screenshot shows generous whitespace and centered, breathable content.
Don't mix multiple font families — the screenshot uses a single sans-serif family for all visible text.
Don't use outlined or hollow icons — the screenshot contains no icons, relying purely on typography and button styles.
Avoid: Jargon
Avoid: Overly casual language
Avoid: Vague promises
11
System prompt
A minimalist SaaS landing page for a startup validation tool. It uses a high-contrast palette of deep navy (#0D1F2D) ink on a pure white (#FFFFFF) background, with muted gray (#6B7C8D) for secondary text. Typography is bold, geometric sans-serif, creating a professional and trustworthy feel. The layout is a centered, single-column hero with generous whitespace. Critical don'ts: avoid colorful gradients, playful fonts, heavy shadows, or cramped layouts. Focus on restraint, clarity, and a calm, authoritative tone.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
