Kibble Icon Design

• Status: To be reviewed by entire Design team

Kibble Toolbar

• Kibble_toolbar.gif:
  

.5 Toolbar

• Icons are 26x26
• Toolbar height: approx 56 pixels (depending on height of text)
• Top margin: 8 pixels
• Icon - Text margin: 5 pixels
• Bottom margin: 3 pixels
• Horizontal margin: 10 pixels (TBD)

• ZeroPointFive^?_Toolbar.gif:
  

• toolbar_all.png:
  

• toolbar_mail.png:
  

• toolbar_events.png:
  

• toolbar_calendar.png:
  

• toolbar_tasks.png:
  

• toolbar_sync.png:
  

• toolbar_new.png:
  

• toolbar_remove.png:
  

• toolbar_delete.png:
  

• toolbar_print.png:
  

• toolbar_send.png:
  

• toolbar_attach.png:
  

Kibble Sidebar

• OOTB collection icons: 16x16
• Sharing status icons: 10x10
• Horizontal margins: 5 pixels from the edge to the icon
• Vertical margins: 5 pixels from the edge to the top of the selection bar (approximately 8 pixels from the edge to the top or bottom of the text)

• Kibble_sidebar.png:
  

• sidebar_all.png:
  

• sidebar_mail.png:
  

• sidebar_events.png:
  

• sidebar_calendar.png:
  

• sidebar_tasks.png:
  

• sidebar_in.png:
  

• sidebar_out.png:
  

• sidebar_junk.png:
  

• sidebar_delete.png:
  

• sidebar_download.png:
  

• sidebar_upload.png:
  

• sidebar_error.png:
  

Markup bar

Not all of the below is for .5

• Markup bar height: TBD
• Mark-up bar icon size: 20x20 (middle-aligned)
• Blue and green spaces: 20 pixels wide
• Pink spaces are 15pixels wide
• Icons should be properly spaced horizontally and vertically if the buttons are flush horizontally and vertically aligned
• There is an indeterminate width between the the attachments icon and the private icon. The # of attachments should be as close to the attachments icon as possible.
• The private icon is ideally right aligned.
• There are 2 states for each of the buttons. An active state and a mouseover / selected state.
  • [OI^?] Can the 2nd state be done programmtically (ie. darkening).
  • Only the stamping buttons have a persistent selected state.

• markup_bar_icons.png:
  

• markup_bar_mail.png:
  

• markup_bar_draft.png:
  

• markup_bar_out.png:
  

• markup_bar_in.png:
  

• markup_bar_events.png:
  

• markup_bar_tentative.png:
  

• markup_bar_fyi.png:
  

• markup_bar_tasks.png:
  

• markup_bar_reply.png:
  

• markup_bar_forward.png:
  

• markup_bar_update.png:
  

• markup_bar_attachments.png:
  

• markup_bar_private.png:
  

• markup_bar_read_only.png:
  

Markup bar gradient icons

• markup_grad_mail.png:
  

• markup_grad_tasks.png:
  

• markup_grad_events.png:
  

• markup_grad_private.png:
  

Detail view icons

• Icon size: 16x16

• detail_view_alarm.png:
  

• detail_view_recurrence.png:
  

• detail_view_ends.png:
  

Summary calendar view icons

• Icon size: 10x10

• summ_cal_task.png:
  

• cal_arrow_left.png:
  

• cal_arrow_right.png:
  

• cal_arrow_left_MD.png:
  

• cal_arrow_right_MD.png:
  

• allday_plus.png:
  

• allday_open_arrow.png:
  

• allday_close_arrow.png:
  

Cursor icons

• AddCursor^?-darwin.png:
  

• AddCursor^?.png:
  

• NotCursor^?-darwin.png:
  

• NotCursor^?-darwin.png: