A loud, hand-painted sign on a local, slightly eccentric neighborhood cafe.
02
Color
#000000Ink
#9f4920BG
#fce3e3BG soft
#d0eaf4BG quiet
#788c8cMuted
rgba(0,0,0,1.0)Line
High-contrast, vibrant, and slightly chaotic palette relying on bold background blocks and stark black text.
03
Typography
display-script · monospaced
display120px · 400
heading50px · 400
body20px · 400
Apply text-transform: uppercase consistently for interactive elements and section labels. · Maintain tight, rigid letter-spacing for monospaced text, allowing the character grid to show. · Embrace tight line heights for display typography to create dense, impactful blocks of text.
04
Spacing
4px
8px
16px
20px
24px
30px
40px
60px
80px
Loose and erratic, relying on large distinct gaps and padding rather than strict mathematical rhythm.
05
Surfaces
sm · 4px
md · 20px
lg · 100px
pill · 100px
Thick black strokes (2-3px) or none, emphasizing a raw, cut-out aesthetic.
3px 3px 0px 0px rgba(0,0,0,1.0)
06
Layout
1200container
12columns
20pxgutter
768 / 1024breakpoints
Bold, asymmetrical blocks of solid color layered over each other, ignoring strict grid constraints.
07
Motion & Interaction
200msmicro
400mssmall
800msmedium
ease-outeasing
Subtle hover scales or filters on interactive elements. · Standard DOM element transitions for appearing/disappearing modals.
Standard pointer cursor with potential subtle brightness or scale shifts. · Immediate visual feedback, often via CSS transitions.
08
Components
buttonPill-shaped with a solid black background and white uppercase monospaced text, often with thick borders.
cardSolid color blocks with rounded corners and thick black borders, functioning as independent visual islands.
chipUsed for star ratings, rendered as solid, chunky stars within colored blocks.
inputSimple bordered fields or inline text inputs, maintaining the monospaced font.
heroMassive, screen-filling display script text dominating the viewport.
09
Voice & Don'ts
ToneQuirky, confident, loud, and humorous.
HeadlinesShort, punchy, and often displayed as massive, screen-filling script text.
CTAsDirect, uppercase commands like 'SEND' or 'CLOSE' set in bold monospaced fonts.
Don't use thin, elegant typography — the screenshot shows thick, bold, monospaced fonts and heavy display scripts.
Don't rely on a white background — the screenshot shows bold, solid blocks of color like brown, pink, and blue.
Don't use subtle gradients — the screenshot shows flat, solid color fills for all backgrounds.
Don't use thin, 1px borders — the screenshot shows thick, 2-3px black borders on all elements.
Don't use small, delicate icons — the screenshot shows chunky, solid, hand-drawn or oversized star shapes.
Don't use a clean, empty grid — the screenshot shows chaotic, overlapping text and colorful blocks.
Don't use standard sentence case — the screenshot shows aggressive, widespread use of uppercase text-transform.
Avoid: Avoid subtle gradients or muted, sophisticated color palettes.
Avoid: Avoid elegant, delicate serif fonts or refined typography.
Avoid: Avoid empty white space without bold color context.
Avoid: Avoid standard, boring grid alignments without playful overlapping.
Avoid: Avoid subtle, thin borders or faint drop shadows.
Avoid: Avoid serious, corporate, or overly formal tone of voice.
Captured from the live site · real computed styles
11
System prompt
Design an expressive, playful D2C e-commerce interface for a coffee brand. Use a bold, slightly chaotic aesthetic characterized by vibrant, solid background colors (like burnt orange, soft pink, and light blue) paired with stark black text and borders. Typography is the star: pair massive, expressive display scripts with rigid, uppercase monospaced fonts for all UI elements and body text. The layout relies on bold, overlapping color blocks with thick black strokes rather than clean, empty grids. Components like buttons and cards should feel hand-cut and chunky, often using pill shapes or heavy rounded corners. Avoid sophistication, subtle gradients, or delicate typography; the tone is loud, quirky, and irreverent. Critical constraints: strictly use monospaced fonts for text, maintain uppercase text-transform across the UI, and rely on solid color blocks instead of images for backgrounds.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
