diff --git a/docs/components/data-viz-colours.mdx b/docs/components/data-viz-colours.mdx new file mode 100644 index 0000000..68a1521 --- /dev/null +++ b/docs/components/data-viz-colours.mdx @@ -0,0 +1 @@ +# Data viz colour palette \ No newline at end of file diff --git a/docs/components/data-viz-guidelines.mdx b/docs/components/data-viz-guidelines.mdx new file mode 100644 index 0000000..2b8b815 --- /dev/null +++ b/docs/components/data-viz-guidelines.mdx @@ -0,0 +1,149 @@ +# Colour guidelines + + + If you only need one colour hue, use viz-blue-400. +
+
+ Note that this is not the same as the regular blue you find in the FINN colour palette. + +
+
+ +## Categorical colours + + + These colours work well for categorical data, and are colourblind-safe. +
+
+
    +
  1. viz-indigo-400
    2. +
  2. viz-pink-600
    3. +
  3. viz-teal-400
    4. +
  4. viz-orange-400
    5. +
+
+ viz-indigo-400 can be swapped with viz-blue-400 in cases where comparison is related + to "self" as viz-blue-400 is perceived as a more "important" colour. + + + + Brighter colours can be used as long as the darker colour is used as a border, to create enough contrast against the + background.* +
+
+
    +
  1. + fill: viz-indigo-300, border: viz-indigo-500 +
    2. +
  2. + fill: viz-pink-200, border: viz-pink-500 +
    3. +
  3. + fill: viz-teal-200, border: viz-teal-500 +
    4. +
  4. + fill: viz-orange-200, border: viz-orange-500 +
    5. +
+ + + + Use these colours if you need more than four hues. These colours are not fully colourblind-safe, and should therefore + be used with caution. +
+
+
    +
  1. viz-indigo-400
    2. +
  2. viz-pink-600
    3. +
  3. viz-teal-400
    4. +
  4. viz-orange-400
    5. +
  5. viz-indigo-600
    6. +
  6. viz-pink-400
    7. +
  7. viz-teal-600
    8. +
  8. viz-orange-600
    9. +
+ +
+
+ +## Good vs bad + + +Colours can be used to indicate good and bad numbers. Blue and red is the safest combination: +
    +
  1. viz-blue-400
    2. +
  2. viz-red-500
    3. +
  3. + fill: viz-blue-200, border: viz-blue-500 +
    4. +
  4. + fill: viz-red-200, border: viz-red-600 +
    5. +
+ +
+ +or, with a neutral middle colour, with or without border: + +
    +
  1. viz-blue-400
    2. +
  2. viz-WarmGray-400
    3. +
  3. viz-red-500
    4. +
  4. + fill: viz-blue-200, border: viz-blue-500 +
    5. +
  5. + fill: viz-WarmGray-200, border: viz-WarmGray-600 +
    6. +
  6. + fill: viz-red-200, border: viz-red-600 +
    7. +
+ +
+Teal and red should only be used if the brightness contrast is high: +
    +
  1. viz-teal-400
    2. +
  2. viz-red-600
    3. +
+ +
+Yellow needs an outline in order to have good enough contrast against a white background. +
    +
  1. + fill: viz-Green-200, border: viz-Green-500 +
    2. +
  2. + fill: viz-Yellow-400, border: viz-Yellow-600 +
    3. +
  3. + fill: viz-red-300, border: viz-red-500 +
    4. +
+ +
+
+ +## Reference + + + Use viz-warmGrey-400 if you need to include data that is less important than the primary data, for + example reference data and historical data. + +
+
+ +## Utility colours + + + Utility colours are used for supporting chart elements like labels and grid lines. +
+
+ Utility colours are colours from fabric: + + diff --git a/src/pages/_app.js b/src/pages/_app.js index 46f45b5..468e484 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -39,6 +39,20 @@ export default function App({ Component, pageProps }) { title: 'Page titles', href: '/titles', }, + { + title: 'Data visualization', + open: false, + items: [ +// { +// title: 'Colours', +// href: '/data-viz-colours', +// }, + { + title: 'Colour guidelines', + href: '/data-viz-guidelines', + } + ] + }, ], }, {