Secondly, contrasts that are good for

[sadiksojib35]

Muted colors . In a dark theme, shades are perceived differently. If you keep them in their original form, the eye will strain. Think about the colors of bright elements in advance.
When we were creating the color profile, we encountered several nuances.

First, it is not enough to assign hierarchy to colors at the expense of transparency. This complicates the development process because some elements are translucent and overlap each other. Example: a pop-over in an illustration. If it were transparent, the elements underneath would be visible, but the user would not be able to read anything.


This is what a clear shade looks like. It helps keep text under latvia whatsapp phone number pop-up interface elements from interfering with the perception of information.


A light theme are irritating in a dark one. That is why we did not overuse pure white and black colors, creating a gradation of shades.
For example, three levels were identified for text: high emphasis (for main elements with opacity of 70-100%), low emphasis (for footnotes and tooltips with opacity of 30-50%), and inactive state (15-20%).

The color gradation palette is the result of dozens of hours of testing. It will help you not to waste a lot of time on choosing the right shade of this or that interface element



Step 2: Break the app into locations and transfer the dark theme to the layouts
A color profile is like a theory in a design textbook. It may look good until you start coding. So the next step is to transfer the design concept to specific groups of screens and see how it will look in practice.

Break all screens into locations and write a roadmap . A location is a group of screens from one section. They should have been saved in Figma or on the platform where the light theme was laid out.

Divide the total number of screens into such groups and start applying different color profile options to each. Don't forget to write down a roadmap of work with the deadlines for each location to be ready for the next stage - testing.

Send it to designers for testing . These are not live tests yet: we had them during designer calls, where they looked at screens and made edits.

Give it to engineers for layout . Once you've made the final edits, you can send it to layout. But that's not the end of it. We've divided layout teams into four areas: iOS, Android, mobile, and desktop.



List of items to pay attention to when transferring a color profile to an application
Background :

main background of the application;
background for modal windows, tooltips and other overlay elements;
background for lists, cards and other content containers.
Text :

main text;
secondary text (subheadings, descriptions);
text of links and active elements;
placeholder text;
text on buttons.
Icons :

basic set of icons;
icons on buttons;
indicator icons (statuses, notifications).
Separators and shadows :

lines and other visual content dividers;
shadows for cards, windows and other elements to create a sense of depth and hierarchy.
Actions :

scrolling behavior (eg dimming);
background and text color for selected text;
sidebar;
active/inactive elements.
Forms :

input field background;
text color, placeholders;
color of input field borders;
Validation error text color.
Buttons :

background of primary and secondary buttons;
text color;
button states (pressed, inactive);
modal windows (modals & popups).
Progress bars and loaders :

background and fill color;
animation.
This is just a small part of the layouts that our designers tested in Figma.