Maximum contrast between pure black and pure white, with structured transparency for secondary elements.
03
Typography
grotesque-sans
body16px · 400
bodySmall14px · 400
Typography is set to a standard geometric/grotesque sans-serif with a 400 weight. · Line heights are exceptionally tight to create dense, compact blocks of text. · No decorative styling, italics, or bold weights are used; hierarchy is established through position and density.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
Strict 4px base unit applied consistently to padding and gutters.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Solid 1px lines using rgba(255, 255, 255, 0.4) to divide vertical columns.
06
Layout
1920container
12columns
12pxgutter
768 / 1024breakpoints
A strict multi-column grid layout (typically 6 to 8 columns on desktop) defined by vertical white dividing lines.
07
Motion & Interaction
350msmicro
350mssmall
350msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Uniform 0.35s transition applied globally to all interactive states.
Subtle opacity or color shifts on text elements, managed via a standard 0.35s transition. · Immediate state change without bounce or exaggerated feedback.
08
Components
buttonText-only interactive elements with 10px 12px padding and 0.35s transitions.
cardText-only list items without containers or backgrounds.
heroPurely typographic text-only hero section with no imagery.
09
Voice & Don'ts
ToneObjective, archival, and strictly professional.
HeadlinesDirect, unadorned, and functional naming.
CTAsPlain text links with no buttons, borders, or background fills.
Don't use colored accents — screenshot shows a strict monochrome black-and-white palette.
Don't add drop shadows or cards — screenshot shows entirely flat, container-less list structures.
Don't use serif fonts — screenshot shows a purely sans-serif typeface.
Don't use bold weights — screenshot shows uniform 400 font-weight across all elements.
Don't use large spacing — screenshot shows extremely tight line heights and small padding.
Don't use decorative borders — screenshot shows only simple, single-pixel vertical dividing lines.
Avoid: Exclamation marks
Avoid: Emojis
Avoid: Marketing buzzwords
Avoid: Visual clutter
11
System prompt
This is a hyper-minimal, text-only portfolio site for a creative professional. The design DNA is built on a strict, high-contrast black (#000000) and white (#ffffff) palette, with secondary text and borders using a consistent rgba(255, 255, 255, 0.4). The typography is exclusively a grotesque-sans category at 400 weight, utilizing very tight line heights (around 18px for 14px text) to create dense, architectural columns of text. Layout is defined by a multi-column grid with vertical dividers. Critical constraints: absolutely no imagery, no colors other than black/white/gray, no bold weights, no rounded corners, and no decorative UI elements. The site must remain strictly grid-based and text-focused to preserve its professional, archival tone.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
