Strict high-contrast monochrome with sparse, intentional use of vibrant color in project imagery.
03
Typography
transitional-serif · grotesque-sans
display48px · 400
body16px · 400
Typeface names are set in large, tight-spaced transitional or geometric styles · Body text is set in a neutral grotesque sans-serif · Font weights are predominantly regular (400)
04
Spacing
4px
8px
12px
15px
16px
20px
25px
48px
Consistent 20px to 25px gaps between grid items
05
Surfaces
sm · 4px
md · 5px
lg · 5px
pill · 999px
1px solid #000000 or #8C8C8C for horizontal rules
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Left-aligned labels with a large multi-column grid for content
07
Motion & Interaction
100msmicro
300mssmall
300msmedium
ease-outeasing
Fast 0.1s ease-out transitions on hover states
Cursor changes to pointer on clickable elements · Standard pointer interaction
08
Components
buttonMinimal text link or ghost button with a 1px border
cardVisual project tiles without borders or shadows
heroLarge graphic composition showcasing a typeface in a technical grid
09
Voice & Don'ts
ToneQuiet, confident, and highly professional
HeadlinesLarge typographic names acting as primary headings
CTAsUnderstated text links or ghost buttons
don't use drop shadows — screenshot shows flat, grid-based layout
don't use border-radius on large elements — screenshot shows sharp corners (except small 5px radius)
don't use heavy font weights — screenshot shows predominantly regular weight typography
don't use centered layouts — screenshot shows strict left-alignment for labels and navigation
don't use decorative backgrounds — screenshot shows solid white or light gray (#F9F9F9) backgrounds
don't use multi-colored navigation — screenshot shows black and muted gray text only
Captured from the live site · real computed styles
11
System prompt
A Swiss type foundry portfolio characterized by minimalist, grid-driven design and strict monochrome palettes. Key colors include a pure white (#FFFFFF) background, solid black (#000000) ink, and a muted gray (#8C8C8C) for secondary text. Typography is a mix of grotesque sans-serif for UI and transitional or geometric serifs for typeface showcases, with a 48px display scale. Critical design rules: maintain sharp corners (max 5px), use 1px solid borders for separation, and rely on strict left-alignment. Do not use decorative shadows, varied font weights, or vibrant UI colors (save those for project imagery only).
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
