# 文章阅读页

阅读排版 + 右侧目录（滚动高亮）。

```html
<div class="xxd-layout" data-cols="2-1" style="padding:32px 24px;max-width:1080px;margin:0 auto;--layout-gap:48px">
  <article class="xxd-prose">
    <ol class="xxd-breadcrumbs"><li><a href="#">文章</a></li><li aria-current="page">设计系统</li></ol>
    <h1 id="a1">一个人的设计系统</h1>
    <p>二十多个插件、一个会员站，同一套审美：黑白灰、默认直角、强调靠墨色。</p>
    <h2 id="a2">为什么是直角</h2>
    <p>直角让内容先说话。<a href="#">会员站的硬规则</a>是：对话框、卡片、按钮、输入框都不许圆角。</p>
    <blockquote>动效用来揭示层级和给反馈，不是装饰。</blockquote>
    <h2 id="a3">令牌</h2>
    <p>所有颜色、圆角、阴影都来自 <code>tokens.css</code>。</p>
    <pre><code>--r-sm: 0px; /* 默认直角 */</code></pre>
    <h3 id="a4">主色</h3>
    <ul><li>18 个预设</li><li>自动提亮或加深，保证对比度</li></ul>
  </article>
  <aside style="position:sticky;top:24px;align-self:start"><p class="xxd-toc__title">本文</p><ul class="xxd-toc" data-spy><li><a href="#a1" aria-current="true">一个人的设计系统</a></li><li><a href="#a2">为什么是直角</a></li><li><a href="#a3">令牌</a></li><li data-depth="3"><a href="#a4">主色</a></li></ul></aside>
</div>
```