Branding

.md

The design, background, fonts, name, logos, colours, login page and status page, so the platform looks like yours and not like ours.

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.

DesignWhat it is
StandardLight 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.
TacticalAlways 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 - OGThe 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 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, 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 green and red whatever your brand colour is.

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. 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:

ColoursFields
Brand colourBrand colour, Text on brand colour
SurfacesBackground, Panels, Sidebar, Lines
TextText, Secondary text
Gains and lossesGains, 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.

A background is made for one mode, 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.

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.

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:

GroupFields
GeneralPrimary, Text on primary, Background, Text, Card, Card text, Hover, Hover text
SidebarBackground, 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 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 for the whole screen.

Limits

FieldLimit
Platform name100 characters
Logo, dark logo2 MB, any image except SVG
Favicon2 MB, ICO, PNG, JPG or WebP
Login picture5 MB, any image except SVG
Status logo, dark logo, favicon2 MB, same formats as above
ColoursHex, #rrggbb or #rrggbbaa
Logo corner radius0 to 50
Login label40 characters, per language
Login heading / introduction100 / 300 characters
Login bullets5, each 50 / 150 characters
Status heading / description100 / 300, per language
Status link URL / label255 / 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 for how your branding reaches email, and Features for what else the platform does.