Colors

Most of the rational for the following color system can be found in issue #309.

Color theme

For the app we use the color theme colors for both our own components and the shadcn components which use the theme colors automatically. The theme can mainly be described as "Primay and Grey". All theme colors are shown and explained in the following section. For colors that are only needed sporadically, the standard TailwindCSS colors are used (see last section).

There currently is and for the foreseeable future there will only be a light theme.

All colors

To use the colors they are written in the form row-column, like for example secondary-300, primary or destructive-foreground. Then use them like regular TailwindCSS colors. To set the background to the primary color for example use bg-primary. See the descriptions in the following section for explanations on when to use which color.

Main

Color	Options	Default
primary	50, 100, 300, DEFAULT, 700, 900, 950, foreground
secondary	50, 100, 200, 300, 500, DEFAULT, 600, 700, 800, 900, 950, foreground
muted	DEFAULT, foreground
accent	DEFAULT, foreground
destructive	50, 100, 300, DEFAULT, 700, 900, 950, foreground

Skill

Color	Options	Default
skill1	50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, DEFAULT
skill2	50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, DEFAULT
skill3	50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, DEFAULT
skill4	50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, DEFAULT
skill5	50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, DEFAULT
skill6	50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, DEFAULT
skill7	50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, DEFAULT

Other

Color	Options	Default
background	DEFAULT
foreground	DEFAULT
border	DEFAULT
input	DEFAULT
card	DEFAULT, foreground
popover	DEFAULT, foreground

Which color for which purpose?

• Primary: Used in the traditional sense. Whenever color is needed, the primary color is used. It marks clickable or important objects. The primary color comes in multiple different shades.
• Secondary: The default color is used for filled elements that shouldn't be of the primary color. Buttons of less importance, badges, icons if needed, separator lines, a darker (not dark) color etc. It is supposed to be used as a background color only, not a text color. Use secondary-foreground for text. More generally the secondary color and all its shades should be used if a gray color is needed. If a muted color is needed for text refer to the muted-foreground color. This will always be a very desaturated color (grey at the moment).
• Accent: Used for interactive elements: Hovers, selected dropdown items, etc. Here too, accent is only used for the background, accent-foreground for text. If a muted color is needed for text refer to the muted-foreground color. This will always be a very desaturated color (grey at the moment).
• Muted: Used for inactive or less important elements. If it is less prominent than secondary, used muted (they only differ in their foreground color anyways). muted-foreground should be used for grey / lighter text.
• Destructive: Used as the name implies for elements and actions related to destructive events or errors. The destructive color comes in multiple shades.

---

• Skill: Use as skill1, skill2, ..., skill7 to indicated the skill level / stick frequency that a user is achieving for a stickable. Note that there is no hyphen between skill and the number. This is done intentionally to allow for different shades of each color.

---

• Background / Foreground: Used as the standard background and foreground (/text) colors for the entire app.
• Border, Input, Card, Popover: Their names speak for themselves. Please ask or open an issue if clarification is needed here.

What if I need more colors?

If more colors are needed than the ones listed above and they don't need to be consistent across the entire app simply use the predefined TailwindCSS colors. A list of all of them with their names can be found here.

If another color is needed which needs to be consistent across the entire app we are open to adding one more color to the theme. For now we think that having just one color is serving us fairly well but if you disagree feel free to open an issue after reading #309.