Buttons
Regular buttons are 40px tall with a font size of 13px. Width will be determined by the call to action within the button. It is recommended that the contents of the button be kept to 3 words or less. The contents should be centered vertically and horizontally.
The majority of buttons should be set in the masterbrand color #00B4D6. However when #00B4D6 is used as a background color, #1B516F may be used as the button color. For alerts and troubleshooting, #FCB538 is an acceptable button color. Never use white as a button color.
Primary Button
Primary Outline Button
Success Button
Success Outline Button
Secondary Button (Button on darker backgrounds)
Fields
The standard textfield is used for most forms within the application. There's an inset shadow, with a border color and box shadow transition effect on focus.
Alerts
User-generated messages appear as a result of a user taking an action on the page. These message components are displayed at the page and module level. Error validation messaging remains in view until the error is fixed.
Success
Warning
Error
Icons
Several icons are used throughout GuideOne’s brand. Commonly used icons and the approved usage are displayed below.
All icon descriptors are set to ALL CAPS, Open Sans, Bold in P 425 (84.87.89)
Tables
Tables should be used to present tabular data only, and should be limited to the minimum number of columns needed when possible. On mobile, tables will horizontally scroll to reveal all the content when the table width is more than the browser width.
| Column One | Column Two |
|---|---|
| Column One Value | Column Two Value |
| Column One Value | Column Two Value |
| Column One Value | Column Two Value |
| Column One Value | Column Two Value |
| Column One Value | Column Two Value |