Token reference

Every token is optional. Anything left undefined falls through to the defaults below.

Brand

Token	Default	Description
`colorPrimary`	`#3b82f6`	Brand color. Selected states (checked payment-method card, active mode toggle) and the default submit-button background.
`colorPrimaryText`	`#ffffff`	Foreground text or icon placed on top of `colorPrimary`. Used for primary button text and the inner dot of a checked radio.
`colorFocus`	`colorPrimary`	Focus ring color. Falls back to `colorPrimary`. Set to decouple the focus indicator from the brand color (for example, a high-contrast accessibility ring over a muted palette).
`focusRingWidth`	`1px`	Width of the focus ring around inputs and the error outline around invalid fields. Common accessibility-forward values: `2px` or `3px`.

Body text

Token	Default	Description
`colorText`	`#1f2937`	Primary body text, input values, and field labels.
`colorTextSecondary`	`#6b7280`	Helper text, links, mode-toggle buttons, success and info messages. Default fallback for `colorBorderHover`.
`colorTextPlaceholder`	`#9ca3af`	Input placeholder text. Propagates into the secured card fields as well.

Surfaces

Token	Default	Description
`colorBackground`	`#ffffff`	Element and input background.
`colorBorder`	`#e5e7eb`	Default border color for inputs, dividers, and unselected payment-method cards.
`colorBorderHover`	`colorTextSecondary`	Border color on hover for inputs and selectable surfaces. Falls back to `colorTextSecondary`.

Semantic

Token	Default	Description
`colorDanger`	`#ef4444`	Validation errors and danger-state borders and text.
`colorSuccess`	`#16a34a`	Success-state borders and text (for example, the bank-linked confirmation).
`colorWarning`	`#f59e0b`	Warning-state borders and text.

Typography and layout

Token	Default	Description
`fontFamily`	`"UniversalSans", ui-sans-serif, system-ui, -apple-system, sans-serif`	Font stack for all native inputs. Also propagated into the secured card fields.
`spacingUnit`	`4px`	Base spacing unit. Component padding and margin are multiples of this.
`borderRadius`	`6px`	Base radius. `--radius-sm` is `× 0.5`. `--radius-lg` is `min(× 1.5, 24px)` and `--radius-xl` is `min(× 2, 32px)` so very large values do not bulge decorative surfaces past what their containers can hold. Input and button radii are additionally capped at half their height, so `borderRadius: '999px'` cleanly produces pill-shaped inputs and buttons rather than stadium overflow.

Input chrome

Input visuals are tokenized independently from spacingUnit, so adjusting layout-gap density does not also resize input gutters, and vice versa. All optional. Everything except inputBorderRadius falls back to the default below; inputBorderRadius falls back to borderRadius.

Token	Default	Description
`inputHeight`	`34px`	Vertical sizing for inputs, selects, and the secured card fields. Single source of truth.
`inputPaddingX`	`12px`	Horizontal padding inside every input.
`inputFontSize`	`14px`	Input value text size. Also propagated into the secured card fields.
`inputLabelFontSize`	`14px`	Field label text size.
`inputLineHeight`	`1.5`	Line height applied to every input value. Accepts unitless (recommended, scales with `inputFontSize`) or any CSS length. Mirrored into the secured card fields so they stay baseline-aligned with native inputs in the same row.
`inputBorderWidth`	`1.5px`	Input border width.
`inputBorderRadius`	`borderRadius`	Input border radius. Set independently to ship square inputs alongside rounded buttons (or vice versa).

Button overrides

All optional. Each falls back to a brand token when unset.

Token	Falls back to	Description
`buttonColorBackground`	`colorPrimary`	Submit button background.
`buttonColorText`	`colorPrimaryText`	Submit button text color.
`buttonBorderRadius`	`borderRadius × 1.5`	Submit button radius. Set to `999px` for pill buttons.
`buttonHeight`	`inputHeight` (else `40px`)	Submit button vertical sizing. Preserves the historical submit-button height by default. Set explicitly to decouple (for example, compact inputs alongside a taller call-to-action).
`buttonFontSize`	`16px`	Submit button label font size. Independent of `inputFontSize`. The `appearance.size` preset adjusts this default to `14px` (compact), `16px` (normal), or `18px` (large).

Shadows

Shadow tokens live on their own page because they compose across three layers (top-level preset, elevation-scale redefinition, per-element overrides). See Shadows.

Get started

Elements

Options

Events

Theming

Guides

Brand

Body text

Surfaces

Semantic

Typography and layout

Input chrome

Button overrides

Shadows

See also

​Brand

​Body text

​Surfaces

​Semantic

​Typography and layout

​Input chrome

​Button overrides

​Shadows

​See also

Brand

Body text

Surfaces

Semantic

Typography and layout

Input chrome

Button overrides

Shadows

See also