Editorialmarketingplayful

Bloom

A soft pink theme: magenta primary, pastel surfaces, and gentle type for beauty, wellness, and lifestyle brands.

by PromptsRush· MIT· v1.0.0· shadcn, tailwind, css-vars

Download design.md

Lumen

ProductPricingGet started

✦ New release

Build something people love.

A live preview of this theme — every color, font, radius, and shadow you see is rendered straight from its tokens.

Start free Live demo

12.4k

Active users+18%

$48.2k

Revenue+7.1%

4.9

Rating2.1k

Quick actions

Prov2.0

Search anything…

CreateInvite

Color system

Click any swatch to copy. Contrast graded against WCAG.

Contrast (WCAG)AAA ≥ 7 · AA ≥ 4.5

AaBody text

17.28:1AAA

AaMuted text

6.24:1AA

AaPrimary button

6.04:1AA

AaCard text

17.73:1AAA

AaAccent

6.71:1AA

Typography

5xl3remDesign with intent

4xl2.25remDesign with intent

3xl1.875remDesign with intent

2xl1.5remDesign with intent

xl1.25remThe quick brown fox jumps over the lazy dog

lg1.125remThe quick brown fox jumps over the lazy dog

base1remThe quick brown fox jumps over the lazy dog

sm0.875remThe quick brown fox jumps over the lazy dog

xs0.75remThe quick brown fox jumps over the lazy dog

Body sample. DM Sans carries running text — readable paragraphs, comfortable measure, and a rhythm that holds up across long pages of content and UI.

Radius, shadow & fonts

Radius · base 1rem

base

Shadow

Fonts

Sans

DM Sans

Aa Bb Cc 0123

Mono

JetBrains Mono

Aa Bb Cc 0123

Components

Real UI rendered with this theme's tokens.

Buttons

PrimarySecondaryOutlineAccentGhostDelete

Badges

PrimarySecondaryAccent

Input

you@example.com

Card title

A surface for grouping content, with the theme's border, radius, and shadow.

Accent callout

Use the accent surface for highlights, tips, and gentle emphasis.

Principles, guidelines & component specs

Do's & don'ts, spacing, motion, iconography, accessibility, and exact component specs — all in the design.md too.

Do

•Set the mood with pastels; emphasise with magenta.
•Keep shadows soft and radii generous.

Don't

•Don't oversaturate — restraint keeps it elegant.
•Don't use harsh, tight corners.

Spacing · base 0.25rem

Motion

fast · 160msbase · 260msslow · 440ms

ease · cubic-bezier(0.4,0,0.2,1)

•Soft, slow fades match the gentle mood.

Easing & duration (hover)

Hover to feel this theme's base transition.

Iconography

Lucide · 1.5px stroke · 1rem. Outline icons with a consistent stroke width; size icons to match adjacent text and align them optically.

Accessibility

Contrast

WCAG AA — 4.5:1 text, 3:1 UI

Focus

2px solid var(--ring), 2px offset

Targets

44x44px

Never use color as the only signal — pair it with text, an icon, or a shape.
Every interactive element must be keyboard reachable and show a visible focus ring.
Honor prefers-reduced-motion: reduce by disabling non-essential animation.
Keep a logical heading order and give every form control a label.

Component specs

Button

Background	var(--primary)
Text	var(--primary-foreground)
Radius	1rem
Padding	0 1.25rem
Height	2.75rem
Weight	600

Badge

Background	var(--accent) / var(--primary)
Text	var(--accent-foreground) / var(--primary-foreground)
Radius	9999px
Padding	0.15rem 0.55rem
Font size	0.75rem
Weight	600

Use for status, counts, and short labels. Keep to one or two words.

Alert

Radius	1.5rem
Padding	1rem 1.25rem
Border	1px solid var(--border)

Always pair the color with an icon and a text label — never rely on color alone.

Form field

Background	var(--background)
Border	1px solid var(--input)
Radius	1rem
Height	2.75rem
Padding	0.5rem 0.75rem

Label sits above the field; helper or error text sits below.

Card

Background	var(--card)
Text	var(--card-foreground)
Border	1px solid var(--border)
Radius	1.25rem
Padding	1.5rem
Shadow	0 10px 28px -10px rgba(190,24,93,0.18)

The design brief

Bloom is a soft pink design system for beauty, wellness, and lifestyle brands. A magenta primary over pastel surfaces feels gentle, modern, and feminine without being saccharine.

Principles

Pastel surfaces set the mood; magenta marks the moments that matter.
Soft radii and light shadows keep everything gentle.
Calm, readable type so wellness content breathes.

When to use

Use Bloom for beauty/skincare, wellness, and lifestyle commerce. Avoid it for hard-edged tech or finance products.

Signature details

Magenta #be185d primary; blush #fce7f3 accent.
DM Sans, 1rem radius, soft elevation.

Use this with your AI

Download or copy the design.md and paste it into Claude, Cursor, or v0 — it tells the agent exactly which colors, fonts, radii, and shadows to use, so your site comes out looking like this.

Download

Export tokens

Drop straight into your codebase.

:root {
  --radius: 1rem;
  --background: #fffbfd;
  --foreground: #2a0f1d;
  --card: #ffffff;
  --card-foreground: #2a0f1d;
  --popover: #ffffff;
  --popover-foreground: #2a0f1d;
  --primary: #be185d;
  --primary-foreground: #ffffff;
  --secondary: #fdf2f8;
  --secondary-foreground: #2a0f1d;
  --muted: #faeef4;
  --muted-foreground: #8a4b66;
  --accent: #fce7f3;
  --accent-foreground: #9d174d;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #f2dde7;
  --input: #f2dde7;
  --ring: #be185d;
  --shadow-sm: 0 1px 2px rgba(157,23,77,0.06);
  --shadow-md: 0 10px 28px -10px rgba(190,24,93,0.18);
  --shadow-lg: 0 28px 56px -16px rgba(190,24,93,0.24);
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --ease-standard: cubic-bezier(0.4,0,0.2,1);
  --ease-emphasized: cubic-bezier(0.16,1,0.3,1);
  --duration-base: 260ms;
}

.dark {
  --background: #1a0812;
  --foreground: #f7e4ee;
  --card: #24101b;
  --card-foreground: #f7e4ee;
  --popover: #24101b;
  --popover-foreground: #f7e4ee;
  --primary: #f9a8d4;
  --primary-foreground: #500724;
  --secondary: #2e1422;
  --secondary-foreground: #f7e4ee;
  --muted: #2e1422;
  --muted-foreground: #c79bb1;
  --accent: #831843;
  --accent-foreground: #fce7f3;
  --destructive: #f87171;
  --destructive-foreground: #450a0a;
  --border: #3a1c2d;
  --input: #3a1c2d;
  --ring: #f9a8d4;
}