stringzhao-life
色彩体系

以「苔绿 Sage」为品牌主色，暖黑与暖白构成大面积基底，三级灰阶承接信息层级。遵循克制原则：品牌色仅作小面积点睛，不大面积铺陈。

温润克制有机清醒

Core Color Palette

核心色板

墨AAA 15.5:1

Ink

正文、标题

纸

Paper

页面背景

雾

Mist

卡片、分割

烟AA18 3.0:1

Smoke

描述、辅助文字

炭AA 5.2:1

Charcoal

placeholder

苔品牌色AA18 4.0:1

Sage

CTA、品牌强调

Supporting Color Palette

辅助色板

苔浅Sage Light

hover、选中态

苔淡Sage Mist

tag 背景、填充

琥Amber

warning、highlight

朱Vermillion

error、delete

天Sky

link、info badge

Color Relationships

色彩关系

交互式演示 — hover 和点击感受色彩在真实 UI 中的组合效果

hover 体验 · 文字层级

标题

墨 Ink

副标题

炭 Charcoal

描述文字示例，用于辅助说明

烟 Smoke

hover & click · 按钮状态

default

苔 Sage

hover 体验 · 语义状态

警告

错误

信息

hover 体验 · 品牌色系

Interaction Principles

交互原则

即时反馈

Feedback

每个动作都应有即时、明确的视觉回应

点击色值 → "Copied"；hover → 边框变色 + 阴影

渐进揭示

Progressive Disclosure

默认简洁，交互时按需展现更多信息

色卡 hover 显示对比度；格式切换器按需切换值格式

直接操控

Direct Manipulation

所见即所得，操作立即生效，无中间步骤

点击色值即复制；切换器即时更新所有色卡

一致性

Consistency

相同的交互模式在所有场景中保持统一

所有可复制元素统一使用 hover 虚线 + 点击反馈

可供性

Affordance

交互元素通过视觉暗示自身的操作方式

虚线下划线暗示可复制；cursor:copy 指示操作类型

hover 反馈 100ms点击反馈 50ms复制确认 2s入场动画 400ms状态切换 200ms

CSS Design Tokens

Token 体系

点击 token 复制 var(--token) 格式

基础层

品牌层

组件层

stringzhao-life色彩体系