A curated gallery of high-end design case studies with a quiet, confident presence.
02
Color
#171717Ink
#737373Ink soft
#FAF4F4BG
rgba(23,23,23,0.1)Line
High-contrast neutral palette with a subtle warm-tinted background to let project imagery stand out.
03
Typography
grotesque-sans · humanist-sans
display40px · 500
body16px · 400
Use tight negative tracking on large display headlines for a sharp, modern feel. · Maintain a consistent weight of 400 for body text to keep the reading experience calm. · Project titles should use a slightly larger size or bold weight to distinguish from descriptions.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
128px
Generous vertical padding and consistent horizontal gutters create an open, breathable layout.
05
Surfaces
sm · 4px
md · 16px
lg · 24px
pill · 999px
1px solid rgba(23,23,23,0.1) for subtle structural separation.
0 4px 24px rgba(0,0,0,0.08)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Centered hero section with a horizontally scrollable grid of project cards below.
07
Motion & Interaction
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth color and background transitions on interactive elements. · Subtle opacity fades for loading or state changes.
Subtle color shifts or opacity changes to indicate interactivity. · Immediate visual feedback with a slight scale or color adjustment.
08
Components
buttonPill-shaped buttons with minimal borders and rounded corners.
cardLarge rectangular cards with generous rounded corners and high-quality project imagery.
chipN/A
inputN/A
heroCentered text block with a large headline and descriptive subtext, positioned above the project grid.
09
Voice & Don'ts
ToneProfessional, understated, and confident.
HeadlinesDirect and slightly poetic, focusing on the impact and future-oriented nature of the work.
CTAsMinimal and clear, often integrated into navigation or project links.
Don't use a pure white background — screenshot shows a warm, slightly pink-tinted off-white.
Don't use bright, saturated accent colors in the UI — the site relies on project imagery for color.
Don't use heavy drop shadows — the design uses very subtle, soft elevation if any.
Don't use serif fonts for headlines — the display typography is a clean, geometric grotesque sans.
Don't use small, cramped spacing — the layout prioritizes generous white space and padding.
Don't use decorative borders or ornaments — the visual language is strictly functional and minimal.
Captured from the live site · real computed styles
11
System prompt
This is a refined design portfolio for Kirschberg, showcasing high-level product and brand work. The visual identity is built on a clean, editorial aesthetic with a warm off-white background (#FAF4F4) and dark ink text (#171717). Typography features a grotesque sans-serif for headlines and a humanist sans-serif for body text. The layout is spacious, using generous padding and a horizontally scrollable project grid. Critical constraints: avoid pure white backgrounds, no bright accent colors in the UI, avoid heavy shadows or decorative borders, maintain a minimal and professional tone.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
