Colors and Font Guidelines

Colors and Font Guidelines

Bellow you can find our recommended color palette, textured backgrounds and the fonts that will ensure consistency between your app's GUI and the other many example apps' GUIs published in the Qt website. There are also examples of how to use each of them.

Recommended Color Palette

We recommend:

• Use primarily the grays
• Use the other colors only to accent a particular feature/item in your demo/app
• Avoid using gradients, especially multi color gradients, use solid colors instead
• Avoid detailed and colored textured backgrounds or use one of our 3 suggestions
• Avoid aliased/jaggy graphics

Gray palette

Double dark gray color sample	Dark gray color sample	Medium gray color sample	Regular gray color sample	Light gray color sample	Pale gray color sample	White color sample
Double dark gray	Dark gray	Medium gray	Regular gray	*Light gray*	Pale gray	White
HEX #1e1b18	HEX #35322f	*HEX*#5d5b59	HEX #868482	HEX #aeadac	HEX #d7d6d5	HEX #ffffff
RGB 30, 27, 24	RGB 53, 50, 47	RGB 93, 91, 89	RGB 134, 132, 130	RGB 174, 173, 172	RGB 215, 214, 213	RGB 255, 255, 255

Color palette

Dark Green color sample	Medium Green color sample	Light Green color sample	Dark Blue color sample	Blue color sample	Violet color sample	Purple color sample
Dark green	Medium green	Light green	*Dark blue*	Blue	Violet	Purple
HEX #006325	HEX #328930	HEX #80c342	HEX #14148c	HEX #14aaff	HEX #6400aa	HEX #ae32a0
RGB 0, 99, 37	RGB 50, 137, 48	RGB 128, 195, 66	*RGB* 20, 20, 140	RGB 20, 170, 255	*RGB* 100, 0, 170	RGB 174, 50, 160

Red color sample	Yellow color sample	Yellow color sample	Yellow color sample	Yellow color sample	Yellow color sample	Yellow color sample
Red	Yellow
HEX #b40000	HEX #e0c31e
RGB 180, 0, 0	RGB 224, 195, 30

Textured backgrounds

Coming soon.

Recommended fonts and font sizes

In addition to the above recommendations, we also suggest a few simple guidelines regarding text and headers:

• Use a sans-serif system font at 24 pt, Bold, for headers
• Use a sans-serif system font at 14 pt, Regular, for body text
• Use at least 8 pixel margin around text elements