A high-end independent publishing house with a gallery-like presentation.
02
Color
#272727Ink
#717171Ink soft
#ffffffBG
#949494BG quiet
rgba(39,39,39,0.15)Line
High-contrast monochromatic base relying on white space and typography for hierarchy.
03
Typography
transitional-serif · humanist-sans
display80px · 300
heading50px · 300
body20px · 300
Extremely light weights (300) for all primary typography. · Large, generous tracking on uppercase navigation and labels. · Tight negative letter-spacing for large display typography.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous vertical whitespace between major content blocks to emphasize a calm, editorial pace.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Thin 1px solid borders in dark ink on a light background.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-width photographic hero followed by a centered, spacious grid for product or editorial content.
07
Motion & Interaction
200msmicro
200mssmall
200msmedium
ease-in-outeasing
Subtle 0.2s ease-in-out transitions for standard UI elements like fills and borders. · Staggered 0.2s delays for icon transforms.
Subtle color or border transitions over 0.2 seconds. · Standard pointer cursor with no aggressive tactile feedback.
08
Components
buttonPill-shaped with generous padding and 1px borders, or solid black with white text.
cardClean layouts dominated by large imagery and minimal text overlays.
chipPill-shaped status tags with uppercase text.
inputClean rectangular fields with clear labels.
heroFull-bleed photographic background with light, large serif or sans-serif text overlaid.
09
Voice & Don'ts
ToneSophisticated, understated, and highly professional.
HeadlinesLarge, light-weight, and commanding.
CTAsUnderstated uppercase tracking or solid, clean pill shapes.
Don't use saturated neon colors — screenshot shows a strictly monochromatic, high-contrast palette.
Don't use heavy, bold font weights — screenshot shows a consistent use of light weights (300) for all text.
Don't use small, cramped spacing — screenshot shows generous vertical whitespace between sections.
Don't use complex gradients — screenshot shows solid white backgrounds and flat photographic elements.
Don't use aggressive drop shadows — screenshot shows completely flat surfaces without any depth effects.
Don't use playful, rounded display fonts — screenshot shows refined, light-weight sans-serif and transitional typography.
Captured from the live site · real computed styles
11
System prompt
A refined editorial and publishing platform (vol.co) featuring a minimalist, monochromatic design. The design DNA is built on a high-contrast palette of white (#ffffff) and deep ink (#272727), supported by a secondary gray (#949494). Typography is consistently light-weight (300), utilizing humanist-sans and transitional-serif categories. Key rules: maintain extreme whitespace, avoid bold font weights, and reject any saturated neon colors or complex gradients. The interaction model is calm, using smooth 0.2s ease-in-out transitions for all standard UI elements.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
