Strict monochrome UI to allow the colorful photographic content to take center stage without competition.
03
Typography
geometric-sans · humanist-sans
display160px · 400
heading28px · 400
body16px · 400
Use massive, oversized typography to anchor the floating chaotic elements. · Maintain a strict weight of 400 (Regular) across almost all elements to preserve a clean, quiet baseline. · Avoid decorative or italicized text to maintain a stark, brutalist aesthetic.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
irregular
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
none
06
Layout
1920container
12columns
24pxgutter
768 / 1024breakpoints
A fluid, non-grid canvas where elements are placed using absolute positioning or CSS transforms to create a floating effect.
07
Motion & Interaction
220msmicro
400mssmall
2000msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
Long, smooth opacity transitions (2s) for element reveals · Cubic-bezier easing for interactive state changes · Continuous subtle floating or parallax movements
Elements may change state via a pointer cursor, often triggering subtle scaling or opacity shifts. · Direct interaction with floating photographic elements.
08
Components
buttonMinimal interactive states, mostly represented by clickable floating elements or raw links.
cardCircular or elliptical photographic crops with no padding, borders, or shadows.
heroA dynamic, full-screen canvas populated by floating, rotated, and scaled circular images anchored by a massive bottom-aligned logotype.
09
Voice & Don'ts
ToneAbstract, minimal, and non-verbal.
HeadlinesMassive, stark, and strictly lowercase or uppercase without emotional inflection.
CTAsSubtle or entirely absent, relying on the visual composition to guide the user.
Don't use standard UI containers — screenshot shows floating circular elements without borders or shadows.
Don't use a traditional grid system — screenshot shows elements scattered across the viewport in a fluid, non-aligned manner.
Don't use varied font weights — screenshot shows almost exclusively Regular (400) weight text.
Don't use background colors other than white — screenshot shows a strict white (#FFFFFF) background.
Don't use standard rounded rectangles for buttons or cards — screenshot shows purely circular or elliptical crops.
Don't use busy or textured backgrounds — screenshot shows a clean, stark white void.
Captured from the live site · real computed styles
11
System prompt
A highly experimental and expressive photographic portfolio. Positioning: An abstract, artistic canvas that prioritizes visual exploration over standard UI patterns. Key hex colors: #FFFFFF background and #000000 foreground. Font categories: geometric-sans for display and humanist-sans for body, both strictly at Regular (400) weight. Critical donts: Do not use standard grid layouts; do not apply heavy borders, shadows, or container backgrounds; do not use bold or italic typography. The system relies on fluid, absolute positioning and long opacity transitions to create a dynamic, floating experience.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
