A refined, minimal studio portfolio that lets the work speak for itself.
02
Color
#000000Ink
#3B3B3BInk soft
#FFFFFFBG
#F8F8F8BG soft
#DFDFDFMuted
rgba(0, 0, 0, 0.1)Line
High-contrast monochrome foundation that defers entirely to the project imagery.
03
Typography
grotesque-sans · monospace
display32px · 400
body14px · 400
Use grotesque-sans for all primary text. · Maintain uniform font weight of 400 across all elements. · Apply consistent letter spacing of 0.25px for all body and display text.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Strict 4px base unit with tight, consistent padding around text elements.
05
Surfaces
sm · 2px
md · 0px
lg · 0px
pill · 999px
Thin 1px solid borders using rgba(59, 59, 59, 0.3) for subtle separation.
none
06
Layout
1440container
12columns
24pxgutter
768 / 1024breakpoints
Full-width, edge-to-edge layout with project images spanning the entire viewport width and text constrained to a comfortable reading measure.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing
Transitions for padding and opacity on hover states. · Transform animations for interactive elements.
Subtle padding or opacity transitions to indicate interactivity. · Immediate response with no complex state changes.
08
Components
buttonMinimal inline text links with a 2px border radius and subtle hover states.
cardFull-bleed project entries consisting of a title, category, description, and a large hero image.
chipSmall, pill-shaped tags with a subtle background fill for categories.
inputNot present in the provided screenshot.
heroFull-width project imagery without traditional padding or framing.
09
Voice & Don'ts
ToneProfessional, direct, and understated.
HeadlinesClear, concise, and descriptive project titles.
CTAsSubtle, inline text links rather than prominent buttons.
Don't use bright accent colors — screenshot shows a strictly monochrome palette with no dominant high-chroma colors.
Don't use heavy font weights — screenshot shows a uniform font weight of 400 across all text.
Don't use complex shadows or depth — screenshot shows flat, borderless or subtly bordered layouts.
Captured from the live site · real computed styles
11
System prompt
Design a clean, professional portfolio website for a creative studio. Use a high-contrast monochrome palette with a white background (#FFFFFF), black text (#000000), and subtle grays (#F8F8F8, #DFDFDF). Set the primary typography to a grotesque sans-serif category with a uniform weight of 400 and consistent letter spacing of 0.25px. The layout should be full-width and edge-to-edge, with project imagery taking center stage and minimal, restrained UI elements. Critical donts: never use bright, saturated accent colors; never use bold or heavy font weights; never add complex shadows or decorative UI elements; never use aggressive calls to action; never use rounded corners beyond a minimal 2px radius; never use decorative typography.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
