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.

	50	100	200	300	400	500	---	600	700	800	900	950	foreground
Main
primary
secondary
muted
accent
destructive
Skill
skill1
skill2
skill3
skill4
skill5
skill6
skill7
Other
background
foreground
border
input
card
popover

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 in the future. At the moment only the main shade is needed but if end up needing more shades during the development, feel free to add them (just have them be consistent and properly named, according to their shade).

---

• 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.