Branding your Blend environment

Make your Blend environment a reflection of your brand. Match your company's look in Blend by uploading your logos and icons and recreating your brand's color scheme.

• Configuring your branding settings in Blend
• Recommended settings
• Colors
• Logos
  • Email header logo
  • Favicon
  • Borrower header logo
  • Lender logo
  • Login logo
  • Borrower mobile header logo
  • Square logo
• Milestone page configurations

Configuring your branding settings in Blend

Blend administrators with access to the Setup panel can configure your branding settings by going to Your settings > Setup > Branding.

Recommended settings

Action Color
This is the color that's used the most, it's used for all buttons, text links, and any action-related UIs.

Login Background Color 
Background color used for the login page.

Milestone Color 
It's used for the Borrower Home call to action (CTA) button and moving forward it'll be used as a secondary/accent color.

Primary Color 
This color is used in various places, make sure it's not set to white.

Colors

Select your brand colors for each of the following fields:

• Primary Color - This color is used in various places, make sure it's not set to white.
• Header - The color of the Borrower header. Non-white colors for this aren't well-supported.
• Navigation links - Color of navigation links in the borrower application. Different from Action in that it's used for components that take you to a different page or expose additional info, such as in a modal.
• Action - Used in the borrower application for buttons, checkboxes, text boxes, wait animations, etc.
• Login background - Used for the login app's background/left-hand sidebar color.
• Message background - The Message Bubble Color field is recommended to be left untouched. Changing this color may reduce contrast with the text on the page and impact the accessibility of the borrower app.
• Hero background - This is the background color for the Hero in Borrower Home.

Logos

Email header logo

This is used in the headers of all emails. It cannot be an SVG, because Gmail blocks SVGs. Use the following criteria for the email header logo:

• File Type: PNG (Recommended), JPG, JPEG, GIF
• Dimensions: max-width 400 px, max height 140 px
• Appears: Borrower and Lender-user Email Headers

 Note: File type must not be an SVG since many email clients will not render them.

Favicon

The favicon is used as the browser tab icon for all web apps. It defaults to the Blend icon when not provided. Use the following criteria for the favicon logo:

• Accepted file types: ico
• 23px x 23px

Borrower header logo

The borrower header logo is used in the header of the borrower app for a desktop-sized (non-mobile) viewport. Use the following criteria for the borrower header logo:

• Accepted file types: png, jpg, jpeg, gif
• Max width 230 px, max height 30 px. (PNG recommended)

Lender logo

The lender logo is used in the header of the lender app. Use the following criteria for the lender logo:

• File Type: PNG (Recommended), JPG, JPEG, GIF
• Stated Asset Spec: max-width 120 px, max height 30 px
• Actual Asset Rendering: max-width 240 px, max height 62 pixels
• Appears: Lender app navigation bar

Login logo

The login logo shows up on all pages of the login app. Use the following criteria for the login logo:

• File Type: PNG (Recommended), JPG, JPEG, GIF
• Dimensions: max-width 320 px, max height 60 px
• Appears: Sign Up, Sign In, Actionable Terms of Service, and Loan Estimate Request

Borrower mobile header logo

The borrower mobile header logo is used for the borrower header on mobile devices. Use the following criteria for the mobile header logo:

• File Type: PNG (Recommended), JPG, JPEG, GIF
• Dimensions: max-width 230 px, max height 30 px
• Appears: Borrower App Navigation Bar (mobile-mode)

Square logo

The square logo is currently used for the Realty app (for customers with Reatlty enabled) and the follow-up search interface. Use the following criteria for the square logo:

• Accepted file types: svg

Milestone page configurations

The milestones page can be configured to ensure consumers have a soft landing as they transition from an ‘Apply Now’ link on a website while informing them about steps they can expect in the application process before starting an application.

When enabled, the milestones page will be prompted when the ‘loan type’ is specified in a direct signup link URL parameter (e.g., https://{{yourDomain}}/#/signup?loanType=ACCOUNT_OPENING) or after a loan type is specified on the ‘loan chooser’ page hosted by Blend.

The milestones page can be broken out into two main components, the Title section and the Milestone Section. On desktops, the Title section and the Milestone Steps are oriented between the left and right side panes respectively. On mobile devices, the Title Section is oriented above the Milestone section.

Considerations on available configurations

• There is no character count limits for any of the milestone sections but it’s recommended to keep subheaders to minimal character counts for an optimal mobile experience.
• Both the left-hand side and milestone subheaders will allow for certain html attributes to be added to the text content. Namely:
  • ol/ul/li
  • br
  • a
• Text styling changes are not supported (bold, italic, text color, etc.)

The table below will walk through all the different sections of the milestone page and the existing default copy. If you would like to override the default copy, please put in the updated copy in the far right column under “Custom Copy”.