Colors

PermaplanT uses the following color palettes:

• Neutral (PermaplanT: gray): dominant color of the design, e.g., used for background, text and labels.
• Primary (PermaplanT: #7ea15e, similar to asparagus green): PermaplanT's main brand color, e.g., used for call-to-action buttons, checkmarks, highlighting focused form input fields, hovering over icons, highlighting active/enabled icons in the toolbox.
• Secondary (PermaplanT: #007499, similar to sea blue): PermaplanT's second brand color, e.g., used for highlighting selected plants on the map, currently focused icons, spinners, action-texts in the guided tour and bigger UI elements like the transparency bars to have some contrast to the primary color.
• Tailwind's default color palette for red is e.g. used to render validation errors in forms, form field asterisks (text-red-500), buttons for destructive actions.

Only those color palettes should be used throughout the whole application. The colors are stored within frontend/src/styles/globals.css the Tailwind CSS color definitions primary, secondary and neutral. They can be accessed like any other defined color in Tailwind CSS and can be appended with a number denoting the shade to be used.

Following shade suggestions should be used as a starting point for coloring new UI components: