Every appearance setting, explained

Zendo lets you design the whole client portal, not just swap a logo: the colours, the background behind everything, the surfaces your clients read on, the frame around the portal, the sidebar, the top bar, the buttons and fields, the dialogs, and the contrast between them, separately for light and dark mode. This article goes through every setting on Settings › Brand › Appearance, section by section. A client theme uses exactly the same settings, so everything here also applies to Create a client theme.

Start from a preset

Choose a theme preset, at the top of the page, opens a gallery of 60 colour palettes, each in four styles, so 240 complete looks in all:

Filter the gallery by Styles and by Palette: Neutral, Cool or Warm. Most popular at the top is a good place to start. The moon icon shows every preset in dark mode before you pick it. A preset fills in all the settings below, and you can then change any of them.

General

Color mode

• Allow clients to switch between light and dark mode — gives clients the light and dark switch in their top bar.
• Default mode — Light or Dark, used when a client has not chosen a mode themselves.

Typography

• Font family — DM Sans, Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Work Sans, Source Sans 3, Merriweather or Playfair Display. Merriweather and Playfair Display are serif fonts, for an editorial look; the rest are clean sans-serif fonts.
• Font size — Small, Default or Large, for the whole portal.

Light and Dark

The Light and Dark tabs have the same sections. Your team and every client who switches mode will see the other one, so dark mode needs a look too, but you do not have to build it by hand.

Dark mode from light

The Dark tab starts with Generate dark mode from light. With it on, Zendo works out the whole dark look from your light one, and dark mode follows every change you make on the Light tab. Turn it off when you want to fine-tune dark mode yourself: the fields are filled with the generated values, and you change them from there. Most workspaces can leave it on; turn it off when, for example, your brand has a dark version with its own accent colour.

Accent color

The colour of primary buttons, highlights and other accent elements: the colour your clients will remember as yours. Pick one of eleven tuned colours, from Charcoal and Iris to Plum and Gold, or enter your brand colour in Custom color.

Links

Link color gives links their own colour, independent of the accent colour. The arrows next to it set the link colour back to one that matches your accent.

Background

The background behind the entire portal, visible through any surface that is not fully opaque.

• Type — Solid for a colour, or Image for a picture of your own.
• Color — for a solid background, the colour. Leave it empty to use the default.
• Image — for an image background, upload a large, high-resolution picture. Add an Overlay color with an Opacity, and a Blur, to tint or soften the picture so text on top stays easy to read. Set the opacity to 0 to leave the picture as it is.
• Gradient overlay — lays a soft gradient over the background. Choose the Gradient type, Blobs or Circles, and two Gradient colors.

Page surface

The surface the content sits on: cards, panels and lists.

• Background color, Opacity and Text color. Cards take this colour exactly; on a near-white page, the space beneath the cards is a step darker, so the cards stand out. Lower the Opacity to let the background show through, for a glass-like look.
• Advanced — every shade below is generated from the text colour and the contrast. Set one to use an exact colour instead, or clear it to generate it again.
• • Content depth — how much the content area differs from the header strip. At 0% they share the same shade.
  • Neutral fills — four grey fills with their own opacity: Subtle for header strips, Default for striped rows, Strong for info boxes and Bold for grey chips.
  • Avatars — the background of an avatar without a picture.
  • Scrollbar — the Handle and the Track of every scrolling list.

Portal frame

The border and outer styling around the whole portal: the border Color, Opacity and Width, a Shadow, and the Corner radius. Rounder corners and a shadow make the portal look like a floating app window; a square frame without a shadow makes it look like a classic web page.

Sidebar

By default the sidebar takes the page surface. Turn on Use custom sidebar styling to give it its own look:

• Background color, Opacity and Text color.
• Sidebar background image — a picture behind the sidebar. The recommended size is 720 × 1350 px.
• Advanced — the colours of headings and dividers, of default items (icon and arrow), of items under the cursor (background, text, icon and arrow), and of the selected item (background, text and icon), each with its own opacity. They are generated from the sidebar text colour and the contrast until you set one.

Top bar

The top bar is transparent, so you choose the colour of its icons and text: Automatic picks the best contrast, Match sidebar and Match page follow those colours, and Custom lets you set one.

Controls

Fields, cards, buttons and other things people click on. For Control background and Control text color, Inherit takes the surface the control sits on, Automatic sets the control a step apart from it, and Custom uses your colour.

Dialogs and menus

Dialogs, menus and pop-ups that open over the page, with the same three choices for Dialog background and Dialog text color. Preview a dialog shows one with your settings.

Contrast

Low, Default or High sets the strength of borders, dividers and hover states. The text itself does not change. High helps people who find faint lines hard to see.

See every change before you save it

With Live preview on, the settings pages themselves take on the look as you change it: the sidebar, the surfaces and the buttons around the form show the result straight away. Nothing changes for your team or your clients until you select Save. To see the result on a real client's account, use View as client. See View the portal as a client.

What else shapes the look

• Logos, favicon and app icon are on Settings › Brand › Identity. See Put your logo, favicon and app icon in place.
• The sign-up and login pages have their own settings on Settings › Brand › Sign-up & login. See Set up the sign-up and login pages.
• A different look for one client or client team is a client theme. See Create a client theme.
• Anything beyond these settings can be done with your own CSS. See Add your own CSS and JavaScript.

Related

• Set your workspace appearance
• Create a client theme
• Put your logo, favicon and app icon in place
• Set up the sign-up and login pages
• Add your own CSS and JavaScript

Updated on: 09/11/2026