html-effectiveness-design

03-design — 设计系统与组件

"HTML is the medium your design system ships in, so it's the natural format for talking about it. Tokens become swatches, components become contact sheets."

何时用

用户说	用哪个范式	模板
"把我们的 design tokens 整理成一份 reference"	设计系统参考	../../templates/design-tokens.html
"review 一下我们用了哪些颜色 / 字号"	同上	同上
"show me all variants of Card / Button"	组件变体陈列	自建（见下）

---

范式 3.1 · 设计系统参考

空间形状：4 个区域 + 底部组件展示行。每个 token 必须可见：

• 颜色 → 色块 + hex + 变量名
• 字号 → 真实渲染的"Plan the week ahead"字样
• 间距 → 真实宽度的横条
• 圆角/阴影 → 真实渲染的卡片

HTML 骨架：

<section class="tokens-color">
  <h2>Color · Primary</h2>
  <div class="palette">
    <div class="swatch" style="background:#D97757">
      <span class="hex">#D97757</span><span class="var">--clay</span>
    </div>
    <div class="swatch" style="background:#141413;color:#FAF9F5">
      <span class="hex">#141413</span><span class="var">--slate</span>
    </div>
    <!-- ivory / oat -->
  </div>
</section>

<section class="tokens-type">
  <h2>Typography</h2>
  <div class="scale">
    <div>
      <p style="font-size:48px;line-height:1.1;font-weight:500">Plan the week ahead</p>
      <small>Display 48 / 1.1 / 500</small>
    </div>
    <!-- Heading 1, Heading 2, Body, Small, Caption -->
  </div>
</section>

<section class="tokens-space">
  <h2>Spacing</h2>
  <div class="space-scale">
    <div><span class="bar" style="width:4px"></span>4 <code>--sp-1</code></div>
    <div><span class="bar" style="width:8px"></span>8 <code>--sp-2</code></div>
    <!-- 12, 16, 24, 32, 48, 64 -->
  </div>
</section>

关键 CSS：

.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.swatch { aspect-ratio: 1; padding: 16px; border-radius: 12px;
          color: white; display: flex; flex-direction: column;
          justify-content: flex-end; gap: 4px; font-size: 12px; }
.swatch .hex { font-family: var(--font-mono); }
.swatch .var { opacity: 0.7; }

.space-scale > div { display: flex; align-items: center; gap: 12px;
                      padding: 8px 0; }
.space-scale .bar { display: inline-block; height: 16px;
                     background: var(--clay); border-radius: 2px; }