When Your Branding Embraces Deep, Dark Colors
One of my favorite things about entering the winter season is the variety of deep, saturated colors I see daily. You come across them in winter gardens, holiday decor, and seasonal clothing. There’s something cozy about moody plums, berries, and chestnut colors that remind me of the old Dutch master's still life paintings.
What may surprise you is they make brilliant branding colors for the right business. Websites done in deep, monochromatic colors make you feel like you’re wrapped up in a cozy sweater.
Before and After "Softly" Freebie Opt-In Page
A few months ago I took on the challenge of transforming a light and airy Meg Burrage Kajabi Website Template into an elegant, home page design for a (fictional) online Aromatherapy business. Why? If you’ve ever been shopping for Kajabi website templates, chances are that you struggle to choose one that has the look you’re aiming for. The secret isn’t in finding a beautiful-looking template, it’s in finding a template with a good structure set up so that you can tell the story of your brand. It’s a little bit like buying a house. As long as the house has a good “flow” to it, you can always change the paint colors on the wall to fit your style.
Was that confusing? Watch the below video instead so that you can see for yourself how easy it is to change a website template to fit your branding style.
Note: These templates are for demo purposes only and don’t represent a live website. The copy has not been updated.
3 Tips For Kajabi Websites with Deep, Moody Colors
Lean into Cozy
Deep colors evoke a sense of mystery, warmth and sophistication. Lean into that feeling with the use of textures like the image to the left. Velvet and contrasting color add depth to draw in the eye of the website visitor.
Be Mindful of Text Color for Accessibility
A dark background calls for light font colors so that your website visitors can easily read your copy. Various shades of white provide crisp contrast, although be cautious of long text blocks. White can be tiring on the eyes to read, so consider breaking up your copy into smaller bites.
Play with Complementary Deep Color Shades
Take inspiration from Dutch floral still lifes from the 1600s to see how lovely dark shades work well together. Teals, blues, greens, and plums create an elegant and soothing supporting role for telling your story.
A Word About Copy
If you're reading this blog chances are that the idea of having your website design come to life in Kajabi is your biggest wish. I get that, which is why I want to say a word about Copy. That's website-speak for the text on your pages. As much as I love beautiful design, I also have a love for words. If you think that web design alone is going to get you sales, you may be waiting a long time. It may surprise you to hear that I'm in the camp of Copy and Design are equally important. An equally stylish and strategic web page invites your site visitors to stay and find out more about what you have to offer them.
Meg Burrage Desiger Kajabi Templates
If you need a quick and easy way to get your Kajabi sales page published, want to update your branding, or finally get your website pages built out, then take a look at Meg's Kajabi Templates. Who knows, you may find one that is right for your brand. Drop me a line at [email protected] if you want some help choosing the right template for your business.
Disclaimer: We are affiliates of these digital products and will earn a commission should you choose to purchase one of these packs, but rest assured, we would never recommend something we didn't wholeheartedly believe in and use in our own business.
Take Me to the Meg Burrage Kajabi Template Shop
Sara Smits van Oyen
I’m a Kajabi Specialist who's been on a professional journey that's spanned over 30 years in finance roles before finding the sweet spot of helping Kajabi entrepreneurs share their unique gifts with the world. I’m a mood creator and client journey geek who loves to help her clients shine in the spotlight so that they can focus on taking great care of themselves and their clients.
Transform Colorful Kajabi Website Templates into Black and White De...
Sep 12, 2024
3 Quick Style Fixes that Add Instant Polish to Your Kajabi Website
Apr 19, 2023
#block-1694873394061 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1694873394061 .block { border: 4px black; border-radius: 0px; background-color: #d4c8cc; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1694873394061 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1694873394061 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1694873394061 { text-align: left; } } #block-1577982541036_0 .btn { margin-top: 1rem; } #block-1732800242121 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1732800242121 .block { border: 4px black; border-radius: 4px; background-color: #efe9e4; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1732800242121 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1732800242121 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1732800242121 { text-align: left; } } #block-1577982541036_0 .btn { margin-top: 1rem; } #block-1734685094626 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1734685094626 .block { border: 4px black; border-radius: 4px; padding: 0px; padding: 0; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } @media (min-width: 768px) { #block-1734685094626 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1734685094626 .block { padding: 0; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } } @media (max-width: 767px) { #block-1734685094626 { text-align: ; } } @keyframes VOLUME_SMALL_WAVE_FLASH { 0% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 1; } 100% { opacity: 0; } } @keyframes VOLUME_LARGE_WAVE_FLASH { 0% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 1; } 100% { opacity: 0; } } .volume__small-wave { animation: VOLUME_SMALL_WAVE_FLASH 2s infinite; opacity: 0; } .volume__large-wave { animation: VOLUME_LARGE_WAVE_FLASH 2s infinite .3s; opacity: 0; } #block-1732801873750 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1732801873750 .block { border: 4px black; border-radius: 4px; padding: 0px; padding: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } @media (min-width: 768px) { #block-1732801873750 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1732801873750 .block { padding: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } } @media (max-width: 767px) { #block-1732801873750 { text-align: left; } } #block-1577982541036_0 .btn { margin-top: 1rem; } #block-1695978871700 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1695978871700 .block { border: 4px black; border-radius: 0px; background-color: #512a44; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1695978871700 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1695978871700 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1695978871700 { text-align: left; } } #block-1695978871700 .image__image { max-width: 40%; border-radius: 0px; } #block-1695978871700 .image__image { float: left; margin-right: 15px; margin-bottom: 10px; } #block-1706799523683 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706799523683 .block { border: 4px black; border-radius: 0px; background-color: #512a44; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1706799523683 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706799523683 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1706799523683 { text-align: left; } } #block-1706799523683 .image__image { max-width: 40%; border-radius: 0px; } #block-1706799523683 .image__image { float: right; margin-left: 15px; margin-bottom: 10px; } #block-1706799670680 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706799670680 .block { border: 4px black; border-radius: 0px; background-color: #512a44; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1706799670680 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706799670680 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1706799670680 { text-align: left; } } #block-1706799670680 .image__image { max-width: 40%; border-radius: 0px; } #block-1706799670680 .image__image { float: left; margin-right: 15px; margin-bottom: 10px; } #block-1706799983051 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706799983051 .block { border: 4px black; border-radius: 0px; background-color: #efe9e4; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1706799983051 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706799983051 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1706799983051 { text-align: left; } } #block-1577982541036_0 .btn { margin-top: 1rem; } #block-1706884180221 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706884180221 .block { border: 4px black; border-radius: 4px; background-color: #9a8288; padding: 0px; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1706884180221 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1706884180221 .block { padding: 0px; padding: 0px; padding-top: 20px; padding-right: 15px; padding-bottom: 20px; padding-left: 15px; } } @media (max-width: 767px) { #block-1706884180221 { text-align: left; } } #block-1577982541036_0 .btn { margin-top: 1rem; } #block-1706884180221 .btn, [data-slick-id="1706884180221"] .block .btn { color: #f5f7f4; border-color: #512a44; border-radius: 50px; background-color: #512a44; } #block-1706884180221 .btn--outline, [data-slick-id="1706884180221"] .block .btn--outline { background: transparent; color: #512a44; } #block-1696522456141 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1696522456141 .block { border: 1px none #9d8a75; border-radius: 0px; background-color: #efe9e4; padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } @media (min-width: 768px) { #block-1696522456141 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1696522456141 .block { padding: 0px; padding: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } } @media (max-width: 767px) { #block-1696522456141 { text-align: center; } } #block-1696522456141 .feature__image, [data-slick-id="1696522456141"] .feature__image { width: 100px; border-radius: 100px; } .authorfeature { display: flex; align-items: flex-start; position: relative; } .authorfeature__image-container { flex-shrink: 0; margin-right: 20px; } .authorfeature__image { max-width: 150px; height: auto; } .authorfeature__content { flex-grow: 1; } @media (max-width: 767px) { #block-1696522456141 .authorfeature { flex-direction: column; align-items: center; } #block-1696522456141 .authorfeature__image-container { margin-right: 0; } } #block-1734695683862 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1734695683862 .block { border: 4px black; border-radius: 4px; background-color: #fff; padding: 0px; padding: 0px; padding: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } @media (min-width: 768px) { #block-1734695683862 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1734695683862 .block { padding: 0px; padding: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } } @media (max-width: 767px) { #block-1734695683862 { text-align: left; } } #block-1734695683862 .block { overflow: hidden; } #block-1734699420622 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1734699420622 .block { border: 4px black; border-radius: 4px; background-color: #fff; padding: 0px; padding: 0px; padding: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } @media (min-width: 768px) { #block-1734699420622 { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #block-1734699420622 .block { padding: 0px; padding: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } } @media (max-width: 767px) { #block-1734699420622 { text-align: left; } } #block-1734699420622 .block { overflow: hidden; } .awesomecontainer { background: ; h1, h2, h3, h4, h5, h6, p, ul, li, .block-type--table table {color: ;} padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .awesomecontainer .row .block-type--accordion { align-self: flex-start; }
