High-contrast monochrome for a focused, technical aesthetic.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
generous whitespace for centered composition
05
Surfaces
sm · 2px
md · 4px
lg · 8px
pill · 999px
none
06
Layout
1920container
12columns
24pxgutter
768 / 1024breakpoints
centered single element
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
loading bar animation · 3D object rotation
none visible · none visible
08
Components
herocentered wireframe 3D cube with progress bar
09
Voice & Don'ts
Tonetechnical
Headlinesnone visible
CTAsnone visible
don't add multiple colors — screenshot shows a monochrome palette
don't add text headlines — screenshot shows no typography
don't add complex navigation — screenshot shows a single centered element
don't use rounded rectangles — screenshot shows sharp, minimal lines
don't add decorative elements — screenshot shows only functional loading components
don't use bright backgrounds — screenshot shows a dark (#121212) background
Avoid: playful
Avoid: colorful
Avoid: text-heavy
11
System prompt
This is a minimalist dark loading screen for a 3D or creative tool. The palette is strictly monochrome, using a dark background (#121212) and white/gray elements. The design centers on a wireframe 3D cube icon above a progress bar, with no visible text or complex UI. Key critical donts: avoid adding multiple colors, do not include text headlines or navigation, and avoid decorative elements. The layout is a simple centered composition on a dark canvas.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
