Hub
Soft Pastel UI

Friendly & Warm
Design System

Ultra-soft pastel tones, rounded pill shapes, and warm cream backgrounds create interfaces that feel approachable, cozy, and delightful.

Notifications
A
Aurora Kim
Loved the new pastel palette!
2m 3
S
Sky Park
The rounded buttons feel so cozy
15m
L
Luna Lee
Shared the design tokens with team
1h 1
Warm Mode
Rounded Corners
Neon Colors
Warmth 78%
Softness 62%
Friendliness 45%
Color Palette
Peach #ff9a76
Sky Blue #a8d8ea
Lavender #c3b1e1
Mint #8ecf92
Buttons
Primary Secondary Outline Ghost
Tags
Design Pastel Soft UI Friendly
Inputs
Search components...
Toasts
✓
Saved successfully
i
New update available
!
Check your settings

AI Request Prompt

Design a landing page in Soft Pastel style — friendly rounded shapes on warm cream.

COLOR TOKENS:
--bg: #fef7f0
--card: rgba(255, 255, 255, 0.7)
--border: rgba(61, 50, 41, 0.08)
--text: #3d3229
--text-muted: #9b8e82
--accent-1: #ff9a76
--accent-2: #a8d8ea
--accent-3: #c3b1e1
No other colors. Mint #8ecf92 allowed only for pill dot indicators.

TYPOGRAPHY:
Heading: "Nunito" sans-serif, 800 weight, tracking -0.02em
Body: "Noto Sans" / "Nunito" sans-serif, 400 / 500 weight
Badge: "Nunito" 700 weight, 0.72rem, uppercase, tracking 0.05em
Scale: 12 / 14 / 15 / 17 / 19 / 34 / 67px (clamp(2rem, 5.5vw, 4.2rem))
Body line-height: 1.8
Heading line-height: 1.1

UI:
- Hero card: 1px solid var(--border), border-radius 36px, background var(--card), backdrop-filter blur(16px), box-shadow 0 16px 48px rgba(0,0,0,0.04)
- Badge: inline-block, background var(--accent-1), color white, padding 4px 12px, border-radius 999px, uppercase
- Pill tags: border-radius 999px, padding 8px 16px, 8px colored dot before text
  Pill 1: rgba(255,154,118,0.15) bg, #d97548 text, accent-1 dot
  Pill 2: rgba(168,216,234,0.2) bg, #5a9ab5 text, accent-2 dot
  Pill 3: rgba(195,177,225,0.18) bg, #7b6b9e text, accent-3 dot
  Pill 4: rgba(168,230,170,0.18) bg, #5a9960 text, #8ecf92 dot
- Prompt section: background var(--card), border-radius 28px, backdrop-filter blur(10px)
- Buttons: border none, background var(--accent-1), color white, border-radius 999px, padding 11px 22px, font-weight 600, box-shadow 0 4px 12px rgba(255,154,118,0.3), hover translateY(-1px) + box-shadow 0 6px 20px rgba(255,154,118,0.4)

LAYOUT:
- Container: min(1040px, 92vw) centered, padding 28px 0 80px
- Hero padding: clamp(28px, 5vw, 52px)
- Pill layout: flex-wrap, gap 8px
- Lead paragraph max-width: 640px
- Ambient background: fixed div with 3 radial-gradients:
  radial-gradient(ellipse at 15% 15%, rgba(255,154,118,0.15), transparent 50%)
  radial-gradient(ellipse at 85% 25%, rgba(168,216,234,0.15), transparent 50%)
  radial-gradient(ellipse at 50% 85%, rgba(195,177,225,0.12), transparent 45%)

MOTION:
- Pill entrance: scale(0.9) to scale(1), opacity 0 to 1, 0.5s ease, stagger 0.08s per pill
- Button hover: translateY(-1px), 0.25s ease, shadow expansion
- No rotation or 3D transforms

RESPONSIVE:
- Below 768px: single column layout, pill font-size 0.8rem, hero padding 28px, title clamps to 2rem, badge font-size 0.65rem
- Above 768px: pills in a row, full backdrop-filter, container 92vw

FORBIDDEN:
- No dark backgrounds or text darker than #3d3229
- No sharp corners — minimum border-radius 28px on cards, 999px on pills/buttons
- No saturated or neon colors — all tones must be pastel
- No heavy box-shadow darker than rgba(0,0,0,0.04) on cards
- No monospace or serif fonts

OUTPUT:
1. Single HTML file with inline CSS
2. Warm cream base with 3-layer pastel ambient gradient background
3. Pill-shaped tag system with colored dots and tinted backgrounds
4. Frosted glass hero card with badge
5. Color token custom properties in :root
6. Responsive layout using CSS clamp() and flex-wrap