Matt: Welcome to Podcast Awesome, where we chat about icons, design, tech, business, and nerdery with members of the Font Awesome team. I am your host, Matt Johnson, and today we've got something a little different. 

Dave Gandy, the founder of Font Awesome, has been quietly building something new, and it's called Look Awesome. And it's a theming tool designed to solve one of the trickiest problems in building for the web, which is color. 

Not just picking a color you like, but actually solving color, the technical side, the accessibility side, and yes, the genetic side, and you'll hear what that means here in a minute. This episode's an audio cut of a live demo Dave did for the Build Awesome Kickstarter stream, and we've trimmed it down to the parts that hold up best without a screen in front of you.

And if you want the full experience, and honestly for a color tool, obviously you're gonna wanna look at it, head over to our YouTube channel and watch the whole thing, and I'll link this in the show notes. But, you know, maybe you're stuck in traffic or you're taking a walk with a dog or whatever.

There is plenty to chew on and by the end, you'll know exactly why Dave considers this the most fun thing he's ever built. So, let's get into it.

Zach: Welcome, everyone. We are broadcasting live from Bentonville, Arkansas, and- 

middle of nowhere, Iowa To bring you the Font Awesome stream. Uh, yeah, we're talking today about Build Awesome, the Build Awesome Kickstarter, and we hit our very first stretch goal, for the theming system, and Dave's been iterating on a new, service that will let folks, create themes, create color palettes, he's been iterating on a, on a great new website that he would like to show off to everyone today.

Um, we'll [00:02:00] do, I think, some Q&A, uh, after Dave does his, uh, demo, and I s- I guess I assumed that everyone knew who Dave was, but I guess if not, I can go ahead and give you a little introduction. Uh, hopefully not too embarrassing while we're on stream, but Dave is the creator of Font Awesome, the Font Awesome library, the Font Awesome icon toolkit, and the originator of maybe the most, funded software Kickstarter of all time, uh, which I think is a very big deal, and sort of the foundation of this business model that we're trying to make open source, uh, sustainable and thriving. Yeah. so that was, I don't know how many years ago that original Kickstarter was. maybe don't need to go into that. Um, but- It was, it was back 

Dave: in 2016 ... yeah, it was a great campaign.

Back in 2016. Yeah. Amazing. So a while ago. 

Zach: 10 years ago. 

Dave: Yeah. Geez. So, I mean, the, the big idea behind it was, We really didn't wanna try to, uh, run our open source project with the Oliver Twist business model, which is, you know, "Please, sir, can I have some more?" Right? To go around begging to large, uh, large organizations for sponsorships, uh, as the primary method of trying to sustain, uh, didn't actually seem sustainable.

So we decided to try go a different route, which is, where you have a version that's more that people pay for, right? So let the real test be can we sort of jump the next hurdle? We ma- you know, we, we passed the first hurdle of madings- making something people wanted to use. Can we jump the next hurdle and make something that people will pay to use?

And so, the Font Awesome Kickstarter back in late 2016 was the first sort of, I guess real evidence we had that we could actually do that. and then, uh, we brought on, uh, Corey and, uh, Shoelace, uh, and ran the Web Awesome Kickstarter, uh, a few years ago. Um, and so this is sort of the repeatable model we're trying to see if we can, we can make work.

Uh, there's a whole bunch of really cool stuff, and one of those pieces that I'm excited about, [00:04:00] is on the theming side of things. 

Zach: that's a great segue to, uh, what we're gonna demo next.

Dave: this is the first intro to a product I've been working on for a little while now, uh, called Look Awesome. we want everybody to be able to, uh, find, create, uh, their own theme. there's some similarities going on here between this and, um, Font Awesome. So Font Awesome, one of the trickiest parts of Font Awesome, is that it is both a technical problem and an artistic problem, right?

So in order to be able to serve icons in a way that work really well, that people wanna use them, that's one whole level of complexity. And then the other side of it is, okay, but the icons have to actually visually look great. They have to go with different aesthetics. They have to actually, you know, do the artistic function as well.

 any intersection of art and science or design and tech, those intersections are always gonna be the most challenging. Because when you think about it, the people who tend to be the best on one tend to be specifically less good on the other. And so this, this intersection of these things is especially challenging.

So we have entire companies that, that revolve just around this particular piece. and that on the website, right, people who make, who build products, right? Websites, products, projects, and apps. the challenging piece of this on the technical side is, well, you also want to make sure that you, uh, are using colors in an accessible way, uh, where you can have the right contrast levels so that people, so that everybody can actually read your website, right?

I think we've all been on a website that has a such sort of low gray value on the text that it's just actually very, very hard to read the text, right? So, hitting the accessibility side is really, really important. and that's typically known as, you know, the, the hitting, hitting the color contrast is WCAG 2 is the standard.

WCAG S2 has issues, and we'll, we'll talk about that a little bit too. But, and then you've got the artistic side of things, right? You, you wanna be able to hit that look and feel just the way you want. and there's a third difficulty of color here too, which strangely enough is genetics.

Pantone, for everyone who works at Pantone, uh, and who's going to be dealing [00:06:00] directly with color, whether you're in marketing or you're actually working on the products itself, uh, everyone has to pass this test, and it's called the Farnsworth-Munsell 100 color hue test. Okay. And I've got, I've got it right here.

Zach: That's a mouthful. 

Dave: very similarly colored dots. You shuffle up the dots, you put them in order, and how many mistakes you make is how good your color acuity is.

Um, so this is like a real way to test, can I actually physically see these colors? this is an important piece of it. And so, you know, so, so folks around the company, w- when we came in, we got in for our, uh, snuggle, um, some, some different folks took the test. typically you wanna score a 15 or below if you are gonna be working with color.

I think that's the, that's the level that Pantone requires people to be at. I had two, two sets of dots that I had flipped. Um, I was also going quickly, so I ended up scoring an eight. So this is the kind of thing that actually really matters for, like, can you actually see these, these, uh, these differences in color?

 Um, uh, but so, you know, when it comes to the diffi- diff- difficulty of color, we've got three challenges: technical, artistic, and genetic. And so why don't we actually try to tackle all three? And that's the idea behind Look Awesome. So Look Awesome help you, get the next theme for your website, or really it's help your brand get everywhere it needs to be.

We'll, we'll kind of chat through that, but, one of the questions is why now, right? This is something I've been sitting on for several years. I've wanted, I've wanted to build this for several years it's beginning of April, first week of April. everybody comes in, everybody came in from our company, and we had, uh, our snuggle.

There's ... If you wanna go check out the podcast, we have some, some fun episodes on what the snuggle is and why we call it such a ridiculous thing. but it's a time where we all get together and we just kind of, uh, we plan, uh, we just reconnect as humans, um, because the foundation for all great remote work is in-person human relationships, and this is really kind of the time for that.

And this week, uh, we decided to do something a little bit different. We had what we called build week, and build week for us was we're going to use all of the newest modern [00:08:00] tools for coding, and we're gonna see just how much we can do. We've got several folks at the company who have been spending a lot of time trying to figure out how to get the most data out of AI, because within the last couple of, last few months, what you can get out of it is dramatically different.

and also we wanted to give, you know, we wanted to give folks a, a chance to play around with it and see, right? 

We care about quality of software. We care about quality of experience. We care about all of these things.

and eventually all of those are gonna make their way into Look Awesome, right? So what is this for, It's really for theming your next website, project, or app. At a base level, you've got a new project.

You need it, you wanna make it look great. and it solves both the aesthetic and the technical challenges at the exact same time, specifically of color to start and then everything else later. Uh, and really it's you wanna theme once and be able to use everywhere. So you make this theme one place. Uh, you can get it into your design.md file for Claude.

Uh, you can get it, uh, into your Tailwind variables. You can get it, uh, to Web Awesome, right? You can get it really anywhere you need this theme to be, you can get it there. Bootstrap, wherever you want it to be, we can get it there. That's, that's the big idea. and then when you make changes,and you hit save, these can automatically propagate everywhere then for free, right?

So no more spending a month and a half trying to get a rebrand into your website because those are involved and, uh, I have certainly done, more than a share of them, and I've also been responsible for some of them happening too, right? So those, those are painful. So if we can get rid of that pain, we wanna get rid of that, all that time for that giant refactor.

And, um, so the idea is if you wanna come with a single color here, you've got a, you know, one color you really like, you wanna grab an existing look and use it for a while until you're ready to actually go and, and do the full theming process yourself, you've got something you can use temporarily.

Or if you wanna take one, use it for inspiration, tweak a little bit, use it yourself. or if you have a whole brand, we can help you get that into the system super quick, um, you know, eventually, right?we've got color now. we'll show off what we've got working here and, the legs are kind of up and they're, and they're pretty good on a lot of this.

Uh, the part that we do have cracked pretty well right now [00:10:00] is the accessible side, helping you create a great looking palette with minimal effort. 

Zach:

Dave: So this is really fun. So I spent time, uh, I spent time doing hard research on several specific ones who have great brands, right?

NASA has a spectacular brand. and here's a... And I'm pulling this off of their, they've got their own brand guidelines that they have published here. We actually sampled the colors.

 I've actually got, uh, named buttons NASA blue, NASA red. They've got specific attributes on here that are adding to the theme as you, name these specific colors, it's gonna add them to the theme.

 and so when we save it, now what we can do is we can actually see for our palette we've made here we got a little description. We've got some images we used for the source. 

 imagine you had a Pantone, like, had this color as a Pantone chip in the real world, and you perfectly cast light across it, perfectly balanced light across it, all the way from the darkest dark to the lightest light, that these would be the colors you would sample along there.

And it turns out it's very difficult to get this right, not only because you have to hit the, uh, color contrast, uh, ratings just right, so we've actually done some really cool math here. There is only one shade of this blue that will hit a, a contrast ratio of three for dark, for, for black text, and seven for white text.

And so we actually have a binary search algorithm that goes through and finds this exact shade. We do the opposite on the bottom so that you can actually put light or dark on. And then our middle shade, same light, same on light and same on dark, uh, these contrast ratings. 

We wanna actually fully integrate these with all of these systems where you can go and you can actually just have a little include file, or you can have an NPM install, or you can get this where you need it exactly where you want it. 

and the idea behind having these palettes already built is that you've got a starting point, right? Grab one to start, get on with your project, right?

Help you get back to the important stuff of building the thing. And the easiest thing would be come in here, grab one you like to start, and then later, maybe you've got a budget for a designer, or you've got d- a budget for a whole agency to go and help you build a brand. That's cool. But even when you get that out of the agency, they're gonna hand you a PDF, and that PDF is still just as imaginary as before you walked in.

It's not anywhere it needs to be [00:12:00] yet. Look Awesome is for getting your theme and your brand everywhere you need it to actually be, right? And there's a lot of places that, that we can go with this, and this is the, this is the core heart of it. Color is one of the hardest things to tackle, and we wanna be able to see if we can crack that right away.

And so we're kind of building out in the open for this, right? Uh, building with AI lets us be able to rev so quickly. It lets us be able to get something out. So I've been working on this for now less than three weeks. and this is, frankly, I think this is the thing I'm most proudest, I've built so far, which is really, really fun to, to kind of see take shape.

 And I, you know, I've been messing with this so much lately, that I've come up with a new representation for Font Awesome Blue that I can remember, 0099 and then FA.

So that I can remember. And we've got an early attempt here to make some recommendations for some different options here. 

Zach: Oh, I haven't seen this yet. 

Dave: So this is bold, so it's using your brand plus the complement, right? So complement is a color term. and w- we've actually, we're not using, OKLCH components, we're using, physical colors.

We're using, pigment comp- the definition of pigment complement here. And so we've got some different options. these are a little more vibrant. this one is, has a slightly, doesn't look that different, but has a, it actually is picking a different shade of the orange and a different lightness value.

 these are toned down a little bit. And then you've got analogous, uh, brand plus analogous. Uh, this is kind of fun in here. You can have the analog of your, of your color here. I like b- uh, bold. We're gonna go with this. And what it automatically did was when I just picked a single color, it made up, green, a yellow, and a red for us to start.

and it also, grabbed the brand color and used that as the tint. So we've got a 250-degree tint. It's making some approximations here and rounding when it hits hex along the way, but, it's using the brand color to naturally tint this. and so you're automatically getting the feel of your brand very, very subconsciously coming through right now, and you'll notice it's taking the brand color and putting it up here on New Look and all the different places that's using the brand color on the site.

you're basically theming the site so you can see it in practice and get a feel for what this is gonna be like to actually use [00:14:00] this while you're building this color palette. and so let's see. I'm gonna... You know what? I don't like this red. I like my reds to be a little more towards the orange, so I'm gonna...

I don't wanna go full orange, but we're just gonna make it a little warmer there, okay? And then we're just gonna hit publish, and, it kinda randomly creates a, a few, uh, funny names for you if you don't put one in. then in here, oh, what do you know, it actually looks very similar to this one here called Happy Happy Happy I made a little while back, but it's a little tweaked, right?

This is a little lighter, this one's a little darker, and so we're just gonna go in here. Actually, we're gonna go back. We're gonna go to My Looks, and we're just gonna delete this guy outta here. Yep, and it's gone. Everything on here is undoable. That's the whole idea, right? That you can make changes, you can undo them. Eventually these are gonna be, uh, they're gonna be versioned, right? So every save is gonna be able to be versioned. that's that kinda idea going forward here. Um, so that's, that's the first one.

Let's try, we've actually got three methods here for creating a new look. The next one is I'm gonna go grab a URL. I'm gonna grab the URL, and I'm gonna talk a little about this real quick. Okay, so, lived in Massachusetts for 20 years and, know, visiting Nantucket, there's something that's so cool about how everything looks in Nantucket, the cedar shingles, the, the colors, and, and the city of Nantucket keeps a very tight rein on what the approved colors are.

If you've got a house, you can only use certain colors on trim, uh, on shingles, on e- all of these things. And it seems like it's a maniacal, crazy thing, except when you visit, it's like, this is actually really beautiful. And so my white whale, Nantucket White Whale, my white whale for years has been building a Nantucket, color theme.

Okay? And we're gonna do it in 10 seconds. You guys ready for it? 'Cause I've done the research ahead of time. So the city of Nantucket has their own, color Pantones. They're actually wrong. They quote two Pantones that are incorrect. I've traced this all the way through. There's no replacement for them, so we're gonna go with the next best thing.

This is from a website, HC-approved colors and materials. So this is the website, okay? And on here, it's got a few [00:16:00] colors. Oh, that's fun. So, uh... 

Zach: It's a pretty nice color palette. 

Dave: It's a really nice color palette. It's very subdued. This is, like, you see this on a brand, you're like, oh, you're not playful kid stuff, right?

You're like, okay, this is, this is serious at this point, right? So we're just gonna grab this URL, and we're gonna paste it. If 

Zach: I go to the hardware store in, uh, Nantucket, is it only gonna have six color swatches- If you- ... to choose from? 

Dave: Marine Home Center is actually the specific place that you actually need to get the paints from. Um, no joke. No joke. This stuff is, like, very tightly controlled, or, or very tightly, like, b- curated, re- It's really what it is. They're trying to make sure it's curated.

Zach: Hmm. 

Dave: Let's...

Zach: so- Yeah, I mean, in my mind, I, I feel like I see the integration of that export as- 

Dave: Yeah ... 

Zach: I would love to integrate this, this site with the Build Awesome website builder as well, so you can click a- Funny ... click a color palette and- 

Dave: Funny ... 

Zach: automatically create a starter project with that theme as well.

Dave: Funny you should mention that. That's the whole idea behind this. So there's gonna be two, two routes in. One, you can actually start with these color palettes, uh, and be able to go and get that, a Build Awesome site immediately with that color palette applied. It's actually probably a, it's actually a really neat workflow to come in and start that way.

The other option is you start in Build Awesome, and you're going to make your site. We are gonna have a, a version of this that is scoped down to basically a web component in line, so that when you are on your own website, in the same way that you're gonna be able to edit in line, you're gonna be able to theme in line as well.

Yeah, I think the integration points here are gonna be very cool to see, because if you can extend this to feel like a color picker- Yep ... but it really is a theme picker, uh, and then even edit in a more advanced, uh, fashion in Look Awesome- 

Yes ... 

Zach: that would be great. So- Because have a single source of truth for your color and your color palette- Well-

and your theming is a powerful thing 

Dave: Absolutely. And that as you change it, it gets it everywhere, so when your team decides, "Yes, we are changing this, we are [00:18:00] changing this logo, or we're changing this hue," or any of these things, or, "You know what? We're good. We're gonna actually upgrade from WCAG 2 to WCAG 3 color contrast, 'cause then we can actually get way better colors," uh, you can do that and then hit save, and it gets everywhere.

It's, it's, it's, it's really, really fun. 

Zach: Yeah, this is great. 

Dave: That's- This is great ... look awesome. Come in, find your look, create your own, and get it everywhere it needs to be. 

Zach: Amazing. Yeah. Uh, yeah, so if folks wanna try it out, they can go to look.awesome.me. Site is live now. Uh, so yeah, test it out, give it a test run. 

Dave: Yeah. 

Zach: Put in some of your favorite color palettes, and if you have recommendations for Dave, I guess give him some feedback- Mm-hmm

via the- Yeah ... feedback mechanism on the site itself. Um- 

Dave: Or drop me a note, dave@da- dave@fontawesome. No, well, sorry, Olive is wrong, dave@awesome.me, that's the correct address now. Um, we've been through a few iterations of this. It will all go back to the same 

Zach: place. 

Dave: That's right. Yes. It'll, it'll all get there.

That's right. Uh, try it out. Uh, let me know stuff, especially things that you think are working well. It's easy to, to let people know just the things that you think, uh, the suggestions or, or issues you run into, but let me know the stuff that you think actually is really working, too. I think that's, that'd be really helpful.

So thanks you guys for, for watching and listening. 

Zach: so, um, yeah, thanks for, uh, watching, and stay tuned later this week for another exciting episode of the Build Awesome Livestream and the Font Awesome Livestream.

So thanks everybody. 

Dave: Thanks everybody. See 

Zach: you next time. Bye. Go 

Dave: make something awesome.

Matt: All right, folks, so that is a little intro to Look Awesome. 

Dave's actually building in the open and wants to hear from you, especially about what's working and what isn't, and you can reach him directly at dave@awesome.me. And if this episode left you wanting to actually see the thing, the color slides, the NASA palette, the dark mode magic trick, that's by design, and you can watch the full demo on YouTube, and the link is in the show notes.

It's definitely [00:20:00] worth a watch. If you want to support what Dave and the team are building, the Build Awesome Kickstarter is still running. Head over to build.awesome.me, and it'll take you right there. As usual, Podcast Awesome was produced and edited by this guy right here, Matt Johnson. The Podcast Awesome theme song was composed by Ronnie Martin.

The music interstitials were composed by Zach Malm. And now you know what to do.

Font Awesome. Go make something awesome. Font Awesome. Go make something awesome.