Colors
Last updated
Last updated
We have chosen to utlize the Material Design 3 Color system. You may read more .
The below is an example of the base tonal palette generated with the DDA blue primary color as the seed color. A seed color is the color provided to the material color generator on which it bases the palette on.
1. Go to the Playground page by choosing Pages from the left panel.
2. Open the DDS Color Palette Generator plugin.
3. Choose a Primary & Secondary Color using the color picker (Secondary is optional).
4. Click Generate to create the color palette.
1. Open the Local Variables panel by clicking the Local Variables button from the right panel.
2. Select the Color_Palette collection from the Local Variables panel.
3. Assign colors to tokens:
Primary Tokens → Fill Primary0 to Primary100 using colors from the generated palette.
Neutral-Variant Tokens → Fill Neutral-Variant0 to Neutral-Variant100 using shades from the generated palette.
If you have a Secondary Color: ( Secondary Tokens → Fill Secondary0 to Secondary100 using colors from the generated palette.)
4. Keep all other token groups (Secondary, Neutral, Error, Warning, Info, and Success) as they are.
You have successfully synced the token system! Now, your UI Kit is ready to use for your entity.
Key colors are the core colors selected from the tonal palette that serve as the foundational hues for an interface.
The main colors are prominently used for key elements like icons, headers, and primary action buttons, representing the core of the brand and its identity. This primary color signifies core interactions, appearing on primary buttons for actions like "Submit" or "Next," encouraging user focus and reinforcing brand presence. Variants of this color are applied to hover, focus, and pressed states to enhance interactive feedback and maintain consistency across the interface.
The complementary color in the primary palette adds flexibility and depth, enhancing visual interest without overshadowing the primary brand elements. It is used for secondary buttons, like "Back" or "Learn More," and serves as an accent for highlights within content. This color also appears in navigation elements, such as tabs, icons, and links, to guide users through supplementary interactions. Supporting the primary colors, the secondary palette offers contrast for backgrounds, secondary buttons, and icons, adding layered sophistication to the interface.
This color provides informational messages or highlights additional details. It is used for info messages, including notification backgrounds and icons with helpful or instructional content. Tooltips and help text also use this color to distinguish them from primary or secondary content, as well as for non-critical icons or informational links.
This color signals errors or critical issues that require user attention. It is used for error messages, including backgrounds or text in error notifications, tooltips, and alert boxes. It indicates invalid input fields with borders or icons and is applied to critical buttons for actions that may result in data loss or deletion, such as “Delete Account”.
This color cautions users about non-critical issues or potential risks. It is used for warning messages, alert backgrounds, and icons. Form warnings use this color to indicate fields requiring attention but are not strictly errors, and it appears in notification badges for cautionary but non-critical alerts.
This color represents positive actions and feedback, used in backgrounds for success messages, like "Action completed successfully." It also highlights valid input in form validation and serves as a status indicator, marking completion statuses or achievement badges.
The surface colors in the palette establish a balanced foundation, providing structure and depth without competing with the primary brand elements. These colors are used for background layers, defining areas such as cards, modals, and section dividers to create a cohesive and organized interface. They subtly support primary and secondary colors by ensuring interactive elements and key content stand out clearly. Applied across different layers, surface colors enhance readability and separation, adding a refined visual hierarchy that contributes to a polished and sophisticated design experience.
The disabled colors in the palette provide subtlety and restraint, ensuring that inactive elements remain visible without drawing attention away from active content. These colors are used for elements like disabled buttons, text fields, and icons, signaling non-interactivity in a clear yet understated manner. By blending seamlessly with primary and secondary colors, disabled tones maintain a consistent visual language while gently fading into the background. Applied across various components, disabled colors enhance usability by distinguishing interactive from non-interactive elements, contributing to a cohesive and refined interface that respects user focus and intention.
Material’s color system provides standard tone values and measurements that can be used to meet accessible contrast ratios.
Material’s tonal system corresponds to Web color contrast standards as follows:
Colors that are at least 40 steps apart in tonal value achieve a contrast ratio of at least 3:1
Colors that are at least 50 steps apart in tonal value achieve a contrast ratio of at least 4.5:1
Colors that are at least 70 steps apart in tonal value achieve a contrast ratio of at least 7:1
To ensure accessibility across tonal palettes, follow specific contrast guidelines to maintain readability and usability.
40-step difference: Use this for elements needing a 3:1 contrast ratio, such as large text and secondary UI elements.
50-step difference: Use this for essential text and interactive elements that need a 4.5:1 contrast ratio.
70-step difference: Reserve this for small or critical text that requires a 7:1 contrast ratio.
50-step difference: Ensure readability for general alerts and feedback.
70-step difference: Use for high-priority messages that need higher visibility.
50-step difference: Necessary for readable text with a 4.5:1 contrast ratio.
40-step difference: Suitable for subtle separations, such as backgrounds and dividers, with a 3:1 contrast ratio.
70-step difference: Use for focus indicators and interactive elements where high contrast is required.
By following these tonal palette guidelines, you create a cohesive and accessible visual experience across UI components and interaction states.
Primary
Primary Variant
On-Primary
On-Primary Variant
Primary
On-Primary
Primary Variant
On-Primary Variant
Secondary
Secondary Variant
On-Secondary
On-Secondary Variant
Secondary
On-Secondary
Secondary Variant
On-Secondary Variant
Info Variants
Error Variants
Warning Variants
Success Variants
Surface
Surface Variant
On Surface
On Surface Variant
Surface
Surface Variant
On Surface
On Surface Variant
Disabled
On-Disabled
Disabled
On-Disabled
