A digital playground or interactive 3D environment.
02
Color
#4d3cf2Accent
#ffffffInk
#0a0a2eBG
rgba(77, 60, 242, 0.2)Line
Deep blue-to-purple gradients establish an immersive, dark atmosphere, punctuated by bright neon accents for interactive elements.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
spatial
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
minimal
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
immersive
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
physics-simulation · camera-follow
object-proximity · physics-collision
08
Components
buttoninteractive-object
card3d-entity
herofull-viewport-webgl
09
Voice & Don'ts
Toneplayful
Headlinesminimal
CTAsinteractive
don't use static page layouts — screenshot shows an immersive 3D environment.
don't rely on traditional menus — navigation is done by driving a car.
don't use bright, multi-colored backgrounds — screenshot shows a dark blue/purple gradient.
don't use standard typography for UI — text is integrated into 3D objects.
don't use a static hero section — the entire viewport is a dynamic 3D canvas.
don't use white backgrounds — the design is deeply rooted in a dark mode aesthetic.
Avoid: static-layouts
Avoid: traditional-navigation
Avoid: walls-of-text
11
System prompt
This is an experimental, interactive 3D portfolio for a creative developer. The site is a fully immersive WebGL environment where the user navigates by driving a small toy car. Key visual elements include a deep blue-to-purple gradient background, a grid of glowing blue dots, and interactive 3D objects. The typography is integrated into the 3D world, and the entire experience is built around physics and interaction. Critical donts: do not use static page layouts, do not rely on traditional menus, do not use bright backgrounds.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
