A curated gallery of bespoke 3D visual worlds presented in a clean, Swiss-inspired typographic layout.
02
Color
#000000Ink
#F0F0F0BG
rgba(0, 0, 0, 0.1)Line
High contrast between a neutral off-white canvas and stark black typography.
03
Typography
geometric-sans
display38px · 300
body16px · 400
Use geometric sans for all text layers · Light weights (300) for large display text · Regular weight (400) for body and smaller elements · Tight line-height for large display text
04
Spacing
4px
8px
16px
24px
32px
45px
64px
96px
Generous padding (45px) creates an airy, gallery-like feel.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 0px
Thin 1px lines in rgba(0, 0, 0, 0.1) are used sparingly, sometimes asymmetrically (0px 1px 1px 0px).
06
Layout
1440container
12columns
24pxgutter
768 / 1024breakpoints
A clean grid that alternates between solid color blocks and empty space.
07
Motion & Interaction
125msmicro
250mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Color and opacity transitions on hover · Fast (0.125s) opacity transitions for subtle UI feedback
Subtle opacity changes and color transitions. · Standard link behavior.
08
Components
buttonMinimalist text links, no visible button containers.
cardNo visible card components; content is presented directly on the background.
heroFull-bleed background color with large 3D isometric illustrations and sparse typography.
09
Voice & Don'ts
ToneMinimal, confident, and professional.
HeadlinesDirect, concise client names.
CTAsUnderstated text links.
Don't use serif fonts — the screenshot shows a strict geometric sans-serif system.
Don't use rounded corners — the screenshot shows sharp, 0px border-radius elements.
Don't use complex shadows — the screenshot shows completely flat surface presentation.
Don't use dense text blocks — the screenshot shows sparse, large-format typography.
Don't use highly saturated UI colors — the screenshot shows a neutral palette with isolated color blocks.
Don't use decorative borders — the screenshot shows only minimal, 1px dividing lines.
Captured from the live site · real computed styles
11
System prompt
This is a high-end creative agency portfolio showcasing detailed 3D isometric illustrations. The design relies on a stark contrast between a neutral off-white (#F0F0F0) background and bold black (#000000) typography. The typography uses a geometric sans-serif category with light weights for display and regular weights for body. Layouts are spacious with generous padding, creating a gallery-like feel. Key colors are #F0F0F0 and #000000. Critical donts: never use serif fonts, avoid rounded corners, and do not use dense text blocks or complex shadows. Keep the focus on the 3D artwork with minimal, precise typographic interventions.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
