Skip to content

Content

Typography

tty.css styles semantic text directly. Headings use the configurable display font, while body copy and technical text use the terminal font stack.

Headings

All six heading levels are bold and tightly spaced. Levels one and two use --tty-font-display; level four uses small caps; levels five and six are uppercase. Choose levels for document hierarchy rather than appearance.

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>

Inline semantics

Use native elements to communicate meaning. tty.css gives important, highlighted, inserted, deleted, abbreviated, and technical text distinct treatments while preserving their semantics.

Critical output can include emphasis, highlighting, inserted text, removed text, API, inline code, Control + K, and supporting details.

<p><strong>Critical</strong> output can include <em>emphasis</em>, <mark>highlighting</mark>, <ins>inserted text</ins>, <del>removed text</del>, <abbr title="Application Programming Interface">API</abbr>, <code>inline code</code>, <kbd>Control</kbd> + <kbd>K</kbd>, and <small>supporting details</small>.</p>

Lists

Unordered lists use square bullets, including nested lists; ordered lists retain native numbering. Both use compact item spacing. Description terms are bold, while descriptions use the muted foreground color. For chronological lists, see the timeline component.

  • Production services
    • API
    • Workers
  • Development services
  1. Build
  2. Deploy

Add .plain to ul or ol to remove markers and padding only; list margins remain unchanged. Add role="list" to preserve list semantics in Safari/VoiceOver when markers are removed.

  • Primary: healthy
  • Replica: healthy
  1. Build
  2. Deploy
<ul class="plain" role="list"><li>Primary: healthy</li><li>Replica: healthy</li></ul>
<ol class="plain" role="list"><li>Build</li><li>Deploy</li></ol>

Unordered

  • Semantic
  • Responsive
  • Class-light

Ordered

  1. Link CSS
  2. Write HTML
  3. Ship

Descriptions

Light
The default palette.
Auto
Follows the system preference.
<div class="grid">
  <article>
    <h3>Unordered</h3>
    <ul><li>Semantic</li><li>Responsive</li><li>Class-light</li></ul>
  </article>
  <article>
    <h3>Ordered</h3>
    <ol><li>Link CSS</li><li>Write HTML</li><li>Ship</li></ol>
  </article>
  <article>
    <h3>Descriptions</h3>
    <dl><dt>Light</dt><dd>The default palette.</dd><dt>Auto</dt><dd>Follows the system preference.</dd></dl>
  </article>
</div>

Blockquotes

Blockquotes use a muted surface and an accent border. A nested footer provides a compact, muted attribution.

Simplicity means putting every rule to work.

Notes from the terminal
<blockquote>
  <p>Simplicity means putting every rule to work.</p>
  <footer>Notes from the terminal</footer>
</blockquote>

Horizontal rules

Use <hr> for a thematic break. tty.css renders it as a strong dashed terminal divider with generous vertical space.

End of process output.

Next command starts here.

<p>End of process output.</p>
<hr>
<p>Next command starts here.</p>

Sample output

<samp> identifies output from a program. Like inline code and keyboard input, it uses the terminal font on a bordered muted surface.

Process result: Deployment queued.

<p>Process result: <samp>Deployment queued.</samp></p>

Figures and media

Images, SVGs, videos, and canvases are block-level, keep their intrinsic aspect ratio, and never exceed their parent width. A figure fits its content up to the available width, and figcaption provides smaller muted context.

Deployment activity A rising line across four deployment points.
Four successful deployments during the current window.
<figure>
  <svg viewBox="0 0 480 160" role="img" aria-labelledby="chart-title chart-desc">
    <title id="chart-title">Deployment activity</title>
    <desc id="chart-desc">A rising line across four deployment points.</desc>
    <rect width="480" height="160" fill="#0f172a"></rect>
    <polyline points="24,128 160,104 296,112 456,36" fill="none" stroke="#ffb66e" stroke-width="8"></polyline>
  </svg>
  <figcaption>Four successful deployments during the current window.</figcaption>
</figure>