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.

This screens shows some of the BlackBerry 6 application icons.

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).

This indicator is an example of an indicator in an application.

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

    This image shows the shade of red used in the BlackBerry 6 theme.

    ff0000 at 100% opacity

    000000 from 25% to 0% (position 0 to position 70 on grad slider)

    This image shows the shade of yellow used in the BlackBerry 6 theme.

    ffb300 at 100% opacity

    812e00 from 40% to 0% opacity

    This image shows the shade of violet used in the BlackBerry 6 theme.

    9600ff at 75% opacity

    ff0084 from 65% to 0% opacity

    This image shows the shade of orange used in the BlackBerry 6 theme.

    e13d00 at 100% opacity

    ff7800 from 100% to 0% opacity

    This image shows the shade of green used in the BlackBerry 6 theme.

    0da400 at 100% opacity

    000000 from 15% to 0% opacity

    This image shows the shade of blue used in the BlackBerry 6 theme.

    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.
Related concepts

Was this information helpful? Send us your comments.