> ## Documentation Index > Fetch the complete documentation index at: https://docs.overflow.co/llms.txt > Use this file to discover all available pages before exploring further. # Token reference > Every appearance token, its default, and what it controls. 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](/payment-elements/theming/shadows). ## See also * [Sizing presets](/payment-elements/theming/sizing-presets) * [Shadows](/payment-elements/theming/shadows) * [Element-scoped overrides](/payment-elements/theming/element-scoped-overrides)