SiteStyleGuide

Unofficial A style guide made by SiteStyleGuide from blend.com’s public web pages. Not affiliated with or endorsed by Blend. The real site is blend.com ↗

Blend logo

Unofficial style guide

Blendstyle guide

Blend’s website (blend.com) uses Untitled Sans for its headings and body text. Its palette is led by Light Blue (#0038FF), Deep Midnight Blue (#001356) and Light Steel Blue (#CBE0FF), with #333333 text on #FFFFFF. Captured from the live site on 28 October 2026.

Website
blend.com
Typefaces
Untitled Sans, Untitled Serif
Palette
4 neutrals, 12 colours, 3 gradients
Captured
28 Oct 2026 · added by @sitestyleguide
Save Add to collection Share Report
https://blend.com/ Screenshot
Screenshot of the blend.com homepage on a desktop screen
Screenshot of blend.com on a 1440 px desktop screen, 28 Oct 2026.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title
Blend: Digital Lending & Account Opening for Banks, Credit Unions & Mortgage Providers
▲ 86 / 60 characters
Meta description
Blend: Modernize lending & account opening for banks, credit unions, & mortgage providers. Streamline operations, enhance digital experience, and drive growth across all accounts.
▲ 179 / 160 characters
Site name
Blend
og:title
Blend: Digital Lending & Account Opening for Banks, Credit Unions & Mortgage Providers
og:description
Blend: Modernize lending & account opening for banks, credit unions, & mortgage providers. Streamline operations, enhance digital experience, and drive growth across all accounts.
Language
en-US

In search results

Blendhttps://blend.com/

Blend: Digital Lending & Account Opening for Banks, Credit Un…

Blend: Modernize lending & account opening for banks, credit unions, & mortgage providers. Streamline operations, enhance digital experience, and drive growth ac…

When shared

The image Blend shares with links

blend.com

Blend: Digital Lending & Account Opening for Banks, Credit Unions & Mortgage Providers

Blend: Modernize lending & account opening for banks, credit unions, & mortgage providers. Streamline operati…

Back to top ↑

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#333333) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used
  • Light Blue 25.3%
  • White 24.5%
  • Charcoal 18.5%
  • Deep Midnight Blue 14.3%
  • Light Steel Blue 5.9%
  • Deep Steel Blue 2.1%
  • Light Grey 1.8%
  • Grey 1.7%
  • Cornflower Blue 1.2%
  • Pale Golden Rod 1.2%
  • Medium Violet Red 1%
  • Steel Blue 0.6%
  • Deep Blue 0.6%
  • Light Midnight Blue 0.4%
  • Dark Blue 0.4%
  • Yellow Green 0.3%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

  • White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 0
    On text
    12.63:1 AAA
    On white
    —

    Background, text, graphic · .customer-story-landing__filters button, body

  • Charcoal

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 80
    On text
    —
    On white
    12.63:1 AAA

    Text, border, background · body:not(.single-post):not(.page-template-page-resources) .post-item--customer-s, body

  • Light Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 33
    On text
    5.44:1 AA
    On white
    2.32:1 Fail

    Border, text, background · .mg-button[disabled], .hero-form .hubspot-form:not(:has(form))

  • Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 48
    On text
    3.42:1 AA large
    On white
    3.69:1 AA large

    Text, border, background · .hero-form__form-subtitle, .hero-form__custom-note

Colours

Brand colours and accents, most used first

  • Light Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 78 0 0
    On text
    1.81:1 Fail
    On white
    6.98:1 AA

    Text, background, border · .llm__form-main .mktoForm button.mktoButton, --color-primary

  • Deep Midnight Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 78 0 66
    On text
    1.35:1 Fail
    On white
    17.11:1 AAA

    Text, background, graphic · .content-carousel__title, .content-carousel__slide__content div h4

  • Light Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    20 12 0 0
    On text
    9.41:1 AAA
    On white
    1.34:1 Fail

    Background, text, border · #home-hero .hero__text h1 span:after, .customer-story-landing__featured .slick-dots button

  • Deep Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    23 31 0 0
    On text
    6.68:1 AA
    On white
    1.89:1 Fail

    Background, text · .llm__form-main .mktoForm button.mktoButton, .llm--mobile__form-clone .llm--mobile__button

  • Cornflower Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    41 24 0 9
    On text
    5.66:1 AA
    On white
    2.23:1 Fail

    Background, border · .content-carousel__slider .slick-dots li button, .hero .slick-dots li button

  • Pale Golden Rod

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    9 0 28 1
    On text
    11.41:1 AAA
    On white
    1.11:1 Fail

    Background, text, border · .header .sub-menu__columns__item--highlight, .site-footer__top__post__tag

  • Medium Violet Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 100 41 38
    On text
    1.56:1 Fail
    On white
    8.10:1 AAA

    Text, background, border · .job-listings__list__depts ul li button.active, .u-bg-deep-pink

  • Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    84 39 0 25
    On text
    2.56:1 Fail
    On white
    4.94:1 AA

    Background, text, border · .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept, .cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-thumb

  • Deep Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    82 72 0 15
    On text
    1.66:1 Fail
    On white
    7.63:1 AAA

    Background, text, border · .forum__mobile-menu .js-forum-menu span, .forum__mobile-menu .js-forum-menu span:before

  • Light Midnight Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 75 0 52
    On text
    1.13:1 Fail
    On white
    14.22:1 AAA

    Background · .hero-form, .hero-form--bg-dark-blue

  • Dark Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 78 0 40
    On text
    1.02:1 Fail
    On white
    12.43:1 AAA

    Background · --color-secondary, .footer

  • Yellow Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    17 0 54 13
    On text
    8.15:1 AAA
    On white
    1.55:1 Fail

    Background, text · .hero-form--bg-green-blue, .u-bg-green

Gradients

  • linear-gradient(90deg, #0038FF 0%, #C5B1FF 80.17%)

  • linear-gradient(180deg, #fff 0%, #cbe0ff 100%)

  • linear-gradient(180deg, , )

Back to top ↑

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Untitled Sans

Aa 300 Aa 900

Untitled Sans

Self-hosted · weights 300, 400, 500, 700, 800, 900 · headings, body, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 700

Untitled Serif

Self-hosted · weights 400, 500, 600, 700 · headings · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS · root 18 px
Heading 1 2.222rem · 40 px / 1.1 weight 300 · Untitled Sans

Blend

Heading 2 2rem · 36 px / 1.2 weight 300 · Untitled Sans

Blend: Digital Lending & Account Opening for Ba…

Heading 3 1.222rem · 22 px / 1.2 weight 400 · Untitled Sans

Blend: Digital Lending & Account Opening for Ba…

Heading 4 1.111rem · 20 px / 1.2 weight 500 · Untitled Sans

Blend: Digital Lending & Account Opening for Ba…

Heading 5 1.111rem · 20 px / 1.2 weight 500 · Untitled Sans

Blend: Digital Lending & Account Opening for Ba…

Heading 6 1.111rem · 20 px / 1.2 weight 500 · Untitled Sans

Blend: Digital Lending & Account Opening for Ba…

Body 18px / 1.55 weight 400 · Untitled Sans

Blend: Modernize lending & account opening for banks, credit unions, & mortgage providers. Streamline operations, enhance digital experienc…

Paragraph 1rem · 18 px / 1.3 weight 400 · Untitled Sans

Blend: Modernize lending & account opening for banks, credit unions, & mortgage providers. Streamline operations, enhance digital experienc…

Small 80%

Blend: Modernize lending & account opening for banks, credit unions, & mortgage providers. Streamline operations, enhance digital experienc…

Button .889rem · 16 px / 1.2 weight 500 · none · Untitled Sans

Get started

Link 1.333rem · 24 px / 1.2 weight 500 · none · Untitled Sans

Read more about Blend

Sizes in use

Most common across the site
  • 36pxline 1.2 · 9 rules
  • 30pxline 1.2 · 9 rules
  • 24pxline 1.4 · 11 rules
  • 20pxline 1.4 · 41 rules
  • 18pxline 1.3 · 79 rules
  • 16pxline 150% · 112 rules
  • 14pxline 23px · 25 rules
  • 12pxline 140% · 26 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.content-carousel__slider .slick-dots li button · #88B0E7 · radius 8px

Link

Read our latest news today.

a · #333333

Corner radius

  • 20px · 46×
  • 12px · 42×
  • 4px · 19×
  • 50% · 19×
  • 24px · 17×
  • 40px · 16×

Shadows

  • 0px 2px 16px 2px rgba(0,0,0,.0392156863)
  • 0 0 0
  • 0px 24px 40px 0px rgba(112,144,176,.1490196078)
  • rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

499
699
700
903
904
1179
1180
1480

On a scale of 0 to 1480 px.

Content widths (max-width)

1380 px
900 px
800 px
700 px
500 px
400 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

  • ▲ CheckThe title is 86 characters. Google usually cuts titles near 60, so the end may not show in results.
  • ▲ CheckThe description is 179 characters. Search results usually show about 160.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Blend use?
Blend’s website uses two typefaces: Untitled Sans (headings and body text), self-hosted; Untitled Serif, self-hosted.
What are Blend’s brand colours?
The main colours on blend.com are Light Blue (#0038FF), Deep Midnight Blue (#001356), Light Steel Blue (#CBE0FF), Deep Steel Blue (#C5B1FF), Cornflower Blue (#88B0E7) and Pale Golden Rod (#E6FCB6).
What colour is Blend’s text and background?
Body text is #333333 on a #FFFFFF background.
Where is Blend’s logo from?
The logo shown in this guide was found on blend.com’s homepage. For official logo files and usage rules, check Blend’s own brand or press page.
Is this Blend’s official style guide?
No. SiteStyleGuide made it from blend.com’s public web pages on 28 October 2026, and isn’t affiliated with Blend. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

blend-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* blend.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/blend.com) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #333333;
  --colour-light-grey: #AAAAAA;
  --colour-grey: #858585;
  --colour-light-blue: #0038FF;
  --colour-deep-midnight-blue: #001356;
  --colour-light-steel-blue: #CBE0FF;
  --colour-deep-steel-blue: #C5B1FF;
  --colour-cornflower-blue: #88B0E7;
  --colour-pale-golden-rod: #E6FCB6;
  --colour-medium-violet-red: #9D005D;
  --colour-steel-blue: #1E73BE;
  --colour-deep-blue: #263DD9;
  --colour-light-midnight-blue: #001F7A;
  --colour-dark-blue: #002299;
  --colour-yellow-green: #B7DD66;
  --gradient-1: linear-gradient(90deg, #0038FF 0%, #C5B1FF 80.17%);
  --gradient-2: linear-gradient(180deg, #fff 0%, #cbe0ff 100%);
  --gradient-3: linear-gradient(180deg, , );

  /* Typefaces */
  --font-headings: 'Untitled Sans', 'Helvetica', 'Arial', sans-serif;
  --font-body: 'Untitled Sans', 'Helvetica', 'Arial', sans-serif;
  --font-buttons: 'Untitled Sans', 'Helvetica', 'Arial', sans-serif;

  /* Type scale */
  --text-h1: 2.222rem;
  --leading-h1: 1.1;
  --text-h2: 2rem;
  --leading-h2: 1.2;
  --text-h3: 1.222rem;
  --leading-h3: 1.2;
  --text-h4: 1.111rem;
  --leading-h4: 1.2;
  --text-h5: 1.111rem;
  --leading-h5: 1.2;
  --text-h6: 1.111rem;
  --leading-h6: 1.2;
  --text-body: 18px;
  --leading-body: 1.55;
  --text-p: 1rem;
  --leading-p: 1.3;
  --text-small: 80%;
  --text-button: .889rem;
  --leading-button: 1.2;
  --text-a: 1.333rem;
  --leading-a: 1.2;

  /* Shape */
  --radius-1: 20px;
  --radius-2: 12px;
  --radius-3: 4px;
  --radius-4: 50%;
  --radius-5: 24px;
  --radius-6: 40px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 499px;
  --breakpoint-2: 699px;
  --breakpoint-3: 700px;
  --breakpoint-4: 903px;
  --breakpoint-5: 904px;
  --breakpoint-6: 1179px;
  --breakpoint-7: 1180px;
  --breakpoint-8: 1480px;
  --max-width-1: 1380px;
  --max-width-2: 900px;
  --max-width-3: 800px;
  --max-width-4: 700px;
  --max-width-5: 500px;
  --max-width-6: 400px;
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run blend.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

View our style guide on SiteStyleGuide 
<a href="https://sitestyleguide.com/blend.com" title="Blend style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Also set in Untitled Sans

Other websites using Untitled Sans as their main typeface

Similar colours

Websites whose lead colour is closest to Blend’s

Captured from blend.com on 28 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Blend; this guide describes the public website for reference.