Kidcore

---
name: kidcore
description: Apply the Kidcore visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Kidcore, mentions kid core, 90s childhood nostalgia, toycore, or describes saturated primary red, yellow, and blue, rainbow stripes and checkerboards, sticker and patch collage layering — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Kidcore Design System

Adult nostalgia for a 90s childhood, rendered maximally: saturated red-yellow-blue primaries, rainbow stripes, smiley faces, sticker-sheet collage, crayon handwriting, and toy-box clutter. It quotes children's media — Lisa Frank, slime green, alphabet magnets — for grown-ups chasing comfort, not for actual kids.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Kidcore.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (kid core, 90s childhood nostalgia, toycore, sticker collage aesthetic, rainbow scrapbook), or describes its traits: saturated primary red, yellow, and blue; rainbow stripes and checkerboards; sticker and patch collage layering; crayon and marker handwriting type; smiley faces, stars, and toy motifs; scrapbook clutter with visible tape and borders.

## Design tokens

### Color palette

- Construction-paper cream base: `#fffbef` (--color-bg)
- Sticker-white cards and cutouts: `#ffffff` (--color-surface)
- Fat marker black for body text: `#262626` (--color-text)
- Pencil gray secondary text: `#5c5c5c` (--color-text-muted)
- Crayon red for links and primary actions: `#d62828` (--color-accent)
- Primary blue for secondary elements: `#1e66d0` (--color-crayon-blue)
- School-bus yellow for highlights and stars: `#ffd60a` (--color-sunshine)
- Slime-and-grass green accents: `#2fa632` (--color-grass-green)
- Grape purple for rainbow sets and tags: `#7b2fbf` (--color-grape)
- Bubblegum pink for stickers and badges: `#ff6ea9` (--color-bubblegum)
- Thick white die-cut edge around sticker elements: `#ffffff` (--color-sticker-border)

### Typography

- Display / headings: Gloria Hallelujah (fallback: Comic Sans MS, cursive) (ideal: Comic Sans MS, premium — use Gloria Hallelujah as the free substitute)
- Body: Comfortaa (fallback: Trebuchet MS, Verdana, sans-serif)
- Type scale: 1.3 ratio, base 16px — computed steps: 16px / 21px / 27px / 35px / 46px / 59px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.25, letter-spacing 0.01em
- Body: line-height 1.6, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 36, 56, 80 — Cheerfully cluttered: stickers overlap, elements tilt into each other's space, but text blocks themselves keep clean readable padding.
- Border radius: sm 8px, lg 20px, blob 255px 15px 225px 15px / 15px 225px 15px 255px — Everything rounded like safety scissors; the blob radius gives a hand-cut construction-paper edge.
- Border treatment: 3px solid #262626 — Chunky marker outlines; sticker elements swap to a 4px white die-cut border plus a soft drop shadow.

### Shadows

- sticker: `0 3px 8px rgba(38, 38, 38, 0.25)` — Lift under die-cut sticker elements
- crayon-hard: `4px 4px 0 #ffd60a` — Playful offset shadow on cards and buttons
- tape: `0 1px 4px rgba(38, 38, 38, 0.18)` — Soft shadow under washi-tape and paper scraps

### Layout

- Max content width: 1160px
- Scrapbook composition: straight content spine with tilted stickers and scraps (-6deg to 6deg) around it
- Rainbow stripe or checkerboard bands as section dividers
- Photos framed as polaroids or trading cards with tape corners
- One smiley, star, or toy motif anchoring each section

### Effects

- Die-cut sticker treatment (white border + soft shadow) on icons and badges
- Crayon-texture strokes on underlines and doodled arrows
- Washi-tape strips fixing images to the page
- Confetti burst on key interactions

### Motion

- Easing: cubic-bezier(0.34, 1.56, 0.64, 1); durations 140ms / 280ms / 550ms
- Bouncy overshoot on entrances and hovers, like a jack-in-the-box
- Stickers wiggle ±3deg on hover
- Confetti and star-burst micro-rewards on completion events

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fffbef;
  --color-surface: #ffffff;
  --color-text: #262626;
  --color-text-muted: #5c5c5c;
  --color-accent: #d62828;
  --color-crayon-blue: #1e66d0;
  --color-sunshine: #ffd60a;
  --color-grass-green: #2fa632;
  --color-grape: #7b2fbf;
  --color-bubblegum: #ff6ea9;
  --color-sticker-border: #ffffff;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-blob: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --shadow-sticker: 0 3px 8px rgba(38, 38, 38, 0.25);
  --shadow-crayon-hard: 4px 4px 0 #ffd60a;
  --shadow-tape: 0 1px 4px rgba(38, 38, 38, 0.18);
  --border-default: 3px solid #262626;
  --font-display: "Gloria Hallelujah", "Comic Sans MS", cursive;
  --font-body: Comfortaa, "Trebuchet MS", Verdana, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.25;
  --leading-body: 1.6;
  --tracking-heading: 0.01em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 140ms;
  --duration-base: 280ms;
  --duration-slow: 550ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah:wght@400&family=Comfortaa:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** White bar with a crayon-scrawled logo, links as colored sticker pills (each a different primary), active link tilted 3deg with sticker shadow.
- **Hero:** Construction-paper ground with a huge Gloria Hallelujah headline underlined in crayon red, surrounded by tilted die-cut stickers and a rainbow band.
- **Card:** White cutout with 3px marker border, crayon-hard yellow offset shadow, tilted sticker badge in a corner; title handwritten, body in Comfortaa.
- **Button (primary):** Crayon-red pill with white bold label, 3px marker outline, yellow offset shadow that collapses on press with a small squash.
- **Button (secondary):** White pill with marker outline and black label; hover slaps a random primary-color sticker border and 2deg tilt.
- **Form fields:** Notebook-style input with dashed marker underline instead of a full box; focus swaps the dash to solid crayon blue and adds a doodle arrow.

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A sticker-sheet collage: die-cut smileys, stars, and rainbows with thick white sticker borders, scattered at odd angles over a bright ground with a crayon-scrawled headline. Spend boldness here; keep everything else quiet.

## Do

- Layer like a scrapbook: stickers, tape, tilts, and overlaps sell the nostalgia
- Keep true primaries — red, yellow, blue — dominant, with green, purple, pink as supporting cast
- Quote 90s childhood artifacts (slime, alphabet magnets, trading cards) knowingly
- Keep body copy in the clean rounded sans; handwriting is for headlines and doodles

## Don't

- Don't design for actual children — this is adult nostalgia; skip the oversized tap targets and reading-level constraints of true kids' UI
- Don't sanitize into pastel kawaii; kidcore is saturated, loud, and a little scuffed
- Don't set paragraphs in the crayon handwriting face
- Don't align everything neatly — perfect grids kill the scrapbook energy

## Accessibility notes

- Marker-black text, pencil-gray muted text, and crayon-red accent all pass 4.5:1 on the cream ground.
- sunshine, grass-green, bubblegum, and grape are sticker/decoration colors that fail AA on light grounds — never use them for text; pair yellow only with black elements.
- Wiggle, bounce, and confetti must honor prefers-reduced-motion; tilted decorative elements stay clear of interactive targets.

## Reference sites

- Kidcore — Aesthetics Wiki: https://aesthetics.fandom.com/wiki/Kidcore
- What is kidcore? — SCREENSHOT Media: https://screenshot-media.com/culture/internet-culture/what-is-kidcore/
- Lisa Frank — Wikipedia: https://en.wikipedia.org/wiki/Lisa_Frank

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip kidcore.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/kidcore.json

Settings → Capabilities → Skills → Upload skill → kidcore.zip