Colors and Font Guidelines: Difference between revisions
Jump to navigation
Jump to search
AutoSpider (talk | contribs) (Add "cleanup" tag) |
Henri Vikki (talk | contribs) (Images.) |
||
Line 19: | Line 19: | ||
=== Gray palette === | === Gray palette === | ||
{| | {| class="wikitable" | ||
|[[Image: | |[[Image:Palette DoubleDarkGray.png|Double dark gray sample]] | ||
|[[Image: | |[[Image:Palette DarkGray.png|Dark gray color sample]] | ||
|[[Image: | |[[Image:Palette MediumGray.png|Medium gray color sample]] | ||
|[[Image: | |[[Image:Palette RegularGray.png|Regular gray color sample]] | ||
|[[Image: | |[[Image:Palette LightGray.png|Light gray color sample]] | ||
|[[Image: | |[[Image:Palette PaleGray.png|Pale gray color sample]] | ||
|[[Image: | |[[Image:White.png|White color sample]] | ||
|- | |- | ||
|'''Double dark gray''' | |'''Double dark gray''' | ||
Line 32: | Line 32: | ||
|'''Medium gray''' | |'''Medium gray''' | ||
|'''Regular gray''' | |'''Regular gray''' | ||
| | |'''Light gray''' | ||
|'''Pale gray''' | |'''Pale gray''' | ||
|'''White''' | |'''White''' | ||
Line 38: | Line 38: | ||
|'''HEX''' #1e1b18 | |'''HEX''' #1e1b18 | ||
|'''HEX''' #35322f | |'''HEX''' #35322f | ||
| | |'''HEX''' #5d5b59 | ||
|'''HEX''' #868482 | |'''HEX''' #868482 | ||
|'''HEX''' #aeadac | |'''HEX''' #aeadac | ||
Line 55: | Line 55: | ||
=== Color palette === | === Color palette === | ||
{| | {| class="wikitable" | ||
|[[Image: | |[[Image:Palette DarkGreen.png|Dark Green color sample]] | ||
|[[Image: | |[[Image:Palette MediumGreen.png|Medium Green color sample]] | ||
|[[Image: | |[[Image:Palette LightGreen.png|Light Green color sample]] | ||
|[[Image: | |[[Image:Palette DarkBlue.png|Dark Blue color sample]] | ||
|[[Image: | |[[Image:Palette Blue.png|Blue color sample]] | ||
|[[Image: | |[[Image:Palette Violet.png|Violet color sample]] | ||
|[[Image: | |[[Image:Purple.png|Purple color sample]] | ||
|- | |- | ||
|'''Dark green''' | |'''Dark green''' | ||
|'''Medium green''' | |'''Medium green''' | ||
|'''Light green''' | |'''Light green''' | ||
| | |'''Dark blue''' | ||
|'''Blue''' | |'''Blue''' | ||
|'''Violet''' | |'''Violet''' | ||
Line 83: | Line 83: | ||
|'''RGB''' 50, 137, 48 | |'''RGB''' 50, 137, 48 | ||
|'''RGB''' 128, 195, 66 | |'''RGB''' 128, 195, 66 | ||
| | |'''RGB''' 20, 20, 140 | ||
|'''RGB''' 20, 170, 255 | |'''RGB''' 20, 170, 255 | ||
| | |'''RGB''' 100, 0, 170 | ||
|'''RGB''' 174, 50, 160 | |'''RGB''' 174, 50, 160 | ||
|} | |} | ||
{| | {| class="wikitable" | ||
|[[Image: | |[[Image:Palette Red.png|Red color sample]] | ||
|[[Image: | |[[Image:Palette Yellow.png|Yellow color sample]] | ||
|- | |- | ||
|'''Red''' | |'''Red''' |
Revision as of 11:00, 30 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
Color palette
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