A color palette is a selection of colors that are used throughout the UI design of an app. It provides supports the logotype in creating a visual identity for the brand and enhances consistency throughout the app.
Primary Color
Blue is the primary color within Mosaic. It often provides users with a sense of calmness, stability and encourages productivity. As Mosaic provides users with guidelines to build projects based on their needs, using blue as the primary color of Mosaic provides a space for users to grow without feeling pressured.
Primary Color
Black is used throughout Mosaic to support in enhancing formality and elegence throughout the app. As the target audience are users who will use this app as a guideline throughout their process of creating projects, its essential to provide the user with trust everytime they are using the app.
Secondary Colors
Yellow is less prominent throughout the app, but it reinforces the theme of productivity by symbolizing energy and joy. As users navigate their tasks on Mosaic, subtle reminders of these emotions strengthen the app's identity.
Orange is a vibrant color that complements yellow in fostering a positive and energetic experience for users on Mosaic. Additionally, it helps highlight key sections throughout the app, enhancing visibility and engagement.
Green is a calming and motivational color. With Mosaic focusing on portfolio creating, its essential for the user to keep being motivated throughout the process. Therefore the subtle use of green serves as reminder to the user of their growth and potential.
Purple represents creativity and imagination. As Mosaic provides users with a good roadmap to creating projects, its important to motivate the user to think outside of the box and build unique projects that will support them in their career.
White is used to support a clean and simple design. It is also used as the background throughout the app to provide contrast.
Color Blind Palette
A variation of the original color pallete was created in order to cater to users with color blindness.
Click here to view screen exampleAccessibility
Accessibility
Yellow is less prominent throughout the app, but it reinforces the theme of productivity by symbolizing energy and joy. As users navigate their tasks on Mosaic, subtle reminders of these emotions strengthen the app's identity.
The combination of black and white meets accessibility requirements. Its significant it is used to in components for navigation throughout the app , such as navigation. This components are essential for users to complete tasks.
The combination of yellow and black meets the accessibility requirements. It is essential to create enough contrast so all readers can clearly find the key pins within the pages that are not in paragraphs.
The combination of orange and black meets the accessibility requirements. It is used in small chips to highlight the main topic of projects therefore its important to create good contrast as it dominant information.
The combination of green and black meets the accessibility requirements. Contrast is essential as it distinguishes key tags for the user within each project.
The combination of blue and white meets accessibility requirements. Its significant it is used to create emphasis on sections of pages and highlight the main theme throughout the app.
The combination of black and warm orange meets the accessibility requirements. Contrast is between these colors is important for users who will be using the color blind mode.
The combination of black and warm blue meets the accessibility requirements. Contrast is between these colors is important for users who will be using the color blind mode.
UI Application
Light Mode Dashboard Screen
Dark Mode Dashboard Screen
Color Blind Mode Dashboard Screen
