DESIGN SYSTEM

Nickys.cn

老张工作管理系统 · 设计规范预览

Dark theme · Glass morphism · Green accent · Data-first

🎨 调色板 Color Palette

Background & Surface

#0F172A
bg-dark

rgba(30,41,59,0.5)
bg-surface (glass)

rgba(30,41,59,0.7)
bg-elevated

rgba(255,255,255,0.015)
row-even

Text

#F8FAFC
text-primary

#d1d5db
text-secondary

#94a3b8
text-muted

#64748b
text-dim

Accent

#22C55E
accent-green

#4ADE80
accent-green-light

#3b82f6
accent-blue

#60A5FA
accent-blue-light

#f59e0b
accent-amber

#ef4444
accent-red

#22d3ee
accent-cyan

gradient
22C55E → 4ADE80

Border

rgba(255,255,255,0.06)
border-subtle

rgba(255,255,255,0.1)
border-glass

rgba(255,255,255,0.08)
border-table

🔤 排版 Typography

Bodoni Moda · 36px Bold

Hero Title Example

Bodoni Moda · 28px Bold

Page Title Example

Jost · 22px SemiBold · #4ADE80 · left-border green

Section Heading

Jost · 16px SemiBold · #4ADE80

Subheading Text

Jost · 15px · #cbd5e1

Body text example. 老张工作管理系统是一套面向二手手机经销商的数据管理工具，包含库存、已售清单、发票回款、欠款管理等功能模块。

Jost · 13px · #d1d5db (table data)

Table data example: iPhone 14 Pro Max 256GB 深空黑 ¥8,500

JetBrains Mono · 13px · #22d3ee

const price = 8500; // code inline

Gradient text

gradient-text: 22C55E → 4ADE80

Chinese Font Rendering

中文排版示例：库存管理、发票回款、欠款清单

小号中文文本：¥8,500 · 已售 · 未结 · 2026-06-21

🧩 组件 Components

Glass Navigation

🏪 Nickys.cn

Tags / Badges

已售在库待定超期已通知已清账

Info Cards (Left Border)

ℹ️ 默认信息

绿边框 · 常规提示或摘要信息

⚠️ 警告信息

黄边框 · 需要关注但非紧急

💡 提示信息

蓝边框 · 参考或操作指引

🚨 危险信息

红边框 · 错误或需立即处理

Notices

ℹ️ 信息通知：共 128 条记录，已筛选未清账项

⚠️ 警告通知：3项欠款已超30天未还

Price Highlights

¥8,500 利润 ¥1,200 ¥9,999

Section Heading (with green left border)

📦 当前库存 Current Inventory

📊 表格样式 Table

序号	型号	颜色	价格	状态
#1	iPhone 14 Pro Max	深空黑	¥8,500	在库
#2	iPhone 14 Pro	金色	¥6,800	在库
#3	iPhone 13	午夜色	¥4,200	待定
#4	AirPods Pro 2	白色	¥1,200	在库
#5	iPad Air M2	星光色	¥3,600	已预订

📐 布局 Layout

📏

Max-width: 72rem

max-w-6xl · 居中 mx-auto

📱

Mobile: ≤768px

表格→卡片
data-label 伪元素

🔄

Reveal Animation

opacity 0→1
translateY 30px→0

🏔️ 层级 Depth & Elevation

Glass Light

backdrop-blur(8px)
opacity 0.3

Glass Default

backdrop-blur(12px)
opacity 0.5

Glass Elevated

opacity 0.7
用于 info-card

Hover lift: translateY(-4px) — 用于 link-card

✅ Do's & ❌ Don'ts

✅ 正确做法

✓ 使用玻璃效果卡片承载内容区域
✓ 表格用交替行色+绿色悬停高亮
✓ 状态用语义化标签（绿=正常, 黄=警告, 红=危险）
✓ Emoji+文字组合用于导航和标题
✓ 手机端 ≤768px 表格转卡片布局
✓ 左边框彩色信息卡片快速区分类型

❌ 避免做法

✗ 暗色主题不用于打印排版（改用白卡浅灰底）
✗ 不过度动画——仅 reveal 和 hover lift
✗ 不用仅颜色区分状态（配合文字标签）
✗ 内容宽度不超过 72rem
✗ 不把视频文件放 work.nickys.cn
✗ 链接不加 markdown 符号包裹

Nickys.cn Design System · Generated from awesome-design-md format

参考: github.com/VoltAgent/awesome-design-md