Establish UI color scheme

[abettermap]

Description

Create a color palette around which to base the theme. This does not refer to map symbology, which is complex and dynamic and will therefore have its own issues and considerations largely unrelated to the UI choices.

Related items

Online tools

...in case we don't have something to start from.

• https://coolors.co/
• https://color.adobe.com/
• https://material-ui.com/customization/color/ (specifically this)

Resolution

Existing references

Theming is easiest if there's some kind of baseline to start from. Thoughts/questions:

• Is there a logo we can start from?
• Should theme match ELA site (purple/yellow)?
• languagemapping.org is largely black and white (complex colored image doesn't count, too many colors for a theme)

Considerations

Primary/secondary color should be harmonious in MUI palette (also here).

[abettermap]

Another handy Material color tool that belongs in the list: https://material.io/resources/color/#!/

[rperlin-ela]

Just to reiterate what may have been clear over Zoom... Neither elalliance.org nor languagemapping.org has a very up-to-date locked-down visual identity, so there's considerable latitude here. We can certainly draw on the ELA color palate if we agree that works for this, but no need to be limited by it.

[abettermap]

Ok good to know. Does Bridget have any skill with colors and/or fonts? If so, would she be able to provide any input?

If not, I did find the MUI color palette page I was looking for. The "palette" is referred to by the color name (e.g. blueGrey), so if any of those say "linguistic diversity map" to you then we could just roll with that. Just need a secondary palette color to go along with it. For reference, the two I'm using in the style guide are blueGrey and brown.

I think it's possible to deviate from those palettes, but Google really thought their whole design system through, not to mention all the MUI components are based around those palettes. Even subtle things like button color on hover is automatically set to a desirable tone that's based on the palette.

[abettermap]

@rperlin-ela How do these colors look? I was wrong about MUI color limitations and it’s actually easy to customize. The green-ish is a slightly darker shade than your print map and the red-ish is slightly darker than its complimentary color.

[abettermap]

Could technically use primary 24/7 but a second color might keep it livelier. Open to ideas either way.

[rperlin-ela]

I don’t have the sharpest eye for color, but I like it and feel the continuity with the print map, and the red-ish feels complementary.

…

On Jul 9, 2020, at 3:22 PM, Jason Lampel ***@***.***> wrote:  @rperlin-ela How do these colors look? I was wrong about MUI color limitations and it’s actually easy to customize. The green-ish is a slightly darker shade than your print map and the red-ish is slightly darker than its complimentary color. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.