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

# Branding

> Customize the design and branding of your member web portal, member mobile app, and emails, including your logo, logotype, accent color, background, font, style, corners, and shadow

You can customize your [member web portal](/docs/member-web-portal), [member mobile app](/docs/member-mobile-app/customize), and the emails Spacebring sends to match your brand, including your logo, colors, font, and style.

## Upload your logo and logotype

1. Go to [Spacebring](https://app.spacebring.com/) as an [owner](/docs/administration/owners).
2. On the left-side panel, click your network name top left > **Network settings**.
3. Go to **General** > **Branding**.
4. Click **Logo** and upload a square image, 512 × 512 px (1:1 ratio), in JPEG, PNG, AVIF, or WebP.

   <Info>
     The logo always appears on the login page, the browser tab favicon, the member web portal shortcut icon, web push notifications, and the emails Spacebring sends. Avoid text or small details, since the favicon shrinks it to 16 × 16 px, and leave room around important details, since a border radius of up to 100% applies in some places.
   </Info>
5. Click **Logotype** and upload a wider image, with a recommended height of 256 px (width scales automatically), in the same formats. The logotype replaces the logo in the member web portal header and on invoice, credit note, and receipt PDFs. Leave it empty to show the logo in those places instead.

<Frame>
  <img src="https://mintcdn.com/spacebring/-phPsVlkqnq1kdZD/images/general-branding-upload-your-logo-and-logotype.png?fit=max&auto=format&n=-phPsVlkqnq1kdZD&q=85&s=51895c50e1777b85e198f809f358fe12" alt="Member web portal logo on an invoice, the app welcome screen, and a browser tab" width="1690" height="536" data-path="images/general-branding-upload-your-logo-and-logotype.png" />
</Frame>

<Info>
  The member mobile app uses neither your logo nor your logotype. It has its own app icon, which you [upload separately](/docs/member-mobile-app/customize#update-icons-for-member-mobile-app) as an SVG foreground graphic.
</Info>

## Set the theme

1. Go to **General** > **Branding** and click **Theme**.
2. Change each setting. Each change appears in the preview immediately.
3. Switch the preview between **Landing page** and **Portal pages**, and between **Light** and **Dark**, to check every result.

<Frame>
  <img src="https://mintcdn.com/spacebring/-phPsVlkqnq1kdZD/images/general-branding-set-the-theme.png?fit=max&auto=format&n=-phPsVlkqnq1kdZD&q=85&s=8e10c5ccc22944905f23fc334fa047bf" alt="Theme editor with the landing page preview in dark mode" width="2816" height="1518" data-path="images/general-branding-set-the-theme.png" />
</Frame>

* **Accent color** — the color of key interface elements, such as icons and buttons. Applies to the member web portal, the member mobile app with its next release, and the emails Spacebring sends.
* **Background top color** and **Background bottom color** — the gradient behind the main page. Set both or neither, or click **Reset to default** for a white background with dark text. Apply to the member web portal and the member mobile app.
* **Font** — the font of all text. Pick **System** to use each reader's own device font, or one of more than a thousand [Google Fonts](https://fonts.google.com/). Applies only to the member web portal.
* **Style** — how much of your accent color the interface uses, and where. Leave it on **None** to keep the standard Spacebring look. Applies only to the member web portal.
* **Corners** — how rounded buttons, cards, and images are. **Follow the style** keeps the corners of your style. Applies to the member web portal and the emails Spacebring sends.
* **Shadow** — how far cards and panels stand off the page. **Follow the style** keeps the shadow of your style. Applies only to the member web portal.

4. Click **Save** to apply all changes at once, or **Cancel** to discard them.

<Tip>
  The member web portal and the member mobile app automatically follow the theme of the user's browser or device. To switch between light and dark mode, users update the **Appearance** setting in their browser preferences, or the **Personalization** section in their device settings.
</Tip>

<Tip>
  In addition, you can customize the [landing page](/docs/member-web-portal/customize-landing-page) of your member web portal and serve it from your own [custom domain](/docs/member-web-portal/custom-domain).
</Tip>