Colors

Base palette

The base palette is our source of truth. Every color in the product is built from these primitive tokens, organized into three groups, each on a 00 → 100 scale (00 is neutral, 10 is the lightest tint, 100 is the darkest shade):

• Brand — primary, secondary, tertiary, and neutral. These are the core brand colors and grayscale used across the interface.
• Action — success, error, warning, info. Used to give users feedback about whether something is correct, risky, or informational.
• Support — support/01 through support/04. Extra colors used for secondary elements like tags or labels, not for primary actions or brand moments.

If a color needs to change tone or gets corrected, it should be updated directly in the Primitive Tokens (found under Variants in Figma), not overridden locally.

Semantic variables

Variables are reusable, named references to base colors. Instead of picking a raw hex value, use the variable that matches the intent, so if the underlying token changes, everything using it updates automatically.

Text colors

Variable	Maps to	Usage
text-primary	brand/neutral/100	General text, tables, and content.
text-secondary	brand/primary/100	Titles and menus.
text-tertiary	brand/neutral/60	Input placeholders or lower-contrast text.
text-inverted	brand/neutral/00	On darker backgrounds, typically buttons and hovers.
text-accent	brand/primary/70	To give priority to a piece of text, or for links.
text-error	action/error/50	To tell the user about a mistake.
text-warning	action/warning/60	To tell the user about a warning.
text-success	action/success/50	To confirm a successful action.
text-info	action/info/50	For a message with important information.

Border colors

Variable	Maps to	Usage
border-primary	brand/neutral/30	Default color for inputs and cards.
border-secondary	brand/neutral/40	Typically used on hover.
border-brand	brand/primary/50	Accent color, typically for active states.
border-error	action/error/50	For errors on inputs.
border-success	action/success/50	For success on inputs.