An upscale design gallery that lets the work speak for itself.
02
Color
#000000Ink
#FFFFFFBG
#B0B0B0Muted
rgba(0,0,0,1.0)Line
Strict monochrome foundation relying on high-contrast photography for color.
03
Typography
grotesque-sans
display230px · 400
heading106px · 500
body16px · 400
Use tight letter-spacing for large display headings · Maintain strict left-alignment for all text blocks · Avoid drop shadows or decorative treatments on text
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Asymmetrical with large gaps between major sections and tighter grouping within content blocks.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 0px
None visible on the main interface elements; relies on whitespace for separation.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Asymmetric multi-column grid on desktop; single column stacking on mobile.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth opacity fades for images and elements on scroll · Subtle scale and translate transforms on hover
Subtle opacity reduction or slight scale increase on interactive elements. · Immediate navigation or transition.
08
Components
buttonText-only links with subtle opacity transitions on hover.
cardGrid of images with minimal or no borders, relying on proximity to captions.
heroMassive typography paired with a large full-bleed or split-screen image.
09
Voice & Don'ts
ToneConfident, understated, and professional.
HeadlinesBold, declarative statements in massive typography.
CTAsMinimalist text links, often accompanied by a simple arrow icon.
don't use bright accent colors — screenshot shows a strict black and white palette
don't add drop shadows to images — screenshot shows clean, flat presentation
don't use centered text alignment — screenshot shows strong left-aligned typography
don't use rounded corners on containers — screenshot shows sharp, rectangular edges
don't use serif fonts for headlines — screenshot shows a bold, modern grotesque sans-serif
don't clutter the UI with icons — screenshot relies on text and imagery for navigation
Avoid: Excessive adjectives or marketing fluff
Avoid: Bright, clashing color palettes
Avoid: Decorative UI elements like shadows or rounded corners
Captured from the live site · real computed styles
11
System prompt
This design represents a premium, minimalist design studio portfolio. It utilizes a strict monochromatic palette of pure black (#000000) and white (#FFFFFF) to create high contrast and focus. The typography is a bold, modern grotesque sans-serif used at massive scales for impact. The layout is an asymmetric grid that prioritizes large, high-quality photography. Critical constraints: avoid all bright accent colors, do not use rounded corners or drop shadows, and maintain strict left-alignment for all text. The interaction model is subtle, relying on smooth 300ms transitions for hover states.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
