Applying Clicky UI Aesthetic

To apply this aesthetic to a component, hit these five marks:

1. Background: flat, saturated color (butter yellow, hot coral, sky blue, or off-white cream) — never gradients or subtle grays.
2. Borders: thick (2–4px), solid black or near-black, on almost everything (buttons, cards, images).
3. Shadows: hard offset drop shadows (no blur), e.g. box-shadow: 4px 4px 0px #000; — mimics a sticker lifted off the page.
4. Type: chunky, rounded, high-weight display font for headlines (think fun/bubbly sans), paired with a simple readable sans for body copy.
5. Shapes: rounded corners everywhere (buttons, cards, avatars), occasional blob/organic shapes as background decoration.

CSS
.card {
  background: #FFF7E6;
  border: 3px solid #111;
  border-radius: 20px;
  box-shadow: 6px 6px 0px #111;
  padding: 24px;
}

.button-primary {
  background: #FF6B4A;
  border: 2.5px solid #111;
  border-radius: 999px; /* pill shape */
  box-shadow: 4px 4px 0px #111;
  font-weight: 800;
  padding: 12px 28px;
  transition: transform 0.1s ease;
}

.button-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #111;
}

Progress checklist for applying the aesthetic to a page/component:

• Choose a 2–3 color saturated palette (one dominant background, one accent, one neutral cream/white)
• Apply thick black/dark borders to all interactive and card elements
• Add hard offset shadows (no blur) for a "sticker" or "pop-up" feel
• Pick a rounded, bold display typeface for headlines; keep body text simple and legible
• Round all corners generously — pills for buttons, large radii for cards
• Add playful decorative elements: blobs, squiggles, stars, hand-drawn arrows, emoji-like icons
• Animate on hover/click with small physical movement (translate + shadow grow/shrink) instead of fades
• Keep layout loose and asymmetric rather than rigid grid-perfect — slight rotation on cards/images adds charm
• Ensure copy tone matches visuals: short, punchy, conversational, exclamation-friendly

Example 1: Input: A generic SaaS pricing card with white background, gray border, subtle shadow, and a blue "Subscribe" button. Output: Cream background card with 3px black border and hard 6px offset black shadow, slightly rotated -2deg for playfulness. Price in huge bold rounded font. "Subscribe" button becomes a coral pill with black outline and its own offset shadow that "presses in" (shadow shrinks, button shifts down-right) on click.

Example 2: Input: A hero section with headline, subtext, and CTA button on a plain white background. Output: Background becomes a saturated color block (e.g. soft yellow) with large organic blob shapes in a contrasting color floating behind the text. Headline uses a chunky rounded display font in black, oversized. CTA is a pill button with thick border and hard shadow. A small hand-drawn arrow or squiggle points toward the CTA.

Example 3: Input: A testimonial/avatar row with plain circular photos. Output: Avatars get thick black circular borders and are placed at slightly varying rotations, overlapping like stickers, each with its own tiny hard shadow.