A calm, well-documented archive of a design studio's past work.
02
Color
#2c7ef8Accent
#383734Ink
#7a7874Ink soft
#f6f6f4BG
rgba(0,0,0,0.1)Line
Extreme restraint with a predominantly monochromatic palette and a single, functional blue accent for links.
03
Typography
condensed-grotesque · humanist-sans · monospace
display56px · 700
body16px · 400
caption12px · 400
Use a condensed grotesque for massive display text. · Use a humanist sans for readable body copy. · Use a monospace font with wide tracking for small, uppercase utility text.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
Standard 4px base with generous whitespace to support a calm, breathable layout.
05
Surfaces
sm · 4px
md · 600px
lg · 600px
pill · 600px
None visible; separation is achieved purely through spacing and layout.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A single-column primary content area with navigation and footer elements pushed to the top and bottom extremes.
07
Motion & Interaction
0msmicro
0mssmall
0msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
Static layout with no visible animations or transitions in the screenshot.
Subtle opacity changes on interactive elements. · Standard link navigation.
08
Components
buttonMinimalist pill-shaped buttons with a thin border and generous internal padding.
cardNone visible.
chipSmall, pill-shaped avatar chips for team members.
inputNone visible.
heroA massive, vertically stacked condensed typography logo serving as the visual anchor at the bottom.
09
Voice & Don'ts
ToneCalm, professional, and slightly nostalgic.
HeadlinesLarge, impactful condensed typography.
CTAsRestrained, often just a text link or a minimal bordered pill button.
don't use bright or chaotic colors — the screenshot shows a restrained monochromatic palette with a single functional blue.
don't use playful or rounded display fonts — the screenshot shows a highly condensed, rigid grotesque for display.
don't clutter the layout with multiple columns or grids — the screenshot shows a very open, single-column dominant layout.
don't use heavy drop shadows or 3D effects — the screenshot shows a completely flat, borderless aesthetic.
don't use bold weights for body text — the screenshot shows a regular weight of 400 for all standard copy.
don't use decorative elements like icons or illustrations — the screenshot relies entirely on typography and minimal avatars.
Captured from the live site · real computed styles
11
System prompt
This is a minimalist, calm portfolio site for a design studio in hiatus. The design DNA is defined by extreme restraint and typography-driven hierarchy. Key hex colors are a very light warm gray background (#f6f6f4) and a dark charcoal ink (#383734), with a single functional blue accent (#2c7ef8) used for links. The typography features a condensed grotesque for massive display text and a humanist sans for body copy. Critical donts include: never use loud, vibrant colors; never use rounded or playful typography; and never clutter the layout with unnecessary UI components or heavy shadows. The layout relies on generous whitespace and a single-column focus to create a sense of calm and professional elegance.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
