Tactile UI

Kit part · Cards & panels

Panel

A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.

Element: <div>
Needs: kit.css
Rules: panel.rules.md · 4
Finishes: Aluminium · Graphite · Oak · Walnut · Porcelain · Black · Daylight · Night · Paper · Phosphor · E-paper · AMOLED
Volumes: Tactile · Quiet

On this page

Variants
Every state, at once
API
Markup
Accessibility
How it’s built
Rules
Related parts

Seats open in 11 days. Want one email that morning?

Variants

A face plate. 20px in, 12px corners.

Plain panel

BatteryCharging

78%

With a head

Receiver

24px in, four slotted screws.

Screws · device panels only

Every state, at once

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

Aluminium

Part	Face	Head	Screws
Surface		Head

Graphite

Part	Face	Head	Screws
Surface		Head

API

Name	Kind	Values	What it does
.tui-panel	class		A face plate: --tui-face, 20px padding, 12px radius, the raised light and the bead-blast grain.
.tui-panel--screws	class		Four slotted screws in the corners and 24px padding. For device-like panels only.
.tui-panel__head	class		A row: label on the left (it grows), a status or one small key on the right, a hairline rule under it.
.tui-rule	class	<hr>	A printed hairline between groups on one plate.
--tui-grain	CSS property	0.5 · 0.35	Opacity of the bead-blast texture. Set by the finish; do not remove it to “clean up”.
--tui-noise, --tui-screw	CSS property	SVG data URI	The grain and the screw, as images the panel draws. Read-only.

Markup

<div class="tui-panel">
  <div class="tui-panel__head">
    <span class="tui-label">Output stage</span>
    <span class="tui-status"><span class="tui-lamp" data-on></span>Running</span>
  </div>
  <div class="tui-tray">
    <button class="tui-key">Mute</button>
    <button class="tui-key">Solo</button>
  </div>
</div>

Needs kit.css only, no script. How to install the kit.

A panel is presentation. If it names a region, use a real heading inside it, or give the element role="region" and an aria-label.
The head label is printed text; when it titles the panel, make it a heading element with the tui-label class.
Screws and grain are background images: nothing to announce.

How it’s built

The face is --tui-face with a ::before carrying an SVG fractal-noise texture at --tui-grain opacity (the bead-blast) and the shared raised light: a one-pixel catch light on the top edge and two soft shadows falling down. The screws are one inline SVG, repeated four times in an ::after, every slot turned the same way. No bitmaps; the noise and the screw are SVG data URIs.

Rules

panel.rules.mdIn the brain

One level of panels: a panel holds trays and parts, never another panel.

4 rules in this file, 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 Pass How agents use the brain