r19 - 13 Jul 2007 - 06:16:15 - MimiYinYou are here: OSAF >  Journal Web  >  MimiYinNotes > CosmoStyleGuide

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


  • 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


  • 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


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


Tabbed Inner Dialog

Tabs have 7 states:

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


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


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


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

-- MimiYin - 07 Dec 2006

Edit | WYSIWYG | Attach | Printable | Raw View | Backlinks: Web, All Webs | History: r19 < r18 < r17 < r16 < r15 | More topic actions
Open Source Applications Foundation
Except where otherwise noted, this site and its content are licensed by OSAF under an Creative Commons License, Attribution Only 3.0.
See list of page contributors for attributions.