A high-fashion editorial layout meeting a brutalist portfolio.
02
Color
#282828Ink
#FFFFFFBG
#DCDCDCMuted
rgba(40, 40, 40, 0.2)Line
High-contrast monochrome with restrained typography.
03
Typography
transitional-serif · geometric-sans · monospaced
display142px · 400
displaySmall125px · 700
body16px · 400
caption12px · 400
Display typography uses a high-contrast transitional serif with sharp serifs. · Body and UI elements use a clean, standard geometric sans-serif system font. · Extreme contrast in font sizes creates a distinct visual hierarchy.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous whitespace and strong alignment anchors the layout.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 0px
Thin 1px lines used for separation.
06
Layout
1440container
12columns
24pxgutter
768 / 1024breakpoints
Asymmetric two-column layout with a massive header.
07
Motion & Interaction
200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hover transitions · fade
Subtle opacity change on text elements. · Standard pointer cursor.
08
Components
buttonPlain text links with no background or borders.
cardList-based project rows with simple horizontal dividers.
chipNo chips used.
inputNo inputs used.
heroMassive typographic header spanning the full width.
09
Voice & Don'ts
ToneDirect, personal, and understated.
HeadlinesMassive, serif, and numeric.
CTAsMinimalist, text-only links.
Don't use rounded corners — screenshot shows sharp, square edges.
Don't use bright accent colors — screenshot shows a strict monochrome palette.
Don't use drop shadows — screenshot shows flat, borderless surfaces.
Don't use playful sans-serif display fonts — screenshot shows a sharp transitional serif for headlines.
Don't center-align everything — screenshot shows a structured, left-aligned grid.
Don't crowd elements together — screenshot shows generous whitespace.
Avoid: Excessive decoration
Avoid: Bright neon colors
Avoid: Rounded corners
11
System prompt
Design a portfolio website that feels like a high-end editorial spread. Use a strict monochrome palette with #FFFFFF backgrounds and #282828 text, avoiding any bright accent colors. Set primary display typography in a sharp transitional serif (like Times New Roman) at massive scales (142px), while keeping UI elements in a clean sans-serif. Layout should be an asymmetric grid with strong left alignment and generous whitespace. Critical constraints: no rounded corners, no drop shadows, and no bright accent colors; the design must remain stark and typographically driven.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
