Xfce Wiki

Sub domains
 

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
design:start [2024/04/29 21:49] – kevinbowendesign:start [2024/05/09 09:06] (current) – Update gitlab link, clean up table a little, resize image for crisper borders newhoa
Line 11: Line 11:
  
 Source: Source:
-  * **[[https://gitlab.xfce.org/newhoa/xfce-color-palette|]]**+  * **[[https://gitlab.xfce.org/artwork/xfce-color-palette|]]**
  
-{{xfce-color-palette.svg?600}}+{{xfce-color-palette.svg?534}}
  
 ---- ----
  
 ^ Color ^ Hexadecimal ^ RGB ^ Name ^ ^ Color ^ Hexadecimal ^ RGB ^ Name ^
-| :--: | :--: | :--: | :--: | +| {{midnight-1.png?nolink|}} | #61757f | (97, 117, 127) | Midnight 1 | 
-| {{midnight-1.png|}} | #61757f | (97, 117, 127) | Midnight 1 | +| {{midnight-2.png?nolink|}} | #485e6b | (72, 94, 107) | Midnight 2 | 
-| {{midnight-2.png|}} | #485e6b | (72, 94, 107) | Midnight 2 | +| {{midnight-3.png?nolink|}} | #344958 | (52, 73, 88) | Midnight 3 | 
-| {{midnight-3.png|}} | #344958 | (52, 73, 88) | Midnight 3 | +| {{midnight-4.png?nolink|}} | #263742 | (38, 55, 66) | Midnight 4 | 
-| {{midnight-4.png|}} | #263742 | (38, 55, 66) | Midnight 4 | +| {{midnight-5.png?nolink|}} | #070c0f | (7, 12, 15) | Midnight 5 | 
-| {{midnight-5.png|}} | #070c0f | (7, 12, 15) | Midnight 5 | +| {{grey-1.png?nolink|}} | #f1f3f5 | (241, 243, 245) | Grey 1 | 
-| {{grey-1.png|}} | #f1f3f5 | (241, 243, 245) | Grey 1 |  +| {{grey-2.png?nolink|}} | #d2d8dc | (210, 216, 220) | Grey 2 | 
-| {{grey-2.png|}} | #d2d8dc | (210, 216, 220) | Grey 2 |  +| {{grey-3.png?nolink|}} | #bcc5ca | (188, 197, 202) | Grey 3 | 
-| {{grey-3.png|}} | #bcc5ca | (188, 197, 202) | Grey 3 |  +| {{grey-4.png?nolink|}} | #a7b0b7 | (167, 176, 183) | Grey 4 | 
-| {{grey-4.png|}} | #a7b0b7 | (167, 176, 183) | Grey 4 |  +| {{grey-5.png?nolink|}} | #758087 | (117, 128, 135) | Grey 5 | 
-| {{grey-5.png|}} | #758087 | (117, 128, 135) | Grey 5 |  +| {{blue-1.png?nolink|}} | #c1ebf7 | (193, 235, 247) | Blue 1 | 
-| {{blue-1.png|}} | #c1ebf7 | (193, 235, 247) | Blue 1 |  +| {{blue-2.png?nolink|}} | #6acfec | (106, 207, 236) | Blue 2 | 
-| {{blue-2.png|}} | #6acfec | (106, 207, 236) | Blue 2 |  +| {{blue-3.png?nolink|}} | #00aade | (0, 170, 222) | Blue 3 | 
-| {{blue-3.png|}} | #00aade | (0, 170, 222) | Blue 3 |  +| {{blue-4.png?nolink|}} | #006888 | (0, 104, 136) | Blue 4 | 
-| {{blue-4.png|}} | #006888 | (0, 104, 136) | Blue 4 |  +| {{blue-5.png?nolink|}} | #003445 | (0, 52, 69) | Blue 5 | 
-| {{blue-5.png|}} | #003445 | (0, 52, 69) | Blue 5 |  +| {{green-1.png?nolink|}} | #d7fdb2 | (215, 253, 178) | Green 1 | 
-| {{green-1.png|}} | #d7fdb2 | (215, 253, 178) | Green 1 |  +| {{green-2.png?nolink|}} | #aef766 | (174, 247, 102) | Green 2 | 
-| {{green-2.png|}} | #aef766 | (174, 247, 102) | Green 2 |  +| {{green-3.png?nolink|}} | #6acc0a | (106, 204, 10) | Green 3 | 
-| {{green-3.png|}} | #6acc0a | (106, 204, 10) | Green 3 |  +| {{green-4.png?nolink|}} | #52a302 | (82, 163, 2) | Green 4 | 
-| {{green-4.png|}} | #52a302 | (82, 163, 2) | Green 4 |  +| {{green-5.png?nolink|}} | #3c7902 | (60, 121, 2) | Green 5 | 
-| {{green-5.png|}} | #3c7902 | (60, 121, 2) | Green 5 |  +| {{yellow-1.png?nolink|}} | #fcf4c0 | (252, 244, 192) | Yellow 1 | 
-| {{yellow-1.png|}} | #fcf4c0 | (252, 244, 192) | Yellow 1 |  +| {{yellow-2.png?nolink|}} | #fbeb83 | (251, 235, 131) | Yellow 2 | 
-| {{yellow-2.png|}} | #fbeb83 | (251, 235, 131) | Yellow 2 |  +| {{yellow-3.png?nolink|}} | #f9da02 | (249, 218, 2) | Yellow 3 | 
-| {{yellow-3.png|}} | #f9da02 | (249, 218, 2) | Yellow 3 |  +| {{yellow-4.png?nolink|}} | #dcb102 | (220, 177, 2) | Yellow 4 | 
-| {{yellow-4.png|}} | #dcb102 | (220, 177, 2) | Yellow 4 |  +| {{yellow-5.png?nolink|}} | #ad7702 | (173, 119, 2) | Yellow 5 | 
-| {{yellow-5.png|}} | #ad7702 | (173, 119, 2) | Yellow 5 |  +| {{red-orange-1.png?nolink|}} | #f3b6a6 | (243, 182, 166) | Red-Orange 1 | 
-| {{red-orange-1.png|}} | #f3b6a6 | (243, 182, 166) | Red-Orange 1 |  +| {{red-orange-2.png?nolink|}} | #ec866a | (236, 134, 106) | Red-Orange 2 | 
-| {{red-orange-2.png|}} | #ec866a | (236, 134, 106) | Red-Orange 2 |  +| {{red-orange-3.png?nolink|}} | #e6461d | (230, 70, 29) | Red-Orange 3 | 
-| {{red-orange-3.png|}} | #e6461d | (230, 70, 29) | Red-Orange 3 |  +| {{red-orange-4.png?nolink|}} | #c02700 | (192, 39, 0) | Red-Orange 4 | 
-| {{red-orange-4.png|}} | #c02700 | (192, 39, 0) | Red-Orange 4 |  +| {{red-orange-5.png?nolink|}} | #851b00 | (133, 27, 0) | Red-Orange 5 | 
-| {{red-orange-5.png|}} | #851b00 | (133, 27, 0) | Red-Orange 5 |  +| {{purple-1.png?nolink|}} | #d4ade2 | (212, 173, 226) | Purple 1 | 
-| {{purple-1.png|}} | #d4ade2 | (212, 173, 226) | Purple 1 |  +| {{purple-2.png?nolink|}} | #b97ace | (185, 122, 206) | Purple 2 | 
-| {{purple-2.png|}} | #b97ace | (185, 122, 206) | Purple 2 |  +| {{purple-3.png?nolink|}} | #9c41bf | (156, 65, 191) | Purple 3 | 
-| {{purple-3.png|}} | #9c41bf | (156, 65, 191) | Purple 3 |  +| {{purple-4.png?nolink|}} | #753390 | (117, 51, 144) | Purple 4 | 
-| {{purple-4.png|}} | #753390 | (117, 51, 144) | Purple 4 |  +| {{purple-5.png?nolink|}} | #471d57 | (71, 29, 87) | Purple 5 | 
-| {{purple-5.png|}} | #471d57 | (71, 29, 87) | Purple 5 |  +| {{brown-1.png?nolink|}} | #c6a798 | (198, 167, 152) | Brown 1 | 
-| {{brown-1.png|}} | #c6a798 | (198, 167, 152) | Brown 1 |  +| {{brown-2.png?nolink|}} | #a17a69 | (161, 122, 105) | Brown 2 | 
-| {{brown-2.png|}} | #a17a69 | (161, 122, 105) | Brown 2 |  +| {{brown-3.png?nolink|}} | #79503c | (121, 80, 60) | Brown 3 | 
-| {{brown-3.png|}} | #79503c | (121, 80, 60) | Brown 3 |  +| {{brown-4.png?nolink|}} | #603f2f | (96, 63, 47) | Brown 4 | 
-| {{brown-4.png|}} | #603f2f | (96, 63, 47) | Brown 4 |  +| {{brown-5.png?nolink|}} | #4a3025 | (74, 48, 37) | Brown 5 | 
-| {{brown-5.png|}} | #4a3025 | (74, 48, 37) | Brown 5 | + 
 [[|Back to Top]] [[|Back to Top]]
 ---- ----
  
-===== Icons =====+===== Application Icons ===== 
 + 
 + 
 +==== Icon Colors ==== 
 + 
 +Xfce icons use the [[design:start#Color Palette|Xfce color palette]] and have a flat look using solid colors and no gradients. 
 + 
 + 
 +==== Icon Sizes ==== 
 + 
 +Xfce supports icon sizes of 16px, 24px, 32px, 48px, 64px, 96px, and 128px. Application icons should be provided for all supported sizes. 
 + 
 + 
 +==== Icon Margins ==== 
 + 
 +The icon sizes above list the final size of the SVG or the PNG, the full page size. But all icons above 16px should have empty space around the icon content as margins. For example, for a square 64px icon, the square shape would be 56x56px, leaving 4px of empty space on all sides (making the final icon size 64x64px). The margin space needed increases as icon size increases. See the [[design:start#Icon Dimensions Table]] below for details. 
 + 
 + 
 +==== Icon Shapes ==== 
 + 
 +There are no hard rules on icon shapes, but the main content of the icon should stay within certain limits and provide a certain amount of margins. The [[design:start#Icon Dimensions Table]] below provides details. Icons that are not square or circular should still be limited to the square size dimensions. Using a 48px icon as an example, the square should be 40x40px. A rectangular or other shaped icon should be reduced either vertically or horizontally to create the shape, but it should not exceed the 40px size in either direction. Circular icons are an exception to this rule because they appear slightly smaller when rendered. Using the 48px icon as an example, if creating a fully circular icon, the circle would be 42x42px. 
 + 
 + 
 +==== Icon Borders ==== 
 + 
 +Icons should have a 1px border at all sizes except at 128px. 128px icons are used as scalable icons and have no borders. 
 + 
 + 
 +==== Icon Corners ==== 
 + 
 +Square and rectangular icons use rounded corners (see the [[design:start#Icon Dimensions Table]] below). Elements within icons should generally also use rounded corners. 
 + 
 + 
 +==== Icon Position and Alignment ==== 
 + 
 +All icons should be centered both horizontally and vertically. All elements of the icon should be grid-aligned; elements are considered grid-aligned when they are positioned (when they start and end) at whole-numbered pixel positions. In Inkscape, you can show the grid by going to View > Page Grid. Grid-aligned icons have sharp, clear borders and elements. Grid-unaligned icons are blurry. 
 + 
 +<note important>Scaling an icon to other sizes will make them and their elements grid-unaligned. It may also scale line thickness, and borders (which should always remain at 1px). Icon elements will have to be grid-aligned and line/border sizes checked at each size to avoid blurry icons.</note> 
 + 
 + 
 +==== Icon Dimensions Table ==== 
 + 
 +^  Icon Size  ^  Square/Rectangle Corner Radius  ^  Square Size (Margin)  ^  Circle Size (Margin)  ^  Border  ^ 
 +| 16px |  2px  |  16px (0px)  |  16px (0px)  |  1px  | 
 +| 24px |  3px  |  20px (2px)  |  22px (1px)  |  1px  | 
 +| 32px |  3px  |  28px (2px)  |  30px (1px)  |  1px  | 
 +| 48px |  4px  |  40px (4px)  |  42px (3px)  |  1px  | 
 +| 64px |  6px  |  56px (4px)  |  60px (2px)  |  1px  | 
 +| 96px |  8px  |  80px (8px)  |  82px (8px)  |  1px  | 
 +| 128px |  8px  |  104px (12px)  |  106px (11px)  |  0px  | 
 + 
 + 
 +==== Icon Detail ==== 
 + 
 +Icons should be fairly simple and easy to understand. While a larger icon may be more detailed, detail in smaller icons should be reduced if needed to keep icons readable at small sizes. 
 + 
 + 
 +==== Icon Naming ==== 
 + 
 +Application icons use the [[wp>Reverse_domain_name_notation|rDNS]] naming (//e.g.// org.xfce.appname). Please refer to this list of [[releng:4.16:icons_rdns_naming_for_icons|Xfce rDNS icon names]] for more examples. When developing applications or plugins, icons used within your code (like action or status icons) should use names provided in the [[https://specifications.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html|FreeDesktop.org Icon Naming Specification]]. 
 + 
 + 
  
 [[|Back to Top]] [[|Back to Top]]