Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Every appearance token, its default, and what it controls.
| 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. |
| 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. |
| 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. |
| 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. |
| Token | Default | Description |
|---|---|---|
fontFamily | "UniversalSans", ui-sans-serif, system-ui, -apple-system, sans-serif | Font stack for all native inputs. The name propagates into the secured card fields, but custom @font-face declarations do not — pick a system-installed face for the closest match inside those 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. |
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). |
| 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). |
Was this page helpful?