A high-contrast, experimental art exhibition catalog brought to life digitally.
02
Color
#FA23FFAccent
#000000Ink
#F2F2F2BG soft
#E7E7E7Muted
rgba(0,0,0,1)Line
High-contrast black and white foundation with a singular, high-chroma neon magenta accent.
03
Typography
grotesque-sans · transitional-serif
display80px · 400
displaySm40px · 400
body16px · 400
Use a grotesque sans-serif for large, impactful display headings. · Use a transitional serif for body copy and smaller informational text.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Asymmetric, utilizing large blocks of negative space and deliberate off-grid placement.
05
Surfaces
sm · 3px
md · 5px
lg · 7px
pill · 999px
Solid 1px black borders for structural elements and cards.
none
06
Layout
1440container
12columns
24pxgutter
768 / 1024breakpoints
A dynamic, collage-like layout with overlapping elements, large typography, and asymmetric grids.
07
Motion & Interaction
100msmicro
200mssmall
400msmedium
cubic-bezier(0.45, 0, 0.55, 1)easing
Smooth scaling and movement on hover. · Subtle opacity transitions.
Subtle scaling or color shifts on interactive elements. · Immediate visual feedback.
08
Components
buttonPill-shaped buttons with solid backgrounds and strong borders.
cardSharp-edged cards with solid backgrounds and clear borders.
chipPill-shaped tags for navigation and filters.
inputSimple bordered text inputs with clear labels.
heroA massive, text-driven hero section with overlapping large numbers and bold typography.
09
Voice & Don'ts
ToneArtistic, authoritative, and slightly provocative.
HeadlinesLarge, bold, and often overlapping, creating a dynamic visual hierarchy.
CTAsPill-shaped, high-contrast buttons that stand out.
Don't use subtle or muted accent colors — screenshot shows a vibrant neon magenta.
Don't use centered, symmetrical layouts — screenshot shows an asymmetric, collage-like arrangement.
Don't use overly rounded or soft UI elements — screenshot shows sharp corners and pill shapes.
Don't use a single font family for everything — screenshot shows a clear distinction between sans-serif and serif fonts.
Don't use standard web UI patterns — screenshot shows a highly customized, editorial layout.
Don't use soft shadows or gradients — screenshot shows solid colors and hard edges.
Avoid: Subtle or muted color palettes.
Avoid: Conventional, centered grid layouts.
Avoid: Playful or overly friendly language.
11
System prompt
This is a bold, experimental, and high-contrast art exhibition website. It uses a stark black and white palette with a dominant neon magenta accent. Typography is a mix of a large, impactful grotesque sans-serif for display and a transitional serif for body text. Layouts are asymmetric and collage-like, avoiding conventional centered grids. Critical donts: Never use muted colors, avoid symmetrical layouts, and don't use soft shadows or gradients. The design is meant to be provocative and visually engaging, reflecting the contemporary art it represents.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
