Setting the tone
A 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 DtTextList: Semantic Text Lists
New component pair for bulleted, numbered, and custom-markered text lists. Replaces d-ls-*/d-lst-* utility composition with validated props, semantic ul/ol rendering, automatic nested-marker progression, and a marker slot that accepts icons, emoji, or any content.
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, sizing, and simple positioning 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.