Setting up branding in BNDRY

BNDRY branding is split across two surfaces: the app theme your staff see, and the portal theme your customers see in forms and shared workspaces. You configure both from Settings › Appearance.

Before you start

You need the Settings permission. If the Appearance tab isn't visible, ask an administrator to grant you access.
Host your logo and background image at publicly accessible URLs — a CDN or dedicated media host is best. The host must allow cross-origin (CORS) access, or the images won't load in the portal.
Have your brand colours ready as hex values.

Set the app logo

The app theme controls how BNDRY looks for your staff — the interface your team uses day-to-day.

Open Settings › Appearance.
Under App theme, enter a publicly accessible URL in the Logo field.
Click Save.

The logo scales to fit 40px in height in the app header. Supply an asset at least 80px tall for crisp rendering on standard displays, and at least 160px tall for retina and high-density screens. SVG is recommended where available — it scales cleanly at any resolution.

Set up the portal theme

The portal theme applies to customer-facing surfaces: forms embedded in your application and workspaces shared with invited collaborators. This is the branded experience your customers see.

Portal logo — enter a publicly accessible URL. This is separate from the app logo. The same sizing applies: at least 80px tall, 160px+ for retina, SVG preferred.
Portal display name — enter the name customers should see. If you leave it blank, it defaults to your tenant name.
Background image — enter a URL for the banner across the top of the portal. It is cropped and scaled to cover 672 × 64 pixels, aligned from the top-left; for retina displays, supply at least 1344 × 128 pixels. The banner is wide and shallow, so use solid brand colours, gradients, textures, or abstract patterns. A photo or detailed graphic will be heavily cropped — only the top-left portion shows.
Colours — set the header and content colours using the defaults below as a starting point.
Dark mode — use the Allow dark mode in embedded contexts toggle to control whether the portal follows the viewer's prefers-color-scheme: dark signal. The colours you set are your light-mode values; when dark mode is active, the portal adapts them for dark backgrounds.
Click Save.

Leave dark mode off if your brand assets are designed for light backgrounds only, if the host application your forms sit inside doesn't implement prefers-color-scheme: dark, or if you need a consistent look regardless of the viewer's system preference.

Portal colour defaults

Setting	Default	What it affects
Header background	`#FFFFFF`	The header area behind your logo and display name
Header text	`#111827`	The portal display name and header labels
Content background	`#FFFFFF`	The main form and workspace area background
Content text	`#1F2937`	Body text within the content area
Button background	`#E6007E`	Primary action button fill colour
Button text	`#FFFFFF`	Text on primary action buttons

Before you publish to customers:

Check your colour contrast. WCAG AA needs a ratio of at least 4.5:1 between text and background; verify with a tool such as the WebAIM Contrast Checker.
Preview the portal in both light and dark mode — the admin preview updates in real time, and colours that read clearly in light mode can wash out in dark mode.
If your background image has a dark or coloured edge, set the header background colour to match, so there's no visible seam if the image loads late or fails.

Result

The theme preview reflects your changes in real time, and your branding applies across the app and portal as soon as you save.

Troubleshooting

The logo or background image doesn't load. The URL may not be publicly accessible, or the host may not allow cross-origin access. Move the asset to a CDN or media host that permits cross-origin requests.
Colours look right in light mode but wash out in dark mode. The colours you set are light-mode values. Check the preview in dark mode and adjust, or turn off Allow dark mode in embedded contexts.
Your background image is barely visible or badly cropped. The banner is only 672 × 64 pixels and aligns top-left. Swap detailed artwork for a solid colour, gradient, or texture.