A vibrant, illustrated creative studio for ad teams.
02
Color
#FF7E85Accent
#3E3C43Ink
#7C7AADInk soft
#F3EAE5BG
#171C5DBG quiet
#7A7780Muted
rgba(124, 128, 173, 1.0)Line
Warm off-white backgrounds contrasted with deep indigo sections and bright coral accents.
03
Typography
humanist-sans · transitional-serif
display56px · 500
body16px · 400
Use humanist sans-serif for impactful, large-scale display text. · Use a transitional serif for body copy and detailed explanations. · Maintain clear typographic hierarchy between large display text and standard body text.
04
Spacing
4px
8px
12px
16px
20px
24px
32px
40px
48px
55px
64px
96px
140px
Generous vertical spacing with large padding blocks to separate distinct content sections.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Thin 2px borders used for outlined cards and buttons.
06
Layout
1280container
12columns
32pxgutter
768 / 1024breakpoints
Standard responsive layout with a prominent hero section followed by content blocks.
07
Motion & Interaction
150msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
Quick 0.15s transitions for UI elements like buttons and color changes.
Quick 0.15s color transitions on interactive elements. · Immediate response to clicks.
08
Components
buttonCoral filled buttons with white text and a pill-shaped 'Get a Demo' variant.
cardCards with thin borders and rounded corners containing text or illustrations.
heroA split hero with large text on a dark background on the left and a colorful illustration on the right.
09
Voice & Don'ts
ToneProfessional, inspiring, and slightly playful.
HeadlinesLarge, impactful, and focused on creative empowerment.
CTAsDirect and action-oriented, such as 'Get Started'.
Don't use a flat white background — the screenshot shows a warm off-white (#F3EAE5) for content sections.
Don't use a bright primary color for the dark sections — the screenshot shows a deep indigo (#171C5D).
Don't use a bright red for the accent color — the screenshot shows a soft coral (#FF7E85).
Don't use purely geometric sans-serif fonts for body copy — the screenshot shows a transitional serif.
Don't use heavily rounded corners for UI elements — the screenshot shows subtle 4px border-radius.
Don't use drop shadows for card elements — the screenshot shows flat design with thin borders instead.
Captured from the live site · real computed styles
11
System prompt
A SaaS tool for creative teams that provides ad ideas and insights. The palette features warm off-white backgrounds (#F3EAE5), deep indigo sections (#171C5D), and bright coral accents (#FF7E85). Typography uses humanist sans-serif for large display text and a transitional serif for body copy. Critical donts include: Do not use a flat white background; Do not use a bright primary color for dark sections; Do not use a bright red for the accent color. The design relies on bold, large typography and colorful, textured illustrations.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
