On White | On Light Gray | On Slate Gray |
---|---|---|
TitleStandard Text Large Text |
TitleStandard Text Large Text |
TitleStandard 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:
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 are used to:
Visual hierarchy is used to indicate what is important. Primary objects or actions have the highest contrast to their surroundings.
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).
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 |
Quiet Button Disabled Quiet Button |
Quiet Button Disabled Quiet Button |
Just your average buttons.
Icon Button Disabled Icon Button Quiet Icon Button Disabled Quiet Icon Button |
Icon Button Disabled Icon Button Quiet Icon Button 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.
Use icon label buttons to call out main actions.
The primary or suggested action in the workflow, there's usually only one of these on a screen.
Soon |
|
On White | On Light Gray | On Slate Gray |
---|---|---|
Generally used for inline actions in Applications.
|
|
|
|
Use this as the primary on/off or binary switch.
Soon | Soon |
Soon | Soon |
Tabs allow multiple documents or screens to be contained within an area and tabs are used to navigate between them.
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.
|
|
A text field is used to input a variable or string.
Soon | Soon |
|
|
Soon | Soon |
Soon | Soon |
|
|
Allows the user to roughly adjust values in a finite range.
Soon | Soon |
Soon | Soon |
Used to map content to multiple nonhierarchical categories.
|
|
Soon | Soon |
1. Run stress CSS
2. Close the results window
The submit buttons are at the bottom