Colors and Font Guidelines

From Qt Wiki
Jump to navigation Jump to search

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 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
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