diff --git a/source/components/assistance/emblem.rst b/source/components/assistance/emblem.rst index 108f0be..5db8e68 100644 --- a/source/components/assistance/emblem.rst +++ b/source/components/assistance/emblem.rst @@ -1,67 +1,61 @@ Emblem ====== Purpose ------- An *emblem* displays unusual or non-default status information about an icon or image. For example, an emblem could indicate that a folder is shared, that a disk is unmounted, or that an app has unread notifications. Examples -------- .. figure:: /img/emblem-public-on-folder.png :alt: An emblem indicating that a folder is shared on the network .. figure:: /img/emblem-notification-kmail.png :alt: An emblem indicating that a mail program has 15 unread emails Guidelines ---------- - Emblems are used to badge icons, images, or other visually discrete elements in a file manager, system tray, task manager, dock, image view, etc. Emblems should not be applied to textual content. - Use emblems to display that an icon or image has some unusual status associated with it, or that there are unread notifications. Do not use emblems to display an element's normal, common, or typical status. For example, an emblem could indicate that a folder is read-only or is a symlink, or that a disk is unmounted or encrypted. An emblem should not be used to indicate that a folder is read-write or that a disk is mounted. - Emblems that indicate status should be placed in the bottom-right corner. If additional status emblems are needed, they should be placed in other corners in a clockwise order. - Emblems that indicate unread notifications should be located in the top-right corner. - Use the minimum number of emblems and do not overwhelm the icon itself. Three is usually too many. 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. .. figure:: /img/emblem-notification-small.png :alt: Notification emblem .. figure:: /img/emblem-notification-large.png :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 similarity index 58% rename from source/img/Breeze-icon-green.svg rename to source/img/Breeze-beware-orange.svg index aecb342..79e84d4 100644 --- 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 6db29c6..1b2080f 100644 Binary files a/source/img/Breeze-icon-design-1.png and b/source/img/Breeze-icon-design-1.png differ diff --git a/source/img/Breeze-icon-design-14.png b/source/img/Breeze-icon-design-14.png index 29d6a72..4a209c0 100644 Binary files a/source/img/Breeze-icon-design-14.png and b/source/img/Breeze-icon-design-14.png differ diff --git a/source/img/Breeze-icon-design-15.png b/source/img/Breeze-icon-design-15.png index b9b55c9..c592fa5 100644 Binary files a/source/img/Breeze-icon-design-15.png and b/source/img/Breeze-icon-design-15.png differ diff --git a/source/img/Breeze-icon-design-2.png b/source/img/Breeze-icon-design-2.png index 88f942b..a5e5f33 100644 Binary files a/source/img/Breeze-icon-design-2.png and b/source/img/Breeze-icon-design-2.png differ diff --git a/source/img/Breeze-icon-design-3.png b/source/img/Breeze-icon-design-3.png index 5a07ab8..6fada64 100644 Binary files a/source/img/Breeze-icon-design-3.png and b/source/img/Breeze-icon-design-3.png differ diff --git a/source/img/Breeze-icon-design-4.png b/source/img/Breeze-icon-design-4.png index 8c74eb3..aec8298 100644 Binary files a/source/img/Breeze-icon-design-4.png and b/source/img/Breeze-icon-design-4.png differ diff --git a/source/img/Breeze-icon-design-8.png b/source/img/Breeze-icon-design-8.png index b280e77..4eac48c 100644 Binary files a/source/img/Breeze-icon-design-8.png and b/source/img/Breeze-icon-design-8.png differ diff --git a/source/img/Breeze-icon-design-Kolourpaint.png b/source/img/Breeze-icon-design-Kolourpaint.png new file mode 100644 index 0000000..8391d4c Binary files /dev/null and b/source/img/Breeze-icon-design-Kolourpaint.png differ diff --git a/source/img/Breeze-icon-design-Telegram.png b/source/img/Breeze-icon-design-Telegram.png new file mode 100644 index 0000000..8e9bb56 Binary files /dev/null and b/source/img/Breeze-icon-design-Telegram.png differ diff --git a/source/img/Breeze-icon-design-Virtualbox.png b/source/img/Breeze-icon-design-Virtualbox.png new file mode 100644 index 0000000..7099be1 Binary files /dev/null and b/source/img/Breeze-icon-design-Virtualbox.png differ diff --git a/source/img/Breeze-icon-design-action.png b/source/img/Breeze-icon-design-action.png new file mode 100644 index 0000000..8a87991 Binary files /dev/null and b/source/img/Breeze-icon-design-action.png differ diff --git a/source/img/Breeze-icon-design-creative-backgrounds.png b/source/img/Breeze-icon-design-creative-backgrounds.png new file mode 100644 index 0000000..3109d7c Binary files /dev/null and b/source/img/Breeze-icon-design-creative-backgrounds.png differ diff --git a/source/img/Breeze-icon-design-emblem-16px.png b/source/img/Breeze-icon-design-emblem-16px.png new file mode 100644 index 0000000..d395d7f Binary files /dev/null and b/source/img/Breeze-icon-design-emblem-16px.png differ diff --git a/source/img/Breeze-icon-design-emblem-22px.png b/source/img/Breeze-icon-design-emblem-22px.png new file mode 100644 index 0000000..dbe9165 Binary files /dev/null and b/source/img/Breeze-icon-design-emblem-22px.png differ diff --git a/source/img/Breeze-icon-design-emblem-8px.png b/source/img/Breeze-icon-design-emblem-8px.png new file mode 100644 index 0000000..ac1fc79 Binary files /dev/null and b/source/img/Breeze-icon-design-emblem-8px.png differ diff --git a/source/img/Breeze-icon-design-emblem.png b/source/img/Breeze-icon-design-emblem.png new file mode 100644 index 0000000..aec3e48 Binary files /dev/null and b/source/img/Breeze-icon-design-emblem.png differ diff --git a/source/img/Breeze-icon-design-mimetype-archive.png b/source/img/Breeze-icon-design-mimetype-archive.png new file mode 100644 index 0000000..4d478ab Binary files /dev/null and b/source/img/Breeze-icon-design-mimetype-archive.png differ diff --git a/source/img/Breeze-icon-design-mimetype-audio.png b/source/img/Breeze-icon-design-mimetype-audio.png new file mode 100644 index 0000000..d9a388d Binary files /dev/null and b/source/img/Breeze-icon-design-mimetype-audio.png differ diff --git a/source/img/Breeze-icon-design-mimetype-document.png b/source/img/Breeze-icon-design-mimetype-document.png new file mode 100644 index 0000000..6247859 Binary files /dev/null and b/source/img/Breeze-icon-design-mimetype-document.png differ diff --git a/source/img/Breeze-icon-design-mimetype-image.png b/source/img/Breeze-icon-design-mimetype-image.png new file mode 100644 index 0000000..b0c4f53 Binary files /dev/null and b/source/img/Breeze-icon-design-mimetype-image.png differ diff --git a/source/img/Breeze-icon-design-mimetype-small.png b/source/img/Breeze-icon-design-mimetype-small.png new file mode 100644 index 0000000..21fd7f7 Binary files /dev/null and b/source/img/Breeze-icon-design-mimetype-small.png differ diff --git a/source/img/Breeze-icon-design-mimetype-video.png b/source/img/Breeze-icon-design-mimetype-video.png new file mode 100644 index 0000000..84c074f Binary files /dev/null and b/source/img/Breeze-icon-design-mimetype-video.png differ diff --git a/source/img/Breeze-icon-design-places-colorful.png b/source/img/Breeze-icon-design-places-colorful.png new file mode 100644 index 0000000..f5af5ed Binary files /dev/null and b/source/img/Breeze-icon-design-places-colorful.png differ diff --git a/source/img/Breeze-icon-design-places-monochrome.png b/source/img/Breeze-icon-design-places-monochrome.png new file mode 100644 index 0000000..50bed5a Binary files /dev/null and b/source/img/Breeze-icon-design-places-monochrome.png differ diff --git a/source/img/Breeze-icon-design-places.png b/source/img/Breeze-icon-design-places.png new file mode 100644 index 0000000..6704c58 Binary files /dev/null and b/source/img/Breeze-icon-design-places.png differ diff --git a/source/img/Breeze-icon-design-status.png b/source/img/Breeze-icon-design-status.png new file mode 100644 index 0000000..794c4fe Binary files /dev/null and b/source/img/Breeze-icon-design-status.png differ diff --git a/source/img/Breeze-icon-blue.svg b/source/img/Breeze-noble-fir.svg similarity index 58% rename from source/img/Breeze-icon-blue.svg rename to source/img/Breeze-noble-fir.svg index 543e79e..f38720f 100644 --- a/source/img/Breeze-icon-blue.svg +++ b/source/img/Breeze-noble-fir.svg @@ -1 +1 @@ - + diff --git a/source/img/Breeze-icon-grey.svg b/source/img/Breeze-plasma-blue.svg similarity index 58% rename from source/img/Breeze-icon-grey.svg rename to source/img/Breeze-plasma-blue.svg index b5ea494..14ef0ee 100644 --- 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 similarity index 58% rename from source/img/Breeze-icon-orange.svg rename to source/img/Breeze-shade-black.svg index 07444cd..b0b7d12 100644 --- 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 6124226..ade295e 100644 Binary files a/source/img/HIGMonoIcons.png and b/source/img/HIGMonoIcons.png differ diff --git a/source/img/Sample_color_icons.png b/source/img/Sample_color_icons.png index acead7f..2ce9b75 100644 Binary files a/source/img/Sample_color_icons.png and b/source/img/Sample_color_icons.png differ diff --git a/source/img/Typography1.png b/source/img/Typography1.png new file mode 100644 index 0000000..44dd7e1 Binary files /dev/null and b/source/img/Typography1.png differ diff --git a/source/img/emblem-public-on-folder.png b/source/img/emblem-public-on-folder.png index 942df9c..06cfb1e 100644 Binary files a/source/img/emblem-public-on-folder.png and b/source/img/emblem-public-on-folder.png differ diff --git a/source/style/icon.rst b/source/style/icon.rst index 2353c55..04afadb 100644 --- a/source/style/icon.rst +++ b/source/style/icon.rst @@ -1,397 +1,389 @@ -Icons -===== +Icon Design +=========== Purpose ------- -Icons are pictorial representations of functions and objects. Icons are -important not only for aesthetic reasons as part of the visual identity of a -program, but also for utilitarian reasons. They are a shorthand for -conveying meaning that users perceive almost instantaneously. -Well-designed icons improve the visual communication and strongly impact -users' overall impression of visual design. Icons are space-saving -mechanisms and improve usability by making programs, objects, and -actions easier to identify and learn. Icon use should be consistent -throughout the interface. - -Guidelines ----------- - -- Design icons with a small number of metaphors [1]. - - - Apply metaphors only once (e.g. do not use a brush twice for - different options). - - Rethink conventionally used metaphors (e.g. the clipboard icon of - paste). - - Antiquated metaphors might work well (e.g. a floppy disk is not - necessarily outdated to represent save). - - Adjust the degree of abstractness according to familiarity of the - metaphor. - - Use arrows only if they can easily be related to spatial features - such as *Previous/Next* in a sequence or *Up/Down* in a hierarchy. - Avoid using arrows metaphorically (such as for *Reply/Forward* or - *Undo/Redo*). - - Use metaphors understandable independent of language and culture. - - Simplify your icons. - -- Icons that lose details when shrunk may need a special version that - preserves meaning even at smaller sizes. Critical details may become - unrecognizable when scaled down. -- Avoid using text in icon designs; it may not scale well to smaller - sizes. -- Icons of a similar type share a consistent visual language - (mimetypes, folders, devices, etc.). -- Follow the guidelines for presenting - :doc:`icons with text ` -- 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* diff --git a/source/style/typography.rst b/source/style/typography.rst index 023276e..02c449d 100644 --- a/source/style/typography.rst +++ b/source/style/typography.rst @@ -1,48 +1,155 @@ Typography ========== The guideline helps ensure that typography is always in harmony with the overall visual design. -Guidelines ----------- - Typeface Styles -^^^^^^^^^^^^^^^ -A selection of typeface styles are allocated throughout the user interface as follows. Set system defaults and conduct design activities using the design typeface styles. To respect user typeface choices while preserving the distinction afforded to each typographic category, implement the design using the corresponding system typeface styles. +--------------- + +KDE's default font is *Hack* for monospace and *Noto Sans* for everything else. +The default font size is 10pt. KDE Plasma and Applications display seven +variants of this typeface. + +.. figure:: /img/Typography1.png + :alt: Show different typefaces in KDE + :figclass: border + + The seven default typeface styles + +Typeface settings can be adjusted by the user and have +:doc:`great influence on sizing and spacing ` in KDE's +workspace and applications. -.. image:: /img/Typography-noto.png +* The monospace typeface should be used for code content, filenames, file paths. +* Typography is treated like any other visual element when considering + :doc:`spacing ` and + :doc:`alignment `. +* Multi-line blocks of text should be either left or right aligned; avoid center + alignment. +* Limit the range of any dynamic type resizing to preserve the intended visual + hierarchy. For example, don't resize body text to be bigger than + the heading text. Or don't resize the section heading text to fit more words + so that it's smaller than the body text. Or don't resize text of relatively + lesser importance so that it's bigger than text or other visual elements that + should be of relatively greater importance. + +.. warning:: + |devicon| Never use **Text{}** in Kirigami or Plasma, because it + doesn't follow the system font rendering settings. See :ref:`typography-code` + for implemntation. + +.. warning:: + |devicon| Never use a hardcoded value of px or pt to define a + font size. See the entry about :doc:`units ` for more + information. .. hint:: - |devicon| It is recommended to use the system fonts available via ''QFontDatabase::systemFont''. + |designicon| The px values are only for design and mockup; don't use them + for development. -* A monospace version of the ''Content Body 1'' typeface should be used for code content. -* Typography is treated like any other visual element when considering [[KDE_Visual_Design_Group/HIG/Placement|spacing]] and [[KDE_Visual_Design_Group/HIG/Alignment| alignment]]. -* Limit the number of typeface style variations to about three in any single design. -* Multi-line blocks of text should be either left or right aligned; avoid center alignment for multi-line blocks of text. -* Point sizes correspond to actual typeface sizes at the default xorg 96 dpi setting, where 1 pt = 1/72 inch (0.35mm). Resize all visual elements, including type, when scaling the user interface for higher dpis. -* Limit the range of any dynamic type resizing to preserve the intended visual hierarchy. Dynamically resizing the type of a text element may alter the visual hierarchy. For example, don't resize body text till it's bigger than the heading text. Or don't resize the section heading text to fit more words until it's smaller than the body text for which it provides a heading. Or don't resize text of relatively less importance till it's bigger than text or other visual elements that should be of relatively more importance. + - Header 1: Noto Sans 18px + - Header 2: Noto Sans 13px + - Header 3: Noto Sans 12px + - Header 4: Noto Sans 11px + - Body: Noto Sans 10px + - Code: Hack 10px + - Small: Noto Sans 8px -Typographic Category Examples -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -Menus - Menu bar, Popup menus +Guidelines +---------- -Content Title - Category title, Panel popups title +Components +^^^^^^^^^^ -Content Header - Section headers +Most :doc:`components ` have a recommended typeface style. +If you create a new component you should give it the same typeface style as +similar existing components. -Content Body 1 - Text content, Icon grid items, List items +Content +^^^^^^^ -Content Body 2 - Captions , tooltips +You can use any typeface styles to structure your content, but try not to +overuse the larger headings. -Properties and Tools - Property panel, Toolbar, Status bar +When the visual design calls for an area of exceptional focus, a larger +typeface size may be used. In this case use a Light typeface weight to keep the +stroke width similar to other styles throughout the interface . All other +typeface characteristics for the typographic category should be maintained. For +such exceptions to be effective, they must be very rare. Text Color and Contrast ^^^^^^^^^^^^^^^^^^^^^^^ -The text [[KDE_Visual_Design_Group/HIG/Color|color]] and background [[KDE_Visual_Design_Group/HIG/Color|color]] can be varied to provide additional hierarchical hints (e.g. selected text). However, the contrast between the text and background color must be sufficient to preserve legibility of the text. + +The text :doc:`color <./color/index>` and +:doc:`background color <./color/index>` can be varied to provide additional +hierarchical hints (e.g. selected text). However, the contrast between the text +and background color must be sufficient to preserve legibility of the text. Words per line ^^^^^^^^^^^^^^ -Unless the content is long-form text like a book or a report, try to keep line lengths to no more than about eight to ten words per line. For typographic categories that use an all caps typeface, try to keep line lengths to no more than about three to four words per line. -Exceptions -^^^^^^^^^^ -When the visual design calls for an area of exceptional focus, a larger typeface size may be used. For a significantly larger typeface use a Light typeface weight to keep the stroke width similar to other typeface styles throughout the interface . All other typeface characteristics for the typographic category should be maintained. For such typeface exceptions to be effective, they must be rare. +Unless the content is long-form text like a book or a report, try to keep line +lengths to no more than about eight to ten words per line. For styles requiring +the use of an all-caps typeface, try to keep line lengths to no more +than about three to four words per line. + +.. _typography-code: + +Code +---- + +Kirigami +^^^^^^^^ + +.. code-block:: qml + + ... + import QtQuick.Controls 2.2 as Controls + import org.kde.kirigami 2.4 as Kirigami + ... + Kirigami.Heading { + level: 1 + text: "Header 1" + } + Kirigami.Heading { + level: 4 + text: "Header 4" + } + Controls.Label { + font.pointSize: 24 + text: "Extra large title" + } + Controls.Label { + text: "Normal text in your application" + } + Controls.Label { + text: "Use this to label buttons, checkboxes, ..." + } + + +Plasma +^^^^^^ + +.. code-block:: qml + + ... + import org.kde.plasma.extras 2.0 as PlasmaExtras + import org.kde.plasma.components 3.0 as PlasmaComponents + ... + PlasmaExtras.Heading { + level: 1 + text: "Header 1" + } + PlasmaExtras.Heading { + level: 4 + text: "Header 4" + } + PlasmaComponents.Label { + font.pointSize: 24 + text: "Extra large title" + } + PlasmaComponents.Label { + text: "Normal text in your application" + } + PlasmaComponents.Label { + text: "Use this to label buttons, checkboxes, ..." + } diff --git a/source/style/writing/capitalization.rst b/source/style/writing/capitalization.rst index a15d7b8..57c2dff 100644 --- a/source/style/writing/capitalization.rst +++ b/source/style/writing/capitalization.rst @@ -1,82 +1,62 @@ Capitalization ============== Purpose ------- *Capitalization* is a feature of case-sensitive languages to foster -relevance. In terms of software it draws attention to words with capital -letters. For a consistent look and feel of the software it is important -to implement capitalization consistently. On the other hand, -capitalization slows down translation and increases the risk of -inconsistent terminology. +relevance by drawing attention to words with capital letters. For a consistent +look and feel of the software, it is important to implement capitalization +consistently. Guidelines ---------- There are two types of capitalization, title capitalization and sentence style capitalization: Title Capitalization ~~~~~~~~~~~~~~~~~~~~ Title capitalization is when every word in a sentence, statement, -phrase, or label are capitalized except for certain words. Words with -less than five letters are generally lowercase in titles, unless they -are the first or last words in a title. +phrase, or label is capitalized except for certain words. Use title +capitalization primarily for titles and headers, but also for command labels. +For example: + +- Titles and headers on windows, dialog boxes, tabs, lists, group boxes, tree + views, etc. +- Menu titles and menu item labels +- Button labels Do not capitalize: - Articles: a, an, the -- Coordinating Conjunctions: and, but, or, for, nor, etc. +- Coordinating conjunctions: and, but, or, for, nor, etc. - Prepositions (fewer than five letters): on, at, to, from, by, etc. -Always capitalize - -- Nouns (man, bus, book) -- Adjectives (angry, lovely, small) -- Verbs (run, eat, sleep) -- Adverbs (slowly, quickly, quietly) -- Pronouns (he, she, it) -- Subordinating conjunctions (as, because, that) +Capitalize everything else. -Use title capitalization in the following cases: - -- Window and dialog box titles -- Group box / group line labels -- Button labels -- Tab labels -- Listview column headers -- Menu titles / menu items -- Derivatives of KCommand -- Combobox items -- Listbox items -- Tree list items -- Other heading/title text Sentence Style Capitalization ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Sentence style capitalization is when the first letter of the sentence, statement, phrase, or label is capitalized and all other words are lower case. The only exception to this is proper nouns which are always capitalized. -Use sentence style capitalization in the following cases: +Use sentence style capitalization for text that is or could be read as a +sentence, or that is part of a sentence in conjunction with other elements. +For example: -- Edit box labels -- List box labels -- Combo box labels -- Spin box labels +- Tooltip text +- Placeholder text in text fields - Checkbox labels -- Option button labels -- Slider labels -- Pop-up hint text -- Dialog header/description -- Other non heading/title text +- Labels to the left of controls in a Form Layout +- Descriptions of anything Acronyms/Initialisms, Internet ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - Words such as URL, JPEG, or LDAP should be written in capital letters - Internet (if referring to *the* Internet) takes a capital I.