Skip to the page
Tactile UI

Foundations

Heading

Printed headings in a fixed scale, four steps from the page title down, with an eyebrow label above and nothing stacked over them.

On this page
  1. Four steps
  2. With an eyebrow
  3. Rules
  4. The full law

Four steps

Less, but better.

Output stage

Battery and reserve

Charging from the mains

<h1 class="tui-h1">Less, but better.</h1>
<h2 class="tui-h2">Output stage</h2>
<h3 class="tui-h3">Battery and reserve</h3>
<h4 class="tui-h4">Charging from the mains</h4>

The class sets the size; the element sets the outline. Choose the element for the page's order (one h1, then h2 under it, never skipping a level) and the class for how loud it should look.

With an eyebrow

Northwind · Billing

Invoices you can read

<hgroup class="tui-heading">
  <p class="tui-label">Northwind · Billing</p>
  <h2 class="tui-h2">Invoices you can read</h2>
</hgroup>

The eyebrow is a printed label, upper case and tracked, the voice of a front panel. An hgroup keeps it with its heading for a screen reader without making it a heading of its own.

Rules

  • Sentence case, never title case and never upper case.
  • No icon, badge or ornament stacked above a heading.
  • One tui-h1 a page. A section under it starts at tui-h2.

The full law

printing.mdIn the brain

This page is a summary in plain words. The brain holds the law itself, written for an agent to follow.

The full law, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.

See the Founder PassHow agents use the brain