Illustration-First

Whimsical hand-drawn SVG illustrations take center stage — characters, doodles, and organic shapes define the UI.

html css javascript

Targets: JS HTML

Code

:root {
  --il-bg: #fffbf0;
  --il-orange: #ffb347;
  --il-blue: #87ceeb;
  --il-mint: #98fb98;
  --il-plum: #dda0dd;
  --il-coral: #f08080;
  --il-text: #3d2b1f;
  --il-text-muted: #8b6f5e;
  --il-card-bg: #fff9ec;
  --il-blob: 40% 60% 55% 45% / 45% 50% 50% 55%;
  --il-blob-alt: 55% 45% 40% 60% / 50% 55% 45% 50%;
  --font-hand: "Caveat", cursive;
  --font-body: "Nunito", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--il-bg);
  color: var(--il-text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ── Doodle decorations ── */
.deco {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.deco-item {
  position: absolute;
}

.deco-star1 {
  top: 5%;
  left: 4%;
  animation: wobble 4s ease-in-out infinite;
  animation-delay: 0s;
}

.deco-star2 {
  top: 12%;
  right: 8%;
  animation: wobble 5s ease-in-out infinite;
  animation-delay: 1s;
}

.deco-star3 {
  bottom: 20%;
  left: 10%;
  animation: wobble 3.5s ease-in-out infinite;
  animation-delay: 0.5s;
}

.deco-dots1 {
  top: 40%;
  right: 2%;
  animation: float 6s ease-in-out infinite;
}

.deco-dots2 {
  bottom: 10%;
  left: 2%;
  animation: float 7s ease-in-out infinite;
  animation-delay: 2s;
}

.deco-wave {
  bottom: 35%;
  right: 5%;
  animation: wobble 5s ease-in-out infinite;
  animation-delay: 1.5s;
}

@keyframes wobble {
  0%,
  100% {
    transform: rotate(-5deg) scale(1);
  }
  50% {
    transform: rotate(5deg) scale(1.05);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ── Page ── */
.page {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 52px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ── Header ── */
.header {
  text-align: center;
}

.header__eyebrow {
  font-family: var(--font-hand);
  font-size: 20px;
  color: var(--il-orange);
  margin-bottom: 12px;
}

.header__title {
  font-family: var(--font-hand);
  font-size: clamp(52px, 9vw, 96px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--il-text);
}

.header__title span {
  color: var(--il-coral);
}

.header__tagline {
  margin-top: 16px;
  font-size: 17px;
  color: var(--il-text-muted);
  font-weight: 600;
}

/* ── Profile card ── */
.card-section {
  display: flex;
  justify-content: center;
}

.illus-card {
  background: var(--il-card-bg);
  border: 3px solid rgba(61, 43, 31, 0.12);
  border-radius: var(--il-blob);
  padding: 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 6px 8px 0 rgba(255, 179, 71, 0.3), 0 16px 40px rgba(61, 43, 31, 0.1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.illus-card:hover {
  transform: rotate(-0.5deg) scale(1.02) !important;
  box-shadow: 8px 12px 0 rgba(255, 179, 71, 0.4), 0 20px 50px rgba(61, 43, 31, 0.15);
}

.card__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.avatar-wrap {
  flex-shrink: 0;
}

.avatar-svg {
  filter: drop-shadow(3px 4px 0 rgba(61, 43, 31, 0.15));
}

.card__name {
  font-family: var(--font-hand);
  font-size: 26px;
  font-weight: 700;
  color: var(--il-text);
}

.card__role {
  font-size: 14px;
  color: var(--il-text-muted);
  font-weight: 600;
  margin-top: 4px;
}

.card__stats {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.stat-bubble {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--il-blob-alt);
  border: 2px dashed rgba(61, 43, 31, 0.15);
}

.stat__value {
  display: block;
  font-family: var(--font-hand);
  font-size: 22px;
  font-weight: 700;
  color: var(--il-text);
}

.stat__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--il-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* ── Controls ── */
.controls {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Buttons ── */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  font-family: var(--font-hand);
  font-size: 18px;
  font-weight: 700;
  padding: 10px 24px;
  border: none;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background: var(--il-orange);
  color: white;
  border-radius: 55% 45% 48% 52% / 50% 52% 48% 50%;
  border: 3px solid rgba(61, 43, 31, 0.15);
  box-shadow: 4px 5px 0 rgba(61, 43, 31, 0.12);
}

.btn--primary:hover {
  transform: rotate(-2deg) scale(1.06);
  box-shadow: 6px 8px 0 rgba(61, 43, 31, 0.15);
}

.btn--secondary {
  background: var(--il-blue);
  color: var(--il-text);
  border-radius: 45% 55% 52% 48% / 52% 48% 52% 48%;
  border: 3px solid rgba(61, 43, 31, 0.12);
  box-shadow: 4px 5px 0 rgba(61, 43, 31, 0.1);
}

.btn--secondary:hover {
  transform: rotate(2deg) scale(1.06);
  box-shadow: 6px 8px 0 rgba(61, 43, 31, 0.15);
}

.btn--ghost {
  background: transparent;
  color: var(--il-text-muted);
  border: 2px dashed var(--il-text-muted);
  border-radius: 50% 50% 48% 52% / 48% 52% 50% 50%;
  font-size: 16px;
}

.btn--ghost:hover {
  color: var(--il-text);
  border-color: var(--il-text);
  transform: rotate(-1.5deg) scale(1.04);
}

/* ── Input ── */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}

.input-label {
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--il-text-muted);
}

.input {
  font-family: var(--font-hand);
  font-size: 18px;
  padding: 12px 16px;
  background: white;
  border: 3px solid rgba(61, 43, 31, 0.15);
  border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%;
  color: var(--il-text);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  box-shadow: 4px 5px 0 rgba(61, 43, 31, 0.08);
}

.input:focus {
  border-color: var(--il-orange);
  box-shadow: 4px 5px 0 rgba(255, 179, 71, 0.3);
  transform: rotate(0.5deg);
}

.input::placeholder {
  color: #c4a98e;
  font-style: italic;
}

/* ── Badges ── */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.badge {
  font-family: var(--font-hand);
  font-size: 15px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--il-blob);
  border: 2px solid rgba(61, 43, 31, 0.12);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge:hover {
  transform: rotate(-3deg) scale(1.08);
}

.badge--orange {
  background: #ffe0b2;
  color: #bf360c;
}
.badge--blue {
  background: #b3e5fc;
  color: #01579b;
}
.badge--mint {
  background: #c8e6c9;
  color: #1b5e20;
}
.badge--plum {
  background: #e1bee7;
  color: #4a148c;
}

/* ── Confetti ── */
#confettiContainer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.confetti-bit {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: confettiBurst 0.7s ease-out forwards;
}

@keyframes confettiBurst {
  to {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* Illustration-First — Interactive JS */

(function () {
  "use strict";

  const COLORS = ["#FFB347", "#87CEEB", "#98FB98", "#DDA0DD", "#F08080", "#FDE68A"];

  // ── Confetti burst on primary button click ──
  const confettiBtn = document.getElementById("confettiBtn");
  const container = document.getElementById("confettiContainer");

  if (confettiBtn && container) {
    confettiBtn.addEventListener("click", (e) => {
      const rect = confettiBtn.getBoundingClientRect();
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;

      // Create 12 confetti bits
      for (let i = 0; i < 12; i++) {
        const bit = document.createElement("div");
        bit.className = "confetti-bit";

        const angle = (i / 12) * 2 * Math.PI;
        const distance = 60 + Math.random() * 60;
        const tx = Math.cos(angle) * distance;
        const ty = Math.sin(angle) * distance - 30;

        bit.style.cssText = `
          left: ${cx - 5}px;
          top: ${cy - 5}px;
          background: ${COLORS[i % COLORS.length]};
          --tx: ${tx}px;
          --ty: ${ty}px;
          width: ${8 + Math.random() * 8}px;
          height: ${8 + Math.random() * 8}px;
          animation-delay: ${Math.random() * 0.1}s;
        `;

        container.appendChild(bit);
        setTimeout(() => bit.remove(), 800);
      }

      // Button bounce feedback
      confettiBtn.style.transform = "rotate(-2deg) scale(0.9)";
      setTimeout(() => {
        confettiBtn.style.transform = "rotate(-3deg) scale(1.1)";
        setTimeout(() => {
          confettiBtn.style.transform = "";
        }, 250);
      }, 80);
    });
  }

  // ── Wiggle animation on badges on hover ──
  document.querySelectorAll(".badge").forEach((badge) => {
    badge.addEventListener("mouseenter", () => {
      const rot = (Math.random() - 0.5) * 12;
      badge.style.transform = `rotate(${rot}deg) scale(1.08)`;
    });
    badge.addEventListener("mouseleave", () => {
      badge.style.transform = "";
    });
  });

  // ── Stagger entrance for card stats ──
  const statBubbles = document.querySelectorAll(".stat-bubble");
  statBubbles.forEach((bubble, i) => {
    bubble.style.opacity = "0";
    bubble.style.transform += " scale(0.7)";
    bubble.style.transition = `opacity 0.4s ease ${0.3 + i * 0.12}s, transform 0.5s cubic-bezier(0.34,1.56,0.64,1) ${0.3 + i * 0.12}s`;
  });

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      statBubbles.forEach((bubble) => {
        const originalTransform = bubble.style.transform.replace("scale(0.7)", "");
        bubble.style.opacity = "1";
        bubble.style.transform = originalTransform + " scale(1)";
      });
    });
  });

  // ── Doodle decorations parallax ──
  const decoItems = document.querySelectorAll(".deco-item");
  document.addEventListener("mousemove", (e) => {
    const px = e.clientX / window.innerWidth - 0.5;
    const py = e.clientY / window.innerHeight - 0.5;

    decoItems.forEach((item, i) => {
      const depth = (i + 1) * 4;
      item.style.translate = `${px * depth}px ${py * depth}px`;
    });
  });

  // ── Input: fun placeholder cycle ──
  const input = document.getElementById("illusInput");
  const placeholders = [
    "A dancing cactus...",
    "A cloud with sunglasses...",
    "A tiny rocket ship...",
    "A dragon playing piano...",
    "A rainbow snail...",
  ];
  let phIdx = 0;

  if (input) {
    setInterval(() => {
      if (document.activeElement !== input) {
        phIdx = (phIdx + 1) % placeholders.length;
        input.placeholder = placeholders[phIdx];
      }
    }, 3000);
  }
})();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <title>Illustration-First — Design Style</title>
  </head>
  <body>
    <!-- Scattered doodle decorations -->
    <div class="deco" aria-hidden="true">
      <!-- Stars -->
      <svg class="deco-item deco-star1" width="32" height="32" viewBox="0 0 32 32"><path d="M16 2l2.9 9h9.5l-7.7 5.6L23.6 26 16 20.4 8.4 26l2.9-9.4L3.6 11h9.5L16 2z" fill="#FFB347"/></svg>
      <svg class="deco-item deco-star2" width="24" height="24" viewBox="0 0 32 32"><path d="M16 2l2.9 9h9.5l-7.7 5.6L23.6 26 16 20.4 8.4 26l2.9-9.4L3.6 11h9.5L16 2z" fill="#87CEEB"/></svg>
      <svg class="deco-item deco-star3" width="20" height="20" viewBox="0 0 32 32"><path d="M16 2l2.9 9h9.5l-7.7 5.6L23.6 26 16 20.4 8.4 26l2.9-9.4L3.6 11h9.5L16 2z" fill="#DDA0DD"/></svg>
      <!-- Dots cluster -->
      <svg class="deco-item deco-dots1" width="80" height="60" viewBox="0 0 80 60">
        <circle cx="8" cy="8" r="5" fill="#F08080" opacity="0.7"/>
        <circle cx="28" cy="14" r="4" fill="#FFB347" opacity="0.7"/>
        <circle cx="50" cy="6" r="6" fill="#87CEEB" opacity="0.7"/>
        <circle cx="70" cy="18" r="3" fill="#98FB98" opacity="0.7"/>
        <circle cx="18" cy="36" r="4" fill="#DDA0DD" opacity="0.7"/>
        <circle cx="45" cy="42" r="5" fill="#FFB347" opacity="0.7"/>
        <circle cx="65" cy="50" r="3" fill="#F08080" opacity="0.7"/>
      </svg>
      <svg class="deco-item deco-dots2" width="80" height="60" viewBox="0 0 80 60">
        <circle cx="8" cy="8" r="4" fill="#87CEEB" opacity="0.7"/>
        <circle cx="30" cy="20" r="6" fill="#98FB98" opacity="0.7"/>
        <circle cx="55" cy="10" r="4" fill="#DDA0DD" opacity="0.7"/>
        <circle cx="72" cy="35" r="5" fill="#FFB347" opacity="0.7"/>
        <circle cx="20" cy="48" r="3" fill="#F08080" opacity="0.7"/>
        <circle cx="50" cy="52" r="4" fill="#87CEEB" opacity="0.7"/>
      </svg>
      <!-- Wavy line -->
      <svg class="deco-item deco-wave" width="160" height="40" viewBox="0 0 160 40" fill="none">
        <path d="M0 20 C20 5, 40 35, 60 20 S100 5, 120 20 S150 35, 160 20" stroke="#FFB347" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.6"/>
      </svg>
    </div>

    <div class="page">
      <!-- Header -->
      <header class="header">
        <div class="header__eyebrow">✏️ design system</div>
        <h1 class="header__title">Illustration<br /><span>First ✨</span></h1>
        <p class="header__tagline">Whimsical, hand-drawn &amp; wonderfully weird.</p>
      </header>

      <!-- Profile card -->
      <section class="card-section">
        <div class="illus-card" style="transform: rotate(-1.5deg)">
          <div class="card__top">
            <!-- SVG avatar character -->
            <div class="avatar-wrap">
              <svg class="avatar-svg" width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- Face blob -->
                <ellipse cx="36" cy="38" rx="28" ry="28" fill="#FFE0B2"/>
                <!-- Hair -->
                <ellipse cx="36" cy="16" rx="24" ry="14" fill="#5D4037"/>
                <ellipse cx="14" cy="26" rx="8" ry="14" fill="#5D4037"/>
                <ellipse cx="58" cy="26" rx="8" ry="14" fill="#5D4037"/>
                <!-- Eyes -->
                <circle cx="26" cy="36" r="5" fill="white"/>
                <circle cx="46" cy="36" r="5" fill="white"/>
                <circle cx="27" cy="37" r="3" fill="#3E2723"/>
                <circle cx="47" cy="37" r="3" fill="#3E2723"/>
                <circle cx="28" cy="35" r="1" fill="white"/>
                <circle cx="48" cy="35" r="1" fill="white"/>
                <!-- Rosy cheeks -->
                <ellipse cx="19" cy="45" rx="6" ry="4" fill="#FFAB91" opacity="0.5"/>
                <ellipse cx="53" cy="45" rx="6" ry="4" fill="#FFAB91" opacity="0.5"/>
                <!-- Smile -->
                <path d="M25 52 Q36 62 47 52" stroke="#5D4037" stroke-width="2.5" stroke-linecap="round" fill="none"/>
                <!-- Sparkle near head -->
                <path d="M62 12 l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z" fill="#FFB347"/>
              </svg>
            </div>
            <div class="card__info">
              <h2 class="card__name">Sunny Parker</h2>
              <p class="card__role">Doodle Artist ✍️</p>
            </div>
          </div>

          <div class="card__stats">
            <div class="stat-bubble" style="transform: rotate(1.5deg); background: #FFE0B2;">
              <span class="stat__value">342</span>
              <span class="stat__label">Drawings</span>
            </div>
            <div class="stat-bubble" style="transform: rotate(-2deg); background: #B3E5FC;">
              <span class="stat__value">4.8★</span>
              <span class="stat__label">Rating</span>
            </div>
            <div class="stat-bubble" style="transform: rotate(1deg); background: #C8E6C9;">
              <span class="stat__value">9.2k</span>
              <span class="stat__label">Friends</span>
            </div>
          </div>
        </div>
      </section>

      <!-- Controls -->
      <section class="controls" style="transform: rotate(0.5deg)">
        <div class="button-row">
          <button class="btn btn--primary" id="confettiBtn">Create ✨</button>
          <button class="btn btn--secondary">Explore 🌈</button>
          <button class="btn btn--ghost">Maybe later</button>
        </div>

        <div class="input-group">
          <label class="input-label" for="illusInput">What shall we draw today?</label>
          <input class="input" id="illusInput" type="text" placeholder="A dragon? A flower? A whole world..." />
        </div>

        <div class="badge-row">
          <span class="badge badge--orange">✏️ Hand-drawn</span>
          <span class="badge badge--blue">🎨 Illustrated</span>
          <span class="badge badge--mint">🌸 Whimsical</span>
          <span class="badge badge--plum">✨ Playful</span>
        </div>
      </section>
    </div>

    <!-- Confetti container -->
    <div id="confettiContainer" aria-hidden="true"></div>

    <script src="script.js"></script>
  </body>
</html>

Illustration-First

The Illustration-First style puts handcrafted character at the center of the experience. Rather than relying on polished icons or photography, this aesthetic uses inline SVG illustrations — simple cartoon faces, doodle stars, swooping lines, and blob shapes — to give the interface a warm, human, and approachable personality. It says “made by people, for people.”

The warm cream background (#FFFBF0) acts as the paper on which everything is drawn. Blob border radii (border-radius: 40% 60% 55% 45% / 45% 50% 50% 55%) replace every sharp corner, making cards and buttons feel like they were cut from paper with scissors. Slight rotations on elements simulate being placed by hand. The handwriting-style headline font ('Caveat') reinforces the artisanal quality, while 'Nunito' keeps body text legible without breaking the gentle mood.

Decorative SVG elements — floating stars, dots, curved lines — are positioned absolutely around the page, layering depth and texture. Interactive moments like button clicks trigger a CSS confetti burst of six colored circles radiating outward, rewarding engagement with a joyful flourish.

Key characteristics

Warm cream #FFFBF0 background with soft pastel palette
Organic blob border-radius shapes on all UI elements
Inline SVG avatar character with expressive face details
Scattered doodle decorations: stars, dots, wavy lines as positioned SVG
Slight element rotations to simulate hand-placement
Confetti burst animation on button click

When to use it

Ideal for children’s educational apps, creative tools, personal portfolio sites, food delivery products, and any brand where warmth, creativity, and approachability are core values. The high visual complexity means it works best on landing pages and feature highlights rather than data-heavy dashboards.