設計系統提供嘅嘢嘅概覽。主題：day。語言：廣東話。
砌成一個畫面嘅嗰啲細塊講法：狀態、身分、進度，同唯一嗰種提示形狀。
預先整好、彼此一致嘅介面元件，喺伺服器度算好。
框架本身嘅用語叫佢哋做 partial：ui.Templates() 回傳嘅係 partial，docs/site/templates.md 都係用呢個名。呢版嘅講法改咗，代碼嘅冇改。
連結唔會有反應，範例原始碼另外提供。
下面每個範例都喺自己個框入面。
範例內容用英文，範例外殼就譯咗。
記錄狀態用有底色嘅膠囊標籤顯示，有顏色亦有文字。
預設色調（neutral）
<span rst-status rst-tone="neutral">Draft</span>neutral
<span rst-status rst-tone="neutral">Draft</span>positive
<span rst-status rst-tone="positive">Published</span>warning
<span rst-status rst-tone="warning">Scheduled</span>negative
<span rst-status rst-tone="negative">Failed</span>一個大寫字母、有邊框嘅細標記，用嚟做固定嘅記號。同 status-pill 唔同，嗰個係記錄嘅狀態。
冇色調（安靜嘅預設）
<span rst-badge>Draft</span>neutral
<span rst-badge="neutral">Internal</span>positive
<span rst-badge="positive">Live</span>warning
<span rst-badge="warning">Beta</span>negative
<span rst-badge="negative">Sold out</span>有數字嘅容量條。
空
<span rst-meter><meter rst-meter-bar value="0" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>0/500</span></span>去到一半
<span rst-meter><meter rst-meter-bar value="42" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>210/500</span></span>就嚟滿
<span rst-meter><meter rst-meter-bar value="82" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>412/500</span></span>滿咗
<span rst-meter><meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>500/500</span></span>超出額度
<span rst-meter><meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>700/500</span></span>填充喺 partial 入面被限制喺 100%。
儀表板上嘅一個數字，有標籤，同埋變咗幾多。
個大數字
<div rst-stats><div rst-stat="lead"><span rst-stat-label>Revenue this month</span><span rst-stat-num>€48,210</span><span rst-stat-delta rst-tone="positive">+12%</span><span rst-stat-note>vs. last month</span></div></div>喺一行入面其中一個數字加 Lead，佢就會變大。仲係同一個組件，只係大啲。
細啲嘅數字
<div rst-stats><div rst-stat><span rst-stat-label>Unpaid invoices</span><span rst-stat-num>24</span></div></div>你只需要一個標籤同一個數字。其餘都係可選。
跌係好事嗰陣
<div rst-stats><div rst-stat><span rst-stat-label>Time to first reply</span><span rst-stat-num>1h 12m</span><span rst-stat-delta rst-tone="positive">−38%</span><span rst-stat-note>vs. last week</span></div></div>顏色係你決定，唔係組件。呢度個數字跌咗，而咁係好消息，所以個變化係綠色。
升係壞事嗰陣
<div rst-stats><div rst-stat><span rst-stat-label>Failed payments</span><span rst-stat-num>9</span><span rst-stat-delta rst-tone="negative">+3</span><span rst-stat-note>vs. last week</span></div></div>呢度個數字升咗，而咁係壞消息，所以個變化係紅色。
講唔準嗰陣
<div rst-stats><div rst-stat><span rst-stat-label>Average session length</span><span rst-stat-num>4m 12s</span><span rst-stat-delta rst-tone="neutral">+18s</span><span rst-stat-note>since Friday</span></div></div>唔設顏色，個變化就係灰色。講唔準係好定壞嗰陣就咁做。
縮短咗嘅數字
<div rst-stats><div rst-stat><span rst-stat-label>Messages sent</span><span rst-stat-num><data value="4120">4.1k</data></span></div></div>顯示 4.1k 而唔係 4120？將完整數字放入 Exact。螢幕閱讀器淨係讀螢幕上有嘅嘢，所以人需要嘅資料要留喺個數字度。
首字母頭像、姓名同電郵。用嚟快速認出代表人嘅記錄。
姓名同電郵
<a rst-person href="/people/1"><span rst-person-av aria-hidden="true">G</span><span rst-person-meta><span rst-person-name>Grace Hopper</span><span rst-person-email>grace@example.com</span></span></a>大碼，詳情頁頁首嘅尺寸
<a rst-person="lg" href="/people/2"><span rst-person-av aria-hidden="true">A</span><span rst-person-meta><span rst-person-name>Ada Lovelace</span><span rst-person-email>ada@example.com</span></span></a>冇首字母
<a rst-person href="/people/3"><span rst-person-av="empty" aria-hidden="true"></span><span rst-person-meta><span rst-person-name>Unclaimed invitation</span><span rst-person-email>invited@example.com</span></span></a>提示嘅唯一一套講法：有顏色嘅條、色調圖示、可有可無嘅粗體標題，同一段正文。
預設色調（info），冇標題
<div rst-callout rst-tone="info"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span><div rst-callout-body><p>Posts are visible to members only until the site is published.</p></div></div>info
<div rst-callout rst-tone="info"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span><div rst-callout-body><p>Posts are visible to members only until the site is published.</p></div></div>positive
<div rst-callout rst-tone="positive"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg></span><div rst-callout-body><strong>Payments are connected</strong><p>You can take payment for tickets now.</p></div></div>warning
<div rst-callout rst-tone="warning"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></span><div rst-callout-body><strong>Connect payments to start selling</strong><p>Your event is live but cannot take payment yet.</p></div></div>negative
<div rst-callout rst-tone="negative"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg></span><div rst-callout-body><strong>The last import failed</strong><p>Nothing was changed. Fix row 91 and try again.</p></div></div>negative，並且當警報咁報出嚟
<div rst-callout rst-tone="negative" role="alert"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg></span><div rst-callout-body><strong>The import stopped</strong><p>Nothing was changed. Fix row 91 and try again.</p></div></div>alert 會加上 role="alert"，用嚟顯示重要訊息。
詳情畫面上關於某筆記錄嘅定義清單。等寬標記用喺偏機器嘅值。
四項資料，其中一項偏機器
<section rst-box><dl rst-detail>
<dt>Audience</dt>
<dd>Members</dd>
<dt>Main page</dt>
<dd>No</dd>
<dt>Published</dt>
<dd><time datetime="2026-08-02">2 August 2026</time></dd>
<dt>Reference</dt>
<dd class="rst-mono">post_01H9ZQ</dd>
</dl></section>重新導向之後嘅一行確認。佢收普通字串，唔係 dict，字串係空嘅就咩都唔畫。
一句「已儲存」嘅訊息
<p rst-notice role="status">Post saved.</p>表單嘅錯誤摘要行，role="alert"。佢收一個普通字串；冇錯誤嗰陣咩都唔畫。
畀人拒絕咗嘅提交
<p rst-form-error role="alert">That title is already taken.</p>背景工作嘅輪詢片段。data-poll 屬性淨係喺工作行緊嗰陣先出——唔出佢就係停止輪詢嘅方法。
進行緊
<div rst-job data-poll="/jobs/1/fragment" data-poll-every="2">
<span rst-spin aria-hidden="true"></span> <strong>Import</strong> is running — 128 of 400…
<progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
</div>
呢個會輪詢：佢係成版入面唯一會向網絡攞嘢嘅樣本，而喺靜態網站度，佢永遠等唔到回覆。
完成咗
<div rst-job>
<strong>Import</strong> finished.
</div>
失敗
<div rst-job>
<strong>Import</strong> failed: row 91: no such column "published"
</div>