Fonts

On White On Light Gray On Slate Gray

Title

Standard Text

Large Text

Title

Standard Text

Large Text

Title

Standard Text

Large Text

Group Label

TopCoat uses Source Sans Pro, Adobe’s first open source type family; the fonts are included in this style guide in /src/fonts. Right now only Regular and Semibold are being used on the controls, 12px Regular on Standard controls and 14px Semibold on Large controls.

If you're going to use text shadow or highlight on text that don't have a clickable bounding box make sure that:

Colors

Surface Palette
Color Name Hex RGB Note
Slate Gray (gradient start) #494D4E 73,77,78 Gradient background for global navigation or driver e.g. App Bar, Primary Side Bar, Chrome Extension
Slate Gray (gradient end) #3B3F41 59,63,65 (See above.)
White #FFFFFF 255,255,255 Background color for Content, Settings, Windows, Dialogs
Nested-White #F8F8F8 248,248,248 Background color for nested area of Content, Settings
Light Gray #DFE2E2 222,226,225 Background color for HUD/Pop-over, Secondary Side Bar
Nested Light Gray #D4D7D7 222,226,225 Background color for nested or sunken area of HUD/Pop-over, Secondary Side Bar

Icons

Icons are used to:

Visual Hierarchy

Visual hierarchy is used to indicate what is important. Primary objects or actions have the highest contrast to their surroundings.

Example: TopCoat Button Visual Hierarchy
  1. Call-to-Action
  2. Icon Label Button
  3. Icon Button
  4. Button
  5. Icon Label Button - Quiet
  6. Icon Button - Quiet
  7. Button - Quiet

Spacing

Example: Spacing in HUD
  1. Parent container padding: 15px
  2. Section Spacing: 10px
  3. Spacing within Sections: 5px

Words

For Headings, Component Labels and Menu Items, capitalize all major words (nouns, verbs, adjectives, adverbs and pronouns) including the second part of hyphenated major words (e.g. Snuggle-Cake, not Snuggle-cake).

OS Wrapper vs. Browser

When TopCoat is being used in the context of an OS app, it needs to be a good OS citizen. If it reside within a browser then it should behave more like a web page.

  OS Wrapper Browser
Cursor Hovering Clickable Component Default arrow cursor (cursor: default;) Pointer cursor (cursor: pointer;)
Hover State Not Required unless hit area isn't clear Recommended especially if the hit area isn't clear

Button

Just your average buttons.

Icon Button

Icon Button Disabled Icon Button

Quiet Icon Button Disabled Quiet Icon Button

Large Icon Button Large Disabled Icon Button

Large Quiet Icon Button Large Disabled Quiet Icon Button

Icon Button Disabled Icon Button

Quiet Icon Button Disabled Quiet Icon Button

Large Icon Button Large Disabled Icon Button

Large Quiet Icon Button Large Disabled Quiet Icon Button

Icon buttons save space, use them when visible labels aren't really required. Include a text label within the icon tag to identify the button for assistive technology.

Icon Label Button

Icon Label Button Disabled Icon Label Button

Quiet Icon Label Button Disabled Quiet Icon Label Button

Large Icon Label Button Disabled Large Icon Label Button

Large Quiet Icon Label Button Disabled Large Quiet Icon Label Button

Icon Label Button Disabled Icon Label Button

Quiet Icon Label Button Disabled Quiet Icon Label Button

Large Icon Label Button Disabled Large Icon Label Button

Large Quiet Icon Label Button Disabled Large Quiet Icon Label Button

Use icon label buttons to call out main actions.

Call-to-Action-Button

Button Disabled Button

Large Button Large Disabled Button

Button Disabled Button

Large Button Large Disabled Button

The primary or suggested action in the workflow, there's usually only one of these on a screen.

Soon

Drop-Down Drop-Down
Drop-Down Drop-Down
Drop-Down Drop-Down
Drop-Down Drop-Down

Split-Action

Split-Action Select an Action Split-Action Select an Action
Split-Action Select an Action Split-Action Select an Action
Split-Action Select an Action Split-Action Select an Action
Split-Action Select an Action Split-Action Select an Action
On White On Light Gray On Slate Gray

Standard Link

Large Link

Standard Link

Large Link

Standard Link

Large Link

Generally used for inline actions in Applications.

Button Bar

Button 1 Button 2 Button 3 Button 1 Button 2 Button 3

Button 1 Button 2 Button 3 Button 1 Button 2 Button 3

Button 1 Button 2 Button 3 Button 1 Button 2 Button 3

Button 1 Button 2 Button 3 Button 1 Button 2 Button 3

Slide Switch

Use this as the primary on/off or binary switch.

Toggle Buttons

Soon Soon

Tabs

Soon Soon

Tabs allow multiple documents or screens to be contained within an area and tabs are used to navigate between them.

Disclosure Toggle

Soon Soon

Usability can be improved by only presenting the minimum data required to perform the task. We can hide additional data (advanced or extra features) by default and use the disclosure toggle to reveal them when they are needed.

Text Field

A text field is used to input a variable or string.

Combo Box

Soon Soon

Select

Swatch

Soon Soon

Checkbox

Radio Button

Soon Soon

Approximate Slider

Allows the user to roughly adjust values in a finite range.

Step / Precision Slider

Soon Soon

Tags

Soon Soon

Used to map content to multiple nonhierarchical categories.

Spinner

Indicator Bar

Soon Soon

Do a Stress CSS

Want to submit results?

1. Run stress CSS

2. Close the results window

3. Paste in the following bash command to determine your topcoat version

4. Paste the result in the textarea

The submit buttons are at the bottom