A digital art gallery meets a high-end design studio.
02
Color
#E43333Accent
#FFFFFFInk
#A0A8DCInk soft
#131419BG
#0E101ABG soft
#1E1F26BG quiet
#A0A8DCB3Muted
rgba(255, 255, 255, 0.1)Line
High-contrast dark canvas with deep blue undertones, accented by a sharp, singular red for dynamic energy.
03
Typography
didone-serif · humanist-sans · monospace
display120px · 500
heading50px · 500
body14px · 400
small11px · 400
Use a high-contrast didone serif for maximum impact on headlines. · Pair with a clean, geometric humanist sans-serif for body and UI. · Use wide tracking on uppercase metadata for a premium feel. · Limit serif usage to major display moments to maintain hierarchy.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Open, breathable spacing that allows large typography and 3D visuals to dominate the viewport.
05
Surfaces
sm · 3px
md · 4px
lg · 20px
pill · 100px
Minimal, thin 1px borders used sparingly for subtle separation.
Asymmetric, editorial layout with full-bleed hero sections and floating 3D elements.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing
Smooth, fluid transitions for color and transform properties. · Staggered fade-in and slide-up animations for revealing content. · Interactive 3D models that respond subtly to cursor movement.
Subtle color transitions and scale transformations, often accompanied by the appearance of a red accent element. · Immediate, tactile feedback through smooth transform transitions.
08
Components
buttonPill-shaped containers with transparent backgrounds, white text, and a small red accent indicator for interactive states.
cardMinimalist, often transparent, allowing 3D models or large typography to serve as the primary visual.
chipSmall, pill-shaped labels with uppercase text and wide tracking.
inputUnderstated, clean text fields with minimal chrome.
heroImmersive, full-viewport sections featuring large 3D models and bold, center-aligned or asymmetric typography.
09
Voice & Don'ts
ToneBold, unapologetic, and creative with a hint of intellectual sophistication.
HeadlinesDeclarative and impactful, often using a single, large didone serif word or phrase.
CTAsDirect and confident, usually accompanied by a small, colored arrow or indicator.
Don't use a cluttered layout — the screenshot shows a clean, editorial grid that gives large elements room to breathe.
Don't use a wide range of bright colors — the screenshot shows a dominant dark palette with only a sharp red accent.
Don't use all sans-serif for headlines — the screenshot shows a high-contrast didone serif for maximum display impact.
Don't use tight letter spacing on metadata — the screenshot shows wide, tracked-out uppercase text for dates and labels.
Don't use heavy, solid-colored backgrounds for all sections — the screenshot shows deep, dark, atmospheric backgrounds with subtle gradients.
Don't use small, cramped UI elements — the screenshot shows large, generous touch targets and clear interactive zones.
Captured from the live site · real computed styles
11
System prompt
Dogstudio is a multidisciplinary creative studio focused on art, design, and technology. The design language is bold and experimental, characterized by an immersive dark mode aesthetic with a deep charcoal/navy background (#131419) and a sharp, singular red accent (#E43333). Typography is a key pillar, utilizing a high-contrast didone-serif for massive display text paired with a clean humanist-sans for UI and body copy. Key hex colors include #FFFFFF for primary ink, #A0A8DC for soft ink, and #E43333 for accents. Critical don'ts: do not use a cluttered layout, do not introduce a wide range of bright colors, do not use all sans-serif for headlines, do not use tight letter spacing on metadata, do not use heavy solid backgrounds, and do not use small cramped UI elements.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
