Why are we implementing a core design system across our products?
No, you do not have to update all foundation elements simultaneously.
The integration of foundation elements into each platform is up to individual development teams. The design team will assist by providing the necessary documentation and resources to ensure a smooth implementation.
Ensuring integrity and functionality is the priority, with a focus on mitigating risks throughout the process.
Do I have to update all foundation elements at once?
No, you do not have to update all foundation elements simultaneously.
The integration of foundation elements into each platform is up to individual development teams. The design team will assist by providing the necessary documentation and resources to ensure a smooth implementation.
Ensuring integrity and functionality is the priority, with a focus on mitigating risks throughout the process.
What color palette does the core design system use?
The main color palette is the core set of colors that reflect our brand colors within the design system. These colors are used consistently across various elements to establish recognition and visual coherence.
The semantic color palette refers to a set of colors that are assigned specific meanings or purposes within a design system or interface.
The neutral-variants palette is used for the surface colors that define help elements like content areas, cards, sheets, dialogs, and backgrounds.
The extended color palettes
How do I match existing platform colors to those specified in the design system?
A designer will work with your team to define how the colors from the design system may may be used in your product.
Key areas where color matching to a new design system may take place include:
- Layout Areas: Headers, backgrounds, navigation bars, footers.
- Form Elements: Input fields, buttons, dropdown menus, checkboxes, and radio buttons.
- Error Messaging and Alerts: Error messages, warning messages, success messages.
- Borders and Framing: Tables, matrices, grids, dividers.
- Icons and Visual Cues: Iconography for actions and states, interactive elements.
Design system semantic colors should closely resemble current platform colors, with enhancements for accessibility compliance.
Are there guidelines for integrating colors into interface elements (buttons, backgrounds, text)?
Yes, many components have predefined colors for different roles and states. Some use a state layer with opacity to manage states. If your platform doesn't support state layers, absolute hex values can be provided. Reference component files and design tokens are available.
A designer will review and confirm changes at the component, page, or site level.
How should I handle color themes (e.g., light/dark mode) in the legacy platform?
The current core design system is only in light mode, although we will be working towards a dark mode version.
Are there accessibility requirements or considerations for the colors I'm implementing?
The great thing about the core design is that it has been created with accessibility at its core. Color contrast and color pairing, for example have been created, reviewed and assessed to ensure the changes we are making meet the minimum compliance requirements.
However, depending of the sequence, and extent of the updating of a legacy system to the new design system there maybe some areas that require additional attention.
We have created an extensive extended color palette to enable designs to maintain compliance with brand guidelines and accessibility requiremensts.
Some changes may appear ‘harsh?’ Such as some of the changes to borders, input field borders etc but our priority is maintaining functional and compliant consistently across all products. The evolving design system aims to unify all elements into a coherent design language.