diff --git a/src/assets/images/blog/custom-properties.png b/src/assets/images/blog/custom-properties.png
index 83b72b9..1ae4896 100644
Binary files a/src/assets/images/blog/custom-properties.png and b/src/assets/images/blog/custom-properties.png differ
diff --git a/src/posts/2023/2023-11-30-tailwind.md b/src/posts/2023/2023-11-30-tailwind.md
index bd5f1db..6e18b0e 100644
--- a/src/posts/2023/2023-11-30-tailwind.md
+++ b/src/posts/2023/2023-11-30-tailwind.md
@@ -12,77 +12,69 @@ I wrote the following explanation quite quickly after hearing several times that
 
 We are using Tailwinds "engine" to generate utility classes on demand, based on our design tokens.
 
-If you have a look at the [tailwind.config.js](https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js), you can see how that is done. For example, we are [deactivating Tailwinds default reset](https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js#L67C1-L69C5).
+If you have a look at the [tailwind.config.js](https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js), you can see how that is done. For example, we are [deactivating Tailwinds default reset](https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js#L72C1-L72C22).
 
 We are hooking into the components layer, to make Tailwind output classes based on our tokens, instead of their default design system.
 
-That is, you are able to use `mt-xs-s` instead of a class like `mt-20` for example. Same goes for colors, depending on the names you defined in your `colors.json`, you get custom classes like `text-primary`. These use the usual Tailwind prefixes.
+That is, you are able to use `mt-xs-s` instead of a class like `mt-20` for example. Same goes for colors, depending on the namesin your `colors.json`, you get custom classes like `text-pink`. These use the usual Tailwind prefixes ([see docs to learn how to generate colors](/get-started/#design-tokens)).
 
-**Example:**
-
-```js
-{
-	"name": "my custom color name",
-	"value": "pink"
-},
-```
-
-You get a custom property mapped to the color name `pink`: `--color-my-custom-color-name: pink` _and_ the classes `bg-my-custom-color-name` as well as `text-my-custom-color-name`.
+You get a custom property mapped to the color name `--color-my-custom-color-name` _and_ the classes `bg-my-custom-color-name` as well as `text-my-custom-color-name`.
 
 Consider that we limit those utilities in the theme section:
 
 ```js
 backgroundColor: ({theme}) => theme('colors'),
 textColor: ({theme}) => theme('colors'),
-margin: ({theme}) => ({
-	auto: 'auto',
-	...theme('spacing')
-}),
+margin: ({theme}) => ({ auto: 'auto', ...theme('spacing')}),
 padding: ({theme}) => theme('spacing')
 ```
 
-If you want to add the generation for border-color classes for example, you'd have to add that right there:
+If you want to add the generation for `border-color` classes for example, you'd have to add that right there:
 
 `borderColor: ({theme}) => theme('colors')`
 
-Also. you _do_ have something like `md:text-right` available because we define the screens on line 26:
+Also. you _do_ have something like `md:text-right` available because we define the screens (`src/_data/designTokens/viewports.json`):
 
 ```js
 screens: {
-      md: '50em',
-      lg: '80em'
-    },`
+  ltsm: {max: `${viewportTokens.sm}px`},
+  sm: `${viewportTokens.sm}px`,
+  md: `${viewportTokens.md}px`,
+  navigation: `${viewportTokens.navigation}px`
+},
 ```
 
-Additionally, you get custom properties based on the naming of your design token files, the prefix is defined in line 77:
+Additionally, you get custom properties based on the naming of your design token files:
 
 ```js
 const groups = [
   {key: 'colors', prefix: 'color'},
+  {key: 'borderRadius', prefix: 'border-radius'},
   {key: 'spacing', prefix: 'space'},
   {key: 'fontSize', prefix: 'size'},
-  {key: 'fontFamily', prefix: 'font'}
+  {key: 'lineHeight', prefix: 'leading'},
+  {key: 'fontFamily', prefix: 'font'},
+  {key: 'fontWeight', prefix: 'font'}
 ];
 ```
 
 In your dev tools you can see all the generated custom properties + your custom ones from `css/global/variables.css`.
 They are generated by default.
 
-{% image "./src/assets/images/blog/custom-properties.png", "Screenshot of the Firefox dev tools, CSS tab, showing the generated custom properties" %}
+![Screenshot of the Firefox dev tools, CSS tab, showing the generated custom properties](/assets/images/blog/custom-properties.png)
 
-You can also create custom utility classes on line 104:
+You can also create custom utility classes:
 
 ```js
 const customUtilities = [
   {key: 'spacing', prefix: 'flow-space', property: '--flow-space'},
-  {key: 'colors', prefix: 'spot-color', property: '--spot-color'}
+  {key: 'spacing', prefix: 'region-space', property: '--region-space'},
+  {key: 'spacing', prefix: 'gutter', property: '--gutter'}
 ];
 ```
 
-For example: `{key: 'spacing', prefix: 'gutter', property: '--gutter'}`
-
 If you install the Tailwind CSS IntelliSense addon, you can actually see the classes available to you, including the color preview.
 
-{% image "./src/assets/images/blog/intellisense.png", "Screenshot in VS Code showing the available flow-space-classes we created, using the Tailwind CSS IntelliSense addon" %}
+![Screenshot in VS Code showing the available flow-space-classes we created, using the Tailwind CSS IntelliSense addon](/assets/images/blog/intellisense.png)
 
 Read some thoughts that lead Andy Bell to come up with that approach: https://andy-bell.co.uk/i-used-tailwind-for-the-u-in-cube-css-and-i-liked-it/