Xfce Design Standards
The Xfce design standard aims at improving the consistency in the visual appearance of the Xfce desktop environment.
Color Palette
Source:
| Color | Hexadecimal | RGB | Name |
|---|---|---|---|
 | #61757f | (97, 117, 127) | Midnight 1 |
 | #485e6b | (72, 94, 107) | Midnight 2 |
 | #344958 | (52, 73, 88) | Midnight 3 |
 | #263742 | (38, 55, 66) | Midnight 4 |
 | #070c0f | (7, 12, 15) | Midnight 5 |
 | #f1f3f5 | (241, 243, 245) | Grey 1 |
 | #d2d8dc | (210, 216, 220) | Grey 2 |
 | #bcc5ca | (188, 197, 202) | Grey 3 |
 | #a7b0b7 | (167, 176, 183) | Grey 4 |
 | #758087 | (117, 128, 135) | Grey 5 |
 | #c1ebf7 | (193, 235, 247) | Blue 1 |
 | #6acfec | (106, 207, 236) | Blue 2 |
 | #00aade | (0, 170, 222) | Blue 3 |
 | #006888 | (0, 104, 136) | Blue 4 |
 | #003445 | (0, 52, 69) | Blue 5 |
 | #d7fdb2 | (215, 253, 178) | Green 1 |
 | #aef766 | (174, 247, 102) | Green 2 |
 | #6acc0a | (106, 204, 10) | Green 3 |
 | #52a302 | (82, 163, 2) | Green 4 |
 | #3c7902 | (60, 121, 2) | Green 5 |
 | #fcf4c0 | (252, 244, 192) | Yellow 1 |
 | #fbeb83 | (251, 235, 131) | Yellow 2 |
 | #f9da02 | (249, 218, 2) | Yellow 3 |
 | #dcb102 | (220, 177, 2) | Yellow 4 |
 | #ad7702 | (173, 119, 2) | Yellow 5 |
 | #f3b6a6 | (243, 182, 166) | Red-Orange 1 |
 | #ec866a | (236, 134, 106) | Red-Orange 2 |
 | #e6461d | (230, 70, 29) | Red-Orange 3 |
 | #c02700 | (192, 39, 0) | Red-Orange 4 |
 | #851b00 | (133, 27, 0) | Red-Orange 5 |
 | #d4ade2 | (212, 173, 226) | Purple 1 |
 | #b97ace | (185, 122, 206) | Purple 2 |
 | #9c41bf | (156, 65, 191) | Purple 3 |
 | #753390 | (117, 51, 144) | Purple 4 |
 | #471d57 | (71, 29, 87) | Purple 5 |
 | #c6a798 | (198, 167, 152) | Brown 1 |
 | #a17a69 | (161, 122, 105) | Brown 2 |
 | #79503c | (121, 80, 60) | Brown 3 |
 | #603f2f | (96, 63, 47) | Brown 4 |
 | #4a3025 | (74, 48, 37) | Brown 5 |
Application Icons
Icon Colors
Xfce icons use the 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 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 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 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.
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 rDNS naming (e.g. org.xfce.appname). Please refer to this list of 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 FreeDesktop.org Icon Naming Specification.