Morandi Palette

专业色板系统 · 低饱和度的沉静美学

Background Scale

5 LEVELS

从最浅到最深的背景层级，构建视觉深度与层次感

bg-100 页面底色 · 最浅
bg-200 卡片底色
bg-300 区块底色 · 主背景
bg-400 特殊区块
bg-500 强调区块 · 最深

Text Scale

5 + 1

确保 WCAG 对比度标准，从标题到辅助文字的完整层级

text-100 · 主标题 (对比度 12:1) 沉静之美，源于克制
text-200 · 次标题 (对比度 7:1) 莫兰迪色系的温柔力量
text-300 · 正文 (对比度 4.5:1) 低饱和度配色带来舒适阅读体验
text-400 · 辅助文字 (对比度 3:1) 次级信息与说明文字
text-500 · 最弱文字 (对比度 2:1) 标签、时间戳等微文字
text-inverse · 反色文字 深色背景上的文字

Color Families

7 FAMILIES

每个色相的完整明度层级，从 100（浅）到 500（深）

Dusty Pink · 灰粉家族

温暖、安全、怀旧感 · 适合亲和力强的内容

100
200
300
400
500

Haze Blue · 雾霾蓝家族

冷静、信任、理性 · 适合专业内容与导航元素

100
200
300
400
500

Sage Green · 灰绿家族

自然、平和、治愈 · 适合成功状态与自然主题

100
200
300
400
500

Dusty Purple · 灰紫家族

优雅、神秘、艺术感 · 适合创意内容与高端主题

100
200
300
400
500

Dusty Orange · 灰橙家族

温暖、活力、友好 · 适合强调与行动号召

100
200
300
400
500

Dusty Yellow · 灰黄家族

柔和、明亮、温和 · 适合警示与提示信息

100
200
300
400
500

Dusty Rose · 灰玫红家族

浪漫、优雅、女性化 · 适合情感内容与艺术展示

100
200
300
400
500

Status Colors

4 STATES

带背景色的状态系统，确保视觉反馈清晰且不失美感

✓ Success 成功 · 灰绿
⚠ Warning 警告 · 灰黄
✗ Error 错误 · 灰红
ℹ Info 信息 · 雾霾蓝

Composition Demo

LIVE

按钮系统

卡片系统

🫐

设计理念

Design Philosophy

莫兰迪色系源于乔治·莫兰迪的静物画，以低饱和度、柔和灰调著称，传递沉静、克制、高级的美学感受。

美学 2026
🎨

色彩心理学

Color Psychology

低饱和度色彩降低视觉刺激，适合长时间阅读，营造「慢体验」，引导用户放慢节奏、专注内容。

心理学 UX
✨

交互体验

Interaction

自然缓动曲线模拟物理世界，悬停上浮传递掌控感，即时反馈确保流畅体验。

交互 微动效

Gradient Collection

8 GRADIENTS
Warm Beige Fade
Haze Blue Depth
Pink to Rose
Sage Green Fade
Purple Mystery
Warm Orange
Pink × Blue
Purple × Green