High-contrast monochrome with no decorative color.
03
Typography
grotesque-sans
display28px · 500
Use tight tracking for headlines. · Maintain high contrast for readability. · Use uniform font weight for consistency.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous vertical and horizontal spacing to emphasize whitespace.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
None visible.
06
Layout
1440container
12columns
24pxgutter
768 / 1024breakpoints
Four-column header layout with generous margins, no visible grid lines.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
No visible motion in the static screenshot.
Likely subtle color or opacity change on links. · Standard navigation behavior.
08
Components
heroText-only hero section with left-aligned typography.
09
Voice & Don'ts
ToneDirect, professional, and understated.
HeadlinesBold, concise, and informational.
CTAsSimple text links, no buttons.
Don't use color accents — the screenshot shows a strict monochrome palette.
Don't use decorative borders or shadows — the screenshot shows a borderless, shadowless layout.
Don't use complex UI components — the screenshot shows only text and links.
Don't use centered layouts — the screenshot shows a left-aligned text structure.
Don't use rounded corners on elements — the screenshot shows a strictly rectangular aesthetic.
Don't use imagery or illustrations — the screenshot shows a text-only interface.
Avoid: Decorative language
Avoid: Emojis
Avoid: Promotional tone
11
System prompt
This is a minimalist personal portfolio site for a designer and creative coder. It uses a strict monochrome palette with a pure black background (#000000) and white (#FFFFFF) text. The typography is a clean grotesque sans-serif category, used for both headlines and body text. The layout is extremely minimal, with left-aligned text in a header structure and large amounts of black space. Key critical donts: 1. Don't introduce any color accents; 2. Don't use rounded corners or shadows; 3. Don't center the text content; 4. Don't add imagery or illustrations. The site is purely typographic and informational.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
