A bold, playful scrapbook that breaks traditional design grids.
02
Color
#FF8488Accent
#050000Ink
#008263BG
#F5C04FMuted
rgba(5,0,0,1)Line
High-contrast, playful palette built on a teal-green base with red and yellow accents.
03
Typography
transitional-serif · humanist-sans
display28px · 700
Use serif for primary headlines and display text. · Use sans-serif for body text and UI elements. · Maintain a clear typographic hierarchy between playful display and readable body text.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Loose and organic rhythm, often breaking strict grids for playful layout.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Thin, 1px solid borders, often dark.
0px 1px 0px 0px rgba(0,0,0,1)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Grid-based but intentionally offset and playful, breaking strict alignment.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Smooth color and background transitions · Subtle transforms on hover · Playful, continuous scrolling marquee
Color or background changes, subtle transforms. · Immediate visual feedback.
08
Components
buttonSimple, text-based or basic geometric shapes like circles.
cardMinimal, often defined by borders or stark background contrast.
chipSimple geometric shapes or stars.
inputStandard text inputs, minimal styling.
heroLarge, bold typography with playful graphic elements, full-width.
09
Voice & Don'ts
TonePlayful, confident, and unapologetically bold.
HeadlinesLarge, expressive serif typography, often in all-lowercase.
CTAsSimple, direct, often integrated into the playful layout.
Don't use a muted or subtle color palette — screenshot shows a vibrant teal, red, and yellow.
Don't use a strictly minimal layout — screenshot shows a playful, grid-breaking composition.
Don't use only sans-serif fonts — screenshot prominently features a serif display font.
Don't avoid geometric shapes — screenshot shows a starburst logo and circular elements.
Don't create a static hero section — screenshot shows a dynamic, scrolling marquee.
Don't use subtle shadows or gradients — screenshot shows flat colors with thin, sharp borders.
Captured from the live site · real computed styles
11
System prompt
Gus Biz is a playful, creative agency website with a bold, brutalist-inspired aesthetic. It features a vibrant color palette centered around a teal-green background (#008263), with strong accents of red (#FF8488) and yellow (#F5C04F), and dark ink (#050000). Typography is expressive, combining transitional-serif for display text with a humanist-sans for body copy. The layout is grid-based but intentionally playful and organic, often breaking strict alignment. Key features include a dynamic scrolling marquee, a bold starburst logo, and minimal, geometric UI components. Critical don'ts: do not use a muted or corporate color palette, do not create a strictly minimal or sterile layout, and do not avoid playful geometric elements or expressive typography.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
