Color
Brand & primary
Text colors
Border colors
Icon colors
Border radius
Spacing
Size
Typography
Font family
Title X-Large
The quick brown fox jumps over the lazy dog
Title Large
The quick brown fox jumps over the lazy dog
Body Large
The quick brown fox jumps over the lazy dog
Body Medium
The quick brown fox jumps over the lazy dog
Body Small
The quick brown fox jumps over the lazy dog
Border width
Animation
Hover to see animation
Input styling tokens
The hosted input components (primer-input-card-number, primer-input-card-expiry, primer-input-cvv, primer-input-card-holder-name) share a common set of CSS variables for consistent styling. These properties are applied via the primer-input-wrapper component which provides the visual structure.
Input structure
All input components use these tokens for their visual appearance:Input state colors
Inputs respond to user interaction with different visual states:Border width by State
Border widths change based on interaction state to provide visual feedback:Animation
All state transitions use consistent animation:Example: customizing input appearance
Button styling tokens
Every button Primer Checkout renders — payment method buttons, the card form’s submit button, and the confirm button inside expandable payment methods like Klarna — reads itsborder-radius from --primer-radius-button.
Only buttons read
--primer-radius-button. Containers, dialogs, inputs, and the Klarna category list read --primer-radius-medium/--primer-radius-small directly and are unaffected by it.