playfulv1.0.0·light

Marshmallow

Marshmallow — Soft Pastel Playful

playfulpastelsoftlavendergentle

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

marshmallow · rendered from tokens

Color

brand.primary

oklch(0.62 0.13 350)

brand.secondary

oklch(0.66 0.1 280)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.3 0.025 340)

text.muted

oklch(0.48 0.03 340)

text.link

oklch(0.62 0.13 350)

surface.base

oklch(0.99 0.008 340)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.965 0.014 340)

border.default

oklch(0.91 0.016 340)

state.success

oklch(0.58 0.13 150)

state.danger

oklch(0.58 0.18 25)

state.warning

oklch(0.74 0.13 75)

state.info

oklch(0.62 0.13 280)

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 Marshmallow into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/marshmallow.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

Marshmallow is the softest corner of the internet: muted pinks and lavenders, pillowy radii, and gentle motion. It's cozy and reassuring — perfect for wellness, journaling, and kids' apps.

Layout & Grid

Everything is rounded and roomy, with low-contrast pastel surfaces and soft shadows. Color stays gentle; the brand pink leads warmly without shouting.

Components

Buttons

Pillowy radius.lg buttons in soft pink color.brand.primary with white text and a feather-light shadow.sm.

Cards

Plush, heavily-rounded cards on color.surface.raised with gentle shadows and friendly pastel badges paired with labels.

Accessibility

Soft never means low-contrast: primary and muted text pass WCAG AA on every surface. Brand fills carry legible text, tap targets are large, and motion is reduced-motion aware.

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

1---

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

3id: marshmallow

4name: Marshmallow

5title: Marshmallow — Soft Pastel Playful

6version: 1.0.0

7category: playful

8tags: [playful, pastel, soft, lavender, gentle]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.62 0.13 350)", type: color }

17 secondary: { value: "oklch(0.66 0.1 280)", type: color }

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

19 text:

20 primary: { value: "oklch(0.3 0.025 340)", type: color }

21 muted: { value: "oklch(0.48 0.03 340)", type: color }

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

23 surface:

24 base: { value: "oklch(0.99 0.008 340)", type: color }

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

26 sunken: { value: "oklch(0.965 0.014 340)", type: color }

27 border:

28 default: { value: "oklch(0.91 0.016 340)", type: color }

29 state:

30 success: { value: "oklch(0.58 0.13 150)", type: color }

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

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

33 info: { value: "oklch(0.62 0.13 280)", type: color }

34 typography:

35 family:

36 sans: { value: "Quicksand, 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.25rem", type: dimension }

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

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

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

45 weight:

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

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

48 leading:

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

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

51 spacing:

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

53 radius:

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

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

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

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

58 shadow:

59 sm: { value: "0 2px 8px oklch(0.62 0.13 350 / 0.1)", type: shadow }

60 md: { value: "0 12px 30px oklch(0.62 0.13 350 / 0.16)", type: shadow }

61 motion:

62 duration:

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

64 easing:

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

66 breakpoint:

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

68 iconography:

69 style: { value: "2.5px stroke, very rounded, pillowy", type: descriptor }

70 zIndex:

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

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

73---

75# Marshmallow Design System

77## Brand & Voice

78Marshmallow is the softest corner of the internet: muted pinks and lavenders,

79pillowy radii, and gentle motion. It's cozy and reassuring — perfect for

80wellness, journaling, and kids' apps.

82## Layout & Grid

83Everything is rounded and roomy, with low-contrast pastel surfaces and soft

84shadows. Color stays gentle; the brand pink leads warmly without shouting.

86## Components

87### Buttons

88Pillowy `radius.lg` buttons in soft pink `color.brand.primary` with white text

89and a feather-light `shadow.sm`.

91### Cards

92Plush, heavily-rounded cards on `color.surface.raised` with gentle shadows and

93friendly pastel badges paired with labels.

95## Accessibility

96Soft never means low-contrast: primary and muted text pass WCAG AA on every

97surface. Brand fills carry legible text, tap targets are large, and motion is

98reduced-motion aware.

Related systems

View →

Button

Bubblegum

98AA

Bubblegum — Playful Consumer

playfulplayfulpink

View →

Button

Citrus

98AA

Citrus — Bright & Energetic

playfulplayfulgreen

View →

Button

Confetti

98AA

Confetti — Bright & Joyful

playfulplayfulbright