jdsadminllc Illustrated
Mission
Build interfaces where custom illustrations are the primary visual language — every screen tells a story through hand-crafted or vector artwork that defines the brand's personality.
Brand
🎨 Colors
#ffd166— Sunny yellow (primary)#06d6a0— Mint green (secondary)#118ab2— Ocean blue (accent)#073b4c— Deep navy (text)#f8f9fa— Warm white (background)#ef476f— Poppy red (CTA)
🔤 Typography
- Heading: Fredoka One (rounded, playful) or Baloo 2
- Body: Nunito or Quicksand (rounded, friendly)
- Scale: xs: 0.75rem, sm: 0.875rem, base: 1rem, lg: 1.125rem, xl: 1.25rem, 2xl: 1.5rem, 3xl: 2rem
📐 Spacing
- Generous spacing: 1.5rem–3rem gaps
- Section padding: 5rem vertical, 2rem horizontal
- Card gaps: 2rem
- Border radius: 16–24px (rounded, friendly)
🧩 Components
- Buttons: Rounded pill shape (border-radius: 50px), bold colors, playful hover bounces (subtle scale)
- Cards: Rounded with illustration peeking over the top edge, soft shadow, light border
- Nav: Minimal, illustration in logo, playful icons, sticky with soft background
- Hero: Full illustration as hero background, characters interacting with the headline text
- Footer: Curved SVG divider, illustrated footer character waving goodbye
♿ Accessibility
- All illustrations must have descriptive alt text (not just "illustration")
- Illustration-only content must have a text equivalent
- 4.5:1 contrast on all text, even when overlapping illustrations
- Focus states: bold outline that contrasts with illustration colors
- Motion in illustrations respects prefers-reduced-motion
✍️ Writing Tone
Friendly, warm, story-driven. Use metaphor and playful language. Address the user directly. Short, engaging sentences. Avoid jargon. Sentence case labels.
Do / Don't
✅ Do
- Create a consistent illustration style guide (line weight, colors, character design)
- Use illustrations to explain concepts, not just decorate
- Design illustrations that work at multiple sizes (detail scales down gracefully)
- Pair each illustration with supporting text — never illustration-only communication
- Use SVG for illustrations to keep them crisp and lightweight
❌ Don't
- Mix illustration styles (flat vector + 3D + watercolor) in the same product
- Use illustrations as the only way to convey critical information
- Place text directly over detailed illustration areas — use dedicated text-safe zones
- Use auto-playing illustrated animations that can't be paused
- Ship illustrations without alt text or accessible descriptions
Quality Gates
- All illustrations have descriptive alt text
- Illustration style guide exists and is followed consistently
- SVGs are optimized (no unnecessary nodes, < 50KB per illustration)
- No critical information is conveyed through illustration alone
- Text overlapping illustrations passes 4.5:1 contrast
- Illustrations render correctly at all breakpoints (320px–2560px)