Setting the tone
Dialtone is Dialpad’s shared design language, shaping everything from our product interfaces to our marketing. It defines how our brand looks, feels, and behaves across every touchpoint. Built on principles of clarity, consistency, and accessibility, Dialtone keeps our visual identity cohesive and unmistakably Dialpad.
What's New
The latest from Dialpad Design.
Introducing DtBox: The Surface and Spacing Primitive
New low-level component for token-constrained surfaces. Replaces manual CSS utility composition for padding, background, border, shadow, radius, and sizing with validated props. Completes the primitive triad alongside DtText and DtStack.
Introducing v-dt-focustrap: Declarative Focus Trapping
New Vue directive for focus trapping. Trap Tab/Shift+Tab within dialogs, popovers, and overlays with a single attribute — configurable initial focus, boundary wrapping, and focus restoration built in.
Introducing v-dt-focusgroup: Declarative Keyboard Navigation
New Vue directive for roving tabindex. Add arrow-key cycling, looping, memory, and disabled-item handling to any composite widget with a single attribute — no keyboard event handlers required.