Material & depth · 2010s–present
Tactile
Design that evokes physical weight and grip: stipple textures, knurled controls, and a visual heaviness that makes elements feel like they can be grabbed.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(14% 0.01 250) - --fg
oklch(91% 0.008 62) - --muted
oklch(58% 0.01 250) - --surface
oklch(19% 0.01 250) - --surface-2
oklch(23% 0.012 250) - --border
oklch(30% 0.012 250) - --accent
oklch(75% 0.17 84) - --accent-fg
oklch(12% 0.01 80) - --focus
oklch(75% 0.17 84)
| Token | Value |
|---|---|
| --font-body | 'IBM Plex Mono', ui-monospace, 'Courier New', monospace |
| --font-display | 'IBM Plex Mono', ui-monospace, 'Courier New', monospace |
| --font-mono | 'IBM Plex Mono', ui-monospace, monospace |
| --radius | 6px |
| --radius-sm | 4px |
| --shadow | 0 2px 6px oklch(0% 0 0 / 0.45), 0 1px 0 oklch(50% 0.01 250 / 0.18) inset |
| --shadow-lg | 0 12px 40px oklch(0% 0 0 / 0.65) |
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
:root {
--bg: oklch(14% 0.01 250);
--fg: oklch(91% 0.008 62);
--muted: oklch(58% 0.01 250);
--surface: oklch(19% 0.01 250);
--surface-2: oklch(23% 0.012 250);
--border: oklch(30% 0.012 250);
--accent: oklch(75% 0.17 84);
--accent-fg: oklch(12% 0.01 80);
--focus: oklch(75% 0.17 84);
--font-body: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
--font-display: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
--radius: 6px;
--radius-sm: 4px;
--shadow: 0 2px 6px oklch(0% 0 0 / 0.45), 0 1px 0 oklch(50% 0.01 250 / 0.18) inset;
--shadow-lg: 0 12px 40px oklch(0% 0 0 / 0.65);
}Where it came from
Origin: Physical industrial design; audio software and hardware companion apps
Tactile UI draws from industrial design rather than metaphor — it is less about pretending to be leather and more about conveying physical substance through visual weight, texture patterns, and interaction feedback. It appears most naturally in audio workstation plug-ins, camera apps, and hardware companion interfaces, where the digital tool maps directly to a physical device.
How to spot it
- Heavy visual weight — dark backgrounds, bold contrast
- Grip-like textures: fine stipple, knurling, or cross-hatch patterns
- Controls that read as physical: dials, sliders, and buttons with tangible depth
- Deliberate structure — nothing soft or airy
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Conveys craft and quality immediately | Not suited to information-dense layouts |
| Strong affordances for control-heavy interfaces | Dark textures make text contrast harder to meet |
| Works well for audio, instrument, and precision tool UIs | Can feel heavy-handed in consumer product contexts |
In the wild
- Digital audio workstation plug-in interfaces
- Synth and drum machine companion apps
- High-end hardware product configurators
Use it when
Hardware companion apps, audio tools, or any product where the physical analogy earns trust and the user is an expert.