← All styles
Live preview Open full page ↗
The demo page rendered in Candy Playful

Candy Playful

bright, chunky and pleased to see you

Big radii, thick weights, saturated violet and a springy motion curve. Confident and friendly without slipping into childish.

lightplayfulconsumerroundedboldvibrant v1.0.0 CC-BY-4.0

Install

npx styles-md add candy-playful

Palette

bg #fffdf7
surface #ffffff
fg #2a1d33
muted #6b5a75
accent #7b3fe4
accent-fg #ffffff
border #dcc9ea
success #1f8a4c
danger #d62839

Type

17px base · 1.333 ratio · weight 500/800. Fonts are not bundled — specimens fall back to what you have installed.

4xl · 71.55px

The quick brown fox jumps

3xl · 53.67px

The quick brown fox jumps

2xl · 40.27px

The quick brown fox jumps

xl · 30.21px

The quick brown fox jumps

lg · 22.66px

The quick brown fox jumps

base · 17px

The quick brown fox jumps

sm · 12.75px

The quick brown fox jumps

xs · 9.57px

The quick brown fox jumps

Shape, space & motion

stroke
2px
radius
10px · 16px · 28px
spacing unit
4px
gutter
24px
section gap
104px
max width
1100px
motion
260ms cubic-bezier(0.34, 1.56, 0.64, 1)
Download

Candy Playful

Chunky and warm. Weight does the shouting so colour does not have to, and everything you can press looks genuinely pressable.

Principles

  • Body text is weight 500 and headings are 800. There is no thin type in this style.
  • Buttons and cards use a solid offset shadow so they read as physical objects.
  • The motion curve overshoots slightly. Every hover and open should feel springy.
  • Radius scales with the element: 10px controls, 16px buttons, 28px cards.
  • Violet is the only accent; warmth comes from the cream background, not a second hue.

Typography

Nunito at 17px with a 1.333 ratio gives a big, cheerful ramp. Headings are tightly tracked at weight 800 so they stay compact despite the size. Line height 1.6 body, 1.15 headings. Sentence case everywhere — uppercase kills the friendliness instantly.

Colour

Cream page, white cards, violet accent. border is a light violet tint rather than grey, which keeps the whole surface warm even where nothing is coloured.

Components

  • Button (primary): accent fill, white label, radius-md, 14px/26px padding, weight 700, shadow-sm; presses down 2px on active.
  • Button (secondary): white fill, 2px border, fg label, same metrics.
  • Card: white fill, 2px border, radius-lg, 28px padding, shadow-md.
  • Input: white fill, 2px border, radius-md, 14px/16px padding; focus swaps border to accent.
  • Nav: 72px tall, transparent, fg links at weight 600, accent pill behind the active item.
  • Badge: tinted accent fill, accent text, radius-full, weight 700 text-xs, 4px/12px padding.
  • Avatar: radius-full, 2px white ring over a coloured background.
  • Illustration: flat shapes in accent tints, never gradients or drop shadows.

Do / Don’t

  • Do give sections 104px of air — the chunky elements need it.
  • Do use sentence case for every label, button and heading.
  • Do animate hovers with the springy curve; it is the personality of the style.
  • Don’t use thin or light font weights anywhere.
  • Don’t drop below 16px radius on a button.
  • Don’t add a second saturated colour. Tints of the accent only.
  • Don’t use blurred shadows on buttons; the solid offset is the look.
  • Don’t set body copy at weight 400 — it looks broken next to the headings.

When to use

Consumer apps, education, community products, onboarding flows, anything where warmth beats authority. Wrong for finance, security tooling or dense data.