v1.0Dial UI Kit
Interfaces you can almost feel.
A tactile UI kit for Tailwind CSS and React. Keys that press, switches that snap, knobs that turn and readouts that glow, built on accessible patterns and a single set of tokens.
- 52 elements · 40 sections · 9 layouts
- HTML + Tailwind
- React + TypeScript
- Light & dark
DL-1 · Control surface
LiveGain
Gain
Tone
01What's inside
Pieces that are ready to drop in
Every piece ships as plain HTML with Tailwind classes and as a typed React component. Copy one, or start from a full layout.
02Quick start
Two minutes to your first panel
Tailwind v3 or v4, plain HTML or React. The tokens are CSS variables, so themes switch without a rebuild.
HTML + Tailwind v3
Add the preset, load the tokens and fonts, then paste any snippet.
// tailwind.config.js
module.exports = {
presets: [require("./tokens/dial-preset.cjs")],
content: ["./**/*.html"],
};
<!-- index.html -->
<link rel="stylesheet" href="tokens/dial.css">
<link rel="stylesheet" href="fonts/fonts.css">
<script src="html/dial.js" defer></script>React + TypeScript
Components are plain TSX. Interactive ones use a tiny hook with no dependencies. Copy images/ to public/img/.
import "./dial/tokens/dial.css";
import "./dial/fonts/fonts.css";
import { Knob } from "./dial/react/components/elements/Knob";
import { HeroDevice } from "./dial/react/components/sections/HeroDevice";
export default function App() {
return (
<main className="bg-canvas text-ink">
<HeroDevice />
<Knob />
</main>
);
}03Tokens
Bone, graphite and one cobalt accent
Twenty-seven color roles with light and dark values, plus depth, radius, type and motion. Edit tokens.json and regenerate, or override the CSS variables.
canvas
#ECE9E2#121316
Page background (bone / graphite)
panel
#F7F5F0#1A1B1F
Card and panel surface
raised
#FDFCFA#24252A
Key caps, inputs on panels, popovers
sunken
#E3DFD6#0D0E10
Recessed wells, tracks, inset areas
line
#D5D0C5#2C2E34
Hairlines and dividers
line-strong
#B8B2A5#41444C
Control outlines, ticks
ink
#17181B#F1EFEA
Primary text
ink-2
#45474D#BDBBB5
Secondary text
ink-3
#5F6167#96958F
Muted text, engraved labels
accent
#2A3EE8#4D5DFF
Cobalt: primary actions, focus
accent-hover
#2233CC#3F50F5
Primary hover
on-accent
#FFFFFF#FFFFFF
Text on cobalt
accent-soft
#DFE3FF#1E2350
Cobalt tint backgrounds
accent-text
#2233CC#A3ADFF
Cobalt text and links
ok
#3DBE4A#5EDC6A
Lime LED: success
ok-soft
#E3F5E3#15301A
Success tint
ok-text
#1A6E26#6EE07A
Success text
warn
#F2A516#FFB938
Amber LED: warning
warn-soft
#FBF0D9#352A10
Warning tint
warn-text
#825400#FFC659
Warning text
danger
#D93036#D93036
Red LED: errors, destructive
danger-soft
#FBE4E2#3A1517
Error tint
danger-text
#B42318#FF8A8A
Error text
lcd
#101114#0A0B0C
LCD readout glass (dark in both modes)
lcd-ink
#9CF06C#9CF06C
LCD digits
lcd-dim
#2B3A26#25321F
Unlit LCD segments
Type scale
Archivo (variable width + weight) for UI and display, JetBrains Mono for engraved labels and readouts. Both SIL OFL 1.1.
JetBrains Mono · 0123456789 · ⌘K
Engraved label · tracking 0.14em
Depth
Shadows flip with the theme through three variables.
Radius & motion
- instant
- 90ms
- fast
- 160ms
- base
- 240ms
- slow
- 420ms
Easings: press, detent (a small overshoot, like a switch snapping into place) and out. Every animation is wrapped in motion-safe:.
04Accessibility
Built to be used, not just looked at
Text pairs are measured in both themes and listed below, and every interactive piece works with a keyboard alone.
- Keyboard firstTabs, menus, listboxes, sliders, the knob and dialogs follow WAI-ARIA patterns: arrows, Home, End, Esc and visible focus.
- Screen readersReal roles and states: aria-pressed, aria-checked, aria-expanded, aria-valuetext and live regions for toasts.
- AA contrastEvery text token passes WCAG AA on its surfaces in light and dark. LEDs always come with a text label.
- 44px targetsButtons, links in menus and form controls are at least 44px tall on touch screens.
- Reduced motionAnimations are opt-in through motion-safe, so people who prefer less motion get a calm UI.
| Text on surface | Sample | Light | Dark |
|---|---|---|---|
| ink / canvas | Aa 123 | 14.64:1 AAA | 16.17:1 AAA |
| ink-2 / canvas | Aa 123 | 7.66:1 AAA | 9.68:1 AAA |
| ink-3 / canvas | Aa 123 | 5.11:1 AA | 6.19:1 AA |
| ink-3 / panel | Aa 123 | 5.68:1 AA | 5.73:1 AA |
| ink-3 / sunken | Aa 123 | 4.66:1 AA | 6.43:1 AA |
| ink-2 / raised | Aa 123 | 9.06:1 AAA | 7.97:1 AAA |
| accent-text / canvas | Aa 123 | 7.18:1 AAA | 8.83:1 AAA |
| accent-text / accent-soft | Aa 123 | 6.87:1 AA | 7.07:1 AAA |
| on-accent / accent | Aa 123 | 7.11:1 AAA | 4.86:1 AA |
| on-accent / danger | Aa 123 | 4.74:1 AA | 4.74:1 AA |
| ok-text / ok-soft | Aa 123 | 5.58:1 AA | 8.58:1 AAA |
| warn-text / warn-soft | Aa 123 | 5.77:1 AA | 9.04:1 AAA |
| danger-text / danger-soft | Aa 123 | 5.42:1 AA | 7.12:1 AAA |
| lcd-ink / lcd | Aa 123 | 13.57:1 AAA | 14.16:1 AAA |
05In the download
Everything in one tidy folder
dial-tactile-ui-kit/
├─ tokens/ tokens.json · dial.css · dial-preset.cjs · dial-v4.css
├─ html/ elements/ · sections/ · layouts/ · dial.js · dial.css
├─ react/ components/{elements,sections,layouts} · useDial.ts
├─ docs/ this documentation site, offline
├─ fonts/ Archivo + JetBrains Mono (OFL 1.1)
├─ images/ AI-generated product photos (WebP)
├─ AGENTS.md notes for AI coding assistants
└─ README.md · LICENSE · LICENSE-THIRD-PARTY.md
Use it anywhere
Use Dial in unlimited personal and client projects. Icons are Lucide (ISC). Fonts are SIL OFL 1.1. Images are AI-generated and included for use in your projects.