A curated exhibition of digital artifacts on a pristine white gallery wall.
02
Color
#FD8878Accent
#000000Ink
#FFFFFFBG
#D6D0FFBG soft
rgba(0,0,0,0.2)Line
High-contrast black on white, punctuated by soft pastel and muted warm accents.
03
Typography
humanist-sans
display172px · 400
heading66px · 400
body31px · 400
Use Tex Gyre Heros for all primary display and body text. · Reserve the serif typeface for brand marks only. · Maintain tight negative letter-spacing for large display sizes.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px base scale with generous whitespace between sections.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Minimal borders used only to separate list items with a 2px top border.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-width sections with distinct top borders separating rows in the portfolio list.
07
Motion & Interaction
200msmicro
200mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Smooth 0.2s color transitions on interactive elements · Subtle 0.1s transform shifts on click · 0.5s height animations for expanding content
Color transition on text elements over 0.2s. · Subtle 0.1s transform scale effect.
08
Components
buttonLarge pill-shaped interactive areas with full rounded corners (999px radius) serving as primary category toggles.
cardSimple top-bordered list items containing index, title, and year columns.
heroA massive typographic hero section featuring stacked pill-shaped elements containing very large text.
09
Voice & Don'ts
ToneSophisticated, minimalist, and professional.
HeadlinesBold, tightly tracked, lowercase or title case, extremely large scale.
CTAsMinimal text, relying on large interactive surface areas rather than traditional button styling.
Don't use harsh borders — screenshot shows minimal 2px top borders only.
Don't use drop shadows — screenshot shows completely flat surfaces.
Don't use small button sizes — screenshot shows massive full-width pill shapes.
Don't use centered navigation — screenshot shows left-aligned site name and right-aligned links.
Don't use complex grids — screenshot shows a strict single-column linear list.
Captured from the live site · real computed styles
11
System prompt
A minimalist computational design studio portfolio utilizing a high-contrast palette of black (#000000) on white (#FFFFFF), punctuated by soft lavender (#D6D0FF) and muted coral (#FD8878) accents. The typography relies on humanist-sans for massive, tightly tracked display text and clean body copy. Critical design rules include: maintain strict single-column layout with full-width interactive pills, avoid heavy shadows and drop effects entirely, and use generous whitespace between top-bordered list items.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
