A vibrant, modern messaging app with a playful, consumer-friendly personality.
02
Color
#FFE03DAccent
#FFFFFFInk
rgba(255, 255, 255, 0.8)Ink soft
#008CFFBG
rgba(255, 255, 255, 0.7)Muted
rgba(255, 255, 255, 0.2)Line
A single vibrant blue dominates, with white and yellow accents for high contrast and friendliness.
03
Typography
geometric-sans
display52px · 700
body16px · 400
caption13px · 400
Display text is bold and tightly tracked. · Body text is regular weight with relaxed line height.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
A 4px base unit with an 8px step scale.
05
Surfaces
sm · 6px
md · 16px
lg · 24px
pill · 999px
Minimal, with soft rounded corners on cards and inputs.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A split layout with text on the left and a phone mockup on the right, stacking vertically on mobile.
07
Motion & Interaction
100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Subtle transitions on hover and focus states.
Subtle color shifts or underlines on interactive elements. · Immediate visual feedback with no significant delay.
08
Components
buttonRounded pill shape with white border on transparent background.
cardRounded rectangle with soft shadows, containing an announcement.
inputRounded rectangle with white background and dark text.
heroA split layout with bold typography and a floating phone mockup.
09
Voice & Don'ts
ToneFriendly, enthusiastic, and direct.
HeadlinesLarge, bold, and playful, often starting with 'Really'.
CTAsSimple, action-oriented phrases with an arrow icon.
Don't use muted or desaturated colors — screenshot shows a vibrant, high-saturation blue background.
Don't use serif or mono fonts — screenshot shows a rounded geometric sans-serif throughout.
Don't use small, understated headlines — screenshot shows an oversized, bold display font.
Don't use sharp, square corners — screenshot shows highly rounded corners on all UI elements.
Don't use a dark mode — screenshot shows a bright, colorful light theme.
Don't use complex, multi-column grids — screenshot shows a simple, single-column flow on mobile.
Avoid: Formal or corporate language.
Avoid: Dense paragraphs of text.
Avoid: Complex or cluttered layouts.
11
System prompt
Design a playful, consumer-focused messaging app interface with a vibrant, high-energy personality. Use a dominant bright blue background (#008CFF) with white text (#FFFFFF) and a pop of yellow (#FFE03D) for accents. Typography should be a bold, rounded geometric sans-serif with tight tracking for headlines. Key critical donts: avoid muted colors, avoid serif fonts, and avoid sharp corners. The layout should be simple and focused, prioritizing a large, playful headline and a floating phone mockup to showcase the product in action.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
