Skip to content
Udibo
Join the waitlist
On this page
View Markdown

Brand your hosted pages

Put your product's name, logo, and colors on the pages where your users sign in and manage their accounts, choose whether those pages come in light mode, dark mode, or both, and send your users back to your application when they are done. This guide covers the branding fields, the rules each one enforces, and how to check the result.

Where your hosted pages live

Your users sign in on your tenant's own host, https://{tenantId}.udibo.com, where {tenantId} is the id in your dashboard URL. Branding applies to the pages that host serves them:

  • Sign-in, including email codes and links, social sign-in, and MFA steps

  • Create account and the waitlist

  • Forgot password, reset password, email verification, and account unlock

  • The consent screen shown for third-party applications

  • The account pages /profile, /security, and /connected-apps

  • /organization-invite, where an emailed organization invitation opens when you have not set a home URL

Custom domains for hosted pages are not available. The pages are always served from your tenant's udibo.com host; branding changes what they show, not their address.

Set branding in the dashboard

  1. Open your tenant in the dashboard, choose Settings, then the Branding tab.

  2. Fill in the fields you want. The preview shows your sign-in page at its real size and updates as you type, including a logo URL you have not saved yet. Switch it between Light and Dark to check each mode; a line under it gives each mode's button-text contrast, or names the color pair that will be refused. When your pages offer one mode, the preview shows only that mode and names it in place of the switch. On a wide screen the preview stays beside the form as you scroll; on a narrow one it sits after the mode fields, above Save branding, and can be collapsed.

  3. Choose Save branding.

  4. Below it, the Links section holds Support URL, Home URL, Privacy policy URL, and Terms of service URL. Choose Save links to save them. Each section saves on its own, so saving one never changes the other.

Saving requires permission to manage tenant settings. Without it, as on the built-in Support role, the tab shows the saved values and offers no save. Each save replaces the whole set, so a field you leave blank returns to its default. Changes appear on the next page load.

  • Display name — shown beside the logo, in the browser tab title, and on the account pages' Back to button. 1–60 characters after trimming, with at least one visible character and no line breaks, invisible characters or text-direction marks. Most emoji work, including country flags, skin tones and keycaps. Emoji built from several joined together, such as 👩‍💻, 🏳️‍🌈 or 🏴󠁧󠁢󠁥󠁮󠁧󠁿, do not. Blank uses the Tenant name from Settings → General. The name is also the label an authenticator app shows for the two-step sign-in a user sets up on your tenant. Changing it does not affect authenticators already set up: their label stays as it was when scanned, and their codes keep working.

  • Logo includes your name — tick it when your logo already spells out your display name. The pages then show the logo alone, and screen readers hear the display name as the logo's text. Without a logo, the name still shows.

  • Color modes — which modes your hosted pages come in:

    • Light and dark, following each visitor's setting (the default). Pages follow the visitor's device, and a theme menu on the account pages lets them choose.

    • Light only or Dark only. Every hosted page, including its error page, is shown in that mode whatever the visitor's device or earlier choice, and the theme menu is hidden. The page arrives in that mode, so it never flashes the other one, even with JavaScript turned off.

    Pick one mode if your own application only has one. The form then hides the other mode's fields. Their saved values are kept, and come back if you offer both modes again.

Each color mode has its own Logo URL, Accent color, and Page background, grouped under Light mode and Dark mode.

  • Light mode logo URL — an absolute https URL to an SVG, PNG, or WebP image you host, ideally with a transparent background. It is shown 32 pixels tall and at most 160 pixels wide: a square mark works best at 64 × 64 pixels or larger, and a wordmark up to five times as wide as it is tall (320 × 64). A wider image is scaled down to fit 160 pixels. Keep it under 100 KB. Blank shows no logo. A logo uploaded for the mode replaces this URL on the pages and in email (upload a logo).

  • Dark mode logo URL — a version that reads on a dark background, often the same mark in white or a lighter tone, shown when a visitor's device is in dark mode. Blank uses your light mode logo in dark mode too, and the dashboard warns you to check that it reads there.

    Beside each logo field, a thumbnail shows the image on that mode's background with its size, a warning when it is wider than 5:1, or an error when it does not load. These are warnings only; nothing about a logo stops a save.

  • Light mode accent color — a six-digit hex color such as #1D4ED8. It fills the main button and draws focus rings when a visitor's device is in light mode. Button text on it is cream, so the color must be dark enough to read that text on. It replaces the default accent; hover and tint shades are derived from it. Blank keeps the default.

    Type the hex value, or pick a color with the swatch beside the field, which fills the value in. The line under each accent field gives the contrast the button text and focus ring reach, or the reason the color will be refused, before you save.

  • Dark mode accent color — the same, for visitors in dark mode. Button text on it is near-black, so the color must be light enough to read that text on. Blank derives one from your light accent: the same hue, lightened until the button text reads. For example, #1D4ED8 derives #3E75FF. The field shows the derived color as its placeholder. With both accents blank, dark mode keeps the default.

  • Light mode page background — a six-digit hex color behind the sign-in card and under the account pages when a visitor's device is in light mode. White is allowed. The card, input, and border colors are derived from it, so you pick one color, not several. Blank uses the default warm canvas.

  • Dark mode page background — the same, for visitors in dark mode. Black is allowed. Blank uses the default dark canvas.

    The text stays the default dark text in light mode and light text in dark mode, so a light mode background must be light and a dark mode background dark. The line under each background field gives the contrast body text, placeholders, and focus rings reach, or names the text the color would make unreadable, before you save. The preview paints the background and the card color derived from it. The sign-in form sits on the exact background at every screen size; from laptop width up, a narrow frame of the derived color surrounds it.

  • Support URL — an absolute https URL. It appears as a Contact support link where a person may have no self-serve way forward: the sign-in page, account creation when sign-up is closed, waitlisted, or has no available method, and the MFA challenge for someone who lost their authenticator and recovery codes. It is also linked from the footer of every email your users receive. Blank shows no link.

  • Home URL — your own application. When nothing asked for the person back, it is where a signed-in person lands and where the account pages' Back to button points. It is also where organization invitation emails link. Blank falls back to a redirect URI origin of your oldest first-party application, and invitation emails open the hosted /organization-invite page instead.

  • Privacy policy URL and Terms of service URL — your own legal documents. Each is linked as Privacy policy or Terms of service below the card on every hosted sign-in, sign-up, waitlist, and consent page, and the waitlist links your privacy policy where it says how a joined address is used. Each must be an absolute https URL of at most 2,048 characters, with no user name or password in it; leading and trailing spaces are removed. Blank shows no link: your hosted pages never link Udibo's own privacy policy or terms in place of yours.

If you have neither a home URL nor a first-party application with a redirect URI, your users have no way back from the account pages. The dashboard's Overview and the Branding tab then show a warning, "Your users have no way back from account pages", with a link to the Home URL field. A third-party application does not count. The warning goes away once you save a home URL, or once a first-party application has an http(s) redirect URI. If you saved a home URL whose origin is no longer registered, the warning says so and asks you to update it; until you do, saving either section of the Branding tab is refused. Without permission to manage tenant settings, the warning asks you to have an administrator set or update the home URL.

For local development, http://localhost and http://127.0.0.1 URLs are also accepted for logo, support, and home URLs, but not for the privacy policy or terms URLs.

Why a value is refused

  • Accent color unreadable in its mode. Button text must reach a contrast of at least 4.5:1 against the color, and the color must reach 3:1 against the page so focus rings show. In light mode, #3B82F6 is refused and #1D4ED8 is accepted. In dark mode it runs the other way: #1D4ED8 is refused and #93C5FD is accepted. The error names the mode and the contrast reached. A refused color is never adjusted for you; the field says so before you save. A mode your pages do not offer is not checked for contrast, but its colors are never shown while they would fail: the save that offers that mode again checks them, and until then a failing one is treated as blank.

  • Page background unreadable in its mode. Body text must reach 12:1 on the background, which keeps a light mode page light and a dark mode page dark. Secondary text and error, success, warning, and info messages must reach 4.5:1, placeholders 3:1, and your accent 3:1, both on the background and on the card color derived from it. In light mode, #C8C8C8 is refused and #E0F0FF is accepted; in dark mode, #2C2C2C is refused and #0B1A2A is accepted. #00008A is refused in dark mode because error text on its derived card color reaches only 4.49:1. The error names the mode, the text that fails, and the contrast reached. As with accents, a mode your pages do not offer is not checked, and a background that would fail there is treated as blank until a save offers that mode.

  • Home URL not registered. Its origin, including any port, must match a redirect URI registered on one of your applications. Wildcard redirect URIs do not count. If you later remove that redirect URI, the home URL is ignored until the origin is registered again. See where an accepted invitation lands for how invitations use it.

  • Not an https URL. Logo, support, home, privacy policy, and terms URLs must be absolute; data: and javascript: URLs are refused, and so are relative paths such as /privacy. Each must start with https:// in full, so https:/help is refused. A privacy policy or terms URL is also refused over http, with a user name or password, or past 2,048 characters.

Udibo adds no watermark or badge to your branded pages, and branding is not tied to a plan.

The management API's PATCH /api/identity/tenants/{id} accepts the same fields as a branding object, applies the same rules, and replaces the stored branding whole. Each logo and accent sits under a light or dark object, logoIncludesName is the checkbox, and colorModes is both, light, or dark (absent means both):

JSON
{
  "branding": {
    "displayName": "Northwind",
    "logoIncludesName": true,
    "colorModes": "both",
    "light": {
      "logoUrl": "https://northwind.example/logo.svg",
      "accentColor": "#1D4ED8",
      "backgroundColor": "#E0F0FF"
    },
    "dark": {
      "logoUrl": "https://northwind.example/logo-dark.svg",
      "accentColor": "#93C5FD",
      "backgroundColor": "#0B1A2A"
    }
  }
}

A refusal names the nested field, such as branding.dark.accentColor. A blank dark.logoUrl shows the light logo in dark mode. Today you reach the API through the dashboard; see choose the right API.

Upload a logo instead of hosting one

Under Light mode and Dark mode on the Branding tab, a Logo file control sits above the Logo URL. Choose an image and select Upload, or select Remove to delete the one you uploaded. Both take effect at once: you do not need to choose Save branding, and the page confirms what changed. A file the dashboard refuses, because it is too large or not an accepted image, is explained under the control and leaves your current logo as it is. The control is shown only where your deployment can store logos; without it, use a logo URL.

Once a mode has an uploaded logo, the dashboard shows it at the size the pages use, with its type and pixel size, and tells you the Logo URL for that mode is not in use. The URL stays saved and applies again if you remove the upload. The preview shows each mode's logo as the pages will, and a line under it says whether each came from an uploaded file, your URL, or the light mode's logo.

The management API takes the same file, as reference: PUT /api/identity/{tenantId}/logos/{mode} with mode light or dark and the image as the file part of a multipart/form-data body. DELETE on the same path removes it, and GET /api/identity/{tenantId}/logos lists what is uploaded.

  • Accepted: PNG, JPEG, or WebP, at most 1 MB and 2,048 pixels on the longest side. The type is read from the file itself, not its name. SVG, animated images, and a photo saved sideways with a rotation tag are refused; a larger file is refused, not resized.

  • Metadata is removed before the file is stored: camera and location (EXIF), XMP, text comments, and thumbnails. Colour profiles are kept.

  • An uploaded logo wins over the logo URL for its mode. A dark mode with no logo of its own uses the light one, the uploaded light logo first. Removing the upload brings the URL back.

  • Who sees your visitors. A logo URL is loaded from your host by each visitor's browser, so your host sees their IP address and browser and that they opened your sign-in page. An uploaded logo is served by Udibo from the same host as the page, and in email from Udibo's own address, so your host sees none of that.

Check the result

  1. Open https://{tenantId}.udibo.com/sign-in in a private browser window.

  2. Confirm the display name, logo, tab title, button color, and page background.

  3. Switch your device to dark mode, reload the page, and confirm the dark mode logo, button color, and page background. If you offer one mode, confirm the page stays in that mode whichever mode your device is in.

  4. With sign-up closed, open /create-account and confirm the Contact support link.

  5. Below the sign-in card, confirm Privacy policy and Terms of service open your own documents, or that no such links show if you left them blank.

  6. Sign in, open /security, and confirm that Back to reaches your home URL.

Logo not showing? Hosted pages load images only from their own host, which serves an uploaded logo, and from the hosts in your saved logo URLs. Open each URL in a private window: it must show the image itself, without signing in and without redirecting to another host. The dashboard previews any https image, saved or not, so a logo that shows there but not on your sign-in page is usually one you have not saved yet.

Limits today

  • No custom domains. Hosted pages stay on {tenantId}.udibo.com.

  • One accent color and one page background per color mode. Card and border colors are derived from the background rather than chosen. Fonts, CSS, background images, and page layout cannot be customized.

  • One logo per color mode. No favicon.

  • Email carries your name, light mode logo and accent, and support URL, not your dark mode logo or page background. With Dark only, email uses your light mode accent only if it passes the light mode rule, and the default otherwise. The Email preview at the bottom of this tab shows the result. See what your branding changes in email.

Next: send email from your domain, or work through the production checklist.

Last verified 2026-11-10.