Usage
A systematic and accessible color palette that supports both functional needs and personalized experiences within our products.
Overview
Dialtone's color system offers a consistent visual foundation with a brand purple, versatile grayscale, and semantic status colors. Subtle gradients are used for promotional accents.
What we prioritize is semantic clarity, ensuring each color serves a distinct purpose within the UI for clear communication and consistency...
Use Semantic Color Tokens
Dialtone uses semantic tokens for color, representing a color's purpose in the UI. See our See our design token list for descriptions guiding their application.
It's crucial to understand that while these semantic tokens are built upon our underlying base color palette, the work of selecting the appropriate base color for each specific UI context has already been meticulously done for you.
Color roles
Color roles describe the purpose of how color is used. Each uses neutrals for general UI and status colors for impact.
We categorize color application by semantic roles such as: text, surfaces, borders, and themes. Each uses neutrals for general UI and status colors for impact.
Foreground Colors
Foreground colors are the visual language of our content, applied across all content considered to be "in the foreground", i.e. text and icons. You can utilize foreground tokens which can be found within the tokens documentation here.