Color Tokens - Primer

Primer Checkout Android SDK is currently in beta (v3.0.0-beta). The API is subject to change before the stable release.

Two classes define all color tokens:

LightColorTokens — open class with 16 base tokens and 26 semantic tokens for light mode
DarkColorTokens — extends LightColorTokens, overrides 15 base tokens for dark mode. Semantic tokens resolve automatically through inheritance.

Base tokens (16)

Override these to change foundational colors. All semantic tokens resolve through these.

Token	Light	Dark	Purpose
`primerColorBrand`	`#2F98FF`	`#2F98FF`	Primary brand color
`primerColorGray000`	`#FFFFFF`	`#171619`	Lightest gray (background base)
`primerColorGray100`	`#F5F5F5`	`#292929`	Very light gray
`primerColorGray200`	`#EEEEEE`	`#424242`	Light gray
`primerColorGray300`	`#E0E0E0`	`#575757`	Medium-light gray
`primerColorGray400`	`#BDBDBD`	`#858585`	Medium gray
`primerColorGray500`	`#9E9E9E`	`#767577`	Gray
`primerColorGray600`	`#757575`	`#C7C7C7`	Medium-dark gray
`primerColorGray900`	`#212121`	`#EFEFEF`	Darkest gray (text base)
`primerColorRed100`	`#FFECEC`	`#321C20`	Error background
`primerColorRed500`	`#FF7279`	`#E46D70`	Error accent
`primerColorRed900`	`#B4324B`	`#F6BFBF`	Error text
`primerColorGreen500`	`#3EB68F`	`#27B17D`	Success accent
`primerColorBlue500`	`#399DFF`	`#3F93E4`	Info accent
`primerColorBlue900`	`#2270F4`	`#4AAEFF`	Link color
`primerColorBorderTransparentDefault`	transparent	transparent	Transparent border base

Semantic tokens (26)

Resolve through base tokens. Override only when you need a specific mapping to change.

Text colors

Token	Resolves to	Purpose
`primerColorTextPrimary`	`primerColorGray900`	Main text
`primerColorTextSecondary`	`primerColorGray600`	Labels, descriptions
`primerColorTextPlaceholder`	`primerColorGray500`	Input placeholders
`primerColorTextDisabled`	`primerColorGray400`	Disabled text
`primerColorTextNegative`	`primerColorRed900`	Error messages
`primerColorTextLink`	`primerColorBlue900`	Clickable links

Background

Token	Light	Dark	Resolves to	Purpose
`primerColorBackground`			`primerColorGray000`	Primary background

Border colors (outlined)

Token	Resolves to	Purpose
`primerColorBorderOutlinedDefault`	`primerColorGray300`	Default input border
`primerColorBorderOutlinedHover`	`primerColorGray400`	Hovered input border
`primerColorBorderOutlinedActive`	`primerColorGray500`	Active input border
`primerColorBorderOutlinedFocus`	`primerColorFocus`	Focused input border
`primerColorBorderOutlinedDisabled`	`primerColorGray200`	Disabled input border
`primerColorBorderOutlinedError`	`primerColorRed500`	Error input border
`primerColorBorderOutlinedLoading`	`primerColorGray200`	Loading input border
`primerColorBorderOutlinedSelected`	`primerColorBrand`	Selected item border

Border colors (transparent)

Token	Light	Dark	Resolves to	Purpose
`primerColorBorderTransparentHover`	transparent	transparent	`primerColorBorderTransparentDefault`	Hovered
`primerColorBorderTransparentActive`	transparent	transparent	`primerColorBorderTransparentDefault`	Active
`primerColorBorderTransparentFocus`			`primerColorFocus`	Focused
`primerColorBorderTransparentDisabled`	transparent	transparent	`primerColorBorderTransparentDefault`	Disabled
`primerColorBorderTransparentSelected`	transparent	transparent	`primerColorBorderTransparentDefault`	Selected

Icon colors

Token	Resolves to	Purpose
`primerColorIconPrimary`	`primerColorGray900`	Default icon
`primerColorIconDisabled`	`primerColorGray400`	Disabled icon
`primerColorIconNegative`	`primerColorRed500`	Error icon
`primerColorIconPositive`	`primerColorGreen500`	Success icon

Utility

Token	Light	Dark	Resolves to	Purpose
`primerColorFocus`			`primerColorBrand`	Focus ring
`primerColorLoader`			`primerColorBrand`	Loading indicator

Customization

Override base tokens by extending LightColorTokens or DarkColorTokens:

val theme = PrimerTheme(
    lightColorTokens = object : LightColorTokens() {
        override val primerColorBrand: Color = Color(0xFF6C5CE7)
    },
    darkColorTokens = object : DarkColorTokens() {
        override val primerColorBrand: Color = Color(0xFFA29BFE)
    },
)

Changing a base token affects all semantic tokens that reference it.

​Base tokens (16)

​Semantic tokens (26)

​Text colors

​Background

​Border colors (outlined)

​Border colors (transparent)

​Icon colors

​Utility

​Customization

Base tokens (16)

Semantic tokens (26)

Text colors

Background

Border colors (outlined)

Border colors (transparent)

Icon colors

Utility

Customization