Good color naming makes your project easy to maintain and hand off. Here are the conventions used in your template and how to follow them consistently.

The Naming Structure

Color variables are named using a Category/Role pattern. The category comes first (Brand, Text, Background, Border), then a slash, then the specific role (Primary, Secondary, Muted, Subtle).

Common Categories in Your Template

• Brand/ — Your identity colors. Primary is the most prominent, Secondary is complementary.

• Text/ — All text colors. Primary for headings/body, Muted for captions/metadata, Inverse for text on dark backgrounds.

• Background/ — Page backgrounds, section backgrounds, card backgrounds.

• Border/ — Colors for dividers, outlines, and input borders.

• Status/ — Feedback colors: Success (green), Warning (amber), Error (red), Info (blue).

💡 Tip: Never name colors after their visual appearance (like "Blue" or "Light Gray"). Name them by their purpose (like "Brand/Primary" or "Background/Subtle"). This way, if you change the color, the name still makes sense.