Branding
Latitude's white label model allows you to fully match the visual identity elements of your brand standards, ensuring a seamless customer experience for your consumers.
Primary Branding Options
Latitude supports a robust amount of branded customization options detailed below via a no code configuration. These settings are all stored in Latitude and will be requested via form by our Implementations team during onboarding. The form will include additional information, sample images, and suggestions.
Accessibility
Consider the importance of accessibility when choosing colors, fonts and images as certain hues and contrasts can significantly impact readability, especially for individuals with visual impairments or reading difficulties.
| Component | Type | Location | Description |
|---|---|---|---|
| Logo | PNG, SVG, or WEBP | Header on all pages | Use high resolution horizontal orientated images for most readability. |
| Favicon | PNG or ICO | Browser icon | |
| Fonts | Font family | All pages | This font family will be applied to the entire application, using various font weights and sizes. |
| brandPrimary | Color | All pages | Used for clickable elements, primary text links, etc. |
| brandPrimaryLight | Color | All pages | Fill color for selected elements such as radio group. |
| textPrimary | Color | All pages | Used in headlines, labels, filled input fields. |
| textSecondary | Color | All pages | Used in subheads, placeholder text, form labels, etc. |
| foreground | Color | All pages | Used in main containers as a fill color. |
| background | Color | All pages | Used for large surface area on most pages to provide contrast. |
| inputLine | Color | All pages | Used for the outline of text input fields. |
| divider | Color | All pages | Used to differentiate elements from the background or divide sections. |
| icon | Color | All pages | Used for all iconography, chevrons, close symbols, etc. |
| success | Color | All pages | Used for success messages to indicate a positive sentiment. |
| danger | Color | All pages | Used for error messages to indicate a negative sentiment. |
| buttonTextCase | Button | All pages | UPPER, lower, Capitalize text, Default Text. |
| buttonLetterspacing | Button | All pages | Applies to primary, secondary, and tertiary buttons only, not text links. |
| buttonCornerRadius | Button | All pages | Applies to primary, secondary, and tertiary buttons. |
Brand Mapping
The landing and confirmation page elements are provided below to show a brief example of how some of the branding elements correspond to a given page. More examples and guidance are provided within the onboarding branding form.
Landing Page Components
Confirmation Page Components
Optional Branding Overrides
| Component | Type | Location | Description |
|---|---|---|---|
| Headline Font | Font family | Headlines (h1) on each page | Applied to the h1 tags on each page. |
| buttonBackground | Button | All pages | Overrides #brandPrimary color token if hex value is provided for buttons. |
| buttonFont | Button | All pages | Overrides #Fonts for buttons. Applies to primary, secondary, and tertiary buttons only, not text links. |
| buttonFontColor | Button | All pages | Overrides #textPrimary for buttons. Applies to primary, secondary, and tertiary buttons only, not text links. |
| landingPageBackground | PNG, SVG, or color | Landing page | Overrides #background color token if value is provided. Can be an image, solid color, or transparent. |
| landingMainContainerBackground | PNG, SVG, or color | Landing page | Overrides #foreground color token if value is provided. Can be an image, solid color, or transparent. |
| landingLeftContainerBackground | PNG, SVG, or color | Landing page | Overrides #foreground color token if value is provided. Can be an image, color, or transparent. |
| landingRightContainerBackground | PNG, SVG, or color | Landing page | Overrides #foreground color token if value is provided. Can be an image, color, or transparent. |
| landingTextPrimary | Color | Landing page | Overrides #textPrimary color token if value is provided. |
| landingTextSecondary | Color | Landing page | Overrides #textSecondary color token if value is provided. |
| landingLogo | PNG or SVG | Landing page | Overrides #primaryLogo if file is provided. |
| confirmationPageBackground | PNG, SVG, or color | Confirmation page | Overrides #background color token if value is provided. Can be an image or gradient. |
| confirmationMainContainerBackground | PNG, SVG, or color | Confirmation page | Overrides #foreground color token if value is provided. Can be an image, color, or transparent. |
| confirmationLeftContainerBackground | PNG, SVG, or color | Confirmation page | Overrides #foreground color token if value is provided. Can be an image, color, or transparent. |
| confirmationRightContainerBackground | PNG, SVG, or color | Confirmation page | Overrides #foreground color token if value is provided. Can be an image, color, or transparent. |
| confirmationTextPrimary | Color | Confirmation page | Overrides #textPrimary color token if hex value is provided. |
| confirmationTextSecondary | Color | Confirmation page | Overrides #textSecondary color token if hex value is provided. |
| confirmationLogo | PNG or SVG | Confirmation page | Overrides #primaryLogo if file is provided. |
| debitCardBackground | PNG, SVG, or color | Card method page | Overrides #brandPrimary color token if value is provided. Can be an image or color. |
Custom domain URL
By default, transfer requests created within Latitude will follow a URL format of .pay.brightwell.com. Latitude can support a custom URL by setting up a CNAME record.
-
Create a DNS record to add/edit CNAME and direct to Latitude (
afdbrightwell.azurefd.net). Below is an example CNAME entry.Host name: pay.examplecustomer.com
Type: CNAME
Data: afdbrightwell.azurefd.net -
Contact the Latitude Implementations team and include the chosen domain name.
Updated 2 months ago