An overview of everything the design system provides. Theme: day. Language: English.
How to show dates, numbers, money, names and addresses, and which ones people mix up.
Put a date in a <time> tag, with a version of the date a computer can read. Write the date itself however your readers expect to see it. Rastrillo will not format it for you.
<section rst-box>
<dl rst-detail>
<dt>Published</dt>
<dd><time datetime="2026-08-02">2 August 2026</time></dd>
</dl>
</section>Use <time> for a length of time too. The computer-readable version looks strange: PT2H30M means 2 hours 30 minutes.
<section rst-box>
<dl rst-detail>
<dt>Build time</dt>
<dd><time datetime="PT2H30M">2h 30m</time></dd>
</dl>
</section>Break up long numbers so they can be read at a glance: 54,173 in English, 54.173 in German, ٥٤٬١٧٣ in Arabic. Never show a long number as plain digits. In a table, use digits that are all the same width, so the columns line up.
<div rst-stats>
<div rst-stat><span rst-stat-label>Members</span><span rst-stat-num>54,173</span></div>
<div rst-stat><span rst-stat-label>Messages</span><span rst-stat-num>1,284,902</span></div>
</div>Rastrillo only knows how to write US dollars. For anything else, format the amount yourself. Either way, store money as a whole number of cents, never as a decimal.
<section rst-box>
<dl rst-detail>
<dt>Payout</dt>
<dd>$1,284.50</dd>
</dl>
</section>Use <meter> to show how full something is. Use <progress> to show how far a job has got. Always print the number beside the bar. A bar on its own tells a blind reader nothing.
<div rst-box-head><h2>Photo storage</h2></div>
<section rst-box>
<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>
</section>
<div rst-box-head><h2>Import</h2></div>
<section rst-box>
<div rst-job><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>
</section>Show a rounded size like 4 MB, and put the exact number of bytes in a <data> tag. Screen readers read what is on screen and ignore the tag, so the rounded size has to be useful on its own.
<section rst-box>
<dl rst-detail>
<dt>Export</dt>
<dd><data value="4194304">4 MB</data></dd>
</dl>
</section>Do not break these up. Order 4471, not order 4,471. Years, version numbers and port numbers are the same. Use rst-mono so they look like codes, and never put one in a <time> tag, even when it looks like a date.
<section rst-box>
<dl rst-detail>
<dt>Reference</dt>
<dd class="rst-mono">post_01H9ZQ</dd>
<dt>Order</dt>
<dd class="rst-mono">4471</dd>
</dl>
</section>A name can be in any language, including ones that read right to left. When a name sits in the middle of a line, wrap it in <bdi>, or it will scramble the words around it. Use person to show a name with a picture beside it.
<div rst-card style="--rst-cols: minmax(0, 1fr) 120px">
<div rst-lrow>
<a class="rst-nm" href="/people/1"><bdi>Grace Hopper</bdi><small><bdi>grace@example.com</bdi> · 09:12</small></a>
<span class="rst-cell-mut rst-m-hide">Admin</span>
</div>
</div>The <address> tag is not for postal addresses. It is for saying who wrote the page. A delivery address is ordinary text. A list of staff is a list.
<section rst-box>
<address>Written by <bdi>Grace Hopper</bdi> · <a href="mailto:grace@example.com">grace@example.com</a></address>
</section>
<section rst-box>
<dl rst-detail>
<dt>Deliver to</dt>
<dd>42 Wharf Road, Dublin 2</dd>
</dl>
</section>The <abbr> tag shows the full wording when you hover. That does not work on a phone, and screen readers often skip it. Write the words out in full the first time as well.
<section rst-box>
<p>Every page here meets the Web Content Accessibility Guidelines
(<abbr title="Web Content Accessibility Guidelines">WCAG</abbr>) 2.2 at level AA.</p>
</section>When your page adds something up, put the answer in an <output> tag. A running total, a converted price, a countdown.
<section rst-box>
<form rst-form>
<div rst-field>
<label rst-field-label for="seats">Seats</label>
<input rst-input="short" id="seats" name="seats" type="number" value="12">
</div>
<p>Total <output for="seats" name="total">$144.00</output></p>
</form>
</section>