ui-design-system.html
7.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
<title>视觉设计语言 · LemonBoss PRD</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="assets/shell.css" />
</head>
<body data-page="ui-design-system.html">
<div class="shell">
<aside id="sidebar"></aside>
<main class="page">
<header class="page-head">
<div class="crumb"><span class="pill">07 · UI</span><span class="sep">/</span><span>视觉设计语言</span></div>
<h1>视觉设计语言</h1>
<p class="deck">学院派文档 + Console 的混合气质：暖白纸面（PRD 阅读感），JetBrains Mono 装饰运行时数据（开发者熟悉），Fraunces 处理标题（克制的庄重）。</p>
</header>
<article class="body">
<section>
<h2>色板</h2>
<h3>Loop 三主色</h3>
<div class="grid-3">
<div class="card">
<h4>L1 · Unit</h4>
<svg viewBox="0 0 100 60" width="100%"><rect width="100" height="60" fill="#0E8C5A"/></svg>
<p class="sig"><code>#0E8C5A</code> · emerald<br/>tint: <code>#E2F2EA</code></p>
</div>
<div class="card">
<h4>L2 · Integration</h4>
<svg viewBox="0 0 100 60" width="100%"><rect width="100" height="60" fill="#C77C2C"/></svg>
<p class="sig"><code>#C77C2C</code> · amber<br/>tint: <code>#F7E8D2</code></p>
</div>
<div class="card">
<h4>L3 · Human</h4>
<svg viewBox="0 0 100 60" width="100%"><rect width="100" height="60" fill="#6E48C3"/></svg>
<p class="sig"><code>#6E48C3</code> · violet<br/>tint: <code>#ECE4FB</code></p>
</div>
</div>
<h3>语义辅助色</h3>
<div class="grid-4">
<div class="card">
<h4>Alert</h4>
<svg viewBox="0 0 100 60" width="100%"><rect width="100" height="60" fill="#C7341A"/></svg>
<p class="sig"><code>#C7341A</code> · 错误 / failure / blocked</p>
</div>
<div class="card">
<h4>Warn</h4>
<svg viewBox="0 0 100 60" width="100%"><rect width="100" height="60" fill="#8a6b00"/></svg>
<p class="sig"><code>#8a6b00</code> · testing / retry</p>
</div>
<div class="card">
<h4>Ink</h4>
<svg viewBox="0 0 100 60" width="100%"><rect width="100" height="60" fill="#0E0E10"/></svg>
<p class="sig"><code>#0E0E10</code> · 文字 / 边框</p>
</div>
<div class="card">
<h4>Paper</h4>
<svg viewBox="0 0 100 60" width="100%"><rect width="100" height="60" fill="#FAF7F1" stroke="#dcd5c4"/></svg>
<p class="sig"><code>#FAF7F1</code> · 背景</p>
</div>
</div>
</section>
<section>
<h2>字体阶梯</h2>
<table>
<thead><tr><th>角色</th><th>字体</th><th>字号</th><th>用途</th></tr></thead>
<tbody>
<tr><td>Display</td><td>Fraunces 300</td><td>34–56 px</td><td>页面 Hero / 项目名</td></tr>
<tr><td>H2</td><td>Fraunces 500</td><td>24–34 px</td><td>章节标题</td></tr>
<tr><td>H3</td><td>Fraunces 600</td><td>20 px</td><td>子标题</td></tr>
<tr><td>H4 / Tag</td><td>Inter 700 · uppercase</td><td>11–13 px</td><td>类别标签</td></tr>
<tr><td>Body</td><td>Inter 400</td><td>16 px</td><td>正文</td></tr>
<tr><td>Mono</td><td>JetBrains Mono 500</td><td>11–13 px</td><td>状态码 / API / 日志 / kbd</td></tr>
</tbody>
</table>
<h3>字体使用规则</h3>
<ul>
<li>所有<b>装饰性 / 表意性</b>的文字（标题、品牌名、Hero）→ Fraunces。</li>
<li>所有<b>运行时数据 / 技术标识</b>（状态、API、命令、Unit id）→ JetBrains Mono。两者并用能立刻区分「这是设计」vs「这是状态」。</li>
<li>其他 → Inter。</li>
</ul>
</section>
<section>
<h2>排版规则</h2>
<div class="grid-3">
<div class="card">
<h4>纸面节奏</h4>
<p>章节顶部用 <code>h4</code> 全大写小标签 (类似 Section 01) 作为定位锚。<br/>正文段落首字 dropcap 仅在长篇章节用，强调起势。</p>
</div>
<div class="card">
<h4>表格</h4>
<p>表头 paper-soft 背景 + Mono uppercase；行 hover 高亮；行内 <code>code</code> 用米色背景区分纯文本。</p>
</div>
<div class="card">
<h4>代码块</h4>
<p>黑底 #0E0E10 + 米色 #F3EFE5 文字。彩色 token：橙 (k)、绿 (s)、蓝 (n)、黄 (p)。终端感不夸张。</p>
</div>
</div>
</section>
<section>
<h2>组件目录</h2>
<p>本 PRD HTML 文档中复用的核心组件，全部 token 化、可在 LemonBoss 前端 Dashboard 中复刻：</p>
<table class="dense">
<thead><tr><th>组件</th><th>CSS class</th><th>变体</th></tr></thead>
<tbody>
<tr><td>Tag pill</td><td><code>.tag</code></td><td>L1 / L2 / L3 / NEW / REUSE / PATCH</td></tr>
<tr><td>Card</td><td><code>.card</code></td><td>.l1 / .l2 / .l3 边色</td></tr>
<tr><td>Callout</td><td><code>.callout</code></td><td>默认（红） / .warn（黄） / .ok（绿）</td></tr>
<tr><td>Code block</td><td><code>pre.code</code></td><td>含 <code>.k</code> <code>.s</code> <code>.n</code> <code>.p</code> <code>.v</code> token</td></tr>
<tr><td>File tree</td><td><code>pre.tree</code></td><td>含 <code>.new</code> <code>.reuse</code> <code>.com</code></td></tr>
<tr><td>Tabs</td><td><code>.tabs</code></td><td>data-tabs 自动初始化</td></tr>
<tr><td>Accordion</td><td><code>details.acc</code></td><td>原生 details + 自定义 marker</td></tr>
<tr><td>Mock browser</td><td><code>.mock</code></td><td>含 .topbar + .url</td></tr>
<tr><td>Sidebar</td><td><code>aside.sidebar</code></td><td>Section group 折叠</td></tr>
</tbody>
</table>
</section>
<section>
<h2>留白与节奏</h2>
<p>页面布局基于 8px 网格。常用间距：</p>
<table class="dense">
<thead><tr><th>token</th><th>px</th><th>用途</th></tr></thead>
<tbody>
<tr><td>xs</td><td>8</td><td>tag 内距</td></tr>
<tr><td>sm</td><td>16</td><td>段间距</td></tr>
<tr><td>md</td><td>24</td><td>卡片内距</td></tr>
<tr><td>lg</td><td>40</td><td>section 间距</td></tr>
<tr><td>xl</td><td>64</td><td>页边</td></tr>
<tr><td>xxl</td><td>80</td><td>Hero 上下</td></tr>
</tbody>
</table>
</section>
</article>
<nav class="prev-next"></nav>
<footer class="site"><div><b>Section</b>07 · UI</div><div><b>Page</b>ui-design-system.html</div></footer>
</main>
</div>
<script src="assets/shell.js"></script>
</body>
</html>