From e5e5c3889145fecd1a970789ec608301ee0f779c Mon Sep 17 00:00:00 2001 From: "JESSICA C. TREMBLAY" Date: Tue, 23 Jun 2015 16:10:49 -0500 Subject: [PATCH 1/2] :art: Update color page to reflect new research --- .../02-guidelines/01-style/color/index.md | 295 +++++++++++++++--- language/images/color/palette_grays.svg | 1 + language/images/color/palette_graysmixed.svg | 1 + language/images/color/strip_blue.svg | 1 + language/images/color/strip_green.svg | 1 + language/images/color/strip_orange.svg | 1 + language/images/color/strip_teal.svg | 1 + language/images/color/strip_yellow.svg | 1 + language/images/color/wdg_example1.svg | 1 + language/images/color/wdg_example2.svg | 1 + library/sass/components/_color.scss | 10 +- 11 files changed, 263 insertions(+), 51 deletions(-) create mode 100644 language/images/color/palette_grays.svg create mode 100644 language/images/color/palette_graysmixed.svg create mode 100644 language/images/color/strip_blue.svg create mode 100644 language/images/color/strip_green.svg create mode 100644 language/images/color/strip_orange.svg create mode 100644 language/images/color/strip_teal.svg create mode 100644 language/images/color/strip_yellow.svg create mode 100644 language/images/color/wdg_example1.svg create mode 100644 language/images/color/wdg_example2.svg diff --git a/language/02-guidelines/01-style/color/index.md b/language/02-guidelines/01-style/color/index.md index 7bd9cdae..8b3ca11e 100644 --- a/language/02-guidelines/01-style/color/index.md +++ b/language/02-guidelines/01-style/color/index.md @@ -8,25 +8,11 @@ resources: links: - name: "IBM Color Guidelines" source: http://www.ibm.com/design/language/framework/visual/color.shtml + - name: "IBM Design Language Swatch Book" + source: http://www.ibm.com/design/language/resources/swatch-book.shtml + - name: "Official Sass Color Palettes" + source: https://github.com/IBM-Design/colors variables: - example: - paletteApplication: - light: - title: "Example: Light Palette" - visualDisplay: /images/color/light-palette.svg - description: > - Primary: Blue 60, Secondary: Orange 50, Accent: Teal 40 - - - Consider users who are sensitive to brightness and high contrast colors by using a neutral value as a background color instead of pure white. - dark: - title: "Example: Dark Palette" - visualDisplay: /images/color/dark-palette.svg - description: > - Primary: Blue 30, Secondary: Orange 30, Accent: Teal 30 - - - Consider users who are sensitive to brightness and high contrast colors by using a gray value as a background color instead of pure black. primaryColors: instructions: "Choose a primary and secondary color." colors: @@ -35,72 +21,289 @@ variables: adjectives: - Trustworthy - Systematic - - palette: Orange - tone: 50 - adjectives: - - Innovative - - Utilitarian - palette: Teal tone: 60 adjectives: - Aware - Approachable - accentColors: - instructions: "Choose an accent color. Add hues as necessary." + blue: + instructions: "Blue" colors: + - palette: Blue + tone: 10 + - palette: Blue + tone: 20 + - palette: Blue + tone: 30 - palette: Blue tone: 40 - - palette: Orange + - palette: Blue + tone: 50 + - palette: Blue + tone: 60 + - palette: Blue + tone: 70 + - palette: Blue + tone: 80 + - palette: Blue + tone: 90 + - palette: Blue + tone: 100 + teal: + instructions: "Teal" + colors: + - palette: Teal + tone: 10 + - palette: Teal + tone: 20 + - palette: Teal tone: 30 - palette: Teal tone: 40 + - palette: Teal + tone: 50 + - palette: Teal + tone: 60 + - palette: Teal + tone: 70 + - palette: Teal + tone: 80 + - palette: Teal + tone: 90 + - palette: Teal + tone: 100 + orange: + instructions: "Orange" + colors: + - palette: Orange + tone: 10 + - palette: Orange + tone: 20 + - palette: Orange + tone: 30 + - palette: Orange + tone: 40 + - palette: Orange + tone: 50 + - palette: Orange + tone: 60 + - palette: Orange + tone: 70 + - palette: Orange + tone: 80 + - palette: Orange + tone: 90 + - palette: Orange + tone: 100 + yellow: + instructions: "Yellow" + colors: + - palette: Yellow + tone: 10 + - palette: Yellow + tone: 20 - palette: Yellow tone: 30 - supportingGrays: - instructions: "Choose supporting grays and neutrals." + - palette: Yellow + tone: 40 + - palette: Yellow + tone: 50 + - palette: Yellow + tone: 60 + - palette: Yellow + tone: 70 + - palette: Yellow + tone: 80 + - palette: Yellow + tone: 90 + - palette: Yellow + tone: 100 + green: + instructions: "Green" colors: - - palette: Gray + - palette: Green + tone: 10 + - palette: Green + tone: 20 + - palette: Green + tone: 30 + - palette: Green + tone: 40 + - palette: Green + tone: 50 + - palette: Green + tone: 60 + - palette: Green + tone: 70 + - palette: Green + tone: 80 + - palette: Green tone: 90 + - palette: Green + tone: 100 + grays: + instructions: "Grays" + colors: - palette: Gray - tone: 80 + tone: 10 - palette: Gray - tone: 60 + tone: 20 + - palette: Gray + tone: 30 + - palette: Gray + tone: 40 - palette: Gray tone: 50 - palette: Gray - tone: 30 + tone: 60 - palette: Gray + tone: 70 + - palette: Gray + tone: 80 + - palette: Gray + tone: 90 + - palette: Gray + tone: 100 + coolGrays: + instructions: "Cool Grays" + colors: + - palette: Cool-Gray tone: 10 - - palette: Neutral-White - tone: 40 - - palette: Neutral-White + - palette: Cool-Gray tone: 20 - - palette: Neutral-White + - palette: Cool-Gray + tone: 30 + - palette: Cool-Gray + tone: 40 + - palette: Cool-Gray + tone: 50 + - palette: Cool-Gray + tone: 60 + - palette: Cool-Gray + tone: 70 + - palette: Cool-Gray + tone: 80 + - palette: Cool-Gray + tone: 90 + - palette: Cool-Gray + tone: 100 + warmGrays: + instructions: "Warm Grays" + colors: + - palette: Warm-Gray tone: 10 + - palette: Warm-Gray + tone: 20 + - palette: Warm-Gray + tone: 30 + - palette: Warm-Gray + tone: 40 + - palette: Warm-Gray + tone: 50 + - palette: Warm-Gray + tone: 60 + - palette: Warm-Gray + tone: 70 + - palette: Warm-Gray + tone: 80 + - palette: Warm-Gray + tone: 90 + - palette: Warm-Gray + tone: 100 + examples: + grayExamples: + neutralYes: + title: "Correct combination" + visualDisplay: /images/color/palette_grays.svg + sentiment: positive + neutralNo: + title: "Incorrect Combination" + visualDisplay: /images/color/palette_graysmixed.svg + sentiment: negative + example: + watsonColors: + blue: + title: "Blue" + visualDisplay: /images/color/strip_blue.svg + red: + title: "Teal" + visualDisplay: /images/color/strip_teal.svg + orange: + title: "Orange" + visualDisplay: /images/color/strip_orange.svg + yellow: + title: "Yellow" + visualDisplay: /images/color/strip_yellow.svg + green: + title: "Green" + visualDisplay: /images/color/strip_green.svg + lightExample: + visualDisplay: /images/color/wdg_example1.svg + title: "Example: Light Palette" + description: "Blue is used as a primary color, accented with green as a secondary color. Various tints and shades of those two colors are used to create contrast and add visual interest, while maintaining overall consistency." + darkExample: + visualDisplay: /images/color/wdg_example2.svg + title: "Example: Dark Palette" + description: "Blue is used as a primary color, accented with orange as a secondary color. When using a dark color palette, we recommend steering clear of pure black as some users are sensitive to high contrast colors." --- Color is a crucial component of visual vernacular, helping to unify the look and feel of all communications. The [IBM Design Language](http://www.ibm.com/design/language/framework/visual/color.shtml) comprises a wide spectrum of colors; IBM Watson relies on a defined subset of those colors to establish its unique presence while respecting the broader IBM Design guidelines. -## Colors for Watson +## Creating a Color Palette + +It is recommended to choose no more than two or three colors when creating a palette. This allows users to make fast associations with forms and elements and also makes your product more useful. Please refer to the color palette section of the [IBM Design Language](http://www.ibm.com/design/language/framework/visual/color.shtml) for more detailed information on color palettes. + +### Choosing a Primary Color -The colors chosen for IBM Watson are flexible and distinguish Watson as a brand across all user experiences. The colors were chosen based on color psychology to support the Watson brand attributes, reinforce Watson's personality, and set the tone of each specific product. +The [colors chosen for IBM Watson](#color-swatches) are flexible and distinguish Watson as a brand across all user experiences. The colors were chosen based on color psychology to support the Watson brand attributes, reinforce Watson's personality, and set the tone of each specific product. We recommend picking one primary color from the two listed below then choosing secondary colors and complementary greytones and neutrals. {{ _color.adjectiveSwatches(primaryColors) }} -## Choosing a Color Palette +### Choosing a Secondary Color -Choose a primary color, a secondary color, and an accent color. Additional tints and shades of the chosen palette can help to unify the design. These values can add variety to a palette without additional colors. Refer to the IBM Design Language for a wider variety of colors, values, and neutrals. When choosing a background color for light or dark palettes, IBM Watson recommends using Neutral 1 and Gray 90, as opposed to pure white and black, as some users are sensitive to brightness and high contrast colors. +Choose one or two different secondary colors from the full recommended Watson color palette displayed below. Use the various tints and shades of those colors as needed. As you combine colors, be sure to consider accessibility requirements. Use the [color swatches](#color-swatches) to see the specific color names and values. -{{ _color.groupSwatches(primaryColors) }} +{{ _example.compare(example.watsonColors) }} -{{ _color.groupSwatches(accentColors) }} +### Choosing Supporting Grays -{{ _color.groupSwatches(supportingGrays) }} +When selecting a supporting gray palette to complement your colors, it is recommended to stay within the same tone. Warm grays should remain with warm grays and not be mixed with the cool and normal hues. + +{{ _example.compare(examples.grayExamples) }} + +### Choosing Colors Outside the Recommended Watson Palette + +IBM Watson recommends all Watson branded products remain within our recommended color palette. However, we understand that different products might need additional colors to evoke a different emotional quality. If additional colors are needed, the full [IBM Color Palette](http://www.ibm.com/design/language/resources/swatch-book.shtml) is at your fingertips. ## Applying a Color Palette -Color is a powerful communication tool that helps determine hierarchy on a page. Use ample white space and neutrals to create balance and to direct users' attention. +Color is a powerful component of design that helps establish hierarchy within a UI. The examples below display how the Watson color palette can effectively be applied to an interface. In these examples, two colors from the recommended palette are used to highlight key UI elements. Ample white space and neutrals create balance and direct users’ attention. Most importantly, color is incorporated as one aspect of the UI design; it is supported by other fundamental design choices like composition and typography. + +{{ _example.large(example.lightExample) }} + +{{ _example.large(example.darkExample) }} + +## Alert, Remind, and Notify Colors + +The colors chosen for notifications should correspond with the severity of the message. Chosen colors should aim to motivate the user, rather than threatening or intimidating him or her. The [IBM Design Language](http://www.ibm.com/design/language) also recommends the combination of both iconography and color to accurately assist the user. Be sure to choose tints and shades based on your UI and accessibility requirements. + +## Color Swatches + +Below is a collection of swatches from the recommended Watson Palette. + +{{ _color.groupSwatches(blue) }} + +{{ _color.groupSwatches(teal) }} + +{{ _color.groupSwatches(orange) }} + +{{ _color.groupSwatches(yellow) }} + +{{ _color.groupSwatches(green) }} + +{{ _color.groupSwatches(grays) }} + +{{ _color.groupSwatches(coolGrays) }} -{{ _example.large(example.paletteApplication.light) }} +{{ _color.groupSwatches(warmGrays) }} -{{ _example.large(example.paletteApplication.dark) }} diff --git a/language/images/color/palette_grays.svg b/language/images/color/palette_grays.svg new file mode 100644 index 00000000..898f04fd --- /dev/null +++ b/language/images/color/palette_grays.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/color/palette_graysmixed.svg b/language/images/color/palette_graysmixed.svg new file mode 100644 index 00000000..c46e5644 --- /dev/null +++ b/language/images/color/palette_graysmixed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/color/strip_blue.svg b/language/images/color/strip_blue.svg new file mode 100644 index 00000000..ee6a620a --- /dev/null +++ b/language/images/color/strip_blue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/color/strip_green.svg b/language/images/color/strip_green.svg new file mode 100644 index 00000000..fb00fff1 --- /dev/null +++ b/language/images/color/strip_green.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/color/strip_orange.svg b/language/images/color/strip_orange.svg new file mode 100644 index 00000000..a362d26c --- /dev/null +++ b/language/images/color/strip_orange.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/color/strip_teal.svg b/language/images/color/strip_teal.svg new file mode 100644 index 00000000..069e0cc1 --- /dev/null +++ b/language/images/color/strip_teal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/color/strip_yellow.svg b/language/images/color/strip_yellow.svg new file mode 100644 index 00000000..4a79f1c1 --- /dev/null +++ b/language/images/color/strip_yellow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/color/wdg_example1.svg b/language/images/color/wdg_example1.svg new file mode 100644 index 00000000..e7401b22 --- /dev/null +++ b/language/images/color/wdg_example1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/language/images/color/wdg_example2.svg b/language/images/color/wdg_example2.svg new file mode 100644 index 00000000..c38d7b31 --- /dev/null +++ b/language/images/color/wdg_example2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/library/sass/components/_color.scss b/library/sass/components/_color.scss index 256b062a..f28942a5 100644 --- a/library/sass/components/_color.scss +++ b/library/sass/components/_color.scss @@ -59,9 +59,9 @@ } [library-class='color-swatch'] { - padding: setting-get('rhythm'); - - width: 100%; + padding: setting-get('rhythm')/2; + font-size: ms(-2); + width: 50%; @include breakpoint(449px) { width: 50%; @@ -70,10 +70,10 @@ width: 100%; } @include breakpoint(596px) { - width: 50%; + width: 100% / 3 * 1; } @include breakpoint(899px) { - width: 100 / 3 * 1%; + width: 25%; } float: left; From 3c9c1e0eb86845147c2110c6768a4039f41021fe Mon Sep 17 00:00:00 2001 From: "JESSICA C. TREMBLAY" Date: Tue, 23 Jun 2015 17:25:38 -0500 Subject: [PATCH 2/2] Fixed swatch css --- library/sass/components/_color.scss | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/library/sass/components/_color.scss b/library/sass/components/_color.scss index f28942a5..6b55cb27 100644 --- a/library/sass/components/_color.scss +++ b/library/sass/components/_color.scss @@ -59,21 +59,18 @@ } [library-class='color-swatch'] { - padding: setting-get('rhythm')/2; - font-size: ms(-2); + padding: setting-get('rhythm') / 4; + font-size: ms(-1); width: 50%; @include breakpoint(449px) { - width: 50%; - } - @include breakpoint(557px) { - width: 100%; + padding: setting-get('rhythm') / 2; } - @include breakpoint(596px) { - width: 100% / 3 * 1; + @include breakpoint(520px) { + width: 50%; } - @include breakpoint(899px) { - width: 25%; + @include breakpoint(700px) { + width: 100 / 3 * 1%; } float: left;