Update color page to reflect new research

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) }}

library/sass/components/_color.scss

@@ -59,20 +59,17 @@
 }
 
 [library-class='color-swatch'] {
-  padding: setting-get('rhythm');
-
-  width: 100%;
+  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) {
+  @include breakpoint(520px) {
     width: 50%;
   }
-  @include breakpoint(899px) {
+  @include breakpoint(700px) {
     width: 100 / 3 * 1%;
   }