4 tips on making a more functional design guidelines

The Roboto Team

2 mins read

Yes I know we're starting from a low-pojnt with a buzz-feed-esque "X tips on designing countdown blog posts", but we're going to give you some tips that quickly buzz past the bullcrap like a bullet train on a pursuit of simplicity.

No more than 3 brand colors

Okay, I know we're going to receive the brunt of 100 angry designers mashing away on their keyboards, but it's almost as if we "forgot to add a comment section to our blog" for a reason. We would hazard a guess that outside maybe one or two designers inside of Google or IBM, nobody knows neither the color name, nor the hexadecimal for any colours outside of their primary palette.

So how the hell do you keep a tight brand? Let me give you a simple solution, start with less colors, and ensure to make them cohesive - focus on using them consistently in the same place. Also it's worth mentioning, we mean brand colours... Not UI colours, they're a totally separate can of worms.

Just use 3 colours - 3 colour palettes

Name the colours

Pro-tip: nobody remembers hexadecimal codes, you wouldn't know Roboto Studio's #FF0068 is their accent color... But if somebody said "Hot Pink" you'd know immediately. So why don't we all focus on creating a human-readable naming convention that is easily equatable to a colour code.

Make your brand guidelines functional

There's something cool about that crisp, fresh, new 30 page guidelines that overpriced London agency just built you, but nobody is ever going to read past the third page where the hex colours are on unless you're IBM. Now for example if you switched this out for a simple Hex/RGB colour (bonus points for copy-paste hex code), Typography (along with where to download it) and any design patterns you might use commonly (think: Spotify's duotone portrait style). This way, when Tom from HR is sending out the wrong colour LinkedIn, you can curse him to a 1000 painful deaths for not adhering to the brand guidelines.

Design System taken from Figma Boilerplate

If you're a startup use a webfont for your typography

We get it, everybody wants to be different and that flashy New York magazine has a much cooler font than the one you have... But take a chill pill and make it easier for your future self by using a Google font, rather than licensing a flashy one, your future web devs will love you and generally all but one font-snob is going to notice.