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.
Foreground Text
Neutral text colors form the backbone of our content, used for headers, body text, forms, and more.Status Text
Status text colors are critical for highlighting key information:- Red: Signals critical attention.
- Yellow: Indicates warnings.
- Green: Denotes positive actions.
Icons
Icon colors profoundly impact readability, user interaction, communicating meaning and status at a glance.Surfaces
Surface colors define the background of UI elements, from pages and modals to tables and cards. Neutrals provide the primary backdrop, while status colors add emphasis and context.
Borders
Borders delineate content areas and components, using neutrals for subtle definition and status colors for heightened emphasis. Inverted colors ensure clarity on darker surfaces.
Charts
View our Chart Colors documentation for more information.
Best Practices
Preserve Color Semantics
Use feedback colors consistently to maintain clear communication and avoid confusion.
Do
Don’t
Semantics Over Base Values
Embrace semantic tokens to separate color values from their contextual meaning, enhancing maintainability and clarity.
Do
Don’t
Prioritize Contrast
We primarily employ the APCA for precise contrast evaluation, ensuring readability for all users.
Refer to Accessibility Guidelines for detailed information.
Do
Don’t
Uniformity
Maintain color consistency across similar components to build intuitive user patterns.
Do
Don’t
Modes
Dialtone is designed to seamlessly support both light and dark themes. We supply colors through semantic tokens that automatically adapt their underlying values depending on the active mode, ensuring consistent meaning and optimal contrast in any environment.
Related
- If you need full list of our color palette, Check out our list of colors.
- See our entire token catalog with full descriptions and values of all tokens..