Branding

Every color has a light and dark mode value to allow for 2 themes.

Primary

• Purpose: The strongest visual weight for core actions and brand elements.
• Usage: Primary buttons, main navigation highlights, key calls-to-action.
• Foreground: is the text/icon color on the primary background.

Secondary

• Purpose: Offers a less prominent alternative to primary, providing visual balance.
• Usage: Secondary buttons, badges, subtle backgrounds for less critical elements.
• Foreground: Text/icon color for secondary backgrounds.

Accent

• Purpose: Draws attention to interactive elements, selections, or hover states, adding visual flair.
• Usage: Hover effects on menu items, selected states in lists, highlighting interactive parts.
• Foreground: Text/icon color for accent backgrounds.

Background

• Purpose: The base surface color for the page/app.
• Usage: Main page background, body background, default container background
• Example: White in light mode, dark gray/black in dark mode

Foreground

• Purpose: The default text color used on the background.
• Usage: Primary text content, body text, default text on the background
• Example: Dark text on light background (light mode), light text on dark background (dark mode)
• Think of it as: The "ink" color that's readable on your canvas