playfulv1.0.0·light

Confetti

Confetti — Bright & Joyful

playfulbrightmagentacyanjoyful

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

confetti · rendered from tokens

Color

brand.primary

oklch(0.6 0.22 320)

brand.secondary

oklch(0.68 0.16 200)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.26 0.03 320)

text.muted

oklch(0.47 0.035 320)

text.link

oklch(0.6 0.22 320)

surface.base

oklch(0.99 0.006 320)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.965 0.012 320)

border.default

oklch(0.9 0.016 320)

state.success

oklch(0.6 0.15 150)

state.danger

oklch(0.58 0.2 25)

state.warning

oklch(0.74 0.15 75)

state.info

oklch(0.62 0.16 230)

Typography

3xlThe quick brown fox

2xlThe quick brown fox

xlThe quick brown fox

lgThe quick brown fox

baseThe quick brown fox

smThe quick brown fox

Components

Buttons

Inputs

Fintech

Selection

Notifications

AutoManual

Feedback

successdangerwarninginfo

Tokens validatedAll contrast checks pass WCAG AA.

Data

AMRKJD+5

2,847+12%

Storage64%

Navigation

OverviewTokensActivity

Home/Library/Item

123

Cards

Confetti

A bright, joyful design language with playful motion.

Pro

$12/ mo

Unlimited exports

Private systems

Priority support

Aria Moss

Owner

success

Ravi Kohli

Editor

info

Lena Park

Viewer

warning

Radius, shadow & spacing

full

Use this system

Three ways to drop Confetti into your workflow.

Save the file for your tool — your agent then generates UI in Confetti, automatically.

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/confetti.mdc

Project rule — applied to every generation.

WsWindsurf

.windsurfrules

Repo root — Cascade reads it automatically.

GCGitHub Copilot

.github/copilot-instructions.md

Repo-wide custom instructions for Copilot.

The system

Brand & Voice

Confetti is a party in pixels: hot magenta, electric cyan, and a bounce that makes everything feel celebratory. Built for consumer apps, events, and rewards that want to make people grin.

Layout & Grid

Big rounded shapes, colorful shadows, and lots of motion. Color is used boldly, always with white text on the saturated brand fills so nothing strains.

Components

Buttons

Chunky radius.lg pills in magenta color.brand.primary that overshoot and settle on a springy easing, casting a colored shadow.md.

Cards

Rounded, cheerful cards on color.surface.raised with confetti accents and state badges that pair color with labels.

Accessibility

Maximum fun, no compromises: primary and muted text pass WCAG AA on every surface, tap targets are oversized, and the bounce respects reduced-motion.

Tokens

Color (14)

Tokens

breakpoint

iconography

motion

radius

shadow

spacing

typography

zIndex

Export

One source of truth, five formats — copy or download any of them.

design.md97 lines

1---

2$schema: https://designmd.in/schema/v1.json

3id: confetti

4name: Confetti

5title: Confetti — Bright & Joyful

6version: 1.0.0

7category: playful

8tags: [playful, bright, magenta, cyan, joyful]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.6 0.22 320)", type: color }

17 secondary: { value: "oklch(0.68 0.16 200)", type: color }

18 onBrand: { value: "oklch(0.99 0 0)", type: color }

19 text:

20 primary: { value: "oklch(0.26 0.03 320)", type: color }

21 muted: { value: "oklch(0.47 0.035 320)", type: color }

22 link: { value: "{color.brand.primary}", type: color }

23 surface:

24 base: { value: "oklch(0.99 0.006 320)", type: color }

25 raised: { value: "oklch(1 0 0)", type: color }

26 sunken: { value: "oklch(0.965 0.012 320)", type: color }

27 border:

28 default: { value: "oklch(0.9 0.016 320)", type: color }

29 state:

30 success: { value: "oklch(0.6 0.15 150)", type: color }

31 danger: { value: "oklch(0.58 0.2 25)", type: color }

32 warning: { value: "oklch(0.74 0.15 75)", type: color }

33 info: { value: "oklch(0.62 0.16 230)", type: color }

34 typography:

35 family:

36 sans: { value: "Fredoka, system-ui, sans-serif", type: fontFamily }

37 mono: { value: "ui-monospace, monospace", type: fontFamily }

38 scale:

39 sm: { value: "0.875rem", type: dimension }

40 base: { value: "1rem", type: dimension }

41 lg: { value: "1.3rem", type: dimension }

42 xl: { value: "1.8rem", type: dimension }

43 "2xl": { value: "2.5rem", type: dimension }

44 "3xl": { value: "3.4rem", type: dimension }

45 weight:

46 regular: { value: 400, type: fontWeight }

47 bold: { value: 700, type: fontWeight }

48 leading:

49 tight: { value: 1.1, type: number }

50 normal: { value: 1.55, type: number }

51 spacing:

52 base: { value: "0.25rem", type: dimension }

53 radius:

54 sm: { value: "0.75rem", type: dimension }

55 md: { value: "1.25rem", type: dimension }

56 lg: { value: "2rem", type: dimension }

57 full: { value: "9999px", type: dimension }

58 shadow:

59 sm: { value: "0 2px 6px oklch(0.6 0.22 320 / 0.14)", type: shadow }

60 md: { value: "0 14px 32px oklch(0.6 0.22 320 / 0.22)", type: shadow }

61 motion:

62 duration:

63 base: { value: "220ms", type: duration }

64 easing:

65 standard: { value: "cubic-bezier(0.34, 1.5, 0.6, 1)", type: cubicBezier }

66 breakpoint:

67 md: { value: "768px", type: dimension }

68 iconography:

69 style: { value: "3px stroke, rounded, bouncy", type: descriptor }

70 zIndex:

71 dropdown: { value: 1000, type: number }

72 modal: { value: 1300, type: number }

73---

75# Confetti Design System

77## Brand & Voice

78Confetti is a party in pixels: hot magenta, electric cyan, and a bounce that

79makes everything feel celebratory. Built for consumer apps, events, and rewards

80that want to make people grin.

82## Layout & Grid

83Big rounded shapes, colorful shadows, and lots of motion. Color is used boldly,

84always with white text on the saturated brand fills so nothing strains.

86## Components

87### Buttons

88Chunky `radius.lg` pills in magenta `color.brand.primary` that overshoot and

89settle on a springy easing, casting a colored `shadow.md`.

91### Cards

92Rounded, cheerful cards on `color.surface.raised` with confetti accents and

93state badges that pair color with labels.

95## Accessibility

96Maximum fun, no compromises: primary and muted text pass WCAG AA on every

97surface, tap targets are oversized, and the bounce respects reduced-motion.

Related systems

View →

Button

Citrus

98AA

Citrus — Bright & Energetic

playfulplayfulgreen

View →

Button

Bubblegum

98AA

Bubblegum — Playful Consumer

playfulplayfulpink

View →

Button

Marshmallow

98AA

Marshmallow — Soft Pastel Playful

playfulplayfulpastel