Updates for accessible color palette (#12)

- updated the figures used in the main docs with the accessible color palette (see dask/community#135 & dask/dask#8401) - removed now out of date figures - included updated brand guidelines, as adapted from this slide deck [Dask-Brand Guidelines-R2.pdf](https://github.com/dask/marketing/files/7714232/Dask-Brand.Guidelines-R2.pdf)
dask · Dec 22, 2021 · a4764a7 · a4764a7
1 parent 372a3ce
commit a4764a7
Show file tree

Hide file tree

Showing 39 changed files with 16,787 additions and 1,865 deletions.
diff --git a/source/colors.rst b/source/colors.rst
@@ -1,62 +1,64 @@
 Style and Colors
 ================
 
-Logos for Dask are available at :doc:`logos`.
-
-For colors we typically choose from somewhere within the palette defined by the
-Dask logo itself, which has an orange gradient.  In particular, we commonly
-choose the following colors: #FDA061, #ECB172, and #D67548.
-
-.. image:: images/dask-colors.svg
-   :alt: Dask colors #FDA061 #ECB172 #D67548
-
-For more involved diagrams we often choose from both primary colors and secondary
-colors:
-
-.. image:: images/dask-branding-guidelines.png
-   :alt: Dask branding guidelines
+These are guidelines for using the Dask logo with community-approved color palettes
+and typography.
+
+Logos
+-----
+Logos for Dask are available at :doc:`logos`. The Dask logo is made up of two components:
+The Logo Mark and the Word Mark, which together make up the Horizontal Logo. Using the Logo
+Mark alone should be reserved for instances where the Horizontal Logo is already present,
+or as an avatar when “Dask” appears alongside the Logo Mark in plain text.
+
+.. figure:: images/logo-examples.png
+   :alt: Horizontal Logo (top) and Logo Mark (bottom)
+
+Additional logo considerations:
+
+.. figure:: images/logo-clearspace.png
+   :alt: Horizontal Logo with x-height marked to the lower-left, upper-right, and center-right.
+
+   In layout, make sure there is enough clearspace on all sides of the logo by using the x-height.
+
+.. figure:: images/logo-size.png
+   :alt: Examples of three resized versions of the Horizontal Logo (left) and Logo Mark (right) in descending size order.
+
+   When resizing the Horizontal Logo or Logo Mark, the minimum widths should be 75 pixels (1-inch)
+   and 20 pixels, respectively, to ensure legibliity.
+
+.. figure:: images/logo-variations.png
+   :alt: Two columns and three rows of variations of the Horizontal Logo.
+
+   There are a number of logo variations to ensure adequate contrast with the background color.
+
+.. figure:: images/incorrect-logo-usage.png
+   :alt: " "
+
+   What **not** to do to the logo: (1) Compress horizontally or vertically, (2) Rotate,
+   (3) Recolor, (4) Disassemble, (5) Add strokes or outlines,
+   (6) Place on an unapproved background color.
 
 Typography
 ----------
+Roboto and Roboto Mono are the primary Dask typefaces. Roboto is best for
+for H-level titles and longform body copy. Roboto Mono should be used when
+displaying syntax/code snippets or as a labeling device for charts, graphics,
+and specialty layout components.
 
-Titles and body text should be regular weight with subheadings in light.
-
-Primary orange colors should only be used on a dark background.
-
-Fonts:
-
-- Roboto (for headings and text)
-- Inconsolata (for code blocks)
-
-Font colors on light background:
-
-- #1D1D1D
-- #4A4A4A
-- #707070
-
-Font colours on dark background:
-
-- #FFFFFF
-- #FDA061
-- #ECB172
-- #D67548
+.. image:: images/typography-examples.png
+   :alt: Copy with examples of when to use Roboto and Roboto Mono typeface variations split into two columns with the font on the left and the context example copy on the right.
 
 Colors
 ------
+For colors, we typically choose from the orange gradient on the Logo Mark
+itself (shown in top right-hand corner of the figure below).
+You can use the following grid to select color for text, graphical elements,
+and general layout. Note that text should meet a "Pass" qualification to meet AA (or AAA) requirements.
 
-Primary colors:
-
-- #FDA061
-- #EECD172
-- #D67548
-- #1D1D1D
-- #FFFFFF
-
-Secondary colors:
+.. figure:: images/dask-color-palette.png
+   :alt: Primary (top) and secondary (bottom) color palettes, each with three rows for the hex codes, text on a light background, and text on a dark background.
 
-- #CFE2F3
-- #EAD1DC
-- #C5C1FF
-- #AFD5AA
-- #F4989C
-- #1B5D83
+   Hex codes for primary palette (left to right): #FDA061, #1D1D1D, #3772FF, #AFCBFF,
+   #E2E4F6, #35644D, #9CAFB7. Hex codes for secondary palette (left ot right): #FDD3A6,
+   #FFF7E7, #FE6939, #0135B4, #E1F4E6, #C3D9E2, #62636C.
diff --git a/source/images/bursty-workloads-dark.png b/source/images/bursty-workloads-dark.png
diff --git a/source/images/bursty-workloads-dark.svg b/source/images/bursty-workloads-dark.svg
diff --git a/source/images/bursty-workloads-light.png b/source/images/bursty-workloads-light.png
diff --git a/source/images/bursty-workloads.svg b/source/images/bursty-workloads.svg
diff --git a/source/images/dask-adaptive-dark.svg b/source/images/dask-adaptive-dark.svg
diff --git a/source/images/dask-adaptive.svg b/source/images/dask-adaptive.svg
diff --git a/source/images/dask-array-dark.png b/source/images/dask-array-dark.png
diff --git a/source/images/dask-array-dark.svg b/source/images/dask-array-dark.svg
diff --git a/source/images/dask-array-light.png b/source/images/dask-array-light.png
diff --git a/source/images/dask-array.svg b/source/images/dask-array.svg
diff --git a/source/images/dask-branding-guidelines.png b/source/images/dask-branding-guidelines.png
diff --git a/source/images/dask-cluster-manager-dark.png b/source/images/dask-cluster-manager-dark.png
diff --git a/source/images/dask-cluster-manager-dark.svg b/source/images/dask-cluster-manager-dark.svg
diff --git a/source/images/dask-cluster-manager-light.png b/source/images/dask-cluster-manager-light.png
diff --git a/source/images/dask-cluster-manager.svg b/source/images/dask-cluster-manager.svg
diff --git a/source/images/dask-color-palette.png b/source/images/dask-color-palette.png
diff --git a/source/images/dask-dataframe-dark.png b/source/images/dask-dataframe-dark.png
diff --git a/source/images/dask-dataframe-dark.svg b/source/images/dask-dataframe-dark.svg
diff --git a/source/images/dask-dataframe-light.png b/source/images/dask-dataframe-light.png
diff --git a/source/images/dask-dataframe.svg b/source/images/dask-dataframe.svg
diff --git a/source/images/dask-overview-dark.png b/source/images/dask-overview-dark.png
diff --git a/source/images/dask-overview-dark.svg b/source/images/dask-overview-dark.svg
diff --git a/source/images/dask-overview-light.png b/source/images/dask-overview-light.png
diff --git a/source/images/dask-overview.svg b/source/images/dask-overview.svg
diff --git a/source/images/distributed-overview-dark.png b/source/images/distributed-overview-dark.png
diff --git a/source/images/distributed-overview-dark.svg b/source/images/distributed-overview-dark.svg
diff --git a/source/images/distributed-overview-light.png b/source/images/distributed-overview-light.png
diff --git a/source/images/distributed-overview.svg b/source/images/distributed-overview.svg
diff --git a/source/images/incorrect-logo-usage.png b/source/images/incorrect-logo-usage.png
diff --git a/source/images/logo-clearspace.png b/source/images/logo-clearspace.png
diff --git a/source/images/logo-examples.png b/source/images/logo-examples.png
diff --git a/source/images/logo-size.png b/source/images/logo-size.png
diff --git a/source/images/logo-variations.png b/source/images/logo-variations.png
diff --git a/source/images/map-reduce-task-scheduling-dark.png b/source/images/map-reduce-task-scheduling-dark.png
diff --git a/source/images/map-reduce-task-scheduling-dark.svg b/source/images/map-reduce-task-scheduling-dark.svg
diff --git a/source/images/map-reduce-task-scheduling-light.png b/source/images/map-reduce-task-scheduling-light.png
diff --git a/source/images/map-reduce-task-scheduling.svg b/source/images/map-reduce-task-scheduling.svg
diff --git a/source/images/typography-examples.png b/source/images/typography-examples.png