​
Overview

The library comes with a comprehensive theming system that allows you to customize the look and feel of all components to match your brand. The theme is built on a small set of core semantic tokens that control foundational styles like colors and typography. These are inherited by more specific component tokens used to style individual UI elements. This page provides a complete reference for all available theme tokens. For a guide on how to apply a theme, see the React Components page.

​
Semantic Tokens

Semantic tokens are the foundational variables for the theme. By customizing this small set of tokens, you can quickly and easily apply a new theme across all components.
TokenDescriptionDefault value
Backgrounds
colors-bg-defaultDefault page and input background#ffffff
colors-bg-alternateAlternate backgrounds (e.g. cards)#eef0f3
colors-bg-contrastA contrast color mixed with other backgrounds to generate default hover and pressed states.colors-fg-default
colors-bg-overlayOverlay UI (e.g. modals).colors-bg-alternate (33% alpha)
colors-bg-skeletonLoading placeholders.colors-fg-default (10% alpha)
colors-bg-primaryPrimary brand background (e.g. CTA)#0052ff
colors-bg-secondarySecondary background (e.g. secondary CTA)#eef0f3
Text
colors-fg-defaultDefault text color#0a0b0d
colors-fg-mutedMuted/placeholder text#5b616e
colors-fg-primaryPrimary action text (e.g. links)#0052ff
colors-fg-onPrimaryText on primary backgrounds#ffffff
colors-fg-onSecondaryText on secondary backgrounds#0a0b0d
colors-fg-positiveSuccess messaging text#098551
colors-fg-negativeError messaging text#cf202f
colors-fg-warningWarning messaging text#ed702f
Borders
colors-line-defaultStandard borders (e.g. dividers)#dcdfe4
colors-line-heavyInput borders#9397a0
colors-line-primaryFocus/active borderscolors-fg-primary
colors-line-positiveSuccess state borderscolors-fg-positive
colors-line-negativeError borderscolors-fg-negative
Typography
font-family-sansSans-serif font family"Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
font-family-monoMonospace font family"DM Mono", monospace
font-size-baseBase font size16

​
Component Tokens

Component tokens can be overridden individually for more fine-grained control over your theme. While most theming can be accomplished by updating the semantic tokens, these component-level overrides allow for more specific customizations.
TokenDescriptionDefault value
Page
page-bg-defaultPage background colorcolors-bg-default
page-border-defaultPage border colorcolors-line-default
page-text-defaultPage text colorcolors-fg-default
page-text-mutedPage muted text colorcolors-fg-muted
CTA Primary
cta-primary-bg-defaultPrimary CTA background colorcolors-bg-primary
cta-primary-bg-hoverPrimary CTA hover background colorcolors-bg-primary mixed with 15% colors-bg-contrast
cta-primary-bg-pressedPrimary CTA pressed background colorcolors-bg-primary mixed with 30% colors-bg-contrast
cta-primary-border-focusPrimary CTA focus border colorcolors-line-primary
cta-primary-text-defaultPrimary CTA text colorcolors-fg-onPrimary
cta-primary-text-hoverPrimary CTA hover text colorcolors-fg-onPrimary
CTA Secondary
cta-secondary-bg-defaultSecondary CTA background colorcolors-bg-secondary
cta-secondary-bg-hoverSecondary CTA hover background colorcolors-bg-secondary mixed with 10% colors-bg-contrast
cta-secondary-bg-pressedSecondary CTA pressed background colorcolors-bg-secondary mixed with 20% colors-bg-contrast
cta-secondary-border-focusSecondary CTA focus border colorcolors-line-primary
cta-secondary-text-defaultSecondary CTA text colorcolors-fg-onSecondary
cta-secondary-text-hoverSecondary CTA hover text colorcolors-fg-onSecondary
Link Primary
link-primary-text-defaultPrimary link text colorcolors-fg-primary
link-primary-text-hoverPrimary link hover text colorcolors-fg-primary mixed with 15% colors-bg-contrast
link-primary-text-pressedPrimary link pressed text colorcolors-fg-primary mixed with 30% colors-bg-contrast
Link Secondary
link-secondary-text-defaultSecondary link text colorcolors-fg-default
link-secondary-text-hoverSecondary link hover text colorcolors-fg-default mixed with 10% colors-bg-contrast
link-secondary-text-pressedSecondary link pressed text colorcolors-fg-default mixed with 20% colors-bg-contrast
Input
input-bg-defaultInput background colorcolors-bg-default
input-border-defaultInput border colorcolors-line-heavy
input-border-focusInput focus border colorcolors-line-primary
input-border-errorInput error border colorcolors-line-negative
input-border-successInput success border colorcolors-line-positive
input-label-defaultInput label text colorcolors-fg-default
input-placeholder-defaultInput placeholder text colorcolors-fg-muted
input-text-defaultInput text colorcolors-fg-default
input-errorText-defaultInput error text colorcolors-fg-negative
input-successText-defaultInput success text colorcolors-fg-positive
Select
select-label-defaultSelect label text colorcolors-fg-default
select-trigger-bg-defaultSelect trigger background colorcolors-bg-default
select-trigger-bg-hoverSelect trigger hover background colorcolors-bg-default mixed with 5% colors-bg-contrast
select-trigger-bg-pressedSelect trigger pressed background colorcolors-bg-default mixed with 7% colors-bg-contrast
select-trigger-border-defaultSelect trigger border colorcolors-line-default
select-trigger-border-focusSelect trigger focus border colorcolors-line-primary
select-trigger-border-errorSelect trigger error border colorcolors-line-negative
select-trigger-border-successSelect trigger success border colorcolors-line-positive
select-trigger-placeholder-defaultSelect trigger placeholder text colorcolors-fg-muted
select-trigger-text-defaultSelect trigger text colorcolors-fg-default
select-trigger-errorText-defaultSelect trigger error text colorcolors-fg-negative
select-trigger-successText-defaultSelect trigger success text colorcolors-fg-positive
select-list-bg-defaultSelect list background colorcolors-bg-default
select-list-border-defaultSelect list border colorcolors-line-default
select-list-border-focusSelect list focus border colorcolors-line-primary
select-list-border-errorSelect list error border colorcolors-line-negative
select-list-border-successSelect list success border colorcolors-line-positive
select-list-item-bg-defaultSelect list item background colorcolors-bg-default
select-list-item-bg-highlightSelect list item highlight background colorcolors-bg-default mixed with 10% colors-bg-contrast
select-list-item-text-defaultSelect list item text colorcolors-fg-default
select-list-item-text-mutedSelect list item muted text colorcolors-fg-muted
select-list-item-text-onHighlightSelect list item highlighted text colorcolors-fg-default
select-list-item-text-mutedOnHighlightSelect list item highlighted muted text colorcolors-fg-muted
Code
code-bg-defaultCode block background colorcolors-bg-alternate
code-border-defaultCode block border colorcolors-line-heavy
code-text-defaultCode block text colorcolors-fg-default
  • CDP Web SDK Documentation: Comprehensive API reference for the CDP Web SDK
  • End User Authentication: Deep dive into authentication methods, error handling, and advanced patterns
  • React Hooks: Learn about available hooks like useSignInWithEmail, useEvmAddress, and useSendEvmTransaction
  • React Components: Explore pre-built components for authentication, wallet management, and transactions
  • React Native: Build mobile apps with Coinbase Developer Platform (CDP) embedded wallets
  • Wagmi Integration: Use CDP wallets with the popular wagmi library for Ethereum development
  • Security & Export: Learn about private key export security considerations and implementation