A brutalist art gallery that communicates through aggressive, oversized type and high-contrast graphics.
02
Color
#FFFFFFInk
#000000BG
rgba(255,255,255,1.0)Line
Strict binary palette relying on extreme contrast and negative space for impact.
03
Typography
display-sans · humanist-sans
display170px · 500
heading60px · 300
title54px · 500
body28px · 500
Uppercase is used frequently for emphasis and navigation · Line heights are tight for a more compact, brutalist feel · Font weights alternate between light (300) and medium (500) to create strong contrast
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Asymmetric and large to accommodate massive typography
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Sharp 1px white borders are used to frame and separate content blocks
0px 0px 0px 1px rgba(255,255,255,1.0)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A grid-based structure that supports large, immersive imagery and massive type blocks.
07
Motion & Interaction
100msmicro
200mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Smooth opacity transitions for subtle reveals · Direct transforms for interactive hover states
Immediate visual feedback, often through opacity changes or subtle transforms. · Direct response with minimal delay.
08
Components
buttonMinimal, borderless or sharp-cornered, relying on text styling and hover states.
cardHigh-contrast image containers with bold typography overlays.
chipSimple text labels with uppercase styling.
inputClean, minimal fields defined by sharp borders.
heroA full-screen, immersive area dominated by massive, expressive typography and high-contrast imagery.
09
Voice & Don'ts
ToneBold, direct, and confident.
HeadlinesMassive, expressive typography that serves as the primary visual element.
CTAsUnderstated but clear, often integrated into the overall typographic layout.
Don't use color gradients — screenshot shows a strict black-and-white palette
Don't use drop shadows on text — screenshot shows flat, high-contrast type
Don't center-align all text — screenshot shows a mix of left-aligned and expressive layouts
Don't use small, delicate typography — screenshot shows massive, bold display type
Don't use rounded corners extensively — screenshot shows sharp, geometric elements
Don't use complex, multi-column text blocks — screenshot shows simple, impactful typographic statements
Avoid: Avoid using soft gradients or drop shadows
Avoid: Avoid cluttered layouts with many small elements
Avoid: Avoid decorative fonts or playful illustrations
Avoid: Avoid muted color palettes or soft pastels
Avoid: Avoid traditional grid-based, uniform layouts
Captured from the live site · real computed styles
11
System prompt
This website is a bold, typographic-first portfolio for a design studio. The design is defined by a strict monochromatic palette using pure black (#000000) and pure white (#FFFFFF) for maximum contrast. Typography is the primary design element, using a display sans-serif category at massive scales (up to 170px) with tight tracking and alternating weights. The layout is grid-based but intentionally asymmetric to create a brutalist, experimental feel. Critical constraints include avoiding any use of color, maintaining sharp geometric elements, and keeping layouts simple but impactful. The overall tone is confident, direct, and highly expressive, relying on scale and contrast rather than decoration.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
