wangjia
5a1e185b1a
phosphor console v1.1 设计系统（从现网 web/style.css 演化）：tokens(colors/effects/ typography/fonts) + components(core/forms/surfaces .jsx) + ui_kits(console + console_mobile) + assets/icons(15 双色 SVG) + guidelines + CLAUDE/SKILL/readme。供 B1–B6 重构任务对照实现。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
14 lines
1.4 KiB
HTML
14 lines
1.4 KiB
HTML
<!-- @dsCard group="Type" viewport="700x170" subtitle="层级靠字距：.04em 标题 → .35em logo 副标" name="字距 · Tracking" -->
|
|
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:18px 22px;display:grid;gap:9px}
|
|
.r{display:flex;align-items:baseline;gap:14px;font-size:12px}
|
|
.k{width:120px;flex:none;font-size:10px;color:var(--faint);letter-spacing:.06em}</style></head><body>
|
|
<div class="r"><span class="k">.04em tight</span><span style="letter-spacing:.04em;font-weight:700;font-size:15px">标题 · proj-title</span></div>
|
|
<div class="r"><span class="k">.08em label</span><span style="letter-spacing:.08em;font-weight:600">按钮 · BTN LABEL · meta</span></div>
|
|
<div class="r"><span class="k">.12em badge</span><span style="letter-spacing:.12em;color:var(--amber)">2 项待审批</span></div>
|
|
<div class="r"><span class="k">.22em head</span><span style="letter-spacing:.22em;font-weight:600;font-size:11px;color:var(--muted)">▍任务树 SECTION HEAD</span></div>
|
|
<div class="r"><span class="k">.28em logo</span><span style="letter-spacing:.28em;font-weight:700;font-size:15px;color:var(--green)">MAESTRO</span></div>
|
|
<div class="r"><span class="k">.35em widest</span><span style="letter-spacing:.35em;font-size:11px;color:var(--muted)">多项目任务调度台</span></div>
|
|
</body></html>
|