Document where colours are used

storybook/src/foundation/design-tokens/colour.docs.mdx

@@ -8,8 +8,9 @@ import { ColorPalette } from "../../docs/components/ColorPalette";
 
 # Colour
 
-Our 9 colours have 3 shades each.
-Neutrals come in 4 shades, plus black and white.
+Our colour palette is vibrant and crisp.
+The main colours are red, blue, black, and white.
+They are complemented by a range of accent colors and shades of gray.
 
 <ColorPalette>
   <ColorPalette.Swatch color={tokens.ams.brand.color.red} name="red" />
@@ -23,3 +24,40 @@ Neutrals come in 4 shades, plus black and white.
   <ColorPalette.Swatch color={tokens.ams.brand.color.purple} name="purple" />
   <ColorPalette.Swatch color={tokens.ams.brand.color.neutral} name="neutral" />
 </ColorPalette>
+
+## Application
+
+### Red
+
+Red is obviously prominent in our logo.
+The only other usage for it is to indicate errors.
+
+### Blue
+
+Blue indicates interactivity.
+Literally all buttons and links are blue; and dark blue on hover.
+Only if they are on a coloured background do they become black or white.
+Radio, Checkbox and Switch are blue as well.
+Our Page Footer has a blue background.
+
+### Black
+
+Almost all text is black, as are borders of inputs.
+
+### White
+
+Our pages have a white background, as do inputs.
+Text and links on a dark background are white instead of black and blue.
+
+### Neutral
+
+We use shades of gray for borders, backgrounds and labels of disabled controls.
+Secondary text is dark gray.
+
+### Azure, Lime, Green, Yellow, Orange, Magenta, Purple
+
+These colours are supplemental.
+Spotlight and Breakout use them to create prominent sections.
+Avatar and Badge can use them for a background.
+An Alert is blue, orange, red, or green.
+Highlighted text is yellow.