High contrast with a dominant, energetic red accent against dark and white backgrounds.
03
Typography
display-serif · grotesque-sans
display80px · 400
headline34px · 400
body22px · 400
small14px · 400
Use Offset TM for all headlines and buttons. · Use Source Sans 3 for body text if available. · Ensure strong contrast between white text and dark/red backgrounds.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
128px
Generous vertical padding (96px, 128px) for major sections.
05
Surfaces
sm · 4px
md · 8px
lg · 10px
pill · 16000px
2px solid for buttons and active elements.
0px 4px 4px 0px rgba(0, 0, 0, 0.25)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-width photographic hero with stacked content blocks below.
07
Motion & Interaction
100msmicro
250mssmall
300msmedium
600mslong
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
Smooth fade-in transitions for background color and text color. · Box shadow transitions on hover.
Subtle box shadow appearance and color transitions. · Immediate visual feedback via state change.
08
Components
buttonLarge, uppercase, rounded rectangles with solid fills (Red, White, Dark Grey).
cardSimple rectangular cards with drop shadows.
heroFull-viewport background image/video with centered text and CTA.
09
Voice & Don'ts
ToneBold, confident, and slightly playful.
HeadlinesALL CAPS display serif, high impact.
CTAsDirect, action-oriented, and highly visible.
Don't use delicate, thin fonts — screenshot shows bold, heavy display serifs.
Don't use a light or pastel background — screenshot shows a dark (#2B3036) or pure white background.
Don't avoid uppercase text — screenshot shows almost all UI text is uppercase.
Don't use sharp corners for buttons — screenshot shows large border-radius (pill or large radius).
Don't use subtle colors for calls to action — screenshot uses a dominant, high-chroma red (#ED2023).
Don't use a minimal amount of padding — screenshot shows generous vertical spacing (128px).
Captured from the live site · real computed styles
11
System prompt
A bold, high-contrast editorial design for an artisanal pizza brand. Key colors: pure white, dark grey (#2B3036), and a vibrant red (#ED2023). Typography features heavy display serifs (Offset TM) for headlines and sans-serif (Source Sans 3) for UI elements. Critical donts: Avoid delicate typography, muted color palettes, or minimal vertical spacing. The design uses full-bleed photography, large uppercase text, and generous padding to create a high-impact, warm, and confident brand presence.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
