A high-end creative agency website that blends elegant serif typography with immersive, colorful 3D and cinematic backgrounds to showcase their work.
02
Color
#ffffffInk
#000000BG
rgba(255,255,255,0.2)Line
High-contrast and immersive, using white text over full-screen, dynamic, dark, or colorful backgrounds.
03
Typography
didone-serif · monospace
display70px · 400
display-italic64px · 400
body16px · 400
caption12px · 400
micro11px · 400
All text is uppercase with wide letter spacing for navigation and body copy. · Display type uses a mix of standard didone serif and italicized variants. · Body text uses a monospace font for a technical, structured feel.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Flexible, driven by full-screen sections and centered content blocks.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Thin, semi-transparent white lines used as separators and underlines.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-screen hero sections with centered text content, often overlapping dynamic backgrounds.
07
Motion & Interaction
300msmicro
500mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
Smooth fade-in and transform transitions for page elements. · Parallax-like effects on background images or 3D elements. · Staggered animations for text and UI components.
Subtle opacity changes or smooth transitions. · Immediate response with smooth state changes.
08
Components
buttonText-only buttons, often uppercase with letter spacing, sometimes with a vertical line separator.
cardFull-screen background cards or image overlays.
heroA full-viewport section featuring a large serif title, monospace description, and a call-to-action link, set against an animated or 3D background.
09
Voice & Don'ts
ToneConfident, creative, and professional.
HeadlinesBold, elegant serif typography, often mixed with stylized italics.
CTAsUnderstated, uppercase, monospace text links.
Don't use sans-serif fonts for headlines — screenshot shows elegant didone-serif display type.
Don't use bright, solid background colors — screenshot shows dark, cinematic, or richly illustrated backgrounds.
Don't use rounded corners on UI elements — screenshot shows sharp edges or fully circular pills.
Don't use lowercase for body copy — screenshot shows widespread uppercase with letter spacing.
Don't use a grid-heavy layout with multiple columns — screenshot shows centered, full-width content blocks.
Don't use small, cramped spacing — screenshot shows generous white space and full-viewport sections.
Captured from the live site · real computed styles
11
System prompt
This is a premium creative studio website for a digital gamification agency. It features a high-contrast aesthetic with white text over immersive, dark, and colorful 3D backgrounds. The typography is a mix of elegant didone serif for display and monospace for body copy. The layout is centered and spacious, focusing on large, full-screen hero sections. Key colors are #000000 and #ffffff, with rich blues, reds, and pinks in the background media. Critical donts: do not use sans-serif for headlines, do not use solid bright backgrounds, do not use rounded corners, do not use lowercase text, do not use grid-heavy layouts, and do not use cramped spacing.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
