New color palette suggestion

[annavik]

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;

[egrace479]

Thanks @annavik! This looks really nice :)