wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
17 lines
1.4 KiB
HTML
17 lines
1.4 KiB
HTML
<!doctype html>
|
|
<!-- @dsCard group="Type" name="字号梯度" subtitle="48 → 12 完整字阶" viewport="700x330" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:22px;color:var(--fg1)}
|
|
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:14px}
|
|
.r{display:flex;align-items:baseline;gap:14px;padding:5px 0;border-bottom:1px solid var(--border)}
|
|
.tag{font-family:var(--font-mono);font-size:10px;color:var(--fg3);width:88px;flex-shrink:0}
|
|
.t{margin:0;white-space:nowrap}</style></head><body>
|
|
<div class="lab">TYPE SCALE · 48 / 36 / 30 / 24 / 20 / 18 / 16 / 14 / 12</div>
|
|
<div class="r"><span class="tag">display 48</span><p class="t t-display">穿山甲 Pangolin</p></div>
|
|
<div class="r"><span class="tag">h1 30</span><p class="t t-h1">一键连接全球</p></div>
|
|
<div class="r"><span class="tag">h2 24</span><p class="t t-h2">选择服务器节点</p></div>
|
|
<div class="r"><span class="tag">h3 20</span><p class="t t-h3">智能分流规则</p></div>
|
|
<div class="r"><span class="tag">body 16</span><p class="t t-body">默认正文,清晰易读。</p></div>
|
|
<div class="r"><span class="tag">sm 14</span><p class="t t-sm">次要说明文字</p></div>
|
|
<div class="r" style="border:0"><span class="tag">overline 12</span><p class="t t-overline">ACCOUNT · 账户</p></div>
|
|
</body></html>
|