New color palette suggestion #59
Description
Background
Related to #57, we are suggesting a new color palette. This palette is using one color from each logo as accent colors (lime and teal), together with a gray scale (slate). The gray scale has a slightly cool tone to match the accent colors. Sticking with a few selected colors could be nice for consistency, however we can use different hues of each color. If we like this palette, the next step would be to apply it in code.
Simple palette
Light mode
CSS colors
/* Light mode colors */
--lime-9: #7eac55;
--teal-9: #245963;
--slate-1: #fcfcfd;
--slate-2: #f9f9fb;
--slate-6: #d9d9e0;
--slate-11: #60646c;
--slate-12: #1c2024;
Dark mode
CSS colors
/* Dark mode colors */
--lime-9: #7eac55;
--teal-9: #245963;
--slate-1: #111113;
--slate-2: #18191b;
--slate-6: #363a3f;
--slate-11: #b0b4ba;
--slate-12: #edeef0;
Full palette
The scale
The full palette is using the Radix UI 12 step scale. This scale describes use cases for each color and is also considering accessibility standards. For example, step 11-12 colors can safely be used for text on step 1-2 backgrounds. More about the scale here.
| Step | Use Case |
|---|---|
| 1 | App background |
| 2 | Subtle background |
| 3 | UI element background |
| 4 | Hovered UI element background |
| 5 | Active / Selected UI element background |
| 6 | Subtle borders and separators |
| 7 | UI element border and focus rings |
| 8 | Hovered UI element border |
| 9 | Solid backgrounds |
| 10 | Hovered solid backgrounds |
| 11 | Low-contrast text |
| 12 | High-contrast text |
Light mode
CSS colors
/* Light mode colors */
--lime-1: #fcfdfa;
--lime-2: #f7faf4;
--lime-3: #e9f7de;
--lime-4: #dbf2ca;
--lime-5: #cbe9b5;
--lime-6: #badca0;
--lime-7: #a4ca85;
--lime-8: #87b65e;
--lime-9: #7eac55;
--lime-10: #73a049;
--lime-11: #567c33;
--lime-12: #2f4022;
--teal-1: #fafdfe;
--teal-2: #f4fafb;
--teal-3: #e7f4f7;
--teal-4: #daedf1;
--teal-5: #cde5ea;
--teal-6: #bedbe2;
--teal-7: #aaced6;
--teal-8: #8bbbc5;
--teal-9: #245963;
--teal-10: #114953;
--teal-11: #3c707a;
--teal-12: #183136;
--slate-1: #fcfcfd;
--slate-2: #f9f9fb;
--slate-3: #f0f0f3;
--slate-4: #e8e8ec;
--slate-5: #e0e1e6;
--slate-6: #d9d9e0;
--slate-7: #cdced6;
--slate-8: #b9bbc6;
--slate-9: #8b8d98;
--slate-10: #80838d;
--slate-11: #60646c;
--slate-12: #1c2024;
Dark mode
CSS colors
/* Dark mode colors */
--lime-1: #0f120d;
--lime-2: #161914;
--lime-3: #21281b;
--lime-4: #2a371f;
--lime-5: #344526;
--lime-6: #3f532e;
--lime-7: #4b6337;
--lime-8: #58743f;
--lime-9: #7eac55;
--lime-10: #73a049;
--lime-11: #9ac872;
--lime-12: #d1ecbd;
--teal-1: #0a1314;
--teal-2: #111b1d;
--teal-3: #102b30;
--teal-4: #0b3840;
--teal-5: #12454e;
--teal-6: #1e545d;
--teal-7: #296672;
--teal-8: #327e8c;
--teal-9: #245963;
--teal-10: #174952;
--teal-11: #7dc7d6;
--teal-12: #bbeaf4;
--slate-1: #111113;
--slate-2: #18191b;
--slate-3: #212225;
--slate-4: #272a2d;
--slate-5: #2e3135;
--slate-6: #363a3f;
--slate-7: #43484e;
--slate-8: #5a6169;
--slate-9: #696e77;
--slate-10: #777b84;
--slate-11: #b0b4ba;
--slate-12: #edeef0;