Inventory of Styleguide elements

UI Elements

Grammar, spelling and abbreviation conventions

• Writing should be in active voice whenever possible.
• Sentences should begin with action verbs whenever possible.

Different kinds of text

• Titles
• Numbers and Symbols
• Paragraph text
• Form element labels
• Button labels

• Logo
• Toolbar buttons: New, Send, Delete (N/A for Cosmo Preview)
• Secondary navigation: Backward and Forward / Pagination
• State buttons: View selector, Triage Status
• Confirmation buttons: Okay, Submit, Search, Cancel, Save, Ignore, Close

• Color palette

• Fonts: Face, Size, Color, Style
• Links: Active, Hover, Pressed, Visited

• Margins
• Gutters
• Vertical spacing and Grouping UI elements
• Alignment issues
  • Different ways to align form fields

• Column headers

Dialogs

• Warnings and Notifications
• Confirmations
• Error messages

• Log in
• Collection details
• Settings

---

Styleguide for Dialogs

Below is a first pass at a styleguide for dialogs. Specifically for the Log in, Collection details and Settings dialogs. Some permutation of this style will be applied to Warning, Notification, Confirmation and Error dialogs. The Sign up 'dialog' will have a different style altogether, as it is not really a dialog to the user.

Details about what has changed since 0.6 designs: http://lists.osafoundation.org/pipermail/design/2007-January/006099.html

Placement

• Center and Middle aligned in the window

Title Bar

• Height: 20px high
• Texture: Vertical gradient matches the blue calendar lozenges
• Left margin: 5px
• Cancel button - Title gutter: 7px
• Font size - Medium
• Font color - White #ffffff

Cancel button has 3 states:

• Active
• Rollover
• Mousedown

Outer Dialog

• Color: #f5f5f5
• Opacity: 88%
• Left-Right margins: 10px
• Top-Bottom margin: 15px
• Top when there are tabs: 10px

Confirmation buttons

• 3 states:
  • Active
  • Rollover
  • Mousedown
• Font size: Medium
• Font color: Black #000000
• Font opacity: 88%
• Gutter between confirmation buttons: 10px

Inner Dialog

• Color: #ffffff
• Opacity: 88%
• Inside margins, all-around: 15px

Form Elements

Vertical gutter between labels and fields: 10px

Text fields and Pulldowns:

• 5px horizontal gutter between fields if they are part of 1 group
• 20px horizontal gutter between groupings of fields

Checkboxes and icons:

• 5px vertical gutter if they sit to the right of a text field or pulldown

Horizontal gutter above and below Dividers: 15px

Form Element Text Labels:

• Font size: Medium
• Font color: Black #000000

Error Text:

• Font size: Small
• Font color: Red #ff0000
• Gutter: 10px below form elements

Explanatory Text:

• Font size: Small
• Font color: Medium Grey #808080
• Gutter: 10px below form elements

Link styles

• Active style: No underline
• Active color: #6699ff
• Hover effect: Underline
• Mousedown link color: #4322e5
• Mousedown effect: Underline
• Visited link color: #6633cc

Colors taken from here: http://www.toledo-bend.com/colorblind/BlueChart.html

Buttons

State Buttons

For Preview, State Buttons will not have Rollover and Mousedown states. Instead, there will just be 2 states: Active and Selected. State Buttons include:

• View selector: Dashboard | Calendar
• Triage status in the Detail View: NOW | LATER | DONE
• Column header in the Dashboard

Action Buttons

Action Buttons will continue to have Rollover and Mousedown states. Action Buttons include:

• View collection details
• Enter
• Navigation arrows
• Mail this item in the Detail View
• Remove | Save
• Okay | Cancel

For more details on icons, see list: http://lists.osafoundation.org/pipermail/design/2007-June/007418.html

Gradient background buttons

• Active Outline: #b8b8b8
  • Dividers: View selectors, Triage status, Email
  • Outlines: Confirmation buttons
• Rollover Outline: #f7f7f7
• Mousedown Outline: #808080

See: TheFengShuiOfVisualDesign

Deferred

Tabbed Inner Dialog

Tabs have 7 states:

• Greyed out
• Active
• Rollover
• Mousedown
• Selected
• Selected Rollover
• Selected Mousedown

Selected

• Top margin: 12px
• Left-right margins: 10px
• Bottom margin: 5px

Unselected

• Top-bottom margins: 5px
• Left-right margins: 10px

Text

• Font size: Medium
• Font color: Black #000000
• Font opacity: 88%

-- MimiYin - 07 Dec 2006