Cartoon Design System

Cartoon Design System — the alibugatekin Brand

Overview

This is the brand visual language for the alibugatekin ecosystem:

• alibugatekin.com — the canonical reference, the source of every token in this guide
• agent-skills-mcp and its landing — cartoon base + agentic overlay (midnight canvas, neon mint accent, 3D scene)
• 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.

For exact CSS variables and recipes, see 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:

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 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.

Concrete examples:

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 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 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.