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
- 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”.
Section | Default Copy |
Next steps summary (left pane) Header |
We'll help you every step of the way |
Next steps summary (left pane) Subheader |
You're a few minutes away from convenient banking with exceptional service. |
First step (right pane) Header |
Tell us which accounts you want to open |
First step (right pane) Subheader |
We'll collect some more details about what you're looking for |
Second step (right pane) Header |
Verify Your Identity |
Second step (right pane) Subheader |
We'll ask you for info like your name, address, and Social Security number. |
Third step (right pane) Header |
Fund Your Account |
Third step (right pane) Subheader |
You'll have the option to fund your account right away |