diff --git a/source/components/assistance/emblem.rst b/source/components/assistance/emblem.rst --- a/source/components/assistance/emblem.rst +++ b/source/components/assistance/emblem.rst @@ -43,15 +43,6 @@ Appearance ---------- - -An emblem that indicates status should take the form of a light-colored symbol -on top of a brightly-colored shape. - -.. figure:: /img/emblem-warning.png - :alt: - - Warning emblem - An emblem that indicates unread notifications should take the form of a light-colored number inside a blue circle. The circle can become "pill-shaped" if the number is very large. @@ -65,3 +56,6 @@ :alt: Notification emblem with a large number + +For symbolic icon emblems, see the :doc:`Breeze icon guidelines `. + diff --git a/source/img/Breeze-icon-green.svg b/source/img/Breeze-beware-orange.svg rename from source/img/Breeze-icon-green.svg rename to source/img/Breeze-beware-orange.svg --- a/source/img/Breeze-icon-green.svg +++ b/source/img/Breeze-beware-orange.svg @@ -1 +1 @@ - + diff --git a/source/img/Breeze-icon-design-1.png b/source/img/Breeze-icon-design-1.png index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + diff --git a/source/img/Breeze-icon-grey.svg b/source/img/Breeze-plasma-blue.svg rename from source/img/Breeze-icon-grey.svg rename to source/img/Breeze-plasma-blue.svg --- a/source/img/Breeze-icon-grey.svg +++ b/source/img/Breeze-plasma-blue.svg @@ -1 +1 @@ - + diff --git a/source/img/Breeze-icon-orange.svg b/source/img/Breeze-shade-black.svg rename from source/img/Breeze-icon-orange.svg rename to source/img/Breeze-shade-black.svg --- a/source/img/Breeze-icon-orange.svg +++ b/source/img/Breeze-shade-black.svg @@ -1 +1 @@ - + diff --git a/source/img/HIGMonoIcons.png b/source/img/HIGMonoIcons.png index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@` -- Test your icon set on strength of association, discriminatory power, - conspicuousness, and, if applicable, on accessibility. - -Breeze Icon Design - Color -~~~~~~~~~~~~~~~~~~~~~~~~~~ +Icons are pictorial representations of functions and objects. They convey +meaning that users perceive almost instantaneously and are an important part of +a program's visual identity. + +Well-designed icons strongly impact users' overall impression of the design. +Consistent use of icons also improves usability by making programs, objects, +and actions easier to identify and learn. + +If you would like to request help designing icons for your application, you can +ask the `KDE Visual Design Group `_ for help. + + + + +General Guidelines +------------------ -**Monochrome Icons** +- Use icons from the system icon theme whenever possible. Avoid using custom + icons. New icons should be added to an icon theme. +- Design icons with a small number of metaphors that are understandable + independent of language and culture. Apply metaphors only once (e.g. do not + use a brush twice for different actions). +- Simplify, but don't go overboard. Breeze icons are **not** "flat". +- Avoid using text in icon designs; it cannot be localized and tends to look + bad at small sizes. +- Many icons come in multiple sizes. Each version should be visually optimized + and pixel-perfect for its particular size. Larger sizes offer more + opportunity for detail and visual pizazz, while smaller version should be + stripped of everything not absolutely necessary. +- Breeze icons always have some padding: +.. image:: /img/Breeze-icon-design-5.png + :alt: Canvas and graphic sizes + + + + +Monochrome icon style +--------------------- .. image:: /img/HIGMonoIcons.png - :alt: Monochome icons - -- Used for application toolbar and button actions, menus, sidebars and - status and notifications. Also may be used for small (16x16) devices - and places icons (folders, usb drives, etc.). -- Rely on a distinct shapes instead of fine details to distinguish - between them. -- Breeze monochrome icons use primarily color #1 and #2 but also use - other colors to indicate a different state. - - #. |icongrey| :doc:`Icon Grey - Color ` used for icons in a normal - state and non destructive actions e.g.: back, forward, ok, home. - #. |iconred| :doc:`Icon Red - Color ` used for icons in a normal state - and for destructive actions e.g.: close, delete, remove, stop. - Also used in addition with color #1. - #. |iconorange| :doc:`Icon Orange - Color ` used in addition to - color #1. Used to distinguish icons that involve "user input", also - used as the color for the "busy" state in IM software. - #. |iconblue| :doc:`Icon Blue - Color ` used in addition to - color #1. Used to distinguish icons that involve the action "select" - or "insert". - #. |iconyellow| :doc:`Icon Yellow - Color ` used in addition to - color #1. Used to distinguish icons that involve a "warning", also - used as the color for the "away" state in IM software. - #. |icongreen| :doc:`Icon Green - Color ` used in addition to - color #1. Used to distinguish icons that involve "connected", "secure" - or "successful" actions. - -.. |icongrey| image:: /img/Breeze-icon-grey.svg + :alt: Monochrome icons + +Many Breeze icons employ a monochrome art style for their small 16px and 22px +versions. This style should be avoided for icons larger than 22px. The +monochrome style relies on distinct shapes and outlines instead of fine details +and vibrant colors, and employs an intentionally limited color palette: + + #. |shadeblack| :doc:`Shade Black `: Used for icons in a + normal state and non-destructive actions: back, forward, ok, home, etc. + This is the most commonly used color. When in doubt, choose Shade Black. + #. |iconred| :doc:`Icon Red`: Used for icons that depict + actions: delete, remove, stop, etc. + #. |bewareorange| :doc:`Beware Orange `: Used for icons that + involve user input of some kind. + #. |plasmablue| :doc:`Plasma Blue `: Used for icons that + involve the action "select" or "insert". + #. |iconyellow| :doc:`Icon Yellow `: Used for icons that + involve a "warning" state or some sort. + #. |noblefir| :doc:`Noble Fir `: Used to for icons that + involve "connected", "secure" or "successful" actions. + +.. |shadeblack| image:: /img/Breeze-shade-black.svg .. |iconred| image:: /img/Breeze-icon-red.svg -.. |iconorange| image:: /img/Breeze-icon-orange.svg +.. |bewareorange| image:: /img/Breeze-beware-orange.svg -.. |iconblue| image:: /img/Breeze-icon-blue.svg +.. |plasmablue| image:: /img/Breeze-plasma-blue.svg .. |iconyellow| image:: /img/Breeze-icon-yellow.svg -.. |icongreen| image:: /img/Breeze-icon-green.svg +.. |noblefir| image:: /img/Breeze-noble-fir.svg -For more technical details of how to use colors in icons see -`this blog post `_ +Because monochrome icons are so small and simple, it is important that they be +pixel-perfect, with their lines and objects aligned to a regular grid: -**Colorful icons** +.. image:: /img/Breeze-icon-design-3.png + :alt: Newspaper icon -.. image:: /img/Sample_color_icons.png - :alt: Colorful icons +.. image:: /img/Breeze-icon-design-1.png + :alt: A pixel-perfect icon on the canvas. -- Use colorful icons for applications, folders, mimetypes and devices. -- For Breeze icons, use colors from the `full Breeze color palette`_ as - a starting point. -- Breeze icons use smooth linear gradients (bottom to top/dark to - light); they are not flat. -- Application icons should be unique and easily recognizable. -- When creating an system icon theme, respect trademarks by avoiding - significant alterations to application icons. +.. image:: /img/Breeze-icon-design-2.png + :alt: A pixel-perfect icon in the app. -Breeze Icon Design - Sizes -~~~~~~~~~~~~~~~~~~~~~~~~~~ +*Pixel-perfect icons: On the canvas and in the app* -Breeze icons come in a variety of sizes depending on their context. The -following lists the current sizes in use: +Because monochrome icons usually depict actions, many include status or action +emblems. These are always located in the bottom-right corner. The emblem should +be a minimum of 5px wide and tall, and there must be 1px of blank space between +the emblem and the rest of the icon. -- Breeze/ +.. image:: /img/Breeze-icon-design-8.png + :alt: Design for a 22px or 16px icon with an emblem in the bottom-right corner - - actions/ +*A perfect monochrome icon with an emblem in the corner* - - toolbar/ - 22x22 - - toolbar-small/ - 16x16 - - apps/ - - preferences/ - 32x32 - - software/ - 48x48 - - software-medium/ - 22x22 - - software-small/ - 16x16 - - system-power-actions/ - 48x48 - - system-session-actions / - 48x48 - - categories/ +Colorful icon style +------------------- +.. image:: /img/Sample_color_icons.png + :alt: Colorful icons - - start-menu/ - 32x32 - - start-menu-small/ - not used in Plasma +Colorful Breeze icons make full use the +:doc:`Breeze color palette `. They are **not** "flat" and +incorporate shadows and smooth linear gradients going from darker on the bottom +to lighter on top. Don't be afraid to add detail, vibrancy, and depth! - - devices/ +Colorful Breeze icons generally consist of three parts: - - hardware/ - 48x48 - - sidebars/ - 16x16 +Background +~~~~~~~~~~ +The background is a container and gives structure to the icon. It can have any +shape or color in the Breeze color palette. Don't be afraid to get creative with the background shape! - - mimetypes/ +.. image:: /img/Breeze-icon-design-creative-backgrounds.png + :alt: Creative backgrounds - - file-types/ - 64x64 - - file-types-small/ - 16x16 +Foreground symbol +~~~~~~~~~~~~~~~~~ +The foreground symbol offers contrast with its background and works with it to +provide the bulk of the icon's meaning. The foreground symbol is optional; feel +free to omit it if the background provides enough meaning on its own. - - status/ +Shadows +~~~~~~~ +If present, the foreground symbol casts a long shadow angled 45° +towards the bottom-right corner. This shadow always has the same gradient and +takes up the whole object. - - dialogs/ - 64x64 - - im-status/ - 16x16 - - panel/ - 22x22 +.. image:: /img/Breeze-icon-design-10.png + :alt: Using the grid for shadows - - places/ +In addition, colorful icons have a 1 px hard shadow on the bottom: - - user-folders/ - 64x64 - - user-folders-small/ - 16x16 +.. image:: /img/Breeze-icon-design-12.png + :alt: 48px icons can have more details -Breeze Icon Design - Basics -~~~~~~~~~~~~~~~~~~~~~~~~~~~ -There are two main styles for Breeze icons. When creating a new icon for -Breeze make sure to follow these rules as it's important to keep -consistency within all the elements in the theme. With Breeze we'd like -to keep things simple, most monochromatic icons must fit within a -squared area set by guides though the graphics don't need to be squares -themselves. Icons should be pixel perfect, this simply means that all -objects must be aligned to the grid (as in the Inkscape grid), this -results in crisp icons once in use. -.. image:: /img/Breeze-icon-design-1.png - :alt: A pixel perfect icon on the canvas. -.. image:: /img/Breeze-icon-design-2.png - :alt: A pixel perfect icon in the app. +Application icons +----------------- +Application icons come in a single size: 48px. They always use the colorful +style. -*A pixel perfect icon. On the canvas and in the app.* +All application icons should have the same height: 40px tall, with four pixels +of padding on the top and bottom. -In the above list, we have the sizes for the icons set up. However, the -icons, or rather, the graphics themselves do not fill the entirety of -the canvas (the document/workspace). Everyday objects may not always fit -the canvas area or be perfectly aligned to the canvas or pixels. As a -designer, you may choose to use everyday objects in your icons to make -them memorable and recognizable. However, keep a correct aspect ratio of -the final graphic and what it should represent. +.. image:: /img/Breeze-icon-design-15.png + :alt: KDE app icon for Konsole -.. image:: /img/Breeze-icon-design-3.png - :alt: Newspaper icon +*KDE app icon for Konsole* -.. image:: /img/Breeze-icon-design-4.png - :alt: Envelope icon +.. image:: /img/Breeze-icon-design-Kolourpaint.png + :alt: KDE app icon for Kolourpaint -*A newspaper icon can perfectly fit within the set area of the guides. -But not an envelope.* +*KDE app icon for Kolourpaint* -As you see in the images above we have guides in place, this is so that -the graphics you see in the apps are all at the same height though some -may have a different width. The guides are in place for all the icons, -the image below illustrates this: +.. image:: /img/Breeze-icon-design-11.png + :alt: KDE app icon for Discover -.. image:: /img/Breeze-icon-design-5.png - :alt: Canvas and graphic sizes +*KDE app icon for Discover* -*Visual representation of the area defined by the guides. Icons don't -necessarily have to be squares, they simply need to have a proper aspect -ratio. Vertically aligned icons are narrower but have the same height as -wider icons.* +When creating a Breeze theme version of a 3rd-party app's icon, is critically +important that the icon's existing brand and visual style be preserved. The +goal is to create a Breeze version of the icon, not something completely new +and different. -.. image:: /img/Breeze-icon-design-6.png - :alt: Narrow icon +.. image:: /img/Breeze-icon-design-14.png + :alt: 3rd party app icon for VLC -.. image:: /img/Breeze-icon-design-7.png - :alt: Wide icon +*3rd party app icon for VLC* -*Whether the graphics are narrower they have the same height. Placed in -a taskbar or a dock this results in a seamless app list presentation.* +.. image:: /img/Breeze-icon-design-Telegram.png + :alt: 3rd party app icon for Telegram -Breeze Icon Design - for 22 and 16 px -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +*3rd party app icon for Telegram* -These are the simplest of icons in terms of labor. When doing these -icons check the file index.theme located in the root of the Breeze -folder for hints of where the icon will be used. +.. image:: /img/Breeze-icon-design-Virtualbox.png + :alt: 3rd party app icon for Virtualbox -- These icons don't have any details other than their shapes. +*3rd party app icon for Virtualbox* -Icons in these sizes use 1 px strokes and sometimes fill on some areas -depending on the graphic. -.. image:: /img/Breeze-icon-design-8.png - :alt: Design for a 22px or 16px icon -*Mix of 1 px strokes and fill areas plus symbol indicating an action or -status.* -Generally when adding symbols to graphics such as "+", "-", etc. they -should be placed at the bottom right corner of the bigger graphic and -there must be 1 px of blank space between each element. +Places icons +------------ +Places icons come in four sizes: 16px, 22px, 32px, and 64px. They use the +colorful style for 32px and 64px sizes and the monochrome style for 22px and +16px sizes. -- The symbol should have a size of 5 px minimum. +Monochrome Places icons +~~~~~~~~~~~~~~~~~~~~~~~ +Places icons are monochrome for their 16px and 22px versions. For these +versions, the whole icon depicts the place itself or its typical contents. +Beyond that, simply follow the general monochrome icon guidelines for 16px and +22px icons. -Breeze Icon Design - 32 and 48 px -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +.. image:: /img/Breeze-icon-design-places-monochrome.png + :alt: Small monochrome Places icons -Most of the icons this size (32 px) were used for System Settings but -they're also used by Kickoff for the app categories. These icons make -use of smooth, vibrant, fresh and aligned elements colored by gradients -and they mostly consist of three parts: a background, a front symbol and -a long shadow. +*Small monochrome Places icons in Dolphin's Places panel* -.. image:: /img/Breeze-icon-design-9.png - :alt: Different icons at a size of 32px +Colorful places icons +~~~~~~~~~~~~~~~~~~~~~ +.. image:: /img/Breeze-icon-design-places.png + :alt: Colorful Places icons -*These icons don't have a particular shape, they simply fit together -despite their differences. Shapes can be either squares, rectangles, -circles, have resemblance of real-life objects, etc.* +For the colorful versions, the monochrome icon becomes the foreground symbol on +top of a background depicting a folder. The foreground symbol's color is a +darkened version of the background folder's color, and can consist of 1px lines, +or filled-in areas. The foreground symbol should be centered within the folder +background and take up 10x10px for the 32px icon size, and 20x20px for the 64px +size. -- Icons do have a particular element in common: a long shadow. +Note that for places icons, the foreground symbol does **not** cast a shadow. -The front symbol is what dictates the long shadow, the shadow always has -the same gradient, no exception. And it takes up the whole object even -if said object has only strokes and no fill. +.. image:: /img/Breeze-icon-design-places-colorful.png + :alt: Large colorful Places icons -The angle of the long shadow is 45° towards the bottom right of the -symbol. +*20x20px foreground symbol in the center of a 64x64px Places icon* -.. image:: /img/Breeze-icon-design-10.png - :alt: Using the grid for shadows -*Always use the grid when doing these shadows, this is very important.* -The difference between 32 and 48 px icons is a shadow at the bottom of -the 48 px icons and a bit more of detail. Since there more space for -more pixels we've used them. 48 px icons can have more long shadows, and -they also have a 1 px hard shadow at the bottom, whether they're -rectangular/squares or circles. -.. image:: /img/Breeze-icon-design-11.png - :alt: 48px icons can have shadows +MIME type icons +--------------- +Like Places icons, MIME type icons come in four sizes: 16px, 22px, 32px, and +64px. They use the colorful style for 32px and 64px sizes, and the monochrome +style for 22px and 16px sizes. -.. image:: /img/Breeze-icon-design-12.png - :alt: 48px icons can have more details +Monochrome MIME type icons +~~~~~~~~~~~~~~~~~~~~~~~~~~ +Like Places icons, the 16px and 22px monochrome versions of MIME type icons +have no background image and consist entirely of a monochrome line-art depiction +of the file type. -*48 px icons have a bit more detail to them.* +.. image:: /img/Breeze-icon-design-19.png + :alt: Small monochrome MIME type icon -Application icons are at 48x48 px, an important thing though is that -when doing an application icon you want to keep established brands -mostly intact or at least that they don't differ too much from the -original. +Monochrome MIME type icons are drawn with the primary color of the large +colorful version rather than following the general monochrome icon color +guidelines. -.. image:: /img/Breeze-icon-design-13.png - :alt: Keep established brands for app icons +.. image:: /img/Breeze-icon-design-mimetype-small.png + :alt: Small monochrome document MIME types -And for apps that are free software try to come up with something -creative, a better representation of what the software does, a feature -an UI element, etc. The last thing we want is to keep using the same old -unrepresentative icon. +*Small MIME type icons use 1 px strokes and follow the colors of the larger +versions* -.. image:: /img/Breeze-icon-design-14.png - :alt: VLC refreshed - -.. image:: /img/Breeze-icon-design-15.png - :alt: Konsole refreshed +Colorful MIME type icons +~~~~~~~~~~~~~~~~~~~~~~~~ +Like Places icons, the colorful versions consist of the monochrome icon used as +a foreground symbol on top of a background. -*VLC and Konsole. Classics, refreshed.* +For archives, packages, compressed files, and disk images, the background is a +square with a zipper going halfway down: -Breeze Icon Design - 64 px -~~~~~~~~~~~~~~~~~~~~~~~~~~ +.. image:: /img/Breeze-icon-design-mimetype-archive.png + :alt: Large colorful archive MIME types -Folders and mimetypes use this size the most but so do dialog icons. -Folders follow the same principle of a background and a symbol, but no -long shadow under the symbol. The symbol however does not use a gradient -but a contrasting color to that of the background. It's not transparent. +For images, the background is a horizontal rectangle with the top-right corner +folded over, and the fold casts a shadow: -The symbol (when using a stroke-based design) uses 1 px strokes, it can -be mixed with fill areas or it can be completely fill. +.. image:: /img/Breeze-icon-design-mimetype-image.png + :alt: Large colorful image MIME types -.. image:: /img/Breeze-icon-design-16.png - :alt: Different types of symbols on folders. +For video files, the background is a horizontal rectangle that looks like a +filmstrip: -*Different types of symbols.* +.. image:: /img/Breeze-icon-design-mimetype-video.png + :alt: Large colorful video MIME types -The size of the symbol is 20x20 px and is centered to the front of the -folder. +For audio files, the background is a CD sleeve with a CD partially visible: -.. image:: /img/Breeze-icon-design-17.png - :alt: Design details of a folder icon +.. image:: /img/Breeze-icon-design-mimetype-audio.png + :alt: Large colorful video MIME types -*Folder dimensions: 52x58 px - smooth gradient on the front, a long -shadow on the back, a darker gradient also on the back and light details -at the top of the front and back areas.* +For documents and everything else, the background is a vertical rectangle with +the top-right corner folded over, and the fold casts a shadow: -Mimetypes have a common shape, these shapes and combinations are -included in the folder resources/mime_combinations. The symbols that -define each mimetype should be related to the files or the software that -generates these files. +.. image:: /img/Breeze-icon-design-mimetype-document.png + :alt: Large colorful document MIME types -.. image:: /img/Breeze-icon-design-18.png - :alt: Design details of a XML file type icon +As with the Places icons, the foreground symbol does not cast a shadow. -*An XML tag for XML type files.* -Symbols use 1 px strokes too, just like folders. -Small sized mimetypes use the same symbol (only redrawn for 16 px) as -the bigger icon. The color combination is also within the -resources/mime_combinations folder files. Rules for 16 px icons (as seen -above) apply for these too. +Action and status icons +----------------------- +Action and status icons come in two sizes: 16px and 22px. They always use the +monochrome style. Action items should use Shade Black as much as possible: -.. image:: /img/Breeze-icon-design-19.png - :alt: Example of an 16px mimetype icon +.. image:: /img/Breeze-icon-design-action.png + :alt: Action icons + +Status icons can use a bit more color in their composition to connote status +information: +.. image:: /img/Breeze-icon-design-status.png + :alt: Status icons -*16 px mimetypes use 1 px strokes and follow the colors of the bigger -graphics.* -Dialog icons are used on .. well dialogs such as: +Action and status icons dynamically change their colors when the user changes +the system's color. To accomplish this, a special CSS stylesheet is embedded +in the SVG, and then the actual shape definitions are tagged with the +appropriate class. It looks like this: :: + + + + + + + + + +For more technical details, see `this blog post `_. + + + + +Emblems +------- +Emblems come in three sizes: 8px, 16px, and 22px and always use the colorful +style. However, their color palette is limited to that of the monochromatic +style. Unlike other icons, they are drawn with zero margins and touch the edges +of the canvas. -.. image:: /img/Breeze-icon-design-20.png - :alt: Example of an icon in a dialog +Emblem icons always have a colored background shape and a monochrome foreground +symbol. Because of the extremely limited space available, it is critical that +the foreground symbol be aligned to the pixel grid: -Or occasionally in Dolphin's preview sidebar (dialog-information). +.. image:: /img/Breeze-icon-design-emblem.png + :alt: Pixel-perfect emblem icon -With the exception of *dialog-password* the other icons use the same -shape, 1 px strokes, long shadows and vibrant gradients. +16px and 22px Emblems get a 60% opacity outline to ensure adequate contrast +against whatever icon they are drawn on top of: -The symbol is centered to the rectangular area of the speech bubble. +.. image:: /img/Breeze-icon-design-emblem-16px.png + :alt: 16px emblem icons -.. image:: /img/Breeze-icon-design-21.png - :alt: Example of a speech bubble +*16px emblems* -Implementation --------------- +.. image:: /img/Breeze-icon-design-emblem-22px.png + :alt: 22px emblem icons -- Use icons available from the system icon theme whenever possible. - Avoid using custom icons. -- Follow the :doc:`Icon theme usage guidelines `. -- For standard actions (back forward, open, save, refresh, etc.) use an - icon from the platform-provided set. The KDE Platform 4.x uses the - `Oxygen icon set`_. The KDE Plasma 5.x desktop and applications use - the Breeze icon set. -- If you would like to request help designing icons unique to your - application, you can ask for help on the - `KDE Visual Design Group Forum`_. +*22px emblems* -References ----------- +8px emblems do not have an outline, because there simply isn't enough room: -[1] -http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/ +.. image:: /img/Breeze-icon-design-emblem-8px.png + :alt: 8px emblem icons -.. _Icon theme usage guidelines: KDE_Visual_Design_Group/HIG/IconTheme -.. _Oxygen icon set: http://websvn.kde.org/trunk/kdesupport/oxygen-icons/ -.. _KDE Visual Design Group Forum: http://forum.kde.org/viewforum.php?f=285 -.. _full Breeze color palette: KDE_Visual_Design_Group/HIG/Color +*8px emblems*