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.

ComponentTypeLocationDescription
logoPNG, SVG, or WEBPHeader on all pagesUse high resolution horizontal orientated images for most readability.
faviconPNG or ICOBrowser icon
fontFont familyAll pagesThis font family will be applied to the entire application, using various font weights and sizes.
primaryColorAll pagesUsed for clickable elements, primary text links, etc.
primaryLightColorAll pagesFill color for selected elements such as radio group.
textColorAll pagesUsed in headlines, labels, filled input fields.
textSecondaryColorAll pagesUsed in subheads, placeholder text, form labels, etc.
foregroundColorAll pagesUsed in main containers as a fill color.
backgroundColorAll pagesUsed for large surface area on most pages to provide contrast.
inputLineColorAll pagesUsed for the outline of text input fields.
dividerColorAll pagesUsed to differentiate elements from the background or divide sections.
iconColorAll pagesUsed for all iconography, chevrons, close symbols, etc.
successColorAll pagesUsed for success messages to indicate a positive sentiment.
dangerColorAll pagesUsed for error messages to indicate a negative sentiment.
buttonTextCaseButtonAll pagesUPPER, lower, Capitalize text, Default Text.
buttonLetterspacingButtonAll pagesApplies to primary, secondary, and tertiary buttons only, not text links.
buttonRadiusButtonAll pagesApplies 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

ComponentTypeLocationDescription
logoAltTextTextAll pagesUsed to override the alt text on the logo image.
headlineFontFont familyHeadlines (h1) on each pageApplied to the h1 tags on each page.
currencySymbolFontFontAll pagesUsed to set the font for currency symbols.
dangerLightColorAll pagesUsed for alert messages to indicate a negative sentiment.
buttonTextColorAll pagesOverrides #text for buttons. Applies to primary, secondary, and tertiary buttons only, not text links.
buttonBackgroundColorAll pagesOverrides #primary color token if hex value is provided for buttons.
buttonFontFontAll pagesOverrides #fonts for buttons. Applies to primary, secondary, and tertiary buttons only, not text links.
secondaryButtonColorColorAll pagesOverrides the secondary button's text, border, and hover-state background.
pageBackgroundPNG, SVG, or colorLanding pageUsed to set the overall page background.
mainContainerBackgroundPNG, SVG, or colorLanding pageOverrides #foreground on the main container background.
landingLogoPNG or SVGLanding pageOverrides #logo if file is provided.
landingPageBackgroundPNG, SVG, or colorLanding pageOverrides #background color token if value is provided. Can be an image, solid color, or transparent.
landingPageBackgroundAltTextLanding pageUsed to override the alt text on the landing page logo image.
landingPageBackgroundPositionPreset (see description)Landing pageUsed to anchor the background image. Can be "center", "top" or "bottom".
landingLeftContainerBackgroundPNG, SVG, or colorLanding pageOverrides #foreground color token if value is provided. Can be an image, color, or transparent.
landingMainContainerBackgroundPNG, SVG, or colorLanding pageOverrides #foreground color token if value is provided. Can be an image, solid color, or transparent.
landingRightContainerBackgroundPNG, SVG, or colorLanding pageOverrides #foreground color token if value is provided. Can be an image, color, or transparent.
landingPageHeadlineColorLanding pageOverrides #landingTextPrimary on the landing page headline.
landingTextPrimaryColorLanding pageOverrides #text color token if value is provided.
landingTextSecondaryColorLanding pageOverrides #textSecondary color token if value is provided.
confirmationLogoPNG or SVGConfirmation pageOverrides #logo if file is provided.
confirmationPageLayoutPreset (see description)Confirmation pageUsed to determine the layout preset. "1-column.a", "2-column.a" or "2-column.b".
confirmationPageBackgroundPNG, SVG, or colorConfirmation pageOverrides #background color token if value is provided. Can be an image or gradient.
confirmationPageBackgroundPositionPreset (see description)Confirmation pageUsed to anchor the background image. Can be "center", "top" or "bottom".
confirmationPageBackgroundAltTextConfirmation pageUsed to override the alt text on the confirmation page logo image.
confirmationLeftContainerBackgroundPNG, SVG, or colorConfirmation pageOverrides #foreground color token if value is provided. Can be an image, color, or transparent.
confirmationMainContainerBackgroundPNG, SVG, or colorConfirmation pageOverrides #foreground color token if value is provided. Can be an image, color, or transparent.
confirmationRightContainerBackgroundPNG, SVG, or colorConfirmation pageOverrides #foreground color token if value is provided. Can be an image, color, or transparent.
confirmationPageRightContainerImagePNG or SVGConfirmation pagePlaces an image element on the right side of the confirmation page.
confirmationTextPrimaryColorConfirmation pageOverrides #text color token if hex value is provided.
confirmationTextSecondaryColorConfirmation pageOverrides #textSecondary color token if hex value is provided.
cardBackgroundPNG, SVG, or colorCard method pageOverrides #primary color token if value is provided. Can be an image or color.
cardImagePNG or SVGCard method pageReplaces the debit card graphic and text overlay.
hideCardImageTrue / FalseCard method pageIf set to true, hides the debit card graphic and text overlay.

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.

  1. 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

  2. Contact the Latitude Implementations team and include the chosen domain name.