SiteStyleGuide

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

Houzz logo

Unofficial style guide

Houzzstyle guide

Houzz’s website (houzz.com) uses proxima-nova for its headings and body text. Its palette is led by Teal (#007562), Royal Blue (#0066C3) and Dark Slate Grey (#006353), with #222222 text on #FFFFFF. Captured from the live site on 26 October 2026.

Website
houzz.com
Typefaces
proxima-nova, Figtree, BlackerPro
Palette
4 neutrals, 12 colours, 3 gradients
Captured
26 Oct 2026 · added by @sitestyleguide
Save Add to collection Share Report
https://www.houzz.com/ Screenshot
Screenshot of the houzz.com homepage on a desktop screen
Screenshot of houzz.com on a 1440 px desktop screen, 26 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
Houzz for Pros and Homeowners | Build and Design Software | Try Free for 30 Days
▲ 80 / 60 characters
Meta description
Houzz has powerful software for construction and design professionals. For homeowners, find inspiration, products, and pros to design your dream home.
● 150 / 160 characters
Site name
Houzz
og:title
Houzz for Pros and Homeowners | Build and Design Software | Try Free for 30 Days
og:description
The largest collection of interior design and decorating ideas on the Internet, including kitchens and bathrooms. Over 25 million inspiring photos and 100,000 idea books from top designers around the world. Remodeling and decorating ideas and inspiration for designing your kitchen, bath, patio and more. Find architects, interior designers and home improvement contractors.
Language
en-US

In search results

Houzzhttps://www.houzz.com/

Houzz for Pros and Homeowners | Build and Design Software | T…

Houzz has powerful software for construction and design professionals. For homeowners, find inspiration, products, and pros to design your dream home.

When shared

No og:image, so no picture

houzz.com

Houzz for Pros and Homeowners | Build and Design Software | Try Free for 30 Days

The largest collection of interior design and decorating ideas on the Internet, including kitchens and bathro…

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 (#222222) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used
  • White 35.4%
  • Near Black 20.9%
  • Teal 12.1%
  • Off White 10.2%
  • Grey 6.6%
  • Royal Blue 4.9%
  • Dark Slate Grey 1.7%
  • Red 1.1%
  • Dark Golden Rod 0.9%
  • Light Royal Blue 0.9%
  • Corn Silk 0.9%
  • Dark Olive Green 0.9%
  • Brown 0.9%
  • Rebecca Purple 0.8%
  • Deep Royal Blue 0.8%
  • Honey Dew 0.8%

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
    15.91:1 AAA
    On white
    —

    Background, text, border · .hbs .whitebutton.whitebuttonPressed, .hbs .btn.hz-pro-solutions-button--floating

  • Near Black

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

    Text, background, border · .hz-header--new-responsive.hz-header--consumer-rebranding .hz-secondary-menu__ho, .hz-header--new-responsive.hz-header--consumer-rebranding .hz-secondary-menu__fo

  • Off White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 10
    On text
    12.75:1 AAA
    On white
    1.25:1 Fail

    Background, border, text · .hbs .whitebutton.whitebuttonPressed, .dialogTitle

  • Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 47
    On text
    4.49:1 AA large
    On white
    3.54:1 AA large

    Text, background, border · .hbs .hz-autosuggest__section-container--empty.hz-autosuggest__section-container, .hbs .hz-header__search-container .hz-autosuggest__section-container--typeahead.

Colours

Brand colours and accents, most used first

  • Teal

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 0 16 54
    On text
    2.82:1 Fail
    On white
    5.64:1 AA

    Text, background, border · .hbs .panel-primary > .panel-heading, .hbs .btn-primary

  • Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 48 0 24
    On text
    2.79:1 Fail
    On white
    5.69:1 AA

    Text, background, border · .hbs .btn.hz-pro-solutions-button--primary, .hbs .btn.hz-pro-solutions-button--primary-outline

  • Dark Slate Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 0 16 61
    On text
    2.20:1 Fail
    On white
    7.22:1 AAA

    Background, text, border · .hbs .btn-primary:hover, .hbs .btn-primary-outline:hover

  • Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 76 89 16
    On text
    3.33:1 AA large
    On white
    4.78:1 AA

    Text, background, border · body.hz-mono #houzzHeader .header-sales__featured-sales-list-item .header-sales_, .sidebar-nav-item .menu-title.sale-improvement-tab

  • Dark Golden Rod

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 21 57 46
    On text
    3.28:1 AA large
    On white
    4.85:1 AA

    Text, background, border · .hbs .panel-warning > .panel-heading .badge, .hbs .panel-warning > .panel-heading

  • Light Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    83 59 0 9
    On text
    2.91:1 Fail
    On white
    5.47:1 AA

    Background, text · .hui-button--theme-automate.hui-button--solid, .hui-button--theme-automate.hui-button--outline .hui-button__label

  • Corn Silk

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 2 10 1
    On text
    14.91:1 AAA
    On white
    1.07:1 Fail

    Background, text · .hbs .panel-warning > .panel-heading, .hbs .panel-warning > .panel-heading .badge

  • Dark Olive Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    49 0 48 54
    On text
    2.92:1 Fail
    On white
    5.45:1 AA

    Text, background, border · .hbs .panel-success > .panel-heading .badge, .hbs .panel-success > .panel-heading

  • Brown

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 60 61 34
    On text
    2.72:1 Fail
    On white
    5.85:1 AA

    Text, background, border · .hbs .panel-danger > .panel-heading .badge, .hbs .panel-danger > .panel-heading

  • Rebecca Purple

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    53 75 0 33
    On text
    1.73:1 Fail
    On white
    9.20:1 AAA

    Background · .hui-button--theme-automate.hui-button--solid, .hui-button--theme-automate.hui-button--outline .hui-button__label

  • Deep Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 48 0 33
    On text
    2.28:1 Fail
    On white
    6.98:1 AA

    Text, border, background · .hbs .btn.hz-pro-solutions-button--primary:active, #houzzHeader .hz-header .houzz-header-secondary .header-nav-rooms .header-nav-ro

  • Honey Dew

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    7 0 10 6
    On text
    13.33:1 AAA
    On white
    1.19:1 Fail

    Background, text · .hbs .panel-success > .panel-heading, .hbs .panel-success > .panel-heading .badge

Gradients

  • linear-gradient(to right,#275ee7,#512bab 75%)

  • linear-gradient(0deg,rgba(0,0,0,.15),rgba(0,0,0,.15))

  • linear-gradient(top, #f3f3f3, #f0f0f0)

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.

proxima-nova

Aa 200 Aa 700

proxima-nova

Served from st.hzcdn.com · weights 200, 400, 600, 700 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 600

Figtree

Served from st.hzcdn.com · weights 400, 500, 600 · headings, buttons · shown in a stand-in if you don’t have it

Aa 300 Aa 700

BlackerPro

Served from st.hzcdn.com · weights 300, 400, 500, 700 · headings · shown in a stand-in if you don’t have it

Aa 100 Aa 700

museo-sans

Served from st.hzcdn.com · weights 100, 300, 500, 700 · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS
Heading 1 2em · 32 px

Houzz

Heading 2 36px / 44px weight 400

Houzz for Pros and Homeowners | Build and Desig…

Heading 3 30px / 36px weight 700

Houzz for Pros and Homeowners | Build and Desig…

Heading 4 36px / 44px weight 400

Houzz for Pros and Homeowners | Build and Desig…

Heading 5 30px / 36px weight 400

Houzz for Pros and Homeowners | Build and Desig…

Heading 6 24px / 28px weight 400

Houzz for Pros and Homeowners | Build and Desig…

Paragraph 16px weight 400

Houzz has powerful software for construction and design professionals. For homeowners, find inspiration, products, and pros to design your …

Small 80%

Houzz has powerful software for construction and design professionals. For homeowners, find inspiration, products, and pros to design your …

Link 14px / 1.42857143 weight 700 · proxima-nova

Read more about Houzz

Sizes in use

Most common across the site
  • 24pxline 28px · 36 rules
  • 20pxline 24px · 28 rules
  • 18pxline 1.3333333 · 49 rules
  • 16pxline 24px · 174 rules
  • 14pxline 20px · 96 rules
  • 13pxline 20px · 31 rules
  • 12pxline 1.5 · 45 rules
  • 11pxline 1.9 · 15 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

.hbs .btn-primary · #007562

Corner radius

  • 3px · 71×
  • 4px · 59×
  • 50% · 45×
  • 2px · 10×
  • 8px · 5×
  • 6px · 4×

Shadows

  • 0 2px 12px rgba(0,0,0,.1)
  • 0 -3px 6px 0 rgba(0,0,0,.12)
  • 0 0 0 2px hsla(53,4%,43%,.6)
  • 0 2px 4px 0 rgba(0,0,0,.2)

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

480
727
749
767
768
1000
1280
1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1920 px
600 px
500 px
430 px
400 px
343 px

Back to top ↑

Notes

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

Notes

  • ▲ CheckThe title is 80 characters. Google usually cuts titles near 60, so the end may not show in results.
  • ▲ CheckThere is no og:image, so links shared on social media show no picture.

Back to top ↑

Questions

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

Questions

What font does Houzz use?
Houzz’s website uses four typefaces: proxima-nova (headings and body text), served from st.hzcdn.com; Figtree, served from st.hzcdn.com; BlackerPro, served from st.hzcdn.com; museo-sans, served from st.hzcdn.com.
What are Houzz’s brand colours?
The main colours on houzz.com are Teal (#007562), Royal Blue (#0066C3), Dark Slate Grey (#006353), Red (#D73417), Dark Golden Rod (#8A6D3B) and Light Royal Blue (#275EE7).
What colour is Houzz’s text and background?
Body text is #222222 on a #FFFFFF background.
Where is Houzz’s logo from?
The logo shown in this guide was found on houzz.com’s homepage. For official logo files and usage rules, check Houzz’s own brand or press page.
Is this Houzz’s official style guide?
No. SiteStyleGuide made it from houzz.com’s public web pages on 26 October 2026, and isn’t affiliated with Houzz. 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

houzz-com-tokens.css

Download

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

/* houzz.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/houzz.com) */
:root {
  /* Colours */
  --text: #222222;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #222222;
  --colour-off-white: #E6E6E6;
  --colour-grey: #888888;
  --colour-teal: #007562;
  --colour-royal-blue: #0066C3;
  --colour-dark-slate-grey: #006353;
  --colour-red: #D73417;
  --colour-dark-golden-rod: #8A6D3B;
  --colour-light-royal-blue: #275EE7;
  --colour-corn-silk: #FCF8E3;
  --colour-dark-olive-green: #3C763D;
  --colour-brown: #A94442;
  --colour-rebecca-purple: #512BAB;
  --colour-deep-royal-blue: #0059AA;
  --colour-honey-dew: #DFF0D8;
  --gradient-1: linear-gradient(to right,#275ee7,#512bab 75%);
  --gradient-2: linear-gradient(0deg,rgba(0,0,0,.15),rgba(0,0,0,.15));
  --gradient-3: linear-gradient(top, #f3f3f3, #f0f0f0);

  /* Typefaces */
  --font-headings: 'proxima-nova', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-buttons: 'proxima-nova', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-other: 'museo-sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* Type scale */
  --text-h1: 2em;
  --text-h2: 36px;
  --leading-h2: 44px;
  --text-h3: 30px;
  --leading-h3: 36px;
  --text-h4: 36px;
  --leading-h4: 44px;
  --text-h5: 30px;
  --leading-h5: 36px;
  --text-h6: 24px;
  --leading-h6: 28px;
  --text-p: 16px;
  --text-small: 80%;
  --text-a: 14px;
  --leading-a: 1.42857143;

  /* Shape */
  --radius-1: 3px;
  --radius-2: 4px;
  --radius-3: 50%;
  --radius-4: 2px;
  --radius-5: 8px;
  --radius-6: 6px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 480px;
  --breakpoint-2: 727px;
  --breakpoint-3: 749px;
  --breakpoint-4: 767px;
  --breakpoint-5: 768px;
  --breakpoint-6: 1000px;
  --breakpoint-7: 1280px;
  --breakpoint-8: 1440px;
  --max-width-1: 1920px;
  --max-width-2: 600px;
  --max-width-3: 500px;
  --max-width-4: 430px;
  --max-width-5: 400px;
  --max-width-6: 343px;
}

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 houzz.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/houzz.com" title="Houzz 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 proxima-nova

Other websites using proxima-nova as their main typeface

Similar colours

Websites whose lead colour is closest to Houzz’s

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