A premium digital agency showcasing bold work through cinematic imagery and massive typography.
02
Color
#000000Ink
#ffffffBG
rgba(0,0,0,1)Line
Stark high-contrast palette relying on bold typography and large-scale photography rather than complex color systems.
03
Typography
geometric-sans
display400px · 500
h140px · 400
body16px · 400
Hero text scales dynamically to fill the viewport width · Body text maintains comfortable reading width of roughly 680px · Light weight (300) used for navigation and subtitles
04
Spacing
4px
8px
12px
16px
24px
32px
40px
48px
64px
80px
96px
120px
Generous whitespace with 120px top padding and 80px gaps between grid items.
05
Surfaces
sm · 4px
md · 8px
lg · 8px
pill · 999px
None visible; relies on image contrast and whitespace for separation.
06
Layout
1400container
12columns
24pxgutter
768 / 1024breakpoints
Full-bleed hero followed by a responsive 2-column grid for project showcases.
07
Motion & Interaction
100msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Hover transitions on text links
Subtle opacity or color transitions on text links and navigation. · Standard pointer cursor on interactive elements.
08
Components
buttonMinimal text-based navigation without explicit button shapes.
cardLarge image-based project cards with simple text descriptions below.
heroCinematic full-viewport background image with massive overlaid typography.
09
Voice & Don'ts
ToneConfident, professional, and understated.
HeadlinesMassive, all-caps or bold sans-serif statements that dominate the viewport.
CTAsUnderstated text links rather than prominent buttons.
Don't use colorful accents — screenshot shows a strict black and white palette.
Don't add drop shadows to cards — screenshot shows flat image-based cards.
Don't use serif fonts — screenshot shows a consistent geometric sans-serif family.
Don't clutter the hero with UI elements — screenshot shows only massive text and a background image.
Don't use small typography for headlines — screenshot shows massive display text filling the screen.
Captured from the live site · real computed styles
11
System prompt
This is a premium digital agency portfolio featuring a strict black-and-white palette (#000000, #ffffff) and bold geometric sans-serif typography (Aeonik). The layout relies heavily on full-bleed photography, massive display text, and generous whitespace (120px padding, 80px gaps). Critically, there are no colorful accents, no drop shadows, and no prominent buttons. The design is restrained, letting the work and bold typography speak for themselves. Avoid adding unnecessary UI elements or decorative graphics.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
