wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
25 lines
2.1 KiB
HTML
25 lines
2.1 KiB
HTML
<!doctype html>
|
||
<!-- @dsCard group="Colors" name="Sand 中性色阶" subtitle="暖中性 taupe 50–950,950 为暗色画布" viewport="700x150" --><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}
|
||
.row{display:flex;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
|
||
.sw{flex:1;height:78px;display:flex;align-items:flex-end;padding:8px;box-sizing:border-box}
|
||
.lab{font-family:var(--font-mono);font-size:10px}
|
||
.meta{display:flex;justify-content:space-between;margin-top:12px;font-family:var(--font-mono);font-size:10px;color:var(--fg3)}
|
||
</style></head><body>
|
||
<div class="row">
|
||
<div class="sw" style="background:var(--sand-50)"><span class="lab" style="color:var(--sand-700)">50</span></div>
|
||
<div class="sw" style="background:var(--sand-100)"><span class="lab" style="color:var(--sand-700)">100</span></div>
|
||
<div class="sw" style="background:var(--sand-200)"><span class="lab" style="color:var(--sand-800)">200</span></div>
|
||
<div class="sw" style="background:var(--sand-300)"><span class="lab" style="color:var(--sand-900)">300</span></div>
|
||
<div class="sw" style="background:var(--sand-400)"><span class="lab" style="color:#fff">400</span></div>
|
||
<div class="sw" style="background:var(--sand-500)"><span class="lab" style="color:#fff">500</span></div>
|
||
<div class="sw" style="background:var(--sand-600)"><span class="lab" style="color:#fff">600</span></div>
|
||
<div class="sw" style="background:var(--sand-700)"><span class="lab" style="color:#fff">700</span></div>
|
||
<div class="sw" style="background:var(--sand-800)"><span class="lab" style="color:#fff">800</span></div>
|
||
<div class="sw" style="background:var(--sand-900)"><span class="lab" style="color:#fff">900</span></div>
|
||
<div class="sw" style="background:var(--sand-950)"><span class="lab" style="color:#fff">950</span></div>
|
||
</div>
|
||
<div class="meta"><span>Sand / Taupe · 暖中性 · 文本与表面</span><span>950 = 暗色画布 espresso</span></div>
|
||
</body></html>
|