The Appearance tab in Settings controls how BNDRY looks for your users — both within the application itself and in the portal presented to customers visiting your forms or workspaces. Settings are divided into three areas: user preferences, app theme, and portal theme.
App theme
The app theme controls the look and feel of the BNDRY application for your staff — the interface your team uses day-to-day.
Logo
Enter a publicly accessible URL for your logo. The logo scales to fit within 40px in height in the application header. Use an asset that is at minimum 80px tall for crisp rendering on standard displays, and at least 160px tall for retina and high-density screens.
SVG format is recommended where available — it scales cleanly at any resolution without loss of quality.
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, so it should reflect your organisation's visual identity.
Logo and display name
The portal logo appears in the portal header and is separate from the app theme logo. The same sizing guidance applies: minimum 80px tall, 160px+ for retina, SVG preferred.
The Portal display name appears as your organisation name in the portal. If no name is set, it defaults to your tenant name. Set this to match how your organisation presents itself to customers.
Background image
The background image appears as a banner across the top of the portal. It is cropped and scaled to cover a display area of 672 × 64 pixels, aligned from the top-left. For retina and high-density displays, provide an image at least 1344 × 128 pixels — double the display dimensions ensures crisp rendering at higher pixel densities.
The banner is wide and shallow — it is best suited to solid brand colours, gradients, textures, or abstract patterns rather than photography or detailed graphics. If you use a photo or detailed image, only the top-left portion will be visible and it will be heavily cropped. A regular 4:3 photo will resize responsively for coverage, but expect significant cropping along the bottom and right edges.
Supply a publicly accessible image URL directly. Ensure the hosting server allows cross-origin access — if it does not, the image may fail to load in the portal.
Dark mode
The Allow dark mode in embedded contexts toggle controls whether the portal responds to the prefers-color-scheme: dark signal from the user's browser or operating system. When enabled, users with dark mode active on their device will see a dark-adapted version of the portal.
Disable this toggle if:
- Your brand assets — logo, background image — are designed for light backgrounds only
- Your embedded forms sit inside a host application whose stylesheet does not implement
prefers-color-scheme: dark - You need a consistent visual experience regardless of the user's system preferences
The colour values you configure below are your light mode colours. When dark mode is active, the portal adapts these for dark backgrounds. Test your portal in both light and dark mode after making changes — colours that read clearly in light mode can become low-contrast or invisible in dark mode, particularly white or near-white backgrounds paired with light-coloured text or logos.
Colours
Portal colours are split into two groups: Header (the banner area containing your logo and portal name) and Content (the main form and workspace area). Each group has its own background and text colours, keeping the two areas visually distinct.
Header
| Setting | Default | What it affects |
|---|---|---|
| Background colour | #FFFFFF |
The header area background, visible behind your logo and display name |
| Text colour | #111827 |
The portal display name and header labels |
Content
| Setting | Default | What it affects |
|---|---|---|
| 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 |
Tips
- Check contrast ratios — WCAG AA requires a contrast ratio of at least 4.5:1 between text and background colours. Verify your choices with a tool such as the WebAIM Contrast Checker before publishing to customers.
- Test in both light and dark mode — view the portal theme preview in each mode before sending it to customers. The theme preview in the admin portal updates in real time as you make changes.
- Keep the background image simple — at 672 × 64px display dimensions, logos, taglines, and detailed artwork lose legibility. Solid brand colours, brand gradients, and subtle textures tend to render most effectively.
- Match your header background to your image — if your background image has a dark or coloured edge, set the header background colour to match. This avoids a visible colour seam if the image fails to load or renders late.
- Use stable image URLs — link to assets hosted on a CDN or dedicated media host.
Comments
0 comments
Article is closed for comments.