Design Guidelines

This document details some guidelines for designing icons for the La Capitaine project. This document is a work in progress, and is evolving as a set of guidelines are standardized for the project.

Design principles

Simple. An icon shouldn't have too many elements, colours or variants. Avoid using photos and text when a graphical element can be used instead.

Functional. People should be able to immediately recognize the meaning of an icon. An icon should be designed in SVG for scaleability.

Consistent. Design an icon that works with other icons in the set by following this guideline without deviating too much from it.

Creative. Innovate by redesigning original logos and icons to fit into the icon set. Making an icon for an existing app doesn't mean copying the design of its default icon.

Maintainable. Design goes all the way to the mark-up. Besides the visual elements of an icon, its mark-up code should be neat and clear for others to read and change. Metrics like size, shapes and colour should be as simple as possible. For example, use opacity="0.85" and not opacity="0.846".

Technical design details

See also: Technical Notes#good-svg-markup-practices

Application icons

When designing a new application icon, be sure to use the provided template.

Application icons should be sized at 44×44 px, centred on a 48×48 px canvas, with a 2px border. For irregularly sized icons, at least one dimension (x or y) should be 44px (wide or tall).

Application icons are used loosely to mean scalable icons in the apps, devices and places folders. These icons are usually displayed larger than symbolic and status icons.

Mimetype icons

Mimetype icons represent a type of file. Most of them use the metaphor of a physical piece of paper and follow the design guidelines for vertical rectangle-shaped icons. In addition, mimetypes should follow the guidelines below:

• A short description of the file, usually the extension, must be included at the bottom of the icon.
  • Font: Roboto
  • Colour: #FFF (white)
  • Size: 6 (no units)
  • Letter spacing: -0.3
  • Anchored centre using text-anchor="middle" with x="24"
  • Depending on the text itself, the y-position can vary from 43 to 44. For example, if the text is "py" then the y-position is 43; if the text is "js" then the y-position is 43.5; if the text is "JAVA" then the y-position is 44. This is a process of trial and error.
• The short description must be displayed against a shaded part at the bottom of the icon.
  • Height of shade part: 8px
  • Colour: #000 (black)
  • Opacity: 0.6
  • The shaded part can be achieved through clipPath using a rect

Shape and Size

Icons are designed using predefined shapes and each have their own meaning. The shapes are designed to fit into a pixel grid of 48px by 48px, with all shapes given at least a 2px padding on all four sides with some icons given exceptions.

Square

Square icons can be used for any type of application.

• Width: 38px
• Height: 38px
• Rounded corners: 3px
• Basic template: <rect x="5" y="5" width="38" height="38" rx="2" />

Circle

Circle icons can be used for any type of application. If the original icon is circular, then it is usually better to use a circle when redesigning it.

• Radius: 22px
• Optional border: 2px
• Basic template: <circle cx="24" cy="24" r="21" />
• Border template: <circle cx="24" cy="24" r="21" fill="none" stroke="url(#border)" stroke-width="2" />

Vertical rectangle

Vertical rectangles are used for mimetype icons and icons that require that shape (like calculators).

• Width: 32px
• Height: 44px
• Rounded corners: 3px
• Basic template: <rect x="8" y="2" width="32" height="44" rx="2" />

Horizontal rectangle

Horizontal rectangles are usually used to convey dialog windows, such as the desktop or command line icons.

• Width: 44px
• Height: 32px
• Rounded corners: 3px
• Basic template: <rect x="2" y="8" width="44" height="32" rx="2" />

Tilted square

Tilted squares convey motion and fun. They are generally used for creative applications like those for graphical manipulation and sound editing, recreational applications and games.

Tilted square icons must be drawn as a square following the specifications below before rotating using transform. The rotation is 8° anti-clockwise, with the centre of rotation at (24,24). The rotation transform should be applied to a parent <g> that contains every element in the icon.

• Width: 37px
• Height: 37px
• Rounded corners: 3px
• Basic template:

<g transform="rotate(-8 24 24)">
    <rect x="5.8" y="5.8" width="37" height="37" rx="2" />
</g>

Colours and Shadows

When an icon uses long shadows, the light source is from the top-left corner of the icon. When there is no long shadow, then the light source can be either from the top or top-left. To keep icons consistent, you are advised to use a top-left light source.

Colours

La Capitaine relies heavily on gradients but doesn't abuse it. In most cases, there shouldn't be more than two colours in a gradient. The colours used for gradients should not be too contrasting or subdued. The latest iterations of macOS and iOS aesthetics are good references to the degree of contrast and saturation required.

• Icon badges must use a gradient.
• Icon borders must use a gradient.
  • Icon borders must use the following gradient stops: <stop offset="0" stop-color="#DDD" /> and <stop offset="1" stop-color="#FFF" /> unless the design requires a non-white border
  • Border gradient must stretch from the top-left corner of the border (#FFF) to the bottom-right corner of the border (#DDD). You can achieve this using gradientTransform attribute on linearGradient.

Shadows

No icon nor its border should have a drop shadow. Shadows should only be applied to graphical elements within an icon.

Only use long shadows when the symbol on the icon is intended to be "protruded" from the icon itself. This means that the symbol must "pop out" to form a layer on top of its badge to cause a shadow. As a rule of thumb, do not use shadows if the symbol on the icon is only in one colour (usually black or white with some transparency), because these symbols are "engraved" into their badge. Therefore, mimetype and folder icons should not have shadows.

• Drawn 45° to the object causing the shadow.
• Use linearGradient with two stops.
  • The gradient path must be parallel to the shadow (at 45°).
  • The first stop is #000 with stop-opacity="1". The second stop is #000 with stop-opacity="0".
  • The first stop should be positioned at the center of the object causing the shadow.
  • The second stop should end 70% to 75% of the width of the object causing the shadow.
• opacity="0.2" on the shadow path.

Text

Text in icons should be used sparingly because it doesn't scale down well in low resolution systems. But when text is used, it should be converted into a path.

Font

Should any icons require text of any kind, you should use a font from the Roboto family:

• Roboto (Sans serif; regular or light)
• Roboto Slab (Serif; to be avoided unless there is good reason)
• Roboto Mono (Monospace font)

This particularly concerns mimetype icons, which usually include a short text descriptor at the bottom of the image.