# Cartoon Design System

> Brand visual system for the alibugatekin ecosystem (alibugatekin.com, agent-skills-mcp, dev-inspector) — a "cartoon sticker" design language with vivid pastel canvases, SVG paper grain, 2px ink borders, hard-offset shadows (3/5/8px, zero blur), tilted sticker cards/buttons/chips with bouncy press motion, hand-drawn scribbles, scalloped pastel dividers, framer-motion reveal animations, custom SVG cursors, Fraunces+Geist typography, TR/EN path-prefix i18n, and a dark "Mono" mode that collapses pastels to pure B&W. The cartoon base is composable — use it alone, or layer overlay themes like agentic (midnight + neon mint + 3D scene) or dev-tool (cobalt hero + scribbles). Use when building UI in alibugatekin / agent-skills-mcp / dev-inspector projects, when the user asks for "cartoon", "sticker", or "playful" style, when mixing cartoon with another theme, or when implementing rb-canvas / rb-ink / sticker primitives / paper grain / scribbles.

- Skill: `alibugatekinn/cartoon-design-system` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add alibugatekinn/cartoon-design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/alibugatekinn/cartoon-design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- License: MIT
- Author: alibugatekinn (https://skillmd.com/u/alibugatekinn)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/alibugatekinn/cartoon-design-system

---


# Cartoon Design System — the alibugatekin Brand

## Overview

This is the brand visual language for the **alibugatekin ecosystem**:

- [alibugatekin.com](https://www.alibugatekin.com) — the canonical reference, the source of every token in this guide
- [agent-skills-mcp](https://github.com/alibugatekinn/agent-skills-mcp) and its landing — cartoon base + **agentic** overlay (midnight canvas, neon mint accent, 3D scene)
- [dev-inspector](https://github.com/alibugatekinn/dev-inspector) and its landing — cartoon base + **dev-tool** overlay (cobalt hero, scribbles, monospace)

The aesthetic is **"cartoon sticker on paper"** — vivid pastel surfaces with 2px ink outlines, hard-offset shadows that stamp the surface onto the canvas, gentle tilts, and an ever-present SVG paper grain. Every interactive element behaves like a sticker pressed onto the page: it lifts on hover, presses into its own shadow on click, and wobbles or bobs at idle. The system is **composable**: the cartoon DNA is the constant, and a project can layer an overlay theme on top to specialise the feel.

Read this `SKILL.md` first. Load the reference files only when the task touches their topic.

## Quick Start: the Five Tokens That Define "Cartoon"

If a surface has these five things, it reads as cartoon. If it is missing any one, it stops reading as cartoon.

1. **Vivid pastel canvas** — warm cream `#fff1d2` is the home canvas. Pastels (mint, butter, rose, sky, lavender, peach) are vivid, never washed out. Backgrounds are colour, not white.
2. **2px ink border** — every card, button, chip, divider, table cell. Always **`#1a1f3a`** ink on light mode, always 2px. Never 1px. Never grey.
3. **Hard-offset shadow with zero blur** — `box-shadow: 4px 4px 0 var(--rb-shadow)`. No `rgba()` softening, no spread, no blur radius. The shadow is the ink stroke offset diagonally. Standard offsets are 3, 4, 5, and 8 px.
4. **SVG paper grain over the canvas** — a fixed full-viewport overlay of an `feTurbulence` SVG, `mix-blend-mode: multiply` in light mode and `screen` in dark mode. The grain is **not optional and not subtle** — it is what makes the canvas read as paper.
5. **Sticker-press motion** — on hover, the sticker translates `-1px, -2px` and its shadow grows to `6px 6px`. On active, it translates `2px, 2px` (sinking into its shadow) and the shadow collapses to `1px 1px`. Transition is `180ms cubic-bezier(0.34, 1.56, 0.64, 1)` — a bouncy spring, not ease-out.

If you remember nothing else from this guide, remember those five.

## The Cartoon DNA (non-negotiable across every variant)

These properties are constant whether the project is in the light base, the agentic dark overlay, or the dev-tool flavor. Changing them stops the work reading as part of the ecosystem.

| Property | Value | Notes |
|----------|-------|-------|
| Border | `2px solid var(--rb-ink)` | Always 2px, always ink colour. |
| Radius | `20px` default; `28px` for hero; `999px` (pill) for chips/buttons | Buttons and chips are full pills. |
| Shadow | `Npx Npx 0 var(--rb-shadow)`, `N ∈ {3,4,5,8}` | Zero blur. Shadow colour matches the canvas's ink. |
| Grain | SVG `feTurbulence baseFrequency="0.95"`, opacity 0.85, blend `multiply` (light) / `screen` (dark) | See `reference/cursors-and-grain.md`. |
| Cursor | Custom SVG: cream paper arrow default; chunky yellow arrow + click-radiation lines for `pointer` | Overlay themes can recolour the cursor; the silhouette is fixed. |
| Press motion | Hover: `translate(-1px, -2px)` + shadow `+2px`. Active: `translate(2px, 2px)` + shadow `1px 1px`. | Bouncy spring curve `cubic-bezier(0.34, 1.56, 0.64, 1)`, 180ms. |
| Tilt | `rotate(±0.6deg)` for cards in a grid; straightens to `0deg` on hover. | Alternate left/right tilts in a row for organic feel. |
| Display font | `Fraunces` (variable, 400–900, italic) via `--font-display`. | Serif with optical sizing — gives the heading character. |
| Body font | `Geist` (400/500/600/700) via `--font-body`. | Clean, geometric, readable at small sizes. |
| Button text | `text-transform: none`, weight 600. | **Never** uppercase. Buttons read like dialogue, not signage. |

For exact CSS variables and recipes, see [`reference/tokens.md`](reference/tokens.md).

## The Theme Overlay Pattern

The cartoon base is **composable**. To create a themed cartoon, swap only the small overlay layer — never the DNA.

```
┌───────────────────────────────────────────┐
│ Cartoon DNA (constant)                    │
│  • 2px ink borders                        │
│  • Hard-offset shadows (no blur)          │
│  • SVG paper grain                        │
│  • Sticker-press motion                   │
│  • Custom SVG cursors                     │
│  • Fraunces + Geist                       │
└───────────────────────────────────────────┘
                  +
┌───────────────────────────────────────────┐
│ Overlay (per project)                     │
│  • Canvas colour                          │
│  • Accent colour                          │
│  • Cursor fill colour                     │
│  • Selection colour                       │
│  • Optional: extra layer (3D scene veil,  │
│    hero gradient, animation pack)         │
└───────────────────────────────────────────┘
```

Three concrete overlays already exist in the ecosystem:

| Overlay | Canvas | Accent | Special layer | Where |
|---------|--------|--------|---------------|-------|
| **Base** (cartoon-only) | `#fff1d2` cream | `#2e36c8` cobalt | — | alibugatekin.com home |
| **Dev-tool** | `#fff1d2` cream | `#2e36c8` cobalt | Scribble corners, monospace blocks, no 3D | dev-inspector landing |
| **Agentic** | `#0c0e18` midnight | `#6df2a9` neon mint | 3D scene veil at `z=1`, hologram screens, scene controls | agent-skills-mcp landing |

When the user says "**cartoon + agentic**" or "**cartoon with the dev-tool flavor**", they want the base DNA plus one of these overlay packs. See [`reference/theme-overlays.md`](reference/theme-overlays.md) for the full diff tables and how to author a new overlay.

## Decision Frameworks

### When the user says "cartoon" — what do they actually want?

Read these signals in order:

1. **Did they name a specific project?** ("for agent-skills-mcp", "in the dev-inspector landing") → use that project's overlay on top of the base.
2. **Did they name a theme alongside cartoon?** ("cartoon + agentic", "cartoon agent theme") → base + overlay. Pull the overlay's canvas, accent, cursor swap from `reference/theme-overlays.md`.
3. **Did they say "playful", "sticker", "hand-drawn"?** → base cartoon only. Use the cream canvas + cobalt accent + full pastel palette.
4. **Are they extending alibugatekin.com itself?** → mirror the existing `rb-*` CSS variables exactly. Do not invent new tones.

### Light "base" vs. "Mono" dark mode

The base ships a **Mono** dark mode, not a "dark cartoon". This is intentional.

- In Mono mode every pastel **collapses to a grey** (`#2a2a2a` family). The page goes pure black-and-white cartoon, like a comic strip page.
- The accent collapses to `#fafafa` (white).
- Grain switches from `multiply @ 0.85` to `screen @ 0.55`.
- Section tints (the `data-rb-section="apps"` / `"blogs"` accents) become near-black greys with a faint hue shift.

**Choose Mono when:** the user toggles `data-color-mode="dark"`, or you are building a reading surface where colour would compete with text.

**Do not choose Mono when:** the project has its own dark overlay (agentic, etc.) — that overlay defines its own dark palette and ignores Mono entirely.

### When to add a hero overlay

Add a "hero" treatment (large accent sticker with `rb-grain-overlay` and corner scribbles) when:

- The page has a single primary message that defines the screen (landing pages, "about me", feature announcement).
- The H1 sits in 18 characters or fewer (`maxWidth: "18ch"`).

Do not add a hero when the page is content-dense (lists, dashboards, admin tools). Use a `SectionHeading` with a butter chip eyebrow instead.

### When to disable motion

`@media (prefers-reduced-motion: reduce)` already disables `.rb-wobble`, `.rb-bob`, and `.rb-blink`. Do not add new infinite animations that bypass this. The `sticker-press` transitions are short enough (180 ms) to keep on for everyone.

## How to Use This Skill

Load the reference file that matches the task. They are written to be read alone.

| Task | Read |
|------|------|
| Setting up CSS variables, fonts, palette in a new app | [`reference/tokens.md`](reference/tokens.md) |
| Choosing shadows, motion, transitions, animations | [`reference/shadows-and-motion.md`](reference/shadows-and-motion.md) |
| Building a card, button, chip, or any interactive surface | [`reference/sticker-primitives.md`](reference/sticker-primitives.md) |
| Adding scribbles, scallop dividers, section headings | [`reference/decorations.md`](reference/decorations.md) |
| Applying the SVG paper grain or custom cursors | [`reference/cursors-and-grain.md`](reference/cursors-and-grain.md) |
| Layering agentic / dev-tool / a new overlay on the base | [`reference/theme-overlays.md`](reference/theme-overlays.md) |
| TR/EN i18n, light/Mono theme switching, header & responsive | [`reference/responsive-i18n-theming.md`](reference/responsive-i18n-theming.md) |

Concrete examples:

| Topic | Read |
|-------|------|
| Building a hero (cobalt base + agentic dark) | [`examples/hero.md`](examples/hero.md) |
| Building a tilted card grid with alternating tilts | [`examples/cards-grid.md`](examples/cards-grid.md) |

## Anti-Patterns to Recognise

These appear constantly when someone "almost" gets the cartoon system. Each one breaks the read.

- **1px borders instead of 2px** → the surface reads as a modal, not a sticker. Always 2px. → `reference/tokens.md`
- **`rgba()` shadow with blur** (`box-shadow: 0 4px 12px rgba(0,0,0,.1)`) → kills the cartoon stamp entirely. Use `Npx Npx 0` only. → `reference/shadows-and-motion.md`
- **Dropping the grain because "it's too noisy"** → the canvas now reads as flat plastic, not paper. The grain is the medium. Keep it. → `reference/cursors-and-grain.md`
- **Inventing new pastel tones** outside `mint / butter / rose / sky / lavender / peach` → palette drift. If you need a new tone, propose it as a brand decision, do not silently mint one. → `reference/tokens.md`
- **Uppercase button labels** (`text-transform: uppercase`) → the system is friendly, not corporate. Sentence case only. The only uppercase is the eyebrow chip (`overline` variant). → `reference/sticker-primitives.md`
- **Ease-out transitions on sticker hover** → loses the bounce that makes it feel sticky. Use `cubic-bezier(0.34, 1.56, 0.64, 1)`. → `reference/shadows-and-motion.md`
- **Centred tilt without straightening on hover** → cards look broken when you hover them. Always pair `rotate(±0.6deg)` with a hover that resets to `0deg`. → `reference/sticker-primitives.md`
- **Re-styling the cursor with `cursor: pointer`** when the global SVG cursor is set → reverts to the OS arrow on that element. Use the global pointer cursor; do not override unless you swap in the brand SVG. → `reference/cursors-and-grain.md`
- **Adding a hero to a content-dense page** → the hero competes with the data and produces visual chaos. Use `SectionHeading` for content pages. → above
- **Putting Geist on a display heading** → Fraunces is the brand voice in headings. Geist is body and UI. → `reference/tokens.md`
- **Light pastel button on light cream canvas without a shadow** → button vanishes. Every sticker needs the shadow to read as separate from the canvas. → `reference/shadows-and-motion.md`
- **Forgetting `data-color-mode` on `<html>`** → the Mono dark mode never engages. The toggle writes the attribute on the root element. → `reference/responsive-i18n-theming.md`

## When This Skill Does Not Apply

- **Universal UI/UX principles** — hierarchy, microcopy, accessibility, state coverage. Those are the [`ui-ux-design`](../ui-ux-design/SKILL.md) skill's job. This skill assumes you already know good UI; it tells you the cartoon system on top.
- **Other projects outside the alibugatekin ecosystem** — the tokens here are brand-specific. Applying them to an unrelated codebase will look like cosplay.
- **Pure brand identity work** — logo, full poster, illustration. That is illustration territory, not UI. Borrow the palette and grain if you like, but the sticker primitives are UI components, not graphic design assets.
- **Native mobile UI** — the system is web-only. The shadow language and cursor logic do not translate to iOS/Android.
- **Accessibility audits and ARIA decisions** — go to [`ui-ux-design`](../ui-ux-design/SKILL.md) and its `reference/accessibility.md`. The cartoon system inherits those rules but does not redefine them.

For those, recognise the boundary and either say so or delegate to the right skill.