Colors and Font Guidelines: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
=Colors and Font Guidelines=
[[Category:Developing_Qt::Guidelines]]


Bellow you can find our recommended color palette, textured backgrounds and the fonts that will ensure consistency between your app’s <span class="caps">GUI</span> and the other many example apps’ <span class="caps">GUI</span>s published in the Qt website. There are also examples of how to use each of them.
= Colors and Font Guidelines =


==Recommended Color Palette==
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:
We recommend:
Line 11: Line 13:
* Avoid using gradients, especially multi color gradients, use solid colors instead
* 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 detailed and colored textured backgrounds or use one of our 3 suggestions
* Avoid aliased/jaggy graphics
* Avoid aliased/jaggy graphics  


===Gray palette===
=== Gray palette ===


{| class="infotable line"
{|
|
|[[Image:http://qt.io/uploads/image_upload/Palette_DoubleDarkGray.png|Double dark gray color sample]]
[[Image:Palette_DoubleDarkGray.png|Double dark gray color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_DarkGray.png|Dark gray color sample]]
|
|[[Image:http://qt.io/uploads/image_upload/Palette_MediumGray.png|Medium gray color sample]]
[[Image:Palette_DarkGray.png|Dark gray color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_RegularGray.png|Regular gray color sample]]
|
|[[Image:http://qt.io/uploads/image_upload/Palette_LightGray.png|Light gray color sample]]
[[Image:Palette_MediumGray.png|Medium gray color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_PaleGray.png|Pale gray color sample]]
|
|[[Image:http://qt.io/uploads/image_upload/Palette_White.png|White color sample]]
[[Image:Palette_RegularGray.png|Regular gray color sample]]
|
[[Image:Palette_LightGray.png|Light gray color sample]]
|
[[Image:Palette_PaleGray.png|Pale gray color sample]]
|
[[Image:Palette_White.png|White color sample]]
|-
|-
| '''Double dark gray'''
|'''Double dark gray'''
| '''Dark gray'''
|'''Dark gray'''
| '''Medium gray'''
|'''Medium gray'''
| '''Regular gray'''
|'''Regular gray'''
| '''Light gray'''
|*Light gray*
| '''Pale gray'''
|'''Pale gray'''
| '''White'''
|'''White'''
|-
|-
| '''<span class="caps">HEX</span>''' #1e1b18
|'''HEX''' #1e1b18
| '''<span class="caps">HEX</span>''' #35322f
|'''HEX''' #35322f
| '''<span class="caps">HEX</span>'''#5d5b59
|*HEX*#5d5b59
| '''<span class="caps">HEX</span>''' #868482
|'''HEX''' #868482
| '''<span class="caps">HEX</span>''' #aeadac
|'''HEX''' #aeadac
| '''<span class="caps">HEX</span>''' #d7d6d5
|'''HEX''' #d7d6d5
| '''<span class="caps">HEX</span>''' #ffffff
|'''HEX''' #ffffff
|-
|-
| '''<span class="caps">RGB</span>''' 30, 27, 24
|'''RGB''' 30, 27, 24
| '''<span class="caps">RGB</span>''' 53, 50, 47
|'''RGB''' 53, 50, 47
| '''<span class="caps">RGB</span>''' 93, 91, 89
|'''RGB''' 93, 91, 89
| '''<span class="caps">RGB</span>''' 134, 132, 130
|'''RGB''' 134, 132, 130
| '''<span class="caps">RGB</span>''' 174, 173, 172
|'''RGB''' 174, 173, 172
| '''<span class="caps">RGB</span>''' 215, 214, 213
|'''RGB''' 215, 214, 213
| '''<span class="caps">RGB</span>''' 255, 255, 255
|'''RGB''' 255, 255, 255
|}
|}


===Color palette===
=== Color palette ===


{| class="infotable line"
{|
|
|[[Image:http://qt.io/uploads/image_upload/Palette_DarkGreen.png|Dark Green color sample]]
[[Image:Palette_DarkGreen.png|Dark Green color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_MediumGreen.png|Medium Green color sample]]
|
|[[Image:http://qt.io/uploads/image_upload/Palette_LightGreen.png|Light Green color sample]]
[[Image:Palette_MediumGreen.png|Medium Green color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_DarkBlue.png|Dark Blue color sample]]
|
|[[Image:http://qt.io/uploads/image_upload/Palette_Blue.png|Blue color sample]]
[[Image:Palette_LightGreen.png|Light Green color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_Violet.png|Violet color sample]]
|
|[[Image:http://qt.io/uploads/image_upload/Palette_Purple.png|Purple color sample]]
[[Image:Palette_DarkBlue.png|Dark Blue color sample]]
|
[[Image:Palette_Blue.png|Blue color sample]]
|
[[Image:Palette_Violet.png|Violet color sample]]
|
[[Image:Palette_Purple.png|Purple color sample]]
|-
|-
| '''Dark green'''
|'''Dark green'''
| '''Medium green'''
|'''Medium green'''
| '''Light green'''
|'''Light green'''
| '''Dark blue'''
|*Dark blue*
| '''Blue'''
|'''Blue'''
| '''Violet'''
|'''Violet'''
| '''Purple'''
|'''Purple'''
|-
|-
| '''<span class="caps">HEX</span>''' #006325
|'''HEX''' #006325
| '''<span class="caps">HEX</span>''' #328930
|'''HEX''' #328930
| '''<span class="caps">HEX</span>''' #80c342
|'''HEX''' #80c342
| '''<span class="caps">HEX</span>''' #14148c
|'''HEX''' #14148c
| '''<span class="caps">HEX</span>''' #14aaff
|'''HEX''' #14aaff
| '''<span class="caps">HEX</span>''' #6400aa
|'''HEX''' #6400aa
| '''<span class="caps">HEX</span>''' #ae32a0
|'''HEX''' #ae32a0
|-
|-
| '''<span class="caps">RGB</span>''' 0, 99, 37
|'''RGB''' 0, 99, 37
| '''<span class="caps">RGB</span>''' 50, 137, 48
|'''RGB''' 50, 137, 48
| '''<span class="caps">RGB</span>''' 128, 195, 66
|'''RGB''' 128, 195, 66
| '''<span class="caps">RGB</span>''' 20, 20, 140
|*RGB* 20, 20, 140
| '''<span class="caps">RGB</span>''' 20, 170, 255
|'''RGB''' 20, 170, 255
| '''<span class="caps">RGB</span>''' 100, 0, 170
|*RGB* 100, 0, 170
| '''<span class="caps">RGB</span>''' 174, 50, 160
|'''RGB''' 174, 50, 160
|}
|}


{| class="infotable line"
{|
|
|[[Image:http://qt.io/uploads/image_upload/Palette_Red.png|Red color sample]]
[[Image:Palette_Red.png|Red color sample]]
|[[Image:http://qt.io/uploads/image_upload/Palette_Yellow.png|Yellow color sample]]
|
|[[Image:http://qt.io/uploads/image_upload/Spacing.png|Yellow color sample]]
[[Image:Palette_Yellow.png|Yellow color sample]]
|[[Image:http://qt.io/uploads/image_upload/Spacing.png|Yellow color sample]]
|
|[[Image:http://qt.io/uploads/image_upload/Spacing.png|Yellow color sample]]
[[Image:Spacing.png|Yellow color sample]]
|[[Image:http://qt.io/uploads/image_upload/Spacing.png|Yellow color sample]]
|
|[[Image:http://qt.io/uploads/image_upload/Spacing.png|Yellow color sample]]
[[Image:Spacing.png|Yellow color sample]]
|
[[Image:Spacing.png|Yellow color sample]]
|
[[Image:Spacing.png|Yellow color sample]]
|
[[Image:Spacing.png|Yellow color sample]]
|-
|-
| '''Red'''
|'''Red'''
| '''Yellow'''
|'''Yellow'''
|-
|-
| '''<span class="caps">HEX</span>''' #b40000
|'''HEX''' #b40000
| '''<span class="caps">HEX</span>''' #e0c31e
|'''HEX''' #e0c31e
|-
|-
| '''<span class="caps">RGB</span>''' 180, 0, 0
|'''RGB''' 180, 0, 0
| '''<span class="caps">RGB</span>''' 224, 195, 30
|'''RGB''' 224, 195, 30
|}
|}


===Textured backgrounds===
=== Textured backgrounds ===


Coming soon.
Coming soon.


==Recommended fonts and font sizes==
== Recommended fonts and font sizes ==


In addition to the above recommendations, we also suggest a few simple guidelines regarding text and headers:
In addition to the above recommendations, we also suggest a few simple guidelines regarding text and headers:
Line 137: Line 118:
* Use at least 8 pixel margin around text elements
* Use at least 8 pixel margin around text elements


==Examples==
== Examples ==
 
Coming soon.
 
===Categories:===
 
* [[:Category:Developing Qt|Developing_Qt]]
** [[:Category:Developing Qt::Guidelines|Guidelines]]

Revision as of 09:36, 24 February 2015


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

Examples

Retrieved from "https://wiki.qt.io/index.php?title=Colors_and_Font_Guidelines&oldid=4313"