See more

Configure branding in Blend

Avatar
Momina
  • Updated
Follow

Branding represents the face of your company. You can upload your company logo, icons and setup personalized color scheme so the Blend application can match your companies logo and branding.

 

tip_5.png Note: The lender admins can now adjust the branding for their environments through the new Self-Serve User Administration tools. Refer to Self-Serve User Administration to learn more.

 

Color 1.png

Select your brand colors for each of the following fields:

  • Primary Color
  • Login Background Color
  • Header Color
  • Action Color
  • Hero Color

 

Recommended Settings 2.png

tip_5.png Note: The favicon defaults to the Blend icon when not provided. 

 

 tip1.png   Tip: It's recommended that the Message Bubble Color field is left untouched.  Changing this color may reduce contrast with the text on the page and impact accessibility of the borrower app.

 

tip_5.png Note: The Milestone Color will soon be deprecated and used as an accent color instead, but for the time being, should always remain #5CD097

 

 

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 CTA button and moving forward it'll be used as a secondary/accent color.

 tip1.png   Tip: For selecting the Milestone color – go to your website and find your secondary color. If you only use one color on your site, you can set this to be the same as the action color.

 

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

 

Color examples 8.png

 

 

 

Borrower view 7.png

Header Color - This is the background color for the navigation bar up top. Avoid changing it (keep it white). 

tip_5.png Note: If you have to change it to another color, take into consideration that the links are in gray and Action Color. Make sure the links are visible over the color you're changing.

Hero Background Color - This is the background color for the Hero in Borrower Home.

 

 

Logos

You will need the following logos:

  • Login Logo
  • Email Header Logo
  • Desktop Header Logo
  • Mobile Header Logo
  • Lender Logo

 

Login logo  6.png

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

 

 

Email header logo  5.png

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

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

 

Mobile header logo                                 4.png

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)

 

 

Lender Logo 3.png

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

Have questions? Check out our Community. If you need additional assistance, please submit a request and we’ll be happy to help.

 

DISCLAIMER: All mentioned features on this page may not be applicable to your institution, please reach out to (support@blend.com) for more information on what features are enabled for your use.

Related articles

Comments

0 comments

Article is closed for comments.