diff --git a/exampleSite/content/docs/advanced-customisation.md b/exampleSite/content/docs/advanced-customisation.md
index 568a5b6e..b8d52423 100644
--- a/exampleSite/content/docs/advanced-customisation.md
+++ b/exampleSite/content/docs/advanced-customisation.md
@@ -37,6 +37,16 @@ In addition to the default schemes, you can also create your own and re-style th
 
 Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour.
 
+Due to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to [conform to a particular format](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) by providing the red, green and blue colour values.
+
+```css
+:root {
+  --color-primary-500: 139, 92, 246;
+}
+```
+
+This example defines a CSS variable for the `primary-500` colour with a red value of `139`, green value of `92` and blue value of `246`.
+
 Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official [Tailwind colour palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
 
 ## Overriding the stylesheet
@@ -60,7 +70,7 @@ html {
 
 Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than `12pt`. Similarly, to decrease the font sizes, make the value less than `12pt`.
 
-## Building the Tailwind CSS from source
+## Building the theme CSS from source
 
 If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.
 
diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index 1a32827c..b06c9dae 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -107,12 +107,18 @@ The `figure` shortcode accepts five parameters:
 |Parameter|Description|
 |---|---|
 |`src`|**Required.** The filename of the image. This image must be a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page.|
-|`alt`|The alternate text for the image.|
-|`caption`|The image caption to be displayed below the image.|
+|`alt`|[Alternative text description](https://moz.com/learn/seo/alt-text) for the image.|
+|`caption`|Markdown for the image caption which will be displayed below the image.|
 |`class`|Additional CSS classes to add to the image.|
- `href`|The URL that the image should be linked to.|
+ `href`|URL that the image should be linked to.|
 <!-- prettier-ignore-end -->
 
+Congo also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
+
+```md
+![Alt text](image.jpg "Image caption")
+```
+
 **Example:**
 
 ```md
@@ -121,6 +127,10 @@ The `figure` shortcode accepts five parameters:
     alt="Abstract purple artwork"
     caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
     */>}}
+
+<!-- OR -->
+
+![Abstract purple artwork](abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)")
 ```
 
 {{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}