Customizing branding via the admin interface
Starting with version 12.9.1, Bravura Security Fabric provides a built-in branding configuration interface that allows superusers to customize logos and brand colors without editing SCSS files or running make.bat. Changes to the React UI take effect immediately; changes to the legacy Angular UI require a skin rebuild which can be triggered from the same interface.
Access requirements
The branding configuration interface is available only to users with superuser privileges. It is accessible from the Admin navigation in the React UI.
Logo customization
You can upload custom logos for four different contexts within the application. Each logo type serves a specific purpose:
Logo type | Context | Target dimensions | Background |
|---|---|---|---|
primary-light | Login page | 320 x 45 px | Light |
primary-dark | Header / AppBar | 26 px height, max 200 px width | Dark |
logomark-light | Mobile header, favicon (light theme) | Square aspect ratio | Light |
logomark-dark | Mobile header, favicon (dark theme) | Square aspect ratio | Dark |
Supported file formats are SVG, PNG, GIF, and JPG. The maximum file size is 500 KB. SVG files are automatically sanitized on upload to remove scripts, event handlers, and external references for security.
Dimension validation is performed as a warning only — logos that deviate from the target dimensions are accepted but may not display optimally in their intended context.
Best practice
For best results, provide both light and dark variants of your logo. If only a dark variant is uploaded, the system falls back to it for light contexts as well. Use PNG format for logos with transparency, or SVG for resolution-independent rendering.
Color branding
You can configure four brand colors that are applied to buttons, links, the AppBar, and form field accents throughout the interface:
primaryColorLight— Primary brand color for light themeprimaryColorDark— Primary brand color for dark themesecondaryColorLight— Secondary brand color for light themesecondaryColorDark— Secondary brand color for dark theme
Colors must be specified in 6-digit hexadecimal format (#RRGGBB). The interface validates color contrast against WCAG accessibility standards and displays a warning if the selected colors do not meet compliance thresholds.
Setting a color value to null resets it to the Bravura Security default.
Live preview
The branding configuration interface provides a split-screen live preview showing:
Left side — Login page context with the primary-light logo on a light background
Right side — Header/AppBar context with the primary-dark logo on a dark background
The preview also demonstrates how custom colors apply to buttons, links, and form fields, allowing you to verify the visual result before saving.
Deployment to legacy UI
Branding changes take effect immediately for the React UI without any rebuild. To apply branding to the legacy Angular UI, trigger a skin rebuild from the branding interface. The rebuild runs make.bat default <lang> followed by make.bat install default <lang> for each installed language.
You can monitor deployment progress per language from the interface. The rebuild status shows each language as Pending, Building, Installing, Completed, or Failed.
Note
A debug mode is available that changes the build command to make.bat debug default <lang> for troubleshooting purposes.
Fallback behavior
When no custom branding is configured, the system displays the default Bravura Security logos and theme colors. If a custom logo file fails to load (for example, due to a missing file), the React UI automatically falls back to the embedded default logos without displaying an error to end users.
Cache management
Logo files are stored with hash-based filenames (for example, primary-light-a1b2c3d4.png) to enable aggressive browser caching while ensuring that updated logos are loaded immediately after a change. When a logo is replaced, the old file is automatically cleaned up from both storage locations (design/custom/branding/ and ui/v2/assets/branding/).