BlackBerry 6 theme icons and indicators
The BlackBerry® 6 theme icons use a simple line form that maintains a 2-D orthographic view. Icons and color are functional; the background provides the emotional impact. Compared to the Precision theme, the line weights are thinner and the corner radius is larger, providing a friendlier-looking shape. Icons also have a sheen, giving a higher reflective polish.
Indicators are 2-D objects that appear straight on. You can include indicators in the banner, title bar, or in applications (for example, message indicators in a message list).
Best practice: Designing icons and indicators for the BlackBerry 6 theme
- Create icons that are consistent with the default icons in size, weight, and centering.
- Create 32-bit .png files.
- In toolbars and pop-up menus, create icons with an average size of 33-by-33 pixels. These icons appear on a 60-by-40 pixel canvas and should have some negative space.
- For application icons, create an icon file that does not exceed 68-by-68 pixels. This size includes the canvas. Keep the weight of icons inside a 49-by-49 pixels space. Smaller elements can extend beyond this size but icons should not exceed 55-by-55 pixels. If the icon within the canvas exceeds this size, it could be scaled down and upset the line weights and gradients.
- Create application icons with four components: base, line art, reflection, and bounce light.
Base properties
- Color: Deep grey (hexadecimal color code 141414)
- Gradient overlay: White from 15% to 0% opacity (bottom to top, position 0 to 50 on grad slider)
- Drop shadow: 35% opaque. Use the Multiply setting.
- Angle of light: 90 degrees
- Shadow distance: 6 pixels
- Shadow size: 15 pixels
Line art properties
- Create line art with a white portion and a colored portion.
- White portion: White (hexadecimal color code FFFFFF)
- Gradient overlay: Black from 0% to 60% opacity (top to bottom)
- Colored portion: Deep grey (hexadecimal color code 141414)
- Gradient overlay: White from 15% to 0% opacity (bottom to top, position 0 to 50 on grad slider)
Reflection properties
- Size: Approximately one-third the height of the object
- Fill opacity: 0%
- Gradient overlay: White from 35% to 5% opacity
Bounce light properties
- Apply the bounce light to the white portion of the line art.
- Fill opacity: 0%
- Gradient overlay: White from 40% to 0% opacity (bottom to top, position 0 to 16 on grad slider)
- Use color to accent icons and indicators:
Base color
Hexadecimal color code
Top to bottom gradient
ff0000 at 100% opacity
000000 from 25% to 0% (position 0 to position 70 on grad slider)
ffb300 at 100% opacity
812e00 from 40% to 0% opacity
9600ff at 75% opacity
ff0084 from 65% to 0% opacity
e13d00 at 100% opacity
ff7800 from 100% to 0% opacity
0da400 at 100% opacity
000000 from 15% to 0% opacity
00e4ff at 100% opacity
0069ff from 70% to 0% opacity
Guidelines for shapes and lines
- Use rounded rectangles, circles, pill shapes, arcs, and straight lines. Use circular arcs as transitions. Avoid using free-flowing curves and specialized shapes.
- For rectangular shaped icons, make each corner radius 6 pixels.
- Use modifying objects to create new meaning or establish a relationship among a set of icons. Modifying objects are smaller, secondary objects that overlay another object. For example, the icons in the Setup folder use a gear as a modifying object.
- To add visual variety to icons, use two different line weights. Create one line weight that is 1.65 pixels thick and another that is 0.8 pixels thick.
- Use thick lines to identify primary features and thin lines to identify secondary features. Avoid using only thin lines for an icon. Use only thick lines when the object is not detailed.
- Create an ellipse with a minor axis length that is two-thirds the length of the major axis as an end-cap for lines.