Whimsical Design Skill#

⚠️ Creative Pack — NOT auto-apply#

This skill is part of the creative pack. Do NOT apply it by default on every visual task.

Use ONLY when at least one is true:

• user explicitly asks for personality, delight, whimsy, or brand expression
• task is marketing, landing page, portfolio, launch, or editorial
• the default/safe output is clearly the problem (everything looks the same)
• multiple creative directions are being explored on purpose

Do NOT use when:

• building utility UI, admin tools, settings pages, or internal tools
• the product already has a clear design language you should match
• the default aesthetic is already appropriate for the product category
• task is primarily about structure, states, or production hardening

If in doubt, skip this skill. Core skills (design-review, ux-baseline-check, ui-polish-pass) are always safe. This one requires judgment about whether "push past safe" is actually what the product needs.

When It Applies#

Design-review catches quality problems. This skill pushes toward delight. Use alongside skills/design-review/SKILL.md when the triggers above are met.

The Bar#

Would someone screenshot this and send it to a friend? Would it make them smile? If no, push further.

Core Principles#

1. Whimsy Over Sterile#

Default away from corporate SaaS. Toward warmth, personality, surprise. Think: the feeling of opening a Playdate box, or the first time you saw a Teenage Engineering product page.

• Pixel art, hand-drawn textures, playful illustrations
• Warm color palettes over cold neutral grays
• Personality in empty states, loading screens, error messages
• Small details that reward people who look closely

2. Juice#

Everything should feel alive. Static interfaces are dead interfaces.

• Micro-interactions on hover, click, drag
• Subtle spring animations on state changes
• Parallax, bob, breathe — things that move even when idle
• Sound design where appropriate (click, whoosh, chirp)
• The difference between "functional" and "delightful" is 50ms of easing

Concrete recipes:

• Hover on cards: scale(1.02) + subtle shadow increase + 150ms ease-out
• Button press: scale(0.97) for 100ms, then back. feels tactile.
• Page entrance: stagger children with 50ms delay each, fade+translateY(8px), 300ms ease-out
• Status indicators: pulse animation on "live" items (opacity 1→0.4→1, 2s infinite)
• Charts: animate data points in on mount, left-to-right, 400ms ease-out with 30ms stagger
• Hover on table rows: background-color transition 150ms + slight translateX(2px) to feel "picked up"
• Toggle switches: spring physics (slight overshoot on slide, ~200ms)
• Empty states: gentle floating animation on the illustration (translateY ±4px, 3s ease-in-out infinite)

3. Bold Aesthetic Commitment#

Before writing a single line of code, commit to a specific aesthetic direction. not "clean and modern" — that's a non-decision. pick an extreme and execute it with intention:

• brutally minimal (nothing that doesn't earn its place)
• maximalist chaos (dense, layered, overwhelming in the best way)
• retro-futuristic (old tech aesthetics, modern capability)
• organic/natural (textures, warmth, imperfection)
• luxury/refined (thin weights, generous space, precious materials)
• playful/toy-like (rounded, bouncy, colorful, tactile)
• editorial/magazine (type-forward, dramatic scale, reading rhythm)
• brutalist/raw (exposed structure, no decoration, confrontational)
• industrial/utilitarian (functional, dense, no-nonsense)

the key is intentionality, not intensity. bold maximalism and refined minimalism both work. what doesn't work is the timid middle — the agent default of "a little of everything."

write one sentence describing your aesthetic direction before building. if you can't articulate it, you haven't committed.

4. Background Atmosphere#

agents default to flat solid color backgrounds. that's the single biggest "AI built this" tell after card grids. backgrounds create mood before any content loads.

techniques:

• noise/grain texture — background-image: url("data:image/svg+xml,...") with a subtle noise pattern at 3-5% opacity. makes flat colors feel tactile.
• gradient mesh — 2-3 radial gradients layered at low opacity. creates depth without being gaudy.
• subtle pattern — dots, lines, or geometric shapes at 2-4% opacity. adds texture without distraction.
• layered transparencies — overlapping semi-transparent shapes in the background. creates depth and atmosphere.

css

/* noise texture overlay */
.textured {
  position: relative;
}
.textured::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* gradient mesh */
.atmospheric {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(232, 114, 58, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(45, 106, 79, 0.06) 0%, transparent 50%),
    #FAFAF8;
}

don't: use these on every surface. use them on the page background and hero sections. inner components should be clean.

5. Craft Signals#

The opposite of "AI generated this." Every surface should feel touched by a human.

• Grain textures, noise overlays, subtle paper feel
• Intentional imperfection — slightly uneven, hand-placed, organic
• Serif accents mixed with clean sans (not all one or the other)
• Asymmetric layouts that feel composed, not random
• Custom illustrations over stock icons where possible
• SVG elements that respond to cursor or scroll

6. Color With Feeling#

Color should create mood, not just differentiate elements.

• Dominant + accent, not evenly distributed — one dominant color owns the page. one sharp accent draws attention to what matters. a timid, evenly-spread palette is an agent default. commit: what's the ONE color someone remembers?
• Studio Ghibli palettes: warm earth tones, saturated sky blues, forest greens
• Pantone-chip energy: specific, intentional, named
• Avoid: gray-on-white corporate void, neon-on-dark "developer tool"
• Dark modes should feel cozy (deep indigos, warm blacks), not cold

Concrete recipes:

• Warm light mode: background #FAFAF8 (not pure white), text #1A1A1A (not pure black), accent #E8723A (warm orange) or #2D6A4F (forest green)
• Cozy dark mode: background #1C1917 (warm black, not zinc-900), text #E7E5E4, accent #F59E0B (amber) or #818CF8 (soft indigo)
• Data viz palette (warm): #E8723A, #2D6A4F, #D4A373, #588157, #BC6C25 — earthy, distinct, accessible
• Data viz palette (cool): #3B82F6, #8B5CF6, #06B6D4, #6366F1, #14B8A6 — techy but not cold
• Status colors: success #16A34A (not neon green), warning #D97706 (not yellow), error #DC2626 (not pink), info #2563EB
• Gradient (subtle, not gaudy): from-amber-50 to-orange-50 for warm sections, from-slate-50 to-blue-50 for cool sections — backgrounds only, never on text

7. Typography as Character#

Type carries personality before anyone reads a word.

• Mix weights dramatically (thin headlines + chunky body, or vice versa)
• Consider display faces for headers — not just system fonts
• Letterspacing and line-height are design decisions, not defaults
• Monospace for data/code, but make it feel intentional (not "I forgot to style this")

References (study these)#

Product / Physical

• Teenage Engineering — products as objects of desire, every surface designed
• Panic / Playdate — joy in every interaction, surprise and delight as core values
• Nothing Phone — glyphs, transparency, making tech feel human

Digital

• Perplexity marketing pages — confident whitespace, editorial feel, illustrations
• Linear changelog — density with craft, every detail considered
• Vercel ship pages — motion, drama, typographic confidence
• Raycast — command palette as art form
• Arc Browser — sidebar as expression

Visual Language

• Old Apple ads (Think Different era) — simplicity with soul
• Studio Ghibli color grading — warm, lived-in, natural light
• Indie game UIs (Celeste, Hollow Knight, Slay the Spire) — personality in every pixel
• Poolsuite / Poolsuite FM — retro-futurism, nostalgia as design language

Anti-Patterns (NEVER DO THESE)#

• Glassmorphism for its own sake (blur ≠ design)
• Neon gradients as a substitute for personality
• Generic card grids with drop shadows
• Bootstrap energy (you know it when you see it)
• "Clean and modern" as the entire design brief
• Stock illustrations from undraw/humaaans (everyone uses these)
• Gray-200 backgrounds with gray-300 borders everywhere
• Tailwind defaults without customization
• Cookie-cutter hero sections (headline + subhead + CTA + mockup)
• Animations that don't serve meaning (spinning logos, floating shapes)

Pre-Flight Checklist (run alongside design-review)#

Whimsy Check#

• The smile test — does this make you smile? Would you show someone?
• Personality audit — remove one element. Does it still feel like "us"? If yes, you haven't gone far enough.
• Empty state check — what happens when there's no data? Is it delightful or depressing?
• Error state check — is the error message human? Funny? At least warm?
• Hover state check — does hovering over things feel rewarding?

Craft Check#

• Texture — is there grain, noise, or tactile quality? Or is it flat vectors on white?
• Typography — are font choices intentional? Is there contrast in scale/weight?
• Color — does the palette create a mood? Could you name the vibe in one word?
• Motion — do transitions have easing? Do elements enter and exit with intention?
• Detail — is there at least one "easter egg" level detail someone might notice on second look?

Kill Switch#

• Not whimsy for whimsy's sake — does the personality serve the product or distract from it?
• Readable — is body text still legible? Are CTAs still clear?
• Accessible — does color contrast pass WCAG? Do animations respect prefers-reduced-motion?
• Performance — are animations GPU-accelerated? Are textures optimized?

Updating This Skill#

After design reviews where Aaron gives feedback on visual personality, tone, or craft:

• What delighted him → add to Principles or References
• What felt flat → add to Anti-Patterns
• Specific decisions (texture style, color choice, animation timing) → project channel memory

The goal: every build should feel more "us" than the last.