A friendly, illustrated guidebook on digital etiquette with a distinct retro-playful character.
02
Color
#222222Ink
#A3F7F7BG
#F6F4EABG soft
rgba(34,34,34,1.0)Line
Warm, friendly, and illustrative, avoiding harsh contrasts or aggressive neon tones.
03
Typography
transitional-serif · humanist-sans
display68px · 400
body16px · 400
Display text uses a transitional serif with high contrast. · Body text uses a clean system-ui or humanist sans-serif. · Keep typography clean and readable with generous line heights.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous vertical spacing between sections and within content blocks.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Thin, solid borders in the primary ink color.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Single column centered content, transitioning to a grid for media or posters.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
Fade-in on scroll · Hover state transitions · Simple character animations
Color inversion or subtle scale changes on buttons and interactive elements. · Active state with slight downward movement or color shift.
08
Components
buttonPill-shaped buttons with high-contrast text.
cardPoster-style cards with solid background colors, bold typography, and central illustrations.
chipOval tags for hashtags or keywords.
inputMinimal text fields with thin bottom borders.
heroLarge, centered headline with a prominent character illustration above or below.
09
Voice & Don'ts
ToneFriendly, warm, and encouraging.
HeadlinesBold, illustrative statements that combine words with playful visuals.
CTAsDirect and inviting, often using hashtags or short phrases.
Don't use dark mode — the site relies on bright, colorful backgrounds.
Don't use harsh neon colors — the palette is soft, warm, and friendly.
Don't use heavy sans-serifs for headlines — display text is a transitional serif.
Don't use complex multi-column grids — the layout is mostly centered and single-column.
Don't use realistic photography — the site uses custom character illustrations.
Don't use tight line spacing — generous white space and line heights are key.
Captured from the live site · real computed styles
11
System prompt
Design a friendly, playful editorial site that promotes positive digital behavior. Use bright, soft background colors like #A3F7F7 and #F6F4EA paired with dark ink (#222222). The primary display font should be a transitional serif, while body text uses a clean humanist sans-serif. Incorporate custom, whimsical character illustrations as the central visual motif. Avoid dark modes, harsh neon colors, or overly complex grids; instead, focus on generous white space and a centered, single-column layout that highlights the playful typography and illustrations. The tone should be warm and encouraging, avoiding aggressive language or dense text blocks. Ensure all interactive elements have smooth transitions and clear hover states.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
