Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
design:start [2024/02/24 10:03] – alexxcons | design:start [2024/05/09 08:34] – Add initial icon information, dimensions newhoa | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | <note important> | + | ~~NOTOC~~ |
- | ====== Xfce Design SIG (Special Interest Group) ====== | + | * **[[#Color Palette|Color Palette]]** |
+ | * **[[#Icon Standards|Icon Standards]]** | ||
- | The Xfce Design | + | ====== |
- | ===== Members ===== | + | The Xfce design standard aims at improving the consistency in the visual appearance of the Xfce desktop environment. |
- | Members of the Design SIG are not appointed or elected. Everyone can participate! Feel free to add your name, interests and skills to the following list if you are striving for regular contributions to our ongoing design efforts. | + | ===== Color Palette ===== |
- | | **Name** | **IRC Nickname** | **Interests (In the SIG Context)** | **Skills (Applicable in the SIG Context)** | | + | Source: |
- | | Simon Steinbeiß | ochosi | GTK theming; UI improvements | mockups, gtk-theming | | + | |
- | | Jannis Pohlmann | JPohlmann | Improve usability and visual appearance of Xfce | Knows Xfce well, can code | | + | |
- | | Nick Schermer | NSchermer | Same as above | Same as above | | + | |
- | | Pasi Lallinaho | knome | Any UI/graphical improvement, | + | |
- | | Jon Masters | jonmasters | UI roadmap, usability/clean approaches | Recent convert, can code | | + | |
- | | Steve Dodier-Lazaro | + | |
- | ===== Accepted and Active Projects ===== | + | |
- | * **xfce4-power-manager** | + | {{xfce-color-palette.svg? |
- | * [[design: | + | |
- | * **xfce4-profile-manager** | + | |
- | * [[design: | + | |
- | * **xfce4-settings** | + | |
- | * [[design: | + | |
+ | ---- | ||
+ | ^ Color ^ Hexadecimal ^ RGB ^ Name ^ | ||
+ | | :--: | :--: | :--: | :--: | | ||
+ | | {{midnight-1.png|}} | #61757f | (97, 117, 127) | Midnight 1 | | ||
+ | | {{midnight-2.png|}} | #485e6b | (72, 94, 107) | Midnight 2 | | ||
+ | | {{midnight-3.png|}} | #344958 | (52, 73, 88) | Midnight 3 | | ||
+ | | {{midnight-4.png|}} | #263742 | (38, 55, 66) | Midnight 4 | | ||
+ | | {{midnight-5.png|}} | #070c0f | (7, 12, 15) | Midnight 5 | | ||
+ | | {{grey-1.png|}} | #f1f3f5 | (241, 243, 245) | Grey 1 | | ||
+ | | {{grey-2.png|}} | #d2d8dc | (210, 216, 220) | Grey 2 | | ||
+ | | {{grey-3.png|}} | #bcc5ca | (188, 197, 202) | Grey 3 | | ||
+ | | {{grey-4.png|}} | #a7b0b7 | (167, 176, 183) | Grey 4 | | ||
+ | | {{grey-5.png|}} | #758087 | (117, 128, 135) | Grey 5 | | ||
+ | | {{blue-1.png|}} | #c1ebf7 | (193, 235, 247) | Blue 1 | | ||
+ | | {{blue-2.png|}} | #6acfec | (106, 207, 236) | Blue 2 | | ||
+ | | {{blue-3.png|}} | #00aade | (0, 170, 222) | Blue 3 | | ||
+ | | {{blue-4.png|}} | #006888 | (0, 104, 136) | Blue 4 | | ||
+ | | {{blue-5.png|}} | #003445 | (0, 52, 69) | Blue 5 | | ||
+ | | {{green-1.png|}} | #d7fdb2 | (215, 253, 178) | Green 1 | | ||
+ | | {{green-2.png|}} | #aef766 | (174, 247, 102) | Green 2 | | ||
+ | | {{green-3.png|}} | #6acc0a | (106, 204, 10) | Green 3 | | ||
+ | | {{green-4.png|}} | #52a302 | (82, 163, 2) | Green 4 | | ||
+ | | {{green-5.png|}} | #3c7902 | (60, 121, 2) | Green 5 | | ||
+ | | {{yellow-1.png|}} | #fcf4c0 | (252, 244, 192) | Yellow 1 | | ||
+ | | {{yellow-2.png|}} | #fbeb83 | (251, 235, 131) | Yellow 2 | | ||
+ | | {{yellow-3.png|}} | #f9da02 | (249, 218, 2) | Yellow 3 | | ||
+ | | {{yellow-4.png|}} | #dcb102 | (220, 177, 2) | Yellow 4 | | ||
+ | | {{yellow-5.png|}} | #ad7702 | (173, 119, 2) | Yellow 5 | | ||
+ | | {{red-orange-1.png|}} | #f3b6a6 | (243, 182, 166) | Red-Orange 1 | | ||
+ | | {{red-orange-2.png|}} | #ec866a | (236, 134, 106) | Red-Orange 2 | | ||
+ | | {{red-orange-3.png|}} | #e6461d | (230, 70, 29) | Red-Orange 3 | | ||
+ | | {{red-orange-4.png|}} | #c02700 | (192, 39, 0) | Red-Orange 4 | | ||
+ | | {{red-orange-5.png|}} | #851b00 | (133, 27, 0) | Red-Orange 5 | | ||
+ | | {{purple-1.png|}} | #d4ade2 | (212, 173, 226) | Purple 1 | | ||
+ | | {{purple-2.png|}} | #b97ace | (185, 122, 206) | Purple 2 | | ||
+ | | {{purple-3.png|}} | #9c41bf | (156, 65, 191) | Purple 3 | | ||
+ | | {{purple-4.png|}} | #753390 | (117, 51, 144) | Purple 4 | | ||
+ | | {{purple-5.png|}} | #471d57 | (71, 29, 87) | Purple 5 | | ||
+ | | {{brown-1.png|}} | #c6a798 | (198, 167, 152) | Brown 1 | | ||
+ | | {{brown-2.png|}} | #a17a69 | (161, 122, 105) | Brown 2 | | ||
+ | | {{brown-3.png|}} | #79503c | (121, 80, 60) | Brown 3 | | ||
+ | | {{brown-4.png|}} | #603f2f | (96, 63, 47) | Brown 4 | | ||
+ | | {{brown-5.png|}} | #4a3025 | (74, 48, 37) | Brown 5 | | ||
+ | [[|Back to Top]] | ||
+ | ---- | ||
- | ===== Completed Projects | + | ===== Application Icons ===== |
- | * **Thunar** | + | |
- | * [[design: | + | |
- | * [[design: | + | |
- | * Simplify Thunar toolbar (Completed) | + | |
- | * **xfce4-appfinder** | + | |
- | * [[design: | + | |
- | * **xfwm4-tabwin** | + | |
- | * [[design: | + | |
- | * **Session-menu/ | + | |
- | * [[design: | + | |
- | * **Ristretto** | + | |
- | * [[design: | + | |
- | * [[design: | + | |
- | * **xfdesktop-settings** | + | |
- | * [[design: | + | |
- | * **xfce4-settings** | + | |
- | * [[design: | + | |
- | * **Parole** | + | |
- | * [[Parole-UI|Improve Parole' | + | |
- | ===== Project Proposals ===== | ||
- | Here you can propose new UI-related projects for the Design SIG to work on. Please provide a title and a short description and maybe a link to mockups and related information. | + | ==== Icon Colors ==== |
- | ==== Big Tasks ==== | + | Xfce icons use the [[design: |
- | * **xfce4-settings: | + | |
- | * [[design: | + | ==== Icon Sizes ==== |
- | * [[design: | + | |
- | * **Thunar: Improve the file operation progress dialog** --- // | + | Xfce supports icon sizes of 16px, 24px, 32px, 48px, 64px, 96px, and 128px. Application icons should be provided for all supported sizes. |
- | | + | |
- | * **Thunar: Add a persistent, editable UI to copy/move files** | + | |
- | * I've seen something like this in OS X recently: whenever drag-and-drop is initiated in Finder, a black drop area pops up at the edge of the screen. Files can be dropped there and users can later drag them from the area back into another folder or application. We could do something similar. Here are some ideas: | + | ==== Icon Margins ==== |
- | * Have a simple D-Bus service | + | |
- | * **xfce4-session: | + | The icon sizes above list the final size of the SVG or the PNG, the full page size. But all icons above 16px should |
- | * [[design: | + | |
- | ==== Smaller Tasks and UI Improvements | + | |
- | * **Thunar: Show free-space-status of devices in sidebar** | + | ==== Icon Shapes ==== |
- | | + | |
- | * **Clean up the theme and wallpaper collection.** Include Shimmer themes in the collection. | + | There are no hard rules on icon shapes, but the main content |
- | * I think that this can by a good solution for the gtk3-engine-xfce and the theme in gtk3, since nobody care for these component nor the theming, I think is good simply | + | |
- | * **Design a good, default wallpaper for Xfce.** --- // | + | |
- | | + | ==== Icon Borders ==== |
- | | + | |
- | * [[http:// | + | Icons should have a 1px border at all sizes except at 128px. 128px icons are used as scalable icons and have no borders. |
- | * I second this propose. In my case every workspace has their own fuction | + | |
- | * **Change default window shadows** | + | |
- | * Xfwm4 window shadows are almost symmetrical, | + | ==== Icon Corners |
- | * **Xfce4-session: | + | |
- | * [[https://wiki.xfce.org/design/ | + | Square and rectangular icons use rounded corners (see the [[design:start#Icon Dimensions Table]] below). Elements within icons should generally also use rounded corners. |
- | * **Menu bars: More consistency ** | + | |
- | * Introduce setting | + | |
- | * Introduce common shortcut to temporarily display menu bar (many non-Xfce applications use '' | + | ==== Icon Position |
+ | |||
+ | 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 | ||
+ | |||
+ | <note important> | ||
+ | |||
+ | |||
+ | ==== Icon Dimensions Table ==== | ||
+ | |||
+ | ^ Icon Size ^ Square/Rectangle Corner Radius | ||
+ | | 16px | 2px | 16px (0px) | 16px (0px) | 1px | | ||
+ | | 24px | 3px | 20px (2px) | ||
+ | | 32px | 3px | 28px (2px) | 30px (1px) | 1px | ||
+ | | 48px | 4px | 40px (4px) | ||
+ | | 64px | 6px | 56px (4px) | 60px (2px) | 1px | | ||
+ | | 96px | 8px | 80px (8px) | 82px (8px) | 1px | | ||
+ | | 128px | 8px | 104px (12px) | ||
+ | |||
+ | |||
+ | ==== Icon Detail ==== | ||
+ | |||
+ | Icons should be fairly simple | ||
+ | |||
+ | |||
+ | ==== Icon Naming ==== | ||
+ | |||
+ | Application icons use the [[wp> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | [[|Back to Top]] | ||
+ | ---- | ||
+ | [[:|Back to main Xfce Wiki page]] | ||
+ | |||
+ | [[https://docs.xfce.org|Back |