A bold theatrical poster meets a clean editorial magazine.
02
Color
#FB00C2Accent
#000000Ink
#F4EDE9BG
#767676Muted
rgba(0, 0, 0, 0.1)Line
High contrast: deep black ink on a warm, slightly off-white canvas, punctuated by a single electric pink accent.
03
Typography
geometric-sans
display80px · 900
heading56px · 800
subhead24px · 800
body18px · 400
Use uppercase for strong emphasis and navigation links. · Tight tracking for large display text to maintain impact. · Maintain high weight contrast between display and body text.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
80px
96px
A clear vertical rhythm established through consistent padding and gap multiples.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Minimal use of borders, relying primarily on strong typography and image contrast for separation.
0 4px 24px rgba(0, 0, 0, 0.1)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A full-width hero followed by a multi-column card grid, leading into bold typographic sections.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth color transitions on interactive elements. · Subtle transforms on hover for buttons and cards.
Immediate color inversion or background shift on buttons and links. · A slight transform or scale effect provides tactile feedback.
08
Components
buttonHigh-contrast filled rectangles with uppercase text.
cardClean, borderless cards with prominent imagery, a bold headline, and a simple arrow icon for navigation.
chipUsed for navigation or small labels, often in uppercase.
inputClean text fields with minimal borders.
heroA full-bleed cinematic photograph overlaid with massive, heavy-weight typography.
09
Voice & Don'ts
ToneConfident, impactful, and direct.
HeadlinesShort, powerful statements set in massive, heavy typography.
CTAsClear, uppercase commands that stand out against the background.
Don't use rounded corners on primary UI elements — the screenshot shows sharp, rectangular shapes.
Don't use multiple competing accent colors — the screenshot shows a clear hierarchy dominated by pink and purple.
Don't use light, thin font weights for headlines — the screenshot shows exclusively heavy, bold weights.
Don't use sans-serif fonts with wide or irregular proportions — the screenshot shows a very geometric, tight typeface.
Don't use complex, multi-layered shadows — the screenshot relies on flat color and sharp edges for definition.
Don't use gray as a primary background — the screenshot shows a warm, off-white (#F4EDE9) instead.
Captured from the live site · real computed styles
11
System prompt
This is a bold editorial and event website for an international performance arts festival. The design is dominated by massive, heavy-weight typography in black (#000000) set against a warm off-white background (#F4EDE9). A vibrant electric pink (#FB00C2) serves as the primary accent for calls to action, while a deep purple (#340068) is used for large background blocks and secondary buttons. The typography is a clean, geometric sans-serif used in both uppercase and sentence case. Layouts are generous, utilizing full-bleed cinematic photography and a clean 4-column grid for content. Critical constraints: avoid rounded corners on buttons, avoid using multiple competing bright accent colors, and avoid using light or decorative font weights.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
