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

						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

						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

		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

Examples

Coming soon.

Categories:

• Developing_Qt
  • Guidelines