A well-designed page has a clear button hierarchy: one primary action that dominates (the thing you most want users to do), secondary actions that support (alternative paths), and tertiary actions that exist but should not compete (cancel, dismiss, learn more). Color is the fastest way to communicate this hierarchy.
Primary Buttons
Your primary CTA uses your primary brand color as a solid fill with white or light text. It should be the most visually prominent interactive element on the page. This is the "Add to Cart," "Sign Up," "Get Started" button. Only one action per page section should get this treatment.
Secondary Buttons
Secondary buttons use an outlined style: a border in your primary or neutral color with transparent or light background. The text matches the border color. This treatment says "I am interactive and important, but not THE most important thing here." Use for "Learn More," "View Details," "Compare Plans."
Tertiary Buttons
Tertiary buttons look like text links with minimal or no button styling: no background, no border, just colored text (often your primary color or a muted gray). Use for "Cancel," "Go Back," "Skip," and other low-priority actions. They should be findable but never attention-grabbing.
The Color Mapping
From your PaletteRx palette: Primary buttons use --color-primary as background. Secondary buttons use --color-primary as border and text. Tertiary buttons use --color-primary or muted text color. The same primary color drives all three levels, differentiated by how it is applied (fill vs. border vs. text).