96.4MHz
VFD
A vacuum-fluorescent display: cyan-white light on near-black glass, with a glow and a ghost. Frequencies, levels, status screens.
Kit part · Numbers
LCD
A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.
- Element
- <span>
- Needs
- kit.css
- Rules
- display.rules.md · 4
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
78%
14:32
-12.5dB
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 | Small · 16px | Default · 28px | Large · 44px |
|---|---|---|---|
| LCD | 02:52 | 02:52 | 78% |
Graphite
| Part | Small · 16px | Default · 28px | Large · 44px |
|---|---|---|---|
| LCD | 02:52 | 02:52 | 78% |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-lcd | class | on <span> | Grey-green glass, dark segments: --tui-lcd and --tui-lcd-ink. |
| .tui-lcd--sm · --lg | class | 16px · 44px | Sizes; the default is 28px. Everything inside scales in em. |
| data-ghost | attribute | e.g. "88:88" | The unlit segments, drawn behind the value. Same width as the value, digits as 8. |
| <small> | element | inside | The unit, printed small and upper case. |
| font-size | CSS property | any | Set it directly for any other size. |
Markup
<span class="tui-lcd" data-ghost="88:88">02:52<small>min</small></span>Needs kit.css only, no script. How to install the kit.
Accessibility
- It is text: screen readers read the value and the unit. The ghost is a pseudo-element and is not read.
- For a value that updates live, put it in an element with
aria-live="polite", unless it changes every second. - Segments on glass hold above 7:1.
How it’s built
A span in Geist Mono with tabular figures: a grey-green fill with a glare gradient, a shadow inset at the top, and a one-pixel offset text-shadow for the gap between the segments and the back plate. The ghost is content: attr(data-ghost) at 8% opacity, laid exactly under the value. The only literal colours are the display tokens: light, not paint.
Rules
display.rules.mdIn the brain
The ghost is exactly as wide as the value, every digit an 8.
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.