Tenant branding and hosted UI
Nanaade's hosted modules automatically use the active tenant's visual identity. Your portal does not need to send colors, logos, organization names, or UI text in an SSO assertion. Branding is stored in Nanaade's tenant configuration and resolved from the destination hostname and active tenant session.
Tenant hostname + active session
→ Nanaade resolves tenant configuration
→ Brand tokens apply to the shared workspace
→ Licensed module UI renders with the tenant identity
This separation prevents a browser or assertion from impersonating another organization and lets administrators update branding without changing portal integration code.
Supported identity settings
| Setting | Purpose | Recommended value |
|---|---|---|
| Display name | Organization name shown in hosted experiences and browser title | Official organization or product name |
| Primary color | Primary buttons, selected states, links, focus rings, and branded indicators | Accessible brand color in hex format |
| Secondary color | Supporting surfaces and secondary controls | Dark or neutral supporting brand color |
| Accent color | Highlights, subtle gradients, and contextual emphasis | Complementary brand color |
| Font family | Hosted workspace typography | A font supported by Nanaade administration |
| Light logo | Main logo used on light workspace surfaces | Transparent PNG, WebP, or SVG-compatible hosted URL |
| Dark logo | Optional alternative on dark surfaces | High-contrast transparent asset |
| Favicon | Browser-tab identity | Square image, preferably 32×32 or larger |
| Login heading | Tenant-specific sign-in or handoff heading | Short, recognizable welcome text |
| Login message | Supporting sign-in or handoff explanation | One or two concise sentences |
| Email sender name | Display name for tenant-related platform email | Recognizable organization name |
| Reply-to address | Monitored reply address | Valid organization support address |
Tenant administrators with the licensed self-service branding capability can manage these settings in their Nanaade workspace. Nanaade administrators retain the same controls for support and initial provisioning.
Logo behavior
Hosted Nanaade layouts preserve the logo's natural aspect ratio. The same asset is used consistently across the desktop sidebar, specialized module sidebars, mobile header, unavailable-feature pages, and tenant handoff experiences.
- Desktop sidebar logos are contained within a 190px-wide slot.
- The visible logo height is capped at approximately 44px.
- Wide, square, and tall artwork scales without stretching or cropping.
- Logos align to the start of the sidebar content.
- Mobile headers use a smaller contained slot.
- A configured dark logo replaces the light logo on dark surfaces.
- Nanaade's logo is used only when the tenant has no usable logo configured.
For best results, remove large transparent margins from the source asset. Transparent whitespace is part of the image and can make a correctly sized logo appear visually small.
Color behavior
Nanaade converts tenant colors into semantic UI tokens rather than replacing isolated CSS values.
| Brand input | Hosted UI effect |
|---|---|
| Primary | Primary buttons, active navigation, focus rings, and branded toast indicators |
| Secondary | Soft supporting surfaces and secondary text/control contrast |
| Accent | Subtle page highlights, hover surfaces, and decorative emphasis |
Nanaade derives readable foreground colors for primary actions and keeps secondary/accent surfaces soft enough for normal interface use. Destructive, warning, and success states remain semantic; a brand color does not turn an error message into a normal action.
Dynamic text and browser identity
The configured display name is used where the organization must be identified, including branded unavailable-feature messages. The browser title becomes:
Northbridge University | Powered by Nanaade
When configured, the favicon is updated for the tenant workspace. Product action names—such as View Jobs, Check Resume Match, Manka Career Copilot, and Interview Resources—remain consistent with the hosted dashboard so administrators and members use the same terminology.
What tenant developers control
Your portal controls:
- The button or link that starts a Nanaade launch.
- The portal's own surrounding UI.
- The signed user identity and registered launch code.
- The approved return URL.
Nanaade controls:
- The hosted module route.
- Effective licensing and navigation.
- Tenant branding inside the hosted workspace.
- Responsive layout, buttons, dialogs, toast notifications, and error states.
- Safe fallbacks when a brand asset is unavailable.
Do not add logo URLs, colors, CSS, display names, or feature grants to the signed assertion. Undocumented assertion fields are not a branding API.
Branding verification
Test on both desktop and mobile:
- Launch from the tenant portal using a valid SSO assertion.
- Confirm the correct display name, logo, colors, font, title, and favicon.
- Open the main dashboard and at least one specialized module sidebar.
- Confirm wide and narrow layouts do not crop or stretch the logo.
- Open a dialog and trigger a toast notification; verify primary actions inherit the tenant theme.
- Navigate directly to an unlicensed route and confirm the branded Feature Unavailable page appears.
- Confirm another tenant and the retail Nanaade domain do not retain the previous tenant's branding.
- If dark mode is enabled, verify the dark logo and sufficient contrast.
Branding changes increment the tenant configuration version and are applied after Nanaade refreshes the tenant configuration. If an old asset remains visible, verify the saved URL, browser cache, and tenant hostname before changing SSO code.