Skip to content

Brand your app

Applies to Workletto 1.x.

A Workletto install shows your own brand. Two pages under Manage control it, and only admins see them:

Click the picture to zoom in.
Manage, Appearance: logo, accent color and mode, with a preview
  • Settings holds your company name, app name, currency and address.
  • Appearance holds your logo, accent color and light or dark mode.

Everyone in your organization sees what you choose.

Company name, app name, currency and address

Section titled “Company name, app name, currency and address”

Open Manage, then Settings. The Company details section has four fields:

  • Company name. Required, up to 100 characters. It is the name on your invoices, and the sign-in page says “Sign in to” followed by it.
  • App name. Up to 40 characters. It is the name shown at the top of the sidebar and in the browser tab, after the name of the page. Leave it empty to use your company name. With no logo, the sidebar shows it beside a square with its first letter in your accent color.
  • Currency. Your own currency. People’s hourly and cost rates are in it, and so is everything for clients billed in it, which every new client is. A client can be billed in another currency: see Bill a client in another currency. Changing it doesn’t convert amounts you have already entered, and once there are invoices or expenses it can’t be changed: the Currency list is switched off, and the hint under it says “The currency can’t change once there are invoices or expenses.” While clients are billed in other currencies, it stays as it is too. Choose it before you enter any rates.
  • Exchange rates. Shown once a client is billed in another currency: what one unit of each is worth in yours. Only reports use them, to add amounts up; invoices are never converted. Click Save exchange rates after changing one.
  • Company address. Up to 500 characters, on as many lines as you like. It is printed on your invoices.

Click Save settings. Workletto says “Settings saved.” and the new names show straight away. If you try to go to another page before you save, it asks “Leave without saving your changes?” The change is recorded in the history as “Company details”.

Open Manage, then Appearance. Under Logo, click Choose file and pick an image. The logo is saved as soon as you choose it, and appears at the top of the sidebar straight away.

The file must be:

  • A PNG, JPEG or WebP image. A square logo on a transparent background works best: your app name (or, without one, your company name) is shown beside it. A logo at least twice as wide as it is tall is treated as a wordmark and shown on its own, without the name beside it.
  • Up to 1 MB. If it is bigger, Workletto says “That file is over 1 MB. Try a smaller or compressed image.”
  • Between 16 and 4096 pixels on each side.
  • Not an SVG. Workletto says “Choose a PNG, JPEG or WebP image. SVG isn’t supported.”

To take the logo away, click Remove.

Once a logo is uploaded it is also the icon on the browser tab, for the signed-in app and the sign-in page. Without a logo the tab shows a plain clock.

Where the logo shows:

  • At the top of the sidebar, with your app name beside it (or on its own, if it is a wide wordmark). In dark mode it sits on a small white plate, so a dark logo stays visible.
  • On the sign-in page, above the heading.
  • On your invoices, with your company name and address under it. With no logo, an invoice shows your company name instead.

Under Accent color, pick a color with the color picker or type a hex code such as #2b4a78. If what you typed isn’t a color, Workletto says “Enter a color like #2f5bd3.” when you leave the box. Until you choose one, the page says Default; click Reset to default to go back to it.

The accent color is used for buttons, links, the current page and focus outlines. If your color is too light or too dark to read as text in a mode people will see, Workletto adjusts it for links and focus outlines and tells you, for example “To stay readable, links and focus outlines use a darker shade of this color in light mode.” Buttons keep the exact color.

Under Mode, choose System, Light or Dark. System follows each person’s own device setting. Light and Dark show that mode to everyone.

Your choices show across the whole app as you make them, and the Preview section shows a small picture of the result. Nothing is kept until you click Save appearance, which stays off until you change something. Workletto then says “Saved. Everyone in your organization now sees this look.”

Click Undo changes to go back to the saved color and mode. If you leave the page without saving, the saved look comes back. The logo is the exception: it is saved when you choose it.