# Appearance

Pass `appearance` to `Percents.init(...)` to align the SDK with the issuer host page.

```ts
Percents.init({
  container: '#percents-widget',
  sessionEndpoint: '/api/percents/session',
  appearance: {
    displayName: 'Branded Rewards',
    logoUrl: 'https://issuer.example.com/logo.svg',
    primaryColor: '#0079d2',
    accentColor: '#028a00',
    fontFamily: "Gilroy, 'Gilroy Regular', ui-sans-serif, system-ui",
  },
});
```

| Field | Description |
|  --- | --- |
| `displayName` | Name shown in the SDK header. Defaults to `Branded Rewards`. |
| `logoUrl` | HTTPS image URL shown beside the display name. |
| `primaryColor` | Six-digit hex color for primary actions and selected states. |
| `accentColor` | Six-digit hex color for secondary emphasis and highlights. |
| `fontFamily` | CSS font-family string applied inside the iframe. |


To apply a new appearance after mount, call `destroy()` on the current SDK instance and initialize a new one.

Try the fields in the [SDK Playground](/percents-api/embedded-widget/playground).