Un resumen de todo lo que ofrece el sistema de diseño. Tema: signal. Idioma: Español.
Cómo mostrar fechas, números, dinero, nombres y direcciones, y cuáles se confunden entre sí.
Pon la fecha en una etiqueta <time>, con una versión que pueda leer un ordenador. La fecha visible escríbela como tus lectores esperan verla. rastrillo no te la va a formatear.
<section rst-box>
<dl rst-detail>
<dt>Published</dt>
<dd><time datetime="2026-08-02">2 August 2026</time></dd>
</dl>
</section>Usa <time> también para una duración. La versión legible por máquina tiene un aspecto extraño: PT2H30M significa 2 horas y 30 minutos.
<section rst-box>
<dl rst-detail>
<dt>Build time</dt>
<dd><time datetime="PT2H30M">2h 30m</time></dd>
</dl>
</section>Separa los números largos para que se lean de un vistazo: 54,173 en inglés, 54.173 en alemán, ٥٤٬١٧٣ en árabe. Nunca muestres un número largo como dígitos sin más. En una tabla, usa dígitos del mismo ancho para que las columnas queden alineadas.
<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 solo sabe escribir dólares estadounidenses. Para cualquier otra cosa, formatea tú el importe. En todo caso, guarda el dinero como un número entero de céntimos, nunca como decimal.
<section rst-box>
<dl rst-detail>
<dt>Payout</dt>
<dd>$1,284.50</dd>
</dl>
</section>Usa <meter> para mostrar cuán lleno está algo. Usa <progress> para mostrar hasta dónde ha llegado una tarea. Escribe siempre el número junto a la barra. Una barra sola no le dice nada a quien no la ve.
<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>Muestra un tamaño redondeado como 4 MB y pon el número exacto de bytes en una etiqueta <data>. Los lectores de pantalla leen lo que está en pantalla e ignoran la etiqueta, así que el tamaño redondeado tiene que servir por sí solo.
<section rst-box>
<dl rst-detail>
<dt>Export</dt>
<dd><data value="4194304">4 MB</data></dd>
</dl>
</section>Estos no se separan. Pedido 4471, no pedido 4,471. Los años, los números de versión y los de puerto son igual. Usa rst-mono para que parezcan códigos, y nunca metas uno en una etiqueta <time>, aunque parezca una fecha.
<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>Un nombre puede estar en cualquier idioma, incluidos los que se leen de derecha a izquierda. Cuando un nombre queda en medio de una línea, envuélvelo en <bdi>, o desordenará las palabras a su alrededor. Usa person para mostrar un nombre con una imagen al lado.
<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>La etiqueta <address> no es para direcciones postales. Es para decir quién escribió la página. Una dirección de entrega es texto normal. Una lista de personal es una lista.
<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>La etiqueta <abbr> muestra el texto completo al pasar el ratón por encima. Eso no funciona en un móvil, y los lectores de pantalla suelen saltárselo. Escribe también las palabras completas la primera vez.
<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>Cuando tu página suma algo, pon el resultado en una etiqueta <output>. Un total acumulado, un precio convertido, una cuenta atrás.
<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>