# Branding (/en/features/checkout-customization/branding)
Set your default logo, locale, presets, appearance, colors, and font for every checkout your customers see.
The branding settings page is where you control how XPay's customer-facing surfaces look: the hosted checkout page, payment links, and email receipts. Every checkout session inherits these defaults, so a one-time setup applies to every payment your customers make. Per-session overrides are available through the API for cases where you want a single Checkout Session to look different (see the developer-side [Advanced configuration](/integrate/checkout-session/advanced-configuration)).
This page covers the full branding form: logo, default locale, presets, appearance primitives, semantic colors, font, and the live preview pane that updates as you make changes.
## What you can do [#what-you-can-do]
Four one-click presets stamp the full visual identity at once. **Default**, **Minimal**,
**Editorial**, **Neon**. Tweak afterward, then save.
Six primitives control color mode, border style, spacing, form layout, input size, and input
style.
Edit primary, foreground, background, muted, accent, border, input, and more. Auto-derive
contrasting foregrounds with one click.
Set English or Arabic as your default. Customers see the right language without you having to
set it on every session.
## Open the branding settings [#open-the-branding-settings]
In the dashboard sidebar, click your account menu and pick **Settings**, then click **Branding**. The page splits into two panes: the form on the left, a **live preview** on the right that updates with every change you make. Nothing is saved until you click **Save Changes**.
## Logo [#logo]
Click **Upload Logo** in the **Logo** section and pick an image. The logo appears on the hosted checkout page, on Payment Link pages, on customer receipts, and on invoices.
Use the **Replace** button to swap the file or **Remove** to delete the current logo.
## Default locale [#default-locale]
Pick the language customers see when they arrive at a hosted checkout. Three options:
| Option | What it does |
| ------------------ | -------------------------------------------------------------------------------------------------------------- |
| **Auto (English)** | The default. The checkout uses English unless a Checkout Session sets its own `locale`. |
| **English** | Force English on every session that doesn't override. |
| **Arabic** | Force Arabic on every session that doesn't override. The checkout layout flips to right-to-left automatically. |
For per-session overrides (e.g. a French-speaking customer on an otherwise-English account), use the `locale` field on the Checkout Session. See [Advanced configuration](/integrate/checkout-session/advanced-configuration) for the developer surface.
Today, the supported customer-facing languages are **English** and **Arabic**.
## Presets [#presets]
Four one-click presets give you a starting point. Each one stamps the full visual identity at once: appearance, colors, and font. After you click a preset, every field below updates to match. You can tweak any field afterward; nothing is saved until you click **Save Changes**.
| Preset | When to pick it |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Default** | A familiar Stripe-ish look. System color mode, moderate rounding, outlined fields. Reads on both light and dark customer devices. |
| **Minimal** | A modern, editorial single-pane look. Sharp borders, spacious layout, transparent primary. The checkout's hero gradient is removed so the page reads as one surface. |
| **Editorial** | A premium retail look. Light mode, cream surface, sharp edges, serif typography. Forced light because the warm palette is tuned for it. |
| **Neon** | A bold, attention-grabbing look for entertainment, gaming, creator tools, and developer products. Forced dark mode, pill borders, filled inputs, neon green primary, magenta accent, monospace type. |
The preview pane on the right shows what each preset looks like on a sample order with a couple of products and a price summary, so you can compare before saving.
## Appearance [#appearance]
Six primitives control the structural rhythm of the checkout. Every field can be left **Unset** to fall back to the platform default.
| Field | Options | What it controls |
| ---------------- | --------------------------- | ----------------------------------------------------------------------------------- |
| **Color mode** | System, Light, Dark | Whether the checkout follows the customer's OS theme, or always uses light or dark. |
| **Border style** | Rounded, Sharp, Pill | The corner radius on cards, buttons, and inputs. |
| **Spacing** | Condensed, Normal, Spacious | Vertical rhythm between sections. |
| **Form layout** | Compact, Spacious | Whether form fields sit close together or have breathing room. |
| **Input size** | Small, Medium, Large | Field height and padding. |
| **Input style** | Outlined, Flat, Filled | Whether fields use a visible border, no border, or a tinted fill. |
The dashboard hint reads: "Controls the shape and rhythm of the hosted checkout. Unset fields fall back to platform defaults."
## Colors [#colors]
Twelve semantic color tokens, each accepting a hex value (`#RRGGBB`, `#RRGGBBAA`, `#RGB`, or `#RGBA`). Leaving a token blank falls back to a default that's chosen to read in your selected color mode.
| Token | What it paints |
| ---------------------- | ----------------------------------------------------------------------------------- |
| **Primary** | The brand color. Used for the primary button and the checkout's hero gradient. |
| **Primary foreground** | Text and icons on top of the primary color (the **Pay** button label, for example). |
| **Background** | The page background. |
| **Foreground** | Body text and icons on the background. |
| **Muted** | Subtle surfaces (secondary cards, info backgrounds). |
| **Muted foreground** | Text on muted surfaces (less prominent labels). |
| **Accent** | A secondary brand color used for highlights. |
| **Accent foreground** | Text and icons on the accent color. |
| **Border** | Borders on cards and dividers. |
| **Input** | Borders and fills on form fields. |
| **Ring** | The focus ring around inputs and buttons. |
| **Destructive** | Red used for error states and destructive actions. |
### Auto-derive foreground colors [#auto-derive-foreground-colors]
Four foreground tokens (Primary foreground, Foreground, Muted foreground, Accent foreground) carry an auto-derive button. Click it and XPay computes a contrasting value from the matched base color (primary, background, muted, or accent), so labels stay readable without you having to pick a contrast match by hand.
### Transparent primary [#transparent-primary]
A primary color with full alpha-zero (`#00000000`) collapses the hosted checkout's hero gradient. The left pane stops painting its brand-colored background, so the whole page reads as a single neutral surface. Useful for minimalist looks where the brand voice is typography rather than color blocking. The **Minimal** preset uses this trick.
## Font [#font]
The **Advanced** section has a font-family selector with five options:
| Option | What it uses |
| ------------------- | -------------------------------------------------------------------------------------------- |
| **Session default** | No override. The platform's default font stack is used (clears the field). |
| **Inter** | A clean, modern sans-serif. Pre-loaded across XPay surfaces. |
| **System** | The customer's OS font (`system-ui`). Native-feeling on every device. |
| **Helvetica** | A classic Helvetica stack. Falls back to Arial on Windows. |
| **Editorial Serif** | The OS serif stack (`ui-serif`). New York on macOS, Cambria on Windows. Premium retail vibe. |
| **Monospace** | The OS monospace stack. Code-like, technical aesthetic. Used by the **Neon** preset. |
Only system-safe stacks are supported, so the preview always matches what your customers will see.
## Save and reset [#save-and-reset]
The bottom of the page has two buttons:
* **Save Changes** writes everything in the form to your account. The button is disabled until you've made at least one change. A "Saved" toast confirms.
* **Reset Branding** opens a confirmation dialog. Confirming wipes the appearance primitives, colors, and font back to "unset" so every checkout falls back to platform defaults. **Reset doesn't touch the logo or the default locale**, those have their own controls.
If you don't have permission to save, the button is disabled with a tooltip naming the missing permission.
## Where to next [#where-to-next]
Pick which payment methods appear at checkout, with multiple configurations and a default.
Branding applies to every Payment Link checkout you share.
Override branding, locale, and other defaults on a single Checkout Session through the API.