Using color as a branding element on your Squarespace website - video collab with Mariah Althoff

using color as a branding element on your website  | video collab with mariah althoff

Pull up a chair and pour yourself a drink because I’ve got a TREAT for you today!

I’m got a really fun collaboration to share with you and I’m so excited for you to check it out!

As a custom web designer who also offers branding packages, I naturally get asked a lot of branding questions. I’ve received a lot of questions about color and branding lately so I decided to answer that here today. But to make it a bit more interesting, I invited my friend Mariah Althoff to join in me and we’re talking all about how to use color effectively on your Squarespace website!

Mariah Althoff is a visual branding expert and web & graphic designer who has worked with a seriously impressive roster of clients. From solopreneurs to small businesses all the way up to Walmart (!), Mariah knows her stuff!

In this video, we’re chatting all about how to use color effectively on your Squarespace website. It’s basically a conversation between friends (#onlinebizbesties) but we’re sharing lots of practical information and lessons you can apply to your own Squarespace website. I know you’ll get a lot out of our tips & recommendations!

If you’d rather read a blog post than watch a video, no worries - I’ve got you covered with all the information below.

This is the second video in our branding and Squarespace website collaboration series, check out the other posts/videos here:

Alright, let’s jump right in. Enjoy!

How to use color effectively on your Squarespace website

Click play on the video or watch it on Youtube

Choose 1-3 Dominant Colors for your color palette

  • Color palette has 1-3 dominant colors

  • Use these most often in branding across your website, other marketing materials, social media, etc.

  • If you use too many colors on your website, it won’t feel cohesive and will look too colorful which isn’t good for user experience

  • Can always search “color palettes” on Pinterest for inspiration

  • Color palette is influenced by the type of brand you have. For example, a wedding photographer might pick soft pastel palettes (pink, ivory, etc.) vs construction firm might pick greens and browns, law firm might pick navy blue or red)

Check out Mariah’s blog post on How to create the perfect color palette for your brand.

Use the rest of your brand colors as accents

  • 2-3 accent colors

  • Use these colors for things like link colors, hover colors, icons, images and illustrations, etc.

Keep colors consistent

  • All header types same color (i.e. H1 are all pink, H2 are all navy, etc.)

  • All buttons same color, depending on size

  • Set up site stylings in Squarespace to make sure that colours are uniform across site

Button color

  • You want the most attention grabbing color in your palette to be your button color

  • The buttons will be your CTAs (e.g., “book a meeting” or “buy now” and you want those to jump off the page for better conversions

  • Best color options – Red, Orange, Yellow, Green, bright pink - all great to grab attention on the webpage

  • Worst color options – Black, White, Brown, Grey - neutral colours blend in and don’t get clicked on as often

  • Different colours for different sized buttons (small, medium, large - set in Squarespace site styling)

Heading/Text colors

  • Consider hierarchy when choosing heading colors - H1, H2, H3

  • Set colors in Squarespace site styling

  • You probably don’t want your H3 colors to pop more than your H1

  • Make sure they’re colors that are easy to read - not too bright or light

  • Avoid colour in body text

  • Color in headers breaks up long sections of text on page

Background color of website

  • If in doubt, choose white background for your website

  • Clean & simple trumps everything in design

  • Squarespace templates default to white backgrounds so follow that and add in color as accents throughout the website using site styling. Use color in smaller chunks or sections.

  • Can use colored backgrounds for blocks or sections of your site to break up the content (e.g., on Index pages)

  • If you do use a full colored background, don’t make it a bright one

  • Use a colored border as a compromise if you do want to use a bright color

Final Thoughts

Well there you have it, I hope you’ve enjoyed learning about how to use color as a branding element on your Squarespace website. Thank you so much for checking it out and thanks Mariah for joining me!

Be sure to watch the video conversation between myself and Mariah and let us know if you have any question - we’d love to hear from you!

Connect with Mariah Althoff:

Additional Resources:

Now it’s your turn to tell us, how have you used and included color on your Squarespace website? Do you use colour sparingly or is it all over your site? Have you updated the site stylings on your Squarespace’s back end yet? Anything you’re going to change now that you’ve heard our tips? We’d love to know so leave us a comment below!

* indicates affiliate links (Mariah’s codes)


Interested in learning more about what it takes to get a website up and running? Sign up for my free 7 day e-course!