Bloom Design System

Soft. Elegant.
Beautiful.

A wellness-inspired design system with pastel greens, generous whitespace, and rounded everything. Copy tokens and components as production-ready markdown.

Browse System
25+
COLOR TOKENS
12
COMPONENTS
5
LAYOUT PATTERNS
5
ANIMATIONS
01 — Colors

Color Palette

Pastel greens on white surfaces. 80% white, 15% light green, 5% accent green.

Primary & Accent

Primary
#CFECCF
Accent
#A8D8A8
Accent Hover
#8EC88E
Tint
#E4F2E4
Soft
#F0F8F0

Backgrounds

White
#FFFFFF
Page
#F8FCF8
Section Alt
#F5FBF5

Text

Primary
#2F3A33
Secondary
#4A5A4E
Muted
#6F7C73
Dim
#9BA69E

Semantic

Border
#E4EFE4
Error
#E87171
Warning
#F0B429
Info
#6B9FFF
02 — Typography

Type Scale

Manrope for headings, Inter for everything else. Clean, readable, and warm.

HERO
Manrope 800 / clamp(42px, 7vw, 72px)
Beautiful things grow here
SECTION TITLE
Manrope 700 / clamp(28px, 5vw, 46px)
Sections that breathe
CARD TITLE
Manrope 600 / 20px
Card headings at rest
BODY
Inter 400 / 18px / 1.7
Body text should feel effortless to read. Generous line-height and subtle color keep things calm and inviting.
LABEL
Inter 600 / 13px / uppercase / 1.5px spacing
SECTION LABEL
BUTTON
Inter 600 / 16px
Get Started Today
03 — Spacing & Radius

Space & Shape

Generous whitespace and soft, rounded corners define the Bloom feel.

Spacing Scale

--space-1 (4px)
--space-2 (8px)
--space-3 (12px)
--space-4 (16px)
--space-6 (24px)
--space-8 (32px)
--space-12 (48px)
--space-16 (64px)
--space-20 (80px)
--space-25 (100px)

Border Radius

Small
8px
Medium
14px — Inputs
Large
16px — Buttons
XL
20px — Cards
Pill
999px — Badges
04 — Motion

Animation System

Gentle, organic animations that feel alive without being distracting.

Fade Up

Primary entrance animation

Fade In

Subtle opacity entrance

Scale In

Soft scale entrance for modals

Float

Continuous blob decoration

Continuous

Pulse

Gentle status indicator

Continuous
05 — Components

Live Components

Interactive component demos. Everything you need to build a Bloom UI.

Buttons
Inputs
Badges & Chips
Active Pending Error Info
Wellness × Design × Minimal ×
Tabs
Tab content renders here. Click the tabs above to switch the active state.
Checkboxes & Toggles
Enable notifications
Dark mode (N/A for Bloom)
Auto-save enabled
Compact mode
Cards

Basic Card

White surface, soft shadow, 20px radius. Lifts on hover.

Highlighted Card

Green-tinted background with accent left border.

A note card for callouts and tips. Dashed border with muted background.

Hero Section

Welcome to Bloom

A fresh start for beautiful interfaces

Get Started
Bloomdo — Example Todo App
Bloomdo
3 tasks
    06 — Layouts

    Layout Patterns

    Airy grid definitions with generous spacing. Copy the pattern, fill in your content.

    Card Grid

    repeat(auto-fit, minmax(280px, 1fr)) | gap: 24px
    1fr
    1fr
    1fr

    Two-Column Split

    1fr 1fr | gap: 48px | collapse at 700px
    Text Content
    Visual

    Centered Hero

    max-width: 640px | text-align: center | generous vertical padding
    Centered content area — 640px max

    Container

    max-width: 1000px | padding: 0 24px | margin: 0 auto
    1000px max content area

    Section Alternation

    #F8FCF8 / #F5FBF5 / #FFFFFF — alternating with 1px border separators
    Page
    Alt
    Card
    Section