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

# Brand Kit

> Style every survey in an app from the dashboard — colours, typography, shape, and branding — with no code changes.

The **Brand Kit** lets you match the in-app survey modal to your brand without
shipping a new app build. It is **project-scoped**: every survey in the selected
app inherits the kit. Open it from **Settings → \[your app name] → Brand Kit**
(`?tab=brand`).

Changes are delivered to the SDK in the survey response and applied on top of
the base theme preset, so they take effect on the next survey shown — no app
update required.

## What you can set

**Appearance** sits above the tabs — choose **Light**, **Dark**, or **Auto**
(follow the device's system setting). See [Dark mode](#dark-mode) below.

<Tabs>
  <Tab title="Colours">
    Primary, background, surface, primary text, secondary text, and border.
    Each colour can be left on **Preset**, which inherits the value from the
    SDK theme preset so you only override what you need.

    Use the **Light / Dark** switch at the top of the tab to edit each scheme's
    palette independently. The dark palette applies in **Dark** and **Auto**
    modes; colours left on **Preset** there fall back to Insito's dark defaults.
  </Tab>

  <Tab title="Typography">
    Font family, question size (S/M/L), body size (S/M/L), and question weight
    (Regular/Medium/Bold). Typography is shared across light and dark.
  </Tab>

  <Tab title="Style">
    Spacing density (Compact/Default/Spacious), corner radius (0–24 px, or
    Preset), and the **Insito branding** toggle. These are shared across light
    and dark.
  </Tab>
</Tabs>

Click **Save Brand Kit** to persist; **Discard changes** reverts to the last
saved kit.

## Dark mode

The **Appearance** control decides which scheme a survey renders in:

| Mode      | Behaviour                                                                                              |
| --------- | ------------------------------------------------------------------------------------------------------ |
| **Light** | Always render the light palette.                                                                       |
| **Dark**  | Always render the dark palette.                                                                        |
| **Auto**  | Follow the device's system appearance and switch live if the user changes it while the survey is open. |

**Auto** is the recommended default and is pre-selected for newly configured
Brand Kits. Existing kits keep their saved value; a kit that was never
configured (or predates dark mode) renders **Light**, so there is no visual
change until you opt in.

Each scheme has its own colour palette (edited from the **Colours** tab's
Light / Dark switch). Any dark colour left on **Preset** uses Insito's built-in
dark defaults. Typography, spacing, radius, and the branding toggle are shared
across both schemes.

## Previewing your Brand Kit

Brand styling is previewed from the **survey builder**, so you always see it
applied to a real survey. Open any survey and use the **Preview** button
(top-right toolbar) — the preview renders with the project's saved Brand Kit.
A **Light / Dark** switch above the device frame lets you preview both schemes.

For quick access, the survey builder toolbar also has a **Brand Kit** shortcut
(the palette icon, next to Settings and Preview) that opens this panel with the
Brand Kit tab already selected. Save your changes, then hit Preview to see them.

## Custom fonts

<Warning>
  A custom **font family** only applies if that font is **already loaded in
  your app** — for example via
  [`expo-font`](https://docs.expo.dev/versions/latest/sdk/font/) or an
  equivalent native font link. The SDK does not bundle or load fonts. If the
  named font is not loaded on the device, React Native silently falls back to
  the system font.
</Warning>

See [SDK theming → Custom fonts](/sdk/react-native/theming#custom-fonts) for a
loading example.

## How it combines with code

The SDK layers styling in this order, last wins:

`base preset` → **Brand Kit (dashboard)** → `init()` overrides

So anything you set in [`MicroSurvey.init({ theme })`](/sdk/react-native/theming)
overrides the Brand Kit for that token. This lets you keep a code-level baseline
while still letting non-engineers tweak colours from the dashboard.

## Plan gating

| Setting                             | Plans             |
| ----------------------------------- | ----------------- |
| Colours, typography, shape, spacing | All plans         |
| Remove "Powered by Insito" badge    | Growth and Studio |

The branding toggle is locked below Growth, and the badge is re-applied
automatically if a plan is downgraded — no re-save needed.