Petal Cream 花瓣奶霜 — Design System Preview

Core Palette

Four foundational colors that define the Petal Cream identity

#F5F0EB

Cream Canvas

奶油畫布

Primary background — warm paper-like base that lets content breathe

#E8C4C4

Blush Petal

花瓣粉

Primary accent — feminine warmth for CTAs, highlights, and decorative elements

#C4B5A7

Warm Taupe

暖灰褐

Secondary — dividers, borders, and quiet supporting elements

#3A3535

Charcoal Ink

墨炭灰

Text color — warm near-black, readable without harshness

Harmony Strip

Full palette at a glance — hover to expand

Ivory

Cream

Canvas

Taupe Lt

Petal Lt

Blush

Petal Dp

Rose Gold

Taupe

Taupe Dp

Ink Soft

Charcoal

Extended Palette

Derived tints, shades, and supporting tones

Petal Light

Petal Deep

Rose Gold

Taupe Light

Taupe Deep

Canvas Warm

Ivory White

Ink Soft

Semantic Colors

Success — Sage Bloom

Warning — Honey Amber

Error — Soft Rose

Info — Dusty Blue

Color Combinations

Proven pairings for common UI patterns

Light & Airy

Default card on cream — clean content focus

Ivory + Charcoal + Taupe border

Blush Whisper

Highlighted or featured content

Petal Light + Blush border

Ink & Petal

Dark sections, footers, contrast blocks

Charcoal + Cream text + Blush accent

Warm Canvas

Subtle elevation on cream background

Canvas Warm + Taupe accents

Hero Section

Simulated hero block with decorative elements

♡ ♡ ♡

Create Art that Brings You Joy

Pretty digital art, made easy

Discover hand-crafted brushes, beautiful illustrations, and step-by-step courses designed to help you create with confidence and delight.

Typography

Three-font system: Caveat (display) → Quicksand (headings) → Nunito (body)

Display Petal Cream Caveat 700 / 48px

Heading 1 Beautiful Things Quicksand 700 / 36px

Heading 2 Most Popular Courses Quicksand 700 / 28px

Heading 3 Hand-Drawn Graphics Quicksand 600 / 22px

Body Creating beautiful art should be accessible to everyone. Start your creative journey today with tools that make the process joyful. Nunito 400 / 16px

Small Last updated 3 days ago · 12 brushes included Nunito 400 / 14px

Badge NEW RELEASE PROCREATE FEATURED Quicksand 600 / 11px

Buttons

Pill-shaped buttons with gentle hover lifts

Default Size

Small Size

Input Fields

Warm-bordered inputs with blush focus rings

Your Name

Email Address

Product Cards

E-commerce card layout with whimsical illustration placeholders

🌸

NEW

Fairy Garden Brush Set

26 hand-crafted Procreate brushes for whimsical botanical illustrations

$39.00

🦋

POPULAR

Enchanted Characters Course

Learn to draw adorable fairytale characters from scratch in Procreate

From $79.00

🐰

BUNDLE

Woodland Creatures Pack

42 hand-drawn animal clipart elements in PNG and SVG formats

From $29.00

Dark Section

Contrast block for footers and feature highlights

♡ ♡ ♡

Grab Your Goodie Bag!

Free brushes, exclusive tutorials, and creative inspiration — delivered with love.

♥ Facebook · Pinterest · YouTube · Instagram

Color Reference Table

Complete palette with roles and tiers

Color	中文名	HEX	Tier	Role
Cream Canvas	奶油畫布	#F5F0EB	Core	Primary background
Blush Petal	花瓣粉	#E8C4C4	Core	Primary accent
Warm Taupe	暖灰褐	#C4B5A7	Core	Secondary / borders
Charcoal Ink	墨炭灰	#3A3535	Core	Text / dark bg
Petal Light	淡花瓣	#F4E2E2	Extended	Badge bg / card tint
Petal Deep	深花瓣	#D4A0A0	Extended	Hover / link color
Rose Gold	玫瑰金	#D4A98C	Extended	Special accent
Taupe Light	淺灰褐	#DDD4CB	Extended	Light borders
Taupe Deep	深灰褐	#A89888	Extended	Secondary text
Canvas Warm	暖畫布	#EDE5DC	Extended	Card surface alt
Ivory White	象牙白	#FDFBF9	Extended	Lightest surface
Ink Soft	柔墨灰	#6B6262	Extended	Captions / metadata
Sage Bloom	鼠尾草	#8FB5A3	Semantic	Success
Honey Amber	蜂蜜琥珀	#D4B896	Semantic	Warning
Soft Rose	柔玫瑰	#D49494	Semantic	Error
Dusty Blue	灰藍	#94AEC4	Semantic	Info