A high-end film studio meets a cutting-edge AI research lab.
02
Color
#1A1A1AInk
#404040Ink soft
#FFFFFFBG
#999999Muted
rgba(229, 231, 235, 1)Line
Monochromatic and restrained, using high-contrast black and white to let photographic content dominate.
03
Typography
geometric-sans · humanist-sans
display56px · 500
heading36px · 500
body16px · 400
Use tight negative letter-spacing for large display headings. · Maintain a clean, objective tone for body copy. · Reserve uppercase tracking for navigation and category labels.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous whitespace around large visual blocks to maintain a premium, uncluttered feel.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Subtle 1px solid borders in neutral gray (#E5E7EB) for inputs and light dividers.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-bleed hero sections transitioning into a structured, grid-based content area.
07
Motion & Interaction
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth 150ms-200ms transitions for hover states and focus indicators. · Linear opacity fades for visibility changes.
Subtle color shifts or background transitions to indicate interactivity. · Immediate visual feedback with minimal, non-jarring transitions.
08
Components
buttonMinimal, rectangular buttons with subtle borders or solid dark backgrounds and clean sans-serif text.
cardContent blocks with clear separation, utilizing a 50/50 split between large photographic assets and descriptive text.
chipN/A
inputClean, bordered input fields with ample padding.
heroMassive, edge-to-edge photographic or video backgrounds with overlaid white typography and primary calls-to-action.
09
Voice & Don'ts
ToneVisionary, professional, and authoritative.
HeadlinesLarge, impactful statements that define the product's forward-looking mission.
CTAsDirect and action-oriented (e.g., 'Get Started', 'Learn more').
Don't use vibrant, high-chroma accents — screenshot shows a strictly monochromatic UI with black, white, and gray.
Don't apply heavy drop shadows to UI elements — screenshot shows a completely flat, surfaceless design.
Don't use decorative or overly stylized typography — screenshot shows clean, functional geometric sans-serif fonts.
Don't crowd the interface with too much text — screenshot prioritizes large-scale imagery over dense copy.
Don't use a wide variety of button styles — screenshot maintains a very consistent, minimal button aesthetic.
Don't rely on grid-based icon systems — screenshot uses photography and simple text for its visual language.
Avoid: Avoid cluttered layouts that distract from the visual work.
Avoid: Avoid overly complex color palettes.
Avoid: Avoid playful or informal language that undermines the premium tech positioning.
Captured from the live site · real computed styles
11
System prompt
A premium, cinematic AI platform that prioritizes high-fidelity visual demonstrations over dense UI. The design DNA is monochromatic and restrained, featuring a clean white background (#FFFFFF) and sharp black typography (#1A1A1A). Typography is strictly geometric sans-serif for headings and humanist sans-serif for body, utilizing tight negative letter-spacing on large display type. Key elements include massive full-bleed photographic heroes and structured 50/50 content splits. Critical donts: Never use vibrant accent colors; avoid heavy drop shadows; never crowd the interface with excessive text; avoid playful or casual language; and do not deviate from the minimalist, high-contrast black-and-white palette.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
