Neutral Monochrome Color Palette

Core Palette

#030213

Primary

按钮、标题、重点元素

HEX#030213

RGB3, 2, 19

CSS VAR--primary

#FFFFFF

Background

页面背景、卡片底色

HEX#FFFFFF

RGB255, 255, 255

CSS VAR--background

#D4183D

Destructive

删除、错误、警告操作

HEX#D4183D

RGB212, 24, 61

CSS VAR--destructive

Neutral Gray Scale

#030213

Primary

#717182

Muted FG

#CBCED4

Switch BG

#E9EBEF

Accent

#ECECF0

Muted

#F3F3F5

Input BG

#FFFFFF

Background

Functional Colors (组件实际用色)

#3B82F6

Blue (信息 / 链接)

链接、信息提示、选中状态、KPI 高亮

TAILWINDblue-500

BGblue-50 → blue-100

TEXTblue-600 → blue-700

#22C55E

Green (成功 / 正向)

成功状态、已完成、正向指标、在线

TAILWINDgreen-500

BGgreen-50 → green-100

TEXTgreen-600 → green-700

#EF4444

Red (错误 / 危险)

错误、逾期、负向指标、删除

TAILWINDred-500

BGred-50 → red-100

TEXTred-600 → red-700

#F59E0B

Amber (警告 / 待处理)

警告、待处理、即将到期

TAILWINDamber-500

BGamber-50 → amber-100

TEXTamber-600 → amber-700

Blue 色阶

blue-50

Badge BG

blue-100

Hover BG

blue-200

Border

blue-500

Primary

blue-600

Text

blue-700

Strong Text

Green 色阶

green-50

Badge BG

green-100

Hover BG

green-500

Icon / Dot

green-600

Text

green-700

Strong Text

Red 色阶

red-50

Badge BG

red-100

Hover BG

red-500

Icon / Dot

red-600

Text

red-700

Strong Text

Amber / Orange 色阶

amber-50

Badge BG

amber-100

Hover BG

amber-500

Icon

amber-600

Text

amber-700

Strong Text

orange-600

Orange Text

Purple / Emerald (次要)

purple-50

Badge BG

purple-100

Hover BG

purple-600

Text

emerald-50

Badge BG

emerald-400

Accent

emerald-600

Text

Hardcoded HEX (组件内直接使用)

#111

Dark Text

#374151

gray-700

#667085

Subtle Text

#98A2B3

Placeholder

#EAECEF

Divider

#F8F9FA

Light BG

#FCD34D

Yellow accent

#34D399

Emerald accent

Light / Dark Mode

Light Mode

Primary — 按钮、标题

Muted — 次要文字

Muted BG — 禁用背景

Accent — 悬停高亮

Input — 表单输入框

Destructive — 删除/错误

Border — 边框分隔

Dark Mode

Primary — 按钮、标题

Muted — 次要文字

Muted BG — 卡片背景

Accent — 悬停高亮

Input — 表单输入框

Destructive — 删除/错误

Border — 边框分隔

Usage Guide

Primary Button

Submit

bg-primary text-primary-foreground — 主操作按钮

Secondary Button

Cancel

bg-secondary text-secondary-foreground — 次要操作

Destructive Button

Delete

bg-destructive text-destructive-foreground — 危险操作

Input Field

placeholder...

bg-input-background border-border — 表单输入框

Muted Text

Secondary info

text-muted-foreground — 辅助说明、时间戳

Card

Card content

bg-card text-card-foreground — 内容卡片

CSS Variable Reference (Light)

Variable	Value	说明
--background	#FFFFFF	页面背景
--foreground	oklch(0.145 0 0)	主文字
--primary	#030213	主色（按钮、链接）
--primary-foreground	oklch(1 0 0)	主色上的文字
--secondary	oklch(0.95 0.006 264.5)	次要背景
--muted	#ECECF0	静音/禁用背景
--muted-foreground	#717182	次要文字
--accent	#E9EBEF	悬停/高亮背景
--destructive	#D4183D	删除/错误
--border	rgba(0,0,0,0.1)	边框
--input-background	#F3F3F5	输入框背景
--switch-background	#CBCED4	开关未选中
--ring	oklch(0.708 0 0)	聚焦环
--radius	0.625rem (10px) — 基准圆角

Tech Stack

Framework

Tailwind CSS 4 + shadcn/ui

基于 CSS custom properties 的设计令牌系统，所有颜色通过 --color-* 变量引用

Color Space

oklch

使用 oklch() 感知均匀色彩空间，确保亮度和对比度在不同色相间保持一致

Dark Mode

.dark 类切换

通过 @custom-variant dark (&:is(.dark *)) 实现，所有变量在 .dark 下重新赋值

Font

16px / Medium 500

基准字号 16px，标题和按钮 font-weight: 500，正文 400