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.

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.

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 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
Choosing shadows, motion, transitions, animations	reference/shadows-and-motion.md
Building a card, button, chip, or any interactive surface	reference/sticker-primitives.md
Adding scribbles, scallop dividers, section headings	reference/decorations.md
Applying the SVG paper grain or custom cursors	reference/cursors-and-grain.md
Layering agentic / dev-tool / a new overlay on the base	reference/theme-overlays.md
TR/EN i18n, light/Mono theme switching, header & responsive	reference/responsive-i18n-theming.md

Concrete examples:

Topic	Read
Building a hero (cobalt base + agentic dark)	examples/hero.md
Building a tilted card grid with alternating tilts	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 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.