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. The same row switches the preview between light and dark mode and opens it in Full Screen.
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, anything you want clicked |
| Text | Body copy across the platform |
| Highlight | The active menu item, the selected tab and other 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.
When you change the primary colour, a note offers to Match the background to your primary color. Apply adds 2% of your primary colour to the page background, which ties the surface to your brand without changing how it reads.
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 sans-serif, serif, monospace, display and handwriting faces. For body text at small sizes, which is most of what your members read, a sans-serif or serif face works best.
A neutral face is usually right. Your logo carries the character; the body text carries the words.
Member avatars
Member Avatars sets the shape of member and user avatars across the platform: Round or Square. Square suits a brand with sharp corners, round is the familiar default.
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 the animation that shows while the platform starts up.
- 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.