Hi all,

After spending some time documenting our current overlays (I have documented some of them here but not all), I have detected that we are using different type of overlays in each project, so the first goal with this task would be document all our overlays in only 1 or 2.

As we are currently using light and dark overlays according to each case (view some examples in the Section Translation project) we have the following solutions:

• Option 1: have 2 type of overlays (light and dark) and use them according to the need of each case. This option gives us more range of action in terms of use cases, but is less unified.
• Option 2: have only 1 type of overlay and use it in all cases and themes. My proposal here is to use the dark overlay (Base10 #202122 with 65% opacity) that works both for white and dark themes.

In this Figma you can view both options and the possible overlay use in the different white, dark and yellow themes (in case we want to work on these themes in the future).

What do you think about? cc: @iamjessklein @KieranMcCann @Volker_E @Sarai-WMDE

Thanks for collecting and sharing all the info and proposals, Bárbara. Here are my two cents on the two dimensions being discussed:

Regarding the overlay opacity value: TL;DR: 65%.
The feedback collected recently (design review session) and in the past (during the process to design the Dialog component), seems to indicate that designers agree to find the 50% opacity of Dialog overlays quite low. A slight increase (e.g. the suggested 65%) could help create higher contrast between the foreground layer of the screen and the background, enabling better focus on the task at hand. I'd say we should document that latter, higher value as part of our system opacity tokens. As always, there will be room to iterate (include more values is our opacity palette) in case some flexibility is needed in new/undocumented contexts.

Regarding the overlay color: TL;DR: Unify, and probably make black our default overlay color.
I hope we can aim at being consistent and, as recommended by Option 2, strive to apply 1 general overlay style in all our products and themes. When it comes to which color specifically, I don't have a strong preference. I think that the darker version, though, really enhances contrast and, again, supports clear focus. (It would be ideal to support this assumption with some feedback from users too!). So, black would be my tentative suggestion.
Nevertheless, it would be understandable if we'd want to keep two overlay shades (one being the predominant, the other an exception that can be applied in certain cases: e.g. to allow increasing/ decreasing separation between layers of content). Either we decide to document that now or not (depends on whether we detect clear contexts of use), we'll have to stay open to changes in this dimension too, and make the system accommodate justified alternatives.

Finally, we decided to document in our system the light and dark overlays since both are currently used in our different projects.

According with this decision, we will use the 65% opacity for both light and dark overlays for the following reasons:

• 65% is the best opacity value for all our use cases and also for future theme customizations (50% was too light for overlays and wasn't work well with dialogs)

• 65% opacity works well with both light and dark overlays, so we will have to use one only opacity value for overlays but with different color (avoiding to add more opacity values in our system)

I send you the final proposal and here you can view the Figma file.

If you all agree with this solution I can solve this task and we will document this values in our system opacities. cc: @iamjessklein @Volker_E @Sarai-WMDE