Create a better component that shows all of the shades and tints for a colour

Currently on the "Colours" page in the documentation, we have a single "Colour Pallet" display for each different shade of grey (grey-100 through grey-900). This makes the page a bit too bulky and hard to use, especially when we start adding new secondary colours (see #305)

We need to add a component that can display a full range of shades/tints of a colour while still showing the accessibility grading of the different text colours and sizes with that as a background 👍

This is likely to be something that will need to be added upstream in [Field Guide](https://github.com/empress/field-guide)

Start with the Colours page and its existing “Colour Pallet” displays to understand the current presentation. Review issue #305 and the upstream Field Guide project to determine where the component belongs. Done means a compact full range of shades and tints is displayed while retaining accessibility grading for the different text colours and sizes against each background.

Written by the indexing model from the issue text.