Colors and Font Guidelines: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
AutoSpider (talk | contribs) (Add "cleanup" tag) |
||
Line 1: | Line 1: | ||
{{Cleanup | reason=Auto-imported from ExpressionEngine.}} | |||
[[Category:Developing_Qt::Guidelines]] | [[Category:Developing_Qt::Guidelines]] | ||
Revision as of 15:30, 3 March 2015
This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean. |
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