Branding

Customize the look and feel of your DialStack admin portal with your own branding. Changes apply to all users who access your platform.

Platform Name

Set the display name that appears throughout the admin portal. This replaces the default "DialStack" branding with your organization's name.

Logo

Upload your organization's logo. Supported formats are PNG, JPEG, SVG, and WebP (max 2MB). The logo appears in the sidebar and login pages.

To upload a logo:

1. Click the upload area or drag and drop a file.
2. Wait for the upload to complete.
3. The new logo appears immediately.

Theme Colors

Customize the color scheme for both light and dark modes. Each theme supports the following colors:

Color	Purpose
Primary	Buttons, links, and interactive elements
Primary Foreground	Text on primary-colored buttons
Background	Page and sidebar backgrounds
Foreground	Main text and headings
Card	Card and panel backgrounds
Muted	Subtle backgrounds and disabled states
Muted Foreground	Secondary text, labels, and placeholders
Accent	Hover states and highlighted elements
Border	Borders, dividers, and input outlines

Adding a Custom Theme

1. Click Add Custom Light Theme to create a light mode theme.
2. Adjust the color values using hex codes (e.g., #6B2CFF).
3. Optionally click Add Custom Dark Theme for a dark mode variant.
4. Use the theme preview panel next to the color pickers to see how your changes look. The preview renders the same components used across the portal — primary, secondary, outline and hovered ghost buttons, a card with description, an input at rest and with the focus ring, a muted block, and a popover/tooltip surface — so contrast issues (for example a help icon that disappears against the accent color) show up before you save.
5. Click Save to apply.

note

A light theme is required before you can add a dark theme.

Custom Fonts

Choose custom fonts from Google Fonts for headings and body text:

• Heading Font — Used for h1-h6 headings and titles
• Body Font — Used for paragraphs, labels, and general text

Select a font from the dropdown or search by name. Choose Use default to revert to the default Poppins font.

Preview vs Save

The branding form has two distinct actions — they do very different things:

• Preview applies your current form values across the whole portal for you only, in this browser. Nothing is published; your users keep seeing the current branding. Use it to walk through real pages — dashboard, directory, call logs — with the candidate look before committing. A confirmation dialog restates this each time you start a preview. While previewing, a banner stays visible at the top of every page with an Exit preview button, and the preview expires on its own after 4 hours.
• Save publishes the form values to your platform. This is the only action that changes what your users see.

A typical flow: edit (or import) branding → Preview → browse around → come back to the branding form → adjust if needed → Save.

note

Preview uses the logo URL only — a logo file selected for upload is not part of the preview and is only stored when you Save. The login page and emails always show the published branding, never a preview.

Import and Export JSON

Instead of filling the form by hand, click Import JSON and paste a branding payload. This only fills the form fields — like typing the values yourself — so the same rules apply: Preview to try it, Save to publish it. All fields are optional:

{
  "name": "Acme Telecom",
  "logoUrl": "https://acme.example/logo.png",
  "theme": { "primary": "#1a56db", "background": "#ffffff" },
  "darkTheme": { "primary": "#93c5fd" },
  "fonts": { "heading": "Inter", "body": "Inter" }
}

Colors are 6-digit hex values; fonts must be from the same Google Fonts list as the font pickers.

Export JSON copies the current form values to the clipboard in the same format, so a configuration can be saved, shared, or re-imported later.

Reset to Defaults

Click Reset to Defaults to clear the branding form back to the default DialStack appearance — name, logo, themes, and fonts. Like any other form edit, this is not published until you click Save; if you reset by mistake, navigate away or reload the page and the form returns to your saved branding.