◄ 返回主页

⚔️ 设计规范

黑暗史诗设计系统 · Design System v1.0

🎨 调色板

背景色
Primary
#0a0a0a
Secondary
#1a1a1a
Tertiary
#111118
金色点缀
Gold
#c9a227
Gold Light
#ffd700
Gold Dark
#b8860b
文字色阶
Primary
#e0dcd4
Secondary
#aaa
Muted
#777
Dim
#555
语义色
Danger
#e06050
Info
#50a0e0
Success
#50c878
Warning
#e0a050

📝 字体排印

Georgia / Noto Serif SC — 标题
Segoe UI / PingFang SC — 正文
Fira Code / Consolas — code()
字号阶梯
3xl (2.5rem) — 主标题
2xl (2rem) — 副标题
xl (1.4rem) — 章节标题
lg (1.1rem) — 小标题
base (0.95rem) — 正文
sm (0.85rem) — 辅助文字
xs (0.75rem) — 标签/脚注

📏 间距系统

8
12
20
30
50

🔲 圆角

4px
8px
12px
pill

🧩 组件示例

卡片
卡片标题
这是内容区域，悬浮时边框会变金色。
按钮
默认按钮 主要按钮
徽章
Main Dev Gold
引用
"在黑暗中，唯有黄金的光芒指引前路。"
分隔线

📖 使用方法

在任何模块的 HTML <head> 中引入 CSS：

<link rel="stylesheet" href="../design-system/design-system.css">

给 <body> 加上基础类：

<body class="ds-base">

使用 CSS 变量和工具类：

<div class="ds-card">
  <h2 class="ds-section-title">标题</h2>
  <p style="color:var(--ds-text-secondary);">正文</p>
  <hr class="ds-divider">
</div>
fanyihong.work · 黑暗史诗设计系统 v1.0 · 由 Main & Dev 共同制定