# Make the app look like yours

Source: https://docs.meetscarlet.com/your-app-look/
Updated: 2026-11-05

Everything about how your app looks lives in Your app in the admin. The phone beside the editor shows your real app as your members will see it, so you can try a change before you save it.

[Screenshot: The Your app editor: light or dark, name, icon, color, font and tabs on the left, a phone preview of the app on the right.]

Your app has three sections at the top: Design for everything on this page, Web app for your web address and your own domain, and Publish for the App Store and Google Play. Owners and managers can use it.

## Light or dark

Appearance, at the top of the editor, sets whether your app is light or dark for your members:

- Match phone: light when a member's phone is set to light, dark when it is set to dark. New apps start here.

- Always light or Always dark: the same for every member, whatever their phone is set to.

- Members choose: each member picks Light, Dark or Match phone in Me. Until they pick, it follows their phone.

Your color, font and tabs stay the same in both. To see your app the other way, use Preview as above the phone (see [Preview and save](#save)).

> Good to know: Members see the new setting the next time they open your app, in the web app and in the store apps from the App Store and Google Play alike. No app update is needed.

## Name and icon

The App name is the full name, up to 30 characters. The Short name, up to 12 characters, is the label under the icon on a phone's home screen.

For the icon, choose Upload icon and pick a square PNG, 1024 by 1024 pixels, with no rounded corners. The App Store doesn't allow transparency, so on iPhone any transparent areas are filled with the brand color saved when you upload. If you change your color later, upload the icon again.

The icon can be up to 4 MB. It saves the moment you upload it: the tile shows your icon at once, dimmed while it uploads, then Saved appears under it. That is separate from Save changes, so Discard changes doesn't undo it; upload another to replace it. A file that isn't a PNG, or isn't exactly 1024 by 1024 pixels, is refused with the reason. You can upload up to 10 icons an hour.

> Good to know: A new name shows inside your app like colors, fonts and tabs: in about a minute on the web, and in the store apps the next time members open them. Your web app's icon changes within a few minutes. The name under the icon on members' phones, the icon in the store apps and your App Store and Google Play listings change with your next app build, after a day or two of store review.

## Color

Pick one of the ready-made colors, or type your own as a hex code (like #0B6E4F) under Or a custom color. Buttons, links and highlights in your app use it.

Buttons in your app have white text, so your color has to be dark enough for white text to be easy to read: a contrast of at least 4.5 to 1, the usual accessibility rule. Under the colors, the editor says whether white text is easy to read on the color in use.

A custom color that is too light is refused with its own number, for example “That color is too light for white text: 1.5 to 1, and it needs 4.5 to 1.” Most pastels are, such as blush pink, sage, sky blue and lavender. Under it, the editor offers the closest shade of your color that passes, with the same hue, just darker: choose Use with that code to put it in the field and on the phone. The phone keeps your last good color until then, and you can't save while the field holds a refused or invalid code. To go back, clear the field or choose a ready-made color.

[Screenshot: The custom color field holding #F4C2C2, refused: That color is too light for white text: 1.5 to 1, and it needs 4.5 to 1. Under it, The closest shade that works: #986B6C, with a Use #986B6C button. The save bar says The custom color you typed is not saved.]

## Heading font

Choose one of five fonts for your app's headings. Body text is always Inter, so the app stays easy to read.

## Tabs

Your app has up to five tabs along the bottom. Home and Me are always on (Me is where members manage their account, which Apple and Google require). Pick up to three more from the tabs offered for your kind of business, such as Book, Pass or Shop. Messages is always offered.

Your starting tabs and the tabs you can add depend on the kind of business you chose when you made the studio. Change them at any time.

> Not yet: Courts shows as Book in the app for now, and Book is where members book courts, so a court club can keep the Courts tab it started with. Wash is saved with your app but not shown to members yet. The editor marks both.

## Preview and save

1. **Try it on the phone** Change anything on the left and the phone updates. Use the tab names above the phone to see each screen. Preview as switches the phone between Light and Dark, and 125% text shows it as a member with larger text on their phone sees it. These only change the preview, not your app. On a phone, choose Preview your app to see the preview, and Back to editing to return.

1. **Save** Choose Save changes. Colors, light or dark, fonts and tabs are live in about a minute on the web. Store apps update the next time members open them, with no app update.

[Screenshot: The phone preview of a branded app at phone width.]