This is the first in what might be — if you tell me you want more — an ongoing series here on my website.
I’m sharing a color palette, typefaces and a design style that you can steal.
High-end colors & fonts
I’ve recommended using two main colors in your marketing materials before, and I’m showing you how it works with these sample designs of a web page and flyer for a high-end boutique.
The purple and deep blue are the main colors. A light beige and grey serve as background colors, and I’ve used them to set off the main content areas.
The green is an accent color. In the website example, I’ve used it on the optin box found in the upper right corner of the site. In the flyer example, it’s used for the company name.
Because it’s used sparingly, your viewer’s eyes will go straight to it. That’s why accent colors are also referred to as “conversion colors,” because they’re a great way to direct attention to your call to action. Your call to action might ask for an optin to your email list, a visit to your store or a phone call to request a quote.
Steal this color palette
This group of sophisticated, high-end colors can be plugged right into your website theme or print design program. For the web, use the HEX color codes, which start with a #. For print work, plug in the CMYK numbers to generate swatches to match.
Steal these fonts
I’ve already written about upscale typography here. I used all my rules about how to combine typefaces when I came up with this font combination.
The typefaces I chose are versatile because they’re available in a variety of weights, and use classic, easy-to-read letter forms.
Lato, the beautifully-drawn sans-serif font in the headline, comes in ten different weights.
Lora, in the body copy, is a serif font that’s easy to read and comes in four weights.
Both font families are available through the Google Font API, and can be used both on web pages and in print projects.
To use the fonts on your web pages, follow the directions here.
To download the fonts to use in print projects, do this:
Step 1: click “add to collection” next to the font you’d like to use
Step 2: click “download your collection” at the top of the page (see below).
I hope you enjoy Stealing This Design. Scroll on down and leave me a comment to let me know if this post is helpful to you. If it is, I’ll plan to write more like it in the future.
EDIT: This post has provoked some very interesting discussions in the comments section due to the word “steal” in the headline. Lifting creative work you find on the Internet without permission is stealing, and it’s wrong. In this case, I’m giving you the ingredients — colors, fonts and layout ideas — but you have to cook up the combination yourself. That — of course — isn’t stealing. It’s creating.
73 thoughts on “Steal This Design: Gorgeous, Upscale Colors & Fonts”
Yowza! I love this, Pamela.
Were you thinking of our recent review call when you designed it?
I may steal these for the remake of my site.
Thank you so much!
Steal away! That’s what they’re there for. 🙂
Marsha, What is the font that you use in your body text, size and line ht.? I think it is very easy on the eyes. Thanks I enjoyed the call on your remake concepts.
Stephanie,
I’m using Droid Serif right now at 14 pt. It’s a Google font. I find it very readable. Thanks!
Love this!
Good to know you liked it, David. Thanks for the comment!
I love all your posts Pamela but this one was a real “gift”. What are your thoughts about using only one font style that can look different both in size and when bolded, specifically Century Gothic?
That can work great! I like giving people font pairs because I find combining fonts to be a real sticking point for folks.
But when you’re using a typeface family that has lots of weights to choose from like Century Gothic, using only one typeface is a good option: you know for sure that wherever you use it the combination will look good.
I’m glad this was helpful, Stephanie. Thanks for letting me know!
Thanks Pamela for such a quick reply. I have been struggling with using a serif for my body text and really prefer the clean look of the century gothic .
This is such a big help Pamela- I just have a real rookie question- kind of hung up on introducing the google fonts to your blog? (which is what I believe you referred to )
The following is from your cited link- my question is- where EXACTLY does one add this link? Am I too remedial for this– in other words, when does your next class begin ;( (I hope my question makes some sense–)
Overview
You can start using the Google Font API in just two steps:
Add a stylesheet link to request the desired web font(s):
Style an element with the requested web font, either in a stylesheet:
CSS selector {
font-family: ‘Font Name’, serif;
}
or with an inline style on the element itself:
Your text
Note: When specifying a web font in a CSS style, always list at least one fallback web-safe font in order to avoid unexpected behaviors. In particular, add a CSS generic font name like serif or sans-serif to the end of the list, so the browser can fall back to its default fonts if need be.
Actually, Ridgely, you’re on a WordPress blog, so there’s an even easier solution you can use. Just go to your Plugins directory, and search for the WP Google Fonts plugin. Install and activate it, and then you can use Google Fonts easily without having to tinker under the hood of your blog.
Huge help, Pamela! I love this – since most of us don’t share your expert eye for color combos. 😉 More, please!
Thanks, Annie. Will do!
This is such a great post – excellent job!
So much of “good design” comes from “stealing” other well executed design concepts and adapting them for your own purpose. And I really love well done design how-to tutorials, thank you!
Thanks: glad you liked it!
This is great Pamela. I’ve been following your stuff for a while but haven’t commented. I love this idea. I already have my own brand sorted out but it’s definitely something I’ll be linking my customers to (who can’t afford design services of their own).
Thanks, Jovana … and thanks for your first comment! Feel free to chime in any time. 🙂
Hi Pamela
Yes indeed, this is helpful. I was actually looking through all the google fonts the other day, downloaded iphone apps etc. but searching for 2 fonts that go together (or better three!), takes forever.
Thanks for your suggestions.
It can be a little overwhelming, right? I love this stuff, so I’ll definitely do more of it in the future. Glad you liked it, Juliette.
Yes. Yes! YES! Please do more of these. I’ve decided that I’ve got somewhat of a handicap when it comes to choosing and matching colors for websites. I was using grays and blacks the other day for a college ministry site, and my husband (who is better at colors than I am) called me out on it. I’m still a bit “in the dark” on all of this though. Thanks for your post.
P.S. Where can I find more info on color palette options for web design?
Hi Debra! This post has tons of color resources. For palettes that might inspire you, I recommend the colourlovers.com site. Once you’ve honed in on the colors you want to try colorschemedesigner.com, which lets you see what they’d look like in action. Have fun!
LOVE this colorlovers site! I have been lost in color combinations for the last hour! Thanks for sharing all your wonderful resources!
You’re welcome, Stephanie. Glad you enjoyed them!
Great post, Pamela, yes, would be very happy to see more stuff like this.
I love playing around with colour combinations for my website designs and I always learn something new from you – you are a great resource.
Marion
Thanks for letting me know, Marion. It’s good to hear from you!
Yes, this is so cool. I can’t way to try out the fonts. Thank you Pamela.
I’d love to see them in use, Liz: feel free to come back and post a link!
I think the type face on your own blog is Georgia and I like it and have started using this font myself now.
Would you mind telling me which font size and line height you use in your blog posts? It is so easy to read, I like it very much!
Hi Dirkje,
It’s Chaparral Pro from typekit.com, and I use it at 17 points with line spacing set at 25. Glad you like it! Georgia’s a good substitute, and can probably be used a bit smaller than that.
Thanks, its lovely (I really thought it was Georgia!). Is it a websafe font? –> I suppose so otherwise I don’t think you would use it?
I am going to look for the font this weekend. Thanks for sharing!
I just love it when someone who really knows what they are doing shares their “recipe” and lets me bake it in to my site. I like good design, but I’m not a designer, so anytime you put something together like this, Pam, I’m all over it! I’m using Thesis for my blog site, so I can’t wait to give this a try.
Thank you for all of your sharing!
Oh, good Susan: glad you liked it. Based on the feedback I’ve received you can be sure I’ll do more of this in the future.
Hello Pamela,
I got a problem with choosing matching fonts :/ Despite reading your advices im still not sure what to choose. Maybe im too picky :/
The problem is i got a logo for my blog designed that uses Springsteel Light font. I got advice from the designer to use the same one for posts headlines and widged tittles. And now i dont know what to use for paragraph, quotes ect :/
I seen that there is whole Springsteel family. And since Springsteel Light that is used in Logo name (u can see at http://www.otwieraczumyslow.pl) and its sans serif i thought that maybe i could use Sprinsteel Serif font for paragraph text?
Could you please look at this faimily and give me quick advice? Unfortunately i got no money to pay for such advice :/ so if u are not able to help me because it normally costs money forget that i asked for help.
Piotr, I can’t give a detailed answer, but I can tell you that I like the way it looks now. Keep up the good work!
Nice to hear this. Thanks for the encouragement 🙂
yes, PLEASE and THANK YOU. Would love a series of this.
Good manners gets you everywhere 😉 I’ll do more, I promise!
Thanks, I am looking forward to it. I am considering to buy the Big Brand System Design Guide too…
What really works for me is how the colors of the photos match so nicely with the main and accent colors in the design.
I’m with @Debbie. I think you have a winner of an idea here!
Wouldn’t it be nice if we could always find photos to match our color schemes? 🙂
I absolutely LOVE the “Steal This Color Palette” feature! Thanks for sharing and keep ’em coming!
Thanks, Amber! And thanks for your comment. 🙂
As a fellow designer, I really wish you hadn’t used the term “steal” for any of this. There is enough theft and copyright infringement going on today and it’s getting harder and harder for designers (and other creative professionals) to make a living, that I think encouraging people to STEAL things is doing a real disservice to your fellow creatives. I understand encouraging people use some facets of this design for INSPIRATION, but to outright encourage them to “steal” it is sending the wrong message, IMO. As someone who has been *stolen* from (logos and ads directly copied) it really hits a nerve. Sorry to be a downer but I think people need to be aware that stealing really isn’t okay. It isn’t okay to steal photos off the internet, and it’s not really okay to directly steal people’s ideas. In the future, could you please at least just use another word. Thanks.
Eeek: sorry to hit a nerve.
One of the tricks to writing a good headline is to use provocative words that get attention, which is why I chose “steal.” Of course outright stealing is never OK. I’m hoping anyone reading this blog understands the difference.
I hope so too! But you never know who might be reading (lots of people, not just the ones commenting) and misinterpreting or taking things too literally.
I absolutely think it is understandable if you don’t wont your design being stolen. Here, Pamela is giving away her suggestions for fonts that go well together and thus it is something she is giving away for free, which I personally appreciate very much. She is using the term ‘steal’ in a different context.
I think that many artists and designers are somewhat too touchy on this subject. Of course it is not right to steal someone’s complete design or artwork, but let’s keep in mind that design itself is by nature not proprietary. We get inspired, and where does that come from? Did the inspiration belong to us? And is it not right to be inspired by other people’s work? If I were to copy the complete design, I would probably look pretty bad anyhow, because this kind of stealing usually hits back some way or another. But to be inspired and repeat something someone else has done and change it according to my own creativity will produce something new.
Instead of being upset about the stealing part, let’s face this one fact: Copying exists and always will. So why not continue on with our creativity to be the first to create something new in our own individual realm, so that the world can see it, consume it, enjoy it and last but not least share it! For me, that’s a better way to evolve.
Yes, I understand all that. My point is not to use the word “steal”. Theft is rampant on the internet these days and, like I said, it is getting harder and harder for creatives to make a living these days because people think they can just take whatever they want if it is online. I just question the wisdom in giving what seems a tacit approval to do such a thing. I know this is not the intent of the article and I totally understand what Pamela is trying to do and I think she writes a great blog. I think she is a creative enough of a person to think of another, more positive way to say “Get Inspiration from this” than “steal”.
There are many people out there that will not understand the difference between “getting inspiration” and “stealing”. You just never know how might be reading your blog. And I just think it’s something that creatives should stand together to try to prevent.
Well, except you can’t really (as a practical matter) “Steal” anything in this post. Color combos and open fonts aren’t copyrightable, and aren’t intellectual property in any sense of the phrase.
It’s impossible to write in such a way you please everyone and confuse no-one. I defend your right (“Designer”) to be sensitive about this point but I’m guessing more of us read Pamela’s post as a result of her being a bit edgy with her language and we KNEW she wasn’t promoting theft.
I’m sure we all agree with your point that stealing is wrong but it’s time to get over your loss and start using your creativity to find ways and opportunities for making money with your design skills instead of banging the drum with such a disempowering belief about how hard it is to make money as a creative. Life’s always been hard or maybe life’s always been easy – the great thing is we get to choose what we believe.
Marion
For the record, I’m over my “loss” and my business is doing great, but I still feel it’s important to stick up for fellow creatives. I actually find it odd that people are arguing against this point. I am sure people who read this blog on a regular basis understand the difference, but my point stands that this blog is not limited to just those people.
There’s a good chance I’ll be using that headline again. I’ve searched the thesaurus, and “purloin” and “abscond” just don’t have the same ring to them. “Model this design” won’t make anyone read the post. “Take inspiration from these design ideas” is way too long.
So my apologies in advance, but you will probably see this one again. I may add a disclaimer, but I won’t change the wording.
Of course that is your prerogative. I just don’t know why you would want your blog associated with something that has such negative connotations, especially in the creative community.
Here’s the thing: this blog is not for designers or creatives. I realize I have many readers who are designers, but I’m not writing for them — not at all.
I’m writing for people who own businesses they need to market, but they can’t afford to hire a designer or an ad agency. They want to learn the basics so they can handle some of that work themselves.
My goal is to get them to the point that their marketing efforts grow their income so they can hire a professional in the future. And my hope is that they’ll be excellent clients, because they’ll understand the complexities of design and marketing, and they’ll know how to recognize good work when they see it.
I don’t mind that designers and marketing/communications folks read this blog, but theoretically they should know all this, so I’m not sure what the appeal is.
For me there’s something more interesting going on here. Those of us who have responded to this thread and appeared to disagree with some of what you’re saying (though none of us are saying theft is ok), are just possibly demonstrating some loyalty to Pamela because we know, like and trust her.
This was, for me, a subconscious thing but it’s made me realise Pamela has built up a relationship with me over the months and therefore I trust her and am likely to agree with her way of expressing herself.
By contrast, I’ve no idea who you are. I don’t know why you’re not using a name or website as I assume you’re doing business online. The anonymity just increases the distance between us.
I’m glad though that you’ve contributed to this thread as it has certainly got me thinking about my beliefs and values in business.
I actually enjoy your blog a lot and I like the simple, well-written tips that you offer. I have posted them and linked to your blog pages so people can understand what designers do a bit better. Which actually may result in more business for you, if they follow the link.
I still think there is a better way to approaching the inspiration concept than telling people to steal it. For instance:
Inspirational Idea:
Study this design:
Get Inspired:
Creative Case Study:
Etc.
It appears that this was just the headline to get attention. Too bad we can’t edit these posts, then we could at least look at font and colors combinations and then “be inspired” by these too. : )
None of “Designer”s suggestions work from a copyrighting standpoint. As nothing specified or discussed in this post is, as a matter of law or common sense, “steal”-able, I think Pamela’s fine and the criticism off-point.
Oh dear God. I meant COPYWRITING. Not copyRIGHTing…. sheesh.
I just want to say I support Pamela’s use of the word “steal”. People should not have to be politically correct in their writing. Although I realize it is a rare commodity these days, readers have to exercise some common sense. I think it’s perfectly obvious what Pamela meant.
Relax… Did Abbie Hoffman really want people to shoplift when in 1970 he wrote “Steal This Book”. I don’t think so. He wanted to attract attention to his ideas. No different from Pamela wanting to attract attention to the ideas and concepts in this post. People of low character were “stealing” ideas before that book, and this post and will likely continue stealing long after both of them are forgotten. You can steal the technique, but not the talent. Ask the first guy who had his idea of using colored paint instead of just black what he thinks of people stealing that idea.
My point is that a lot of people don’t even know they are stealing. They think just because something is on the internet, it’s free to take as they see fit. I know a lot of photographers and people are always stealing their proofs. And the people doing it don’t even think they are doing anything wrong. So saying “steal this design” just feeds into their belief that there is nothing wrong with taking others IP.
I am a photographer who dabbles ever-so-slightly in design. As someone who has had a ton of online images stolen by people who either did or didn’t realize they were stealing, I get Designer’s point. I think there is a better way to attract interest in your title without the negative connotation of stealing something. I do know you didn’t mean it literally, but the implication is that stealing is OK. It’s not a matter of being PC, it’s just a matter of connotation and implicit approval. And I think way too many people are far too easily swayed in the wrong direction. And stealing online creative is a huge issue.
Titles like ‘Design Donation!’, ‘Use This Design’, ‘A Design for YOU!’, ‘FREE Design!’, ‘Useable Design’, ‘This Design: My Gift to You’ — just off the top of my head. I’ll guarantee FREE gets you more looks than STEAL. LOL Anyway, you get my point.
All-in-all, a nice blog Pamela! My first time visiting.
On second thought … Yeah. You should probably avoid the use of the word ‘steal’ as you employ it here at all costs. I initially felt like your use of the word was fine, but after reading all of the comments and mulling on it more, it’s likely a bad idea and encourages the innocent (or clueless) among us to literally steal the copy-written and protected work of other designers, photogs, artists, etc. as happens all too often in our digital world.
Perhaps with this sad fact of digital life in mind you could work harder to educate in your similar posts that while you are intentionally sharing your designs, the internet is not a free range of gratis graphic design work, photos, etc. Your regular readers no doubt get this, but the random person who lands here may not know and could use a lesson in online etiquette or, to put it plainly, copyright law.
@Annie Sisk: It’s not the literal “stealing” of this design that is the issue. It is the use of the word “steal” in the context of “stealing” a design or other creative works of a person. And it breaks down the inhibition toward the notion of stealing and the act of stealing. You are right as far as fonts and colors alone not being copyrighted, but they are when combined together in a design. Words and musical notes are not, by themselves copyrightable, but when combined certain ways into songs, they most certainly are.
@Marion Ross: You questioned why I am not linking to my business or giving my name. I’m posting anonymously for two reasons. First, as a professional courtesy to Pamela, as I do not think I should be using her blog to drive traffic to my site. And second, because I figured I’d probably get some grief for posting an opinion contrary to everyone else. If Pamela needs to know who I am, she has my email address.
Hello Pamela,
Thanks for this really useful post. I’ve been trying to decide what a good color combinations for a website that I’m helping to develop. Can you check it out please and give me your 2 main color combinations that you think would be perfect for the site considering its content and well… domain name? I would really appreciate it.
P.S.
You can go to the site using the website info I used for this comment. Thanks a lot!
Additional:
Let me know what ideal fonts to use as well please please!
Hi John,
The site is trying to appeal to women, I’m assuming, so I’d recommend adding some warmer colors: reds, oranges, purples, for example.
I can’t give you detailed information here, but if you’re interested in a consultation you can use the contact form here on the site.
Thanks Pamela , that’ll help me bigtime! Can you lead to where the contact form is ? I’m having a hard time finding it,lol.
Thanks you Pamela , that’ll help me bigtime! Can you lead to where the contact form is ? I’m having a hard time finding it,lol.
Comments are closed.