**Branding** in your admin sidebar holds five screens, in the order a trader
meets what they set: **Designs** for the look of the whole platform,
**Appearance** for the background behind the trader app, the panels, the
corners and the fonts, **Global** for your name, logos and colours, **Login
screen** for the first page a new trader sees, and **Status page** for your
public status page.

Everything is applied the moment you save, across your whole environment,
without a deploy and without us. There is no draft and no publish step.

You need the `view_branding` permission to open these screens and
`manage_branding` to save them. Without the second you see every screen and
preview, but no save.

Each screen has a preview on the right that follows what you type, and a list
of warnings under it for things that will not look the way you expect. A
warning never stops a save. It is there so you find out before a trader does.

## Designs

The design decides how the whole platform is drawn: every trader screen, every
admin screen and the login page. Your name, logos and colours carry over to
whichever one you pick.

| Design   | What it is                                                                                                                                                                    |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Standard | Light and dark, in warm neutral greys or a palette of your own. Your brand colour marks what matters: the page you are on, the main buttons and the charts. Every firm starts here. |
| Tactical | Always dark, square corners, monospaced labels, and a sidebar and header of its own. It takes its accent from your dark-mode primary colour and nothing else of your palette. |
| Propper - OG | The design the platform launched with: light and dark, rounded and calm, with your colours on the surfaces, the sidebar and the accents. Pick it to keep this look while Standard changes. |

The designs stand in a list, each with a small picture of it in your own name,
logo and colours. Pick one, with the mouse or the arrow keys, and it is drawn
large beside the list. Standard is drawn as your trader app on a desktop or a
phone, or as your admin panel, in light or dark, on the background, panels,
corners and fonts you set under **Appearance**, even while you run another
design. Propper - OG is drawn in light or dark, Tactical always dark.

Under the list the screen goes through every Branding setting and says whether
the picked design uses it, uses it partly or leaves it alone, with a line on
why where it is not simply used. Each setting leads to the screen where it is
made. Beside it stand the warnings for that design, each with a way to Global
where it is fixed, and how many traders and people on your team a switch
reaches.

Standard takes your **brand colour** from the palette every design shares, and
has a palette of its own for its surfaces and text, set on **Global**. The
background, card, text and sidebar colours Propper - OG uses are ignored, so a
colour picked for one look never has to work in the other. Both palettes stay
saved, and each design picks its own up again the moment you switch.

For Tactical the list matters more:

- It uses only your **dark-mode primary** colour. Background, card, text and
  sidebar colours are ignored, because Tactical draws its own surfaces.
- It shows your **dark logo**, and your light logo only when there is no dark
  one, which then sits on a dark background.
- Its status page uses your primary colour, not the status accent you set on
  **Status page**.

Switching is instant for every trader and admin at once, and nothing is lost:
switching back restores exactly the previous look. The save button in the bar
at the bottom names the design it switches to, and once it is saved the screen
opens again in that design.

A design made for your firm alone shows up here next to these three. If we
retire a design you are on, it keeps working until you pick another, after
which it can no longer be chosen.

### In the older designs

Propper - OG and Tactical keep the Designs screen they launched with: the
designs as cards with a picture on top, the list of what the selected design
uses below them, and a preview in light or dark beside it. What can be chosen
and what a switch does are the same.

## Appearance

What sits behind the trader app, how the panels lie on it, how round the
corners are and which fonts the platform is set in: an image or a looping video
with its focal point and still, glass or solid panels, five corner sizes, and a
text and a figures font from a list or your own. Only the standard design uses
it. See [Appearance](/docs/platform/admin/appearance) for the whole screen.

## Global

One page with your name, your colours and your logos, and beside it, from a
wide enough window, a drawing of your trader app on a desktop or a phone, or of
your admin panel, in exactly what the form holds. It is set on the background,
panels, corners and fonts from [Appearance](#appearance), and the rest of the
admin panel takes the colours too while the page is open. Under the drawing
stand the warnings, each a link to the field that fixes it, and how many
traders and people on your team see all of this.

The line above the title says how you are set up now: your brand colour or
preset, which logos you have and whether you have a favicon.

Saving sends only what you changed. A colleague who saved another colour, or a
logo, in the meantime keeps it.

### Name

Your platform name, shown in the sidebar, in your emails and wherever a trader
sees who they trade with. Up to 100 characters, counted as you type.

### Colours

You can start from a preset: Monochrome, blue, green, purple, red, orange,
teal, pink or amber. A preset sets your brand colour and the text on it for
light and dark mode in one click, and that is enough for most firms. Your other
colours stay as they are.

Monochrome means no brand colour at all, so everything that would carry one is
drawn in the ink of the text, black in light mode and white in dark. Picking a
coloured preset afterwards brings the colour back.

In Standard your brand colour marks where you are and what you can press: the
section you are in, the selected tab, primary buttons, links, counts and the
lines and bars of every chart. Statuses stay neutral, and gains and losses keep
their own colours whatever your brand colour is.

**Gains** and **Losses** colour every result in Standard: amounts, the journal,
the order book, and in the terminal chart the candles, the volume and the lines
of positions, stops and targets. A trader who picks other candle colours in the
chart's settings keeps them, and **Standard** there goes back to yours. OG and
Tactical keep the chart's own green and red.

The brand colour is shared by every design, and the login page, the status page
and your emails take it from there too. Tactical uses only the dark-mode one,
see [Designs](#designs). Colours are hex, `#rrggbb`, or `#rrggbbaa` for
transparency.

A **Light** and **Dark** switch above the colours picks the mode you edit, and
moves the drawing to that mode with it. Each mode has ten colours, each on its
own line with what it colours:

| Colours          | Fields                                 |
| ---------------- | -------------------------------------- |
| Brand colour     | Brand colour, Text on brand colour     |
| Surfaces         | Background, Panels, Sidebar, Lines     |
| Text             | Text, Secondary text                   |
| Gains and losses | Gains, Losses                          |

Leave a field empty and Standard keeps its own colour, which the swatch and the
field show with the word Standard beside it, or Automatic for the brand colour
and the text on it. Hover fills, menus and input borders follow from the
colours you set. Without a brand colour, Standard draws its buttons in your
text colour. **Back to the standard palette** empties one mode in one click and
leaves the brand colour alone.

With a background for one mode only, that background decides the mode for every
trader, so the drawing shows it only behind the colours of that mode and says so
when you look at the other. The other mode is still used wherever the background
is not: the admin panel, and the trader app while the background is off. With a
background for each mode on [Appearance](/docs/platform/admin/appearance), both
modes show their own.

**Import and export** under the presets moves a whole palette in or out as JSON.
**Export** saves the colours the form holds now, both modes, as a file named
after your platform. **Import** takes such a file, or the same text pasted, and
shows the colours of each mode before they go into the form. A mode in the file
replaces that mode, a colour it leaves out goes back to the standard, and a mode
it leaves out stays as it is. Nothing is saved until you save, and Discard takes
it back.

**Create with AI** writes a prompt to copy into the AI you use, such as ChatGPT,
Claude or Gemini. It names your platform, the look you describe in one line,
your current brand colour, what each colour paints and the contrast the screen
checks, and asks for the answer in exactly the format Import reads. Nothing is
sent to an AI from the screen itself.

```json
{
  "format": "propper-palette",
  "version": 1,
  "light": {
    "primary": "#1e3a8a",
    "primary-foreground": "#ffffff",
    "background": "#f7f5ef",
    "card": "#fffdf8",
    "sidebar": "#f1ede3",
    "border": "#e4ddcc",
    "foreground": "#14171f",
    "muted-foreground": "#5d6470",
    "up": "#0f7b6c",
    "down": "#c2410c"
  },
  "dark": { "primary": "#d4a843", "...": "the same ten keys" }
}
```

Import also reads `#abc` shorthand and an answer wrapped in a sentence or a code
block, and names any key it skipped.

The screen warns when text on the background, the panels or the sidebar drops
below a contrast of 4.5 to 1, when secondary text, gains, losses or the text on
your brand colour drops below 3 to 1, and when the brand colour is set for one
mode only. Clicking a warning about a colour opens its mode and puts you in the
field. A colour the server refuses marks its mode on the switch.

### Logos and favicon

Three images, all optional. Each row shows the image where it will sit, and a
file can be dropped on the row or uploaded:

- **Logo for light mode**, drawn on your own light sidebar.
- **Logo for dark mode**, drawn on your own dark sidebar.
- **Favicon**, drawn on a browser tab next to your platform name, and converted
  to a multi-resolution ICO for you.

A picked image shows straight away in its row and in the drawing, and Undo takes
it back before you save. Remove takes a saved image away when you save, and
Keep it changes your mind.

:::warning Upload a light logo first
The platform shows your dark logo only next to a light one. With no light logo
at all, traders see the Propper mark drawn in your brand colour, even when a
dark logo is uploaded. Upload both, or at least the light one.
:::

**Corner rounding** rounds the corners of your logo, from 0 to 50 percent.
Useful when your logo is a square mark and the interface around it is rounded.

PNG or WebP with a transparent background gives the best result. SVG is not
accepted: an SVG can carry script, and these files are served from your own
domain. A file of the wrong kind or over 2 MB is refused as you pick it, before
anything is sent.

### In the older designs

Propper - OG and Tactical keep the Global screen they launched with: cards for
the name, the presets, the palette and the logos, and a preview of a trader
dashboard in light or dark beside them. Its presets start at blue rather than
Monochrome. Its palette is the one those designs paint with, every surface set
individually, in light and dark mode separately:

| Group   | Fields                                                                         |
| ------- | ------------------------------------------------------------------------------ |
| General | Primary, Text on primary, Background, Text, Card, Card text, Hover, Hover text |
| Sidebar | Background, Text, Active item, Active item text, Hover, Hover text, Borders    |

You do not have to fill all of them. A field you leave empty shows a hatched
swatch in the colour the platform uses instead. When you set **Primary** and
leave the rest empty, the platform derives the sidebar active colour, the hover
tints and the focus ring from it. Anything you set yourself always wins over
what was derived.

That screen warns when the primary colour is set for one mode only, when there
is none at all (buttons and links then stay grey), and when the text on your
primary colour drops below a contrast of 3 to 1.

## Login screen

The panel beside the sign-in and register forms, which is the first thing a
prospective trader sees of your firm: a label, a heading and an introduction,
for every language at once or per language, up to five bullets or none, and a
picture behind them with its focal point and darkness. The screen also offers a
logo the page is missing. See [Login screen](/docs/platform/admin/login-screen)
for the whole screen.

## Status page

Your public status page, which traders check when something seems down: where
it lives, at `/status` on your domain and at a status subdomain of its own, its
heading, description and link for every language at once or per language, its
own logos and favicon, and the colour of each level. See
[Status page](/docs/platform/admin/status-page) for the whole screen.

## Limits

| Field                           | Limit                         |
| ------------------------------- | ----------------------------- |
| Platform name                   | 100 characters                |
| Logo, dark logo                 | 2 MB, any image except SVG    |
| Favicon                         | 2 MB, ICO, PNG, JPG or WebP   |
| Login picture                   | 5 MB, any image except SVG    |
| Status logo, dark logo, favicon | 2 MB, same formats as above   |
| Colours                         | Hex, `#rrggbb` or `#rrggbbaa` |
| Logo corner radius              | 0 to 50                       |
| Login label                     | 40 characters, per language   |
| Login heading / introduction    | 100 / 300 characters          |
| Login bullets                   | 5, each 50 / 150 characters   |
| Status heading / description    | 100 / 300, per language       |
| Status link URL / label         | 255 / 50, label per language  |

## Things worth knowing

**Removing an image deletes it.** Removing an image and saving deletes the file
from storage, and replacing one deletes the old file. Keep your own copy of your
logo.

**Uploaded images are resized.** Logos are fitted to 800 by 800, the login
picture to 1920 by 1080 and the Appearance background to 2560 by 1600.
Upload something at least that size for a sharp result. Videos and fonts are
stored as they are.

**Leaving with unsaved changes asks first.** Every screen counts your unsaved
changes in the bar at the bottom, and navigating away offers to save, discard
or stay.

Related: [Mail design](/docs/platform/admin/mail-design) for how your branding
reaches email, and [Features](/docs/platform/features) for what else the
platform does.