|
| 1 | +# Papirus Design Notes |
| 2 | + |
| 3 | +The following notes are a synthesis of many informal guidelines for Papirus icon design. They stop short of being an official style guide, and they may change over time. |
| 4 | + |
| 5 | +## Basic concepts |
| 6 | + |
| 7 | +Papirus is an SVG-based icon theme for Linux, drawing inspiration from Material Design and flat design. |
| 8 | + |
| 9 | +All elements are clear, distinct, and have recognisable outlines. Another main feature that distinguishes our theme is its use of warm color tones. |
| 10 | + |
| 11 | +Papirus icons are drawn in layers, moving from dark (down) to light (up). |
| 12 | + |
| 13 | +Objects have a thin highlight (`#ffffff` 20% or 10% for dark icons), and a shadow (always `#000000` 20%). See the template files for more info. |
| 14 | + |
| 15 | +## Main icon sizes |
| 16 | + |
| 17 | +Main icons have the following sizes: 16px, 22px, 24px, 32px and 48px. 64px icons are used for for apps, devices, places and mimetypes. |
| 18 | + |
| 19 | +Excluding their shadows, icon designs as a whole should fit within the following areas, centred on the icon. |
| 20 | + |
| 21 | +| Icon size | Design to | Margin | |
| 22 | +| --------- | --------- | ------ | |
| 23 | +| 16px | 16x16 | 0px | |
| 24 | +| 22px | 20x20 | 1px | |
| 25 | +| 24px | 20x20 | 2px | |
| 26 | +| 32px | 28x28 | 2px | |
| 27 | +| 48px | 40x40 | 4px | |
| 28 | +| 64px | 56x56 | 4px | |
| 29 | + |
| 30 | +### Q: Why do we need so many sizes for an SVG? |
| 31 | + |
| 32 | +Because if we use a single size for all then the icons will be blurred at some scales. All objects in Papirus icons need to have pixel alignment. |
| 33 | + |
| 34 | +## Base and foreground shapes |
| 35 | + |
| 36 | +Most Papirus icons have a shaped _base_ or background, and some have a _foreground_ design or logo drawn on top of the base too. Foreground elements like this need their own distinctive outline within the base shape, so there should be a good visual contrast between the base elements and any foreground design. |
| 37 | + |
| 38 | +Base element shapes must look good against both dark and light themes. See the sections below for guidelines about color choice for base elements. |
| 39 | + |
| 40 | +## Shadow and highlight |
| 41 | + |
| 42 | +The base elements of any icon should have a shadow and a highlight. Sometimes foreground elements do as well, if they're fairly large. |
| 43 | + |
| 44 | +Create the shadow by copying the elements you want to shadow, converting them to a single path with _Path → Object/Stroke to Path_ operations, ungroup, and _Union → Path_ in Inkscape, then changing the path's fill color to pure black, 20% object opacity. Move the shadow downwards by the distance in the table below. |
| 45 | + |
| 46 | +Create the highlight shape by copying the shape you made for the shadow twice, moving the top copy down by the distance in the table below, and subtracting it from the top one with _Path → Difference_ in Inkscape. Set the fill color to pure white at 20% object opacity, or 10% if you're putting a highlight on a dark element. |
| 47 | + |
| 48 | +| Icon size | Shadow offset (+y), hilight size (px) | |
| 49 | +| --------- | ------------------------------------- | |
| 50 | +| 16px | normally no shadow or highlight | |
| 51 | +| 22px | 0.5px (use the toolbar text entry) | |
| 52 | +| 24px | 0.5px | |
| 53 | +| 32px | 1px | |
| 54 | +| 48px | 1px | |
| 55 | +| 64px | 1px | |
| 56 | + |
| 57 | +Shadow and highlight offsets are an exception to the general rule about pixel alignments. |
| 58 | + |
| 59 | +## Selecting colors |
| 60 | + |
| 61 | +Please do not use very bright and toxic colors for Papirus. There is no official Papirus palette, but block colors should be warm-hued, juicy, and not overly saturated. |
| 62 | + |
| 63 | +Good examples colors are available in the main icon theme folders, and you can start with [the example SVG][svgex] in this folder too. |
| 64 | + |
| 65 | +For compatibility with the majority of GTK Themes, we use these brightness limits for base elements. Please don't pick color shades much brighter or darker than these for a base element, and treat these as hard limits for greyscale base elements. This doesn't include shadows and highlights. |
| 66 | + |
| 67 | +- white `#e4e4e4` (HSLuv L* of 91%) |
| 68 | +- black `#4f4f4f` (HSLuv L* of 34%) |
| 69 | + |
| 70 | +Suggested colors for object materials: these are especially useful for device icons. |
| 71 | + |
| 72 | +- paper `#e4e4e4` |
| 73 | +- steel `#afafb1` |
| 74 | +- aluminium `#8e8e8e` |
| 75 | +- plastic `#4f4f4f` |
| 76 | + |
| 77 | +[svgex]: ./examples-papirus.svg |
| 78 | + |
| 79 | +## Base element colors |
| 80 | + |
| 81 | +Base elements must be no brighter or darker than the black and white limits above. Papirus icons have to be compatible with a very wide range of GTK themes, some of which use white or pure black backgrounds. |
| 82 | + |
| 83 | +If the base elements are any lighter than `#e4e4e4`, they will tend to disappear into white backgrounds, and this will mess with the shape of the icon. Please avoid base element colors any lighter than the following examples: |
| 84 | + |
| 85 | +     |
| 86 | + |
| 87 | +     |
| 88 | + |
| 89 | +Similarly, base elements that are darker than `#4f4f4f` may be difficult to make out against a black background. Please avoid using base element colors that are any darker then the following examples |
| 90 | + |
| 91 | +     |
| 92 | + |
| 93 | +     |
| 94 | + |
| 95 | +## Foreground element colors |
| 96 | + |
| 97 | +The rules for color selection are a bit more relaxed when you're drawing a foreground element. Logos, text, or other other foreground elements that are fully on top of a base element can use brighter or darker colors than the rules for base elements allow. Put simply, they can be brighter or darker because they are isolated from the themed background color by their base. |
| 98 | + |
| 99 | +Pure `#ffffff` white is in widely accepted, widespread use on top of more vibrantly colored bases, even for quite large shapes: |
| 100 | + |
| 101 | +     |
| 102 | + |
| 103 | +     |
| 104 | + |
| 105 | +Some icons with dark foreground elements use darker colors like `#3f3f3f`. Note that pure black is only ever used for shadows in Papirus. |
| 106 | + |
| 107 | +     |
| 108 | + |
| 109 | +     |
| 110 | + |
| 111 | +The goal here is to create acceptable contrast between base and foreground elements. Consider checking the contrast between the icon's base shape and any foreground elements with a [WCAG 2.0 accessibility checker][checker1]. A rating of "AA" for the _Graphical Objects and User Interface Components_ category is a good minimum target for any logo. Finer designs and text should aim to pass under the _Normal Text_ category instead. |
| 112 | + |
| 113 | +[checker1]: https://webaim.org/resources/contrastchecker/ |
| 114 | + |
| 115 | +## Monochrome icons |
| 116 | + |
| 117 | +Papirus now also supports KDE color scheme for monochrome actions, devices, places and panel icons. You can find more detailed info about that [here](https://techbase.kde.org/Development/Tutorials/Plasma5/ThemeDetails#Colors). |
| 118 | + |
| 119 | +Presently we only support the following icons: |
| 120 | + |
| 121 | +- actions (16px, 22px, 24px) |
| 122 | +- devices (16px) |
| 123 | +- places (16px) |
| 124 | +- panel (22px, 24px) |
| 125 | + |
| 126 | +## Gradients |
| 127 | + |
| 128 | +Avoid gradients. There's nothing technically wrong about them, it just isn't the Papirus style. Instead, workarounds are possible when redrawing particularly gradienty upstream icons in the Papirus style. Some examples of icons that evoke complex upsteam gradient with a bit of artistic posterization and some subtle shadows: |
| 129 | + |
| 130 | +    |
| 131 | + |
| 132 | +## Further reading |
| 133 | + |
| 134 | +See the [Papirus wiki][wiki] for some useful guides to icon creation. There are topics in there covering just about every aspect of icon creation workflow, as well as historical information about the project. Anyone can contribute a page, and we'd like it to be as useful as possible! |
| 135 | + |
| 136 | +[wiki]: https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/wiki |
0 commit comments