> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useroutr.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Branding

> Your logo and colour on every checkout, hosted or embedded, with no code.

Set your brand once and every checkout for your application wears it: the hosted page and the
embedded component alike.

## In the dashboard

Open **Settings → Branding**. Upload a logo, pick a colour from the presets or enter any hex
value, and watch the live preview update before you save. Labels on your colour switch between
white and dark automatically so they stay readable.

## With the SDK

```ts theme={null}
import { readFile } from "node:fs/promises";

await useroutr.applications.update(applicationId, { brand_color: "#1d4ed8" });

const application = await useroutr.applications.setLogo(
  applicationId,
  await readFile("logo.png"),
  "image/png",
);

application.branding; // { brand_color: "#1d4ed8", logo_url: "https://..." }
```

`brand_color` accepts `#rgb` or `#rrggbb` and is returned as lower-case `#rrggbb`. Send `null`
to go back to the Useroutr default. Remove a logo with `useroutr.applications.removeLogo(id)`.

### Logo rules

| Rule | Limit |
| - | - |
| Format | PNG, JPEG or WebP, read from the file itself. SVG is not accepted. |
| Size | Up to 256 KB |
| Dimensions | 64 to 1024 pixels on each side. Square reads best. |

A renamed file is refused with `LOGO_FORMAT_UNSUPPORTED`, and one outside the size limits with
`LOGO_DIMENSIONS_INVALID`. Uploading the logo you already have changes nothing, and a new logo
gets a new URL, so an old cached logo is never shown in its place.

## For one embedded checkout

`appearance` on the [React checkout](/payments/embedded-checkout) overrides your saved branding
for that checkout only. Each option replaces just its own part, so passing only `radius` keeps
your colour and logo.

```tsx theme={null}
<UseroutrCheckout
  token={token}
  appearance={{
    brandColor: "#1d4ed8",
    logoUrl: "https://cdn.example.com/logo.png",
    radius: "round",
    fontFamily: "Inter",
  }}
/>
```

| Option | Accepts | Changes |
| - | - | - |
| `brandColor` | `#rgb` or `#rrggbb` | Buttons, selection, focus, links and progress |
| `logoUrl` | an `https:` or `data:image/` URL | The mark in the header |
| `radius` | `"sharp"`, `"default"` or `"round"` | Corners of the panel, cards, rows and buttons |
| `fontFamily` | a font family name | Text. Load the font on your page; the checkout never downloads one |

A value the checkout cannot use is ignored, so a mistake keeps the default instead of breaking
the payment screen.

<Note>
  Success, failure and warning colours never follow your brand. A user should never read a pending
  or failed payment as complete because your colour happens to be green.
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.