Live preview
Use this system
Three ways to drop Bubblegum into your workflow.
Save the file for your tool — your agent then generates UI in Bubblegum, automatically.
CLAUDE.mdRepo root — Claude Code reads it automatically.
.cursor/rules/bubblegum.mdcProject rule — applied to every generation.
.windsurfrulesRepo root — Cascade reads it automatically.
.github/copilot-instructions.mdRepo-wide custom instructions for Copilot.
The system
Brand & Voice
Bubblegum is all smiles: candy pink, pillowy corners, and a springy bounce on every interaction. It's the system for consumer apps that want to feel friendly, energetic, and a little bit sweet.
Layout & Grid
Rounded everything, soft colored shadows, and big tappable controls. Empty states and onboarding lean on playful illustration and generous spacing.
Components
Buttons
Big radius.lg pills in color.brand.primary that scale up with a bouncy
easing and cast a soft pink shadow.md.
Cards
Plump, rounded cards on color.surface.raised with cheerful badges using state
colors paired with labels.
Accessibility
Fun without failing anyone: primary and muted text pass WCAG AA on every surface, tap targets are oversized, and the bounce honors reduced-motion.
Tokens
Color (14)
Tokens
Export
One source of truth, five formats — copy or download any of them.
---$schema: https://designmd.in/schema/v1.jsonid: bubblegumname: Bubblegumtitle: Bubblegum — Playful Consumerversion: 1.0.0category: playfultags: [playful, pink, rounded, friendly, consumer]author: designmdlicense: CC-BY-4.0updatedAt: 2026-06-22colorMode: [light]tokens: color: brand: primary: { value: "oklch(0.62 0.21 350)", type: color } secondary: { value: "oklch(0.62 0.19 295)", type: color } onBrand: { value: "oklch(0.99 0 0)", type: color } text: primary: { value: "oklch(0.27 0.03 340)", type: color } muted: { value: "oklch(0.47 0.035 340)", type: color } link: { value: "{color.brand.primary}", type: color } surface: base: { value: "oklch(0.99 0.006 340)", type: color } raised: { value: "oklch(1 0 0)", type: color } sunken: { value: "oklch(0.965 0.012 340)", type: color } border: default: { value: "oklch(0.9 0.016 340)", type: color } state: success: { value: "oklch(0.6 0.15 150)", type: color } danger: { value: "oklch(0.58 0.2 25)", type: color } warning: { value: "oklch(0.74 0.15 75)", type: color } info: { value: "oklch(0.62 0.16 290)", type: color } typography: family: sans: { value: "Poppins, system-ui, sans-serif", type: fontFamily } mono: { value: "ui-monospace, monospace", type: fontFamily } scale: sm: { value: "0.875rem", type: dimension } base: { value: "1rem", type: dimension } lg: { value: "1.3rem", type: dimension } xl: { value: "1.75rem", type: dimension } "2xl": { value: "2.4rem", type: dimension } "3xl": { value: "3.25rem", type: dimension } weight: regular: { value: 400, type: fontWeight } bold: { value: 700, type: fontWeight } leading: tight: { value: 1.1, type: number } normal: { value: 1.55, type: number } spacing: base: { value: "0.25rem", type: dimension } radius: sm: { value: "0.75rem", type: dimension } md: { value: "1.25rem", type: dimension } lg: { value: "2rem", type: dimension } full: { value: "9999px", type: dimension } shadow: sm: { value: "0 2px 6px oklch(0.62 0.21 350 / 0.12)", type: shadow } md: { value: "0 12px 30px oklch(0.62 0.21 350 / 0.2)", type: shadow } motion: duration: base: { value: "220ms", type: duration } easing: standard: { value: "cubic-bezier(0.34, 1.4, 0.6, 1)", type: cubicBezier } breakpoint: md: { value: "768px", type: dimension } iconography: style: { value: "2.5px stroke, very rounded, chunky", type: descriptor } zIndex: dropdown: { value: 1000, type: number } modal: { value: 1300, type: number }---# Bubblegum Design System## Brand & VoiceBubblegum is all smiles: candy pink, pillowy corners, and a springy bounce onevery interaction. It's the system for consumer apps that want to feel friendly,energetic, and a little bit sweet.## Layout & GridRounded everything, soft colored shadows, and big tappable controls. Emptystates and onboarding lean on playful illustration and generous spacing.## Components### ButtonsBig `radius.lg` pills in `color.brand.primary` that scale up with a bouncyeasing and cast a soft pink `shadow.md`.### CardsPlump, rounded cards on `color.surface.raised` with cheerful badges using statecolors paired with labels.## AccessibilityFun without failing anyone: primary and muted text pass WCAG AA on everysurface, tap targets are oversized, and the bounce honors reduced-motion.