Branding is the step with the best return on effort. Twenty minutes here changes every screen a member ever sees, from the sign-in page to the invoice.
The live preview
The panel on the right shows your changes as you make them. Switch it between desktop and mobile with the icons above it, because members arrive on both and a logo that reads well on a laptop can be unreadable on a phone.
Nothing is public until you save.
Your logo
Upload two versions: one for light mode and one for dark mode. Members choose their own mode, and a dark logo on a dark background disappears.
- Format: SVG or PNG. SVG stays sharp at any size, PNG needs enough pixels.
- Ratio: around 5:1, so a wide logo rather than a square one.
- Size: 1000 x 200 px works well for PNG.
Use a version with a transparent background. A white box around your logo shows up the moment a member switches to dark mode.
If your logo is a square mark with the name beside it, that is the version to upload. A square mark on its own gets lost in a wide space.
Your favicon
The favicon is the small icon in the browser tab. Upload light and dark versions of that too.
- Format: SVG or PNG.
- Ratio: 1:1, so square.
- Size: 512 x 512 px.
Use the mark from your logo, not the full name. At sixteen pixels a word is a smudge, while a single letter or symbol still reads.
Your colours
Four colours, set separately for light and dark mode:
| Colour | Where it shows |
|---|---|
| Primary | Buttons, links, active states, anything you want clicked |
| Text | Body copy across the platform |
| Highlight | Accents that draw attention without being a button |
| Background | The surface everything else sits on |
Primary is the one that matters. Take it from your existing brand, and check it against the background in both modes. A pale yellow that looks smart on white becomes unreadable text on white.
Test both modes before you finish. Dark mode is not an afterthought here, and a colour that only works in one of them will look broken to half your members.
Typography
Pick one font for the whole platform. The list holds faces that load quickly and read well on screen at small sizes, which is most of what your members do.
A neutral face is usually right. Your logo carries the character; the body text carries the words.
Beyond branding
The tabs across the top of the design page go further:
- Layout for the shape of the member area.
- Login & Registration for the sign-in screen.
- Loading Screen for what shows while a page loads.
- Community for the community header.
- Courses for the course header.
- Video Player for the controls on your videos.
Branding first. The rest is worth a look once your logo and colours are in place.