# Dialtone Design System

Dialpad's design system — 58 Vue 3 components, 3,336 CSS utility classes, 6,019 design tokens, and documentation for building consistent UIs across Dialpad products.Site: https://dialtone.dialpad.com | Repository: https://github.com/dialpad/dialtone | MCP server available for AI-assisted development.

## Table of Contents

- [Components](https://dialtone.dialpad.com/components/index.html): Reusable components solving common UI needs, designed and built to be assembled in countless combinations.
- [Design Language](https://dialtone.dialpad.com/design/index.html): The visual foundation that supports and unites Dialpad products.
- [Colors](https://dialtone.dialpad.com/design/colors/index.html): A systematic and accessible color palette that supports both functional needs and personalized experiences within our products.
- [Chart Colors](https://dialtone.dialpad.com/design/colors/chart-colors/index.html): Chart color guidance to communicate data clearly.
- [Color Palette](https://dialtone.dialpad.com/design/colors/palette/index.html): A functional, personal, and accessible color palette.
- [Themes](https://dialtone.dialpad.com/design/colors/themes/index.html): Theme options that allow user customization of Dialpad products.
- [Usage](https://dialtone.dialpad.com/design/colors/usage/index.html): A systematic and accessible color palette that supports both functional needs and personalized experiences within our products.
- [Icons](https://dialtone.dialpad.com/design/icons/index.html): An icon style for visually communicating commands, status, and more.
- [Size](https://dialtone.dialpad.com/design/size/index.html): A system to maintain consistent size and scale.
- [Space](https://dialtone.dialpad.com/design/space/index.html): Define paddings, gaps, and margins around elements.
- [Typography](https://dialtone.dialpad.com/design/typography/index.html): Clear, legible, and easy-to-read text.
- [Accessibility and inclusive design](https://dialtone.dialpad.com/guides/accessibility/index.html): Guidance on building products for everyone.
- [Contributing](https://dialtone.dialpad.com/guides/contributing/index.html): Help Dialtone be even better.
- [Getting Started](https://dialtone.dialpad.com/guides/getting-started/index.html): A quick start guide to add Dialtone to your project.
- [Dialtone MCP Server](https://dialtone.dialpad.com/guides/mcp-server/index.html): Search Dialtone's design system with AI assistants using the Model Context Protocol
- [Design Tokens](https://dialtone.dialpad.com/tokens/index.html): Multi-platform values that make up Dialtone's design language
- [CSS Utilities](https://dialtone.dialpad.com/utilities/index.html): A utility-first CSS framework for building user interfaces.