Design announcement banner

moderneinc / moderne-docs

Moderne SaaS documentation as Gitbook contents

https://docs.moderne.io

2 stars 2 forks source link

Design announcement banner #146

Closed mike-solomon closed 2 weeks ago

mike-solomon commented 2 weeks ago

Right now, at the top of our docs, we have an announcement banner for the code remix summit:

Jonathan requested that we improve the colors of this. I can update the text color, background color, and I can add HTML inside of it to change the colors of the individual letters such as in:

LindsayAuch commented 2 weeks ago

@mike-solomon

Taking the gradient background from the branding and applying that to the background color. https://docs.google.com/presentation/d/1yi8Ld7rwEPreu-07V7X9CSROFdJfdPypsEWlwb9UT4k/edit?usp=sharing

Hex #44A0DB and #194EFD

See the example from this website that does the same background treatment

Example dark mode and light mode versions

mike-solomon commented 2 weeks ago

@LindsayAuch Thanks for the suggestions!

Unfortunately, that is quite difficult to read and fails accessibility standards on the lighter end of the spectrum: https://webaim.org/resources/contrastchecker/

Can you please suggest some more accessible colors?

For perspective - here are the current colors which are fine:

LindsayAuch commented 2 weeks ago

How about #b12ade and #2546f0?

https://venngage.com/tools/accessible-color-palette-generator

mike-solomon commented 2 weeks ago

Thanks @LindsayAuch - that's much better.