> For the complete documentation index, see [llms.txt](https://passion-io.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://passion-io.gitbook.io/help/shape-how-your-app-looks/set-your-brand-look.md).

# Set Your Brand Color and Look

Pick one brand color and a style, check the result on your live app, then save — and add the icon your app shows on the stores.

> **Design** is available on certain plans and app types. If you don't see it in your sidebar, please check our pricing page for more information.

## In This Article

* [Pick Your Brand Color](#pick-your-brand-color)
* [Choose a Style](#choose-a-style)
* [Save Your Look](#save-your-look)
* [Add Your App Icon](#add-your-app-icon)
* [See What's New in Your App](#see-whats-new-in-your-app)

## Pick Your Brand Color

1. In the sidebar, select **Design**.
2. Under **Look**, in **Color**, pick a swatch, use the color picker, or type a hex value such as #3B5BDB.

You only choose one. Studio derives the rest of the palette from it — background, cards, text, captions, button text, and dividers — so buttons, links, and accents stay in step with each other.

To set those six colors yourself, select **Every color** and change any of them. Picking a new brand color later replaces the six with a fresh set.

Choose the color your audience already associates with you. If you're unsure, take the one from your logo.

## Choose a Style

A style sets your app's typeface and corner style together. Under **Style**, pick one:

* **Classic** — Roboto with the standard Passion corners.
* **Editorial** — IBM Plex Serif with square corners.
* **Soft** — Inter with rounded corners.
* **Modern** — Bai Jamjuree with rounded corners.

Each tile is drawn in its own look and your brand color, so you can compare them before you choose.

To pick them yourself, select **Custom**. **Typeface** (Roboto, Bai Jamjuree, IBM Plex Serif, Literata, or Inter) and **Corners** (**Square**, **Rounded**, or **Default**) then appear.

Read a lesson screen after you change the typeface. A typeface that looks good in a heading is not automatically comfortable for three paragraphs of instruction.

## Save Your Look

Color and style changes are applied when you save. Until then, only the phone beside the rail shows them, with the line "Previewing unsaved changes · clients still see the saved look".

1. Check the result on the phone. It shows your live app at its web address.
2. At the top of the page, select **Save** (or press ⌘S, Ctrl+S on Windows). The count beside it, such as "Look · 2 unsaved changes", tells you what is waiting.

If you leave **Design** without saving, your unsaved changes are dropped and your app keeps its saved look.

## Add Your App Icon

The app icon is the square tile your app shows on the App Store, Google Play, and a member's home screen.

1. Under **Look**, in **App icon**, select **Icon** and choose an image. Use a square image of 512px or more.
2. Crop the image to the square. Keep important details away from the edges, because the corners get rounded on a real device.

The icon saves at once. You don't need to select **Save**.

## See What's New in Your App

At the bottom of **Design**, select **See what's new** to see what the new member app does for your members. See [See What's New in Your Member App](/help/shape-how-your-app-looks/see-whats-new-in-your-app.md).

## Related

* [Choose Your App's Screens](/help/shape-how-your-app-looks/choose-your-app-shape.md)
* [Set Up Your App's Basics](/help/run-your-account/set-up-your-app-basics.md)

For more assistance, please contact us.