Use font and color of Wagtail brand

[vsalvino]

Related: #172

This change aligns with system font and purple color changes in Wagtail 3.0:

• Replace Source Sans with system font
• Update purple color to match Wagtail (teal already matches).
• Remove outdated screenshot. Replace with a description of the theme.

Variables copied from: https://github.com/wagtail/wagtail/blob/c111deef03c02c24941e06d44274a6ddf83556e4/client/src/tokens/typography.js

For consideration: Wagtail does provide a color palette of sorts... should our warning/info/etc. colors (mainly used in admonitions) also be updated to match? It is a minor and less visible detail which can probably warrant a separate pull request. I remember @Scotchester and I making effort with the current colors to meet WCAG contrast standards. See: https://docs.wagtail.org/en/latest/advanced_topics/customisation/admin_templates.html#custom-user-interface-colours

[tbrlpld]

I like this. I was playing with the idea to adopt as much of the Wagtail style guide as possible in the docs.

Unfortunately I have not gotten around to it yet. So, thanks @vsalvino for starting this!

[tbrlpld]

I am not able to test at the moment, but the changes look good to me.

[lb-]

Works great locally - thanks!

[lb-]

@vsalvino please can you raise a new issue for the review of the colours used - as noted above.