An experimental motion design studio that treats typography as 3D sculpture.
02
Color
#FFFFFFInk
#868686Ink soft
#000000BG
rgba(255,255,255,1.0)Line
Strict monochrome palette where color emerges only from the showcased work imagery.
03
Typography
geometric-sans · humanist-sans
display56px · 400
body20px · 400
Navigation uses consistent 20px sans-serif type. · Display typography relies on 3D rendered forms rather than traditional web fonts. · Hierarchy is achieved through scale and dimensional rendering, not weight variations.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Asymmetric spacing focused on visual composition rather than strict grid adherence.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Minimal visible borders; separation achieved through spacing and composition.
0 0 0 rgba(0,0,0,0) for flat UI elements · Complex 3D lighting rendered within project imagery
06
Layout
1920container
12columns
24pxgutter
768 / 1024breakpoints
Full-bleed immersive layout with floating navigation and minimal structural grid visibility.
07
Motion & Interaction
200msmicro
400mssmall
1000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
Smooth background-color transitions for state changes. · Immersive full-viewport transitions between project showcases. · 3D object rotation and morphing within the hero area.
Subtle cursor state changes and link highlighting via transition properties. · Immersive transitions to project detail views.
08
Components
buttonMinimal text-based navigation links with no visible button chrome.
cardFull-bleed project showcases using video/imagery as the primary container.
chipNot observed.
inputNot observed.
heroFull-viewport immersive area dominated by large-scale 3D typographic or motion graphics.
09
Voice & Don'ts
ToneConfident, experimental, and visually driven.
HeadlinesMinimal text, relying on 3D visual forms to communicate the project identity.
CTAsUnderstated navigation links (Work, Services, About, Jobs, Contact) that recede to let the work speak.
Don't use colorful UI elements — screenshot shows a strictly monochrome palette where all color comes from the work imagery.
Don't apply heavy drop shadows to UI components — screenshot shows a flat interface where all dimensionality exists within the project renders.
Don't use multiple font weights for emphasis — screenshot shows consistent 400 weight throughout the UI.
Don't clutter the interface with secondary UI elements — screenshot shows minimal chrome with only navigation and project title.
Don't use rounded corners on containers — screenshot shows sharp, clean edges throughout the layout.
Don't use a light background — screenshot shows a pure black background dominating the experience.
Captured from the live site · real computed styles
11
System prompt
This is an experimental motion design studio portfolio that positions itself at the intersection of 3D rendering and typography. The visual system is built on a strict monochrome foundation: pure black backgrounds (#000000), white text (#FFFFFF), and muted gray (#868686) for secondary elements. Typography is minimal in the UI layer, using geometric and humanist sans-serif categories at 20px for navigation, while the actual display moments are 3D rendered typographic sculptures that serve as both hero imagery and project identifiers. The layout is full-bleed and immersive, abandoning traditional grid structures for cinematic compositions. Critical constraints include: no colorful UI elements (all color emerges from work), no heavy drop shadows on interface components, and no rounded corners on containers. The motion system emphasizes smooth 1s transitions and 3D object manipulation. This approach ensures the portfolio itself demonstrates the studio's motion capabilities rather than just describing them.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
