diff --git a/lib/utilities/README.md b/lib/utilities/README.md
index baace00055..3eb66118ac 100755
--- a/lib/utilities/README.md
+++ b/lib/utilities/README.md
@@ -201,282 +201,448 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grays
-
-
-
-
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
Surface
+
-
-
-
-
-
-
-
+
+
+
-
-
+
+
+
+
+
+
+Special
+
+
```
-## Background
+### Text opacity
```html:example: blocks
-bg-primary
-bg-secondary
-bg-success
-bg-warning
-bg-danger
-bg-important
-bg-special
-
-bg-white
-bg-lighter
-bg-light
-bg-gray
-bg-dark
-bg-darker
-bg-black
-
-bg-canvas
-bg-surface
-bg-inverse
-bg-current
-bg-inherit
-bg-transparent
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Backgrounds
+
+### Background Colors
+
+```html:example: blocks with-inverse-text
+Accent
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Grays
+
+
+
+
+
+
+
+
+
+
+
+
+Surface
+
+
+
+
+
+
+
+
+
+
+
+Special
+
+
+
+
```
-## Background opacity
+### Background opacity
```html:example: blocks
-bg-opacity-0
-bg-opacity-10
-bg-opacity-20
-bg-opacity-30
-bg-opacity-40
-bg-opacity-50
-bg-opacity-60
-bg-opacity-70
-bg-opacity-80
-bg-opacity-90
-bg-opacity-95
-bg-opacity-100
+
+
+
+
+
+
+
+
+
+
+
+
+
```
-## Ring
+## Borders
-### Ring color
+### Ring
+
+#### Default Ring
```html:example: blocks
-ring-light
-ring
-ring-dark
-ring-darker
-ring-darkest
-ring-primary
-ring-secondary
-ring-success
-ring-warning
-ring-danger
-ring-important
-ring-special
-ring-canvas
-ring-inverse
-ring-inherit
-ring-current
-ring-black
-ring-white
+
```
-### Ring width
+#### Ring color
```html:example: blocks
-ring-0
-ring
-ring-2
-ring-3
-ring-4
-ring-8
+Ring as Border
+
+
+
+Ring with alpha
+
+
+
+
+
+Ring with Accent color
+
+
+
+
+
+
+
+Ring with Surface color
+
+
+
+
+
+Ring with Special color
+
+
+
```
-### Ring inset
+#### Ring width
```html:example: blocks
-ring-0
-ring
-ring-2
-ring-3
-ring-4
-ring-8
+
+
+
+
+
+
```
-### Ring opacity
+#### Ring inset
```html:example: blocks
-ring-opacity-0
-ring-opacity-5
-ring-opacity-10
-ring-opacity-20
-ring-opacity-30
-ring-opacity-40
-ring-opacity-50
-ring-opacity-60
-ring-opacity-70
-ring-opacity-80
-ring-opacity-90
-ring-opacity-95
-ring-opacity-100
+
+
+
+
+
```
-## Border
+#### Ring opacity
-### Border Color
+```html:example: blocks
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+#### Ring Offset
```html:example: blocks
-border-primary
-border-secondary
-border-success
-border-warning
-border-danger
-border-important
-border-special
-
-border-white
-border-lighter
-border-light
-border-gray
-border-dark
-border-darker
-border-black
-
-border-canvas
-border-surface
-border-inverse
-
-border-current
-border-inherit
-border-transparent
+
+
+
+
+
```
-### Border Size
+### Border
+
+#### Border Width
```html:example: blocks
-border-0
-border
-border-2
-border-4
+All sides
+
+
+
+
+Single side
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
-### Border Radius
+#### Border Color
```html:example: blocks
-rounded-none
-rounded-sm
-rounded
-rounded-md
-rounded-lg
-rounded-xl
-rounded-full
+Border defaults
+
+
+
+Accent
+
+
+
+
+
+
+
+Grays
+
+
+
+
+
+
+
+
+
+
+
+
+Surface
+
+
+
+
+
+
+
+
+
+
+
+
+
+Special
+
+
+
```
### Border opacity
```html:example: blocks
-border-opacity-0
-border-opacity-5
-border-opacity-10
-border-opacity-20
-border-opacity-30
-border-opacity-40
-border-opacity-50
-border-opacity-60
-border-opacity-70
-border-opacity-80
-border-opacity-90
-border-opacity-95
-border-opacity-100
+
+
+
+
+
+
+
+
+
+
+
+
+
```
-## Box shadow
-
-### Box Shadow Size
+### Radius
```html:example: blocks
-shadow-inner
-shadow-none
-shadow-sm
-shadow
-shadow-md
-shadow-lg
-shadow-xl
-shadow-2xl
+All Sides
+
+
+
+
+
+
+
+
+
+Remove from specific sides
+
+
+
+
+
+
+
+
```
-### Box Shadow Color
+## Effects
+
+### Box shadow
+
+#### Box Shadow Size
```html:example: blocks
-shadow-primary
-shadow-secondary
-shadow-success
-shadow-warning
-shadow-danger
-shadow-important
-shadow-special
-
-shadow-white
-shadow-lighter
-shadow-light
-shadow-gray
-shadow-dark
-shadow-darker
-shadow-black
-
-shadow-transparent
-shadow-inherit
-shadow-current
+
+
+
+
+
+
+
+
```
-## Opacity
+#### Box Shadow Colors
```html:example: blocks
-opacity-0
-opacity-5
-opacity-10
-opacity-20
-opacity-30
-opacity-40
-opacity-50
-opacity-60
-opacity-70
-opacity-80
-opacity-90
-opacity-95
-opacity-100
+Accent
+
+
+
+
+
+
+
+Grays
+
+
+
+
+
+
+
+
+
+
+
+
+Grays
+
+
+
+
+
+Special
+
+
+
```
-## Text opacity
+### Opacity
```html:example: blocks
-text-opacity-0
-text-opacity-10
-text-opacity-20
-text-opacity-30
-text-opacity-40
-text-opacity-50
-text-opacity-60
-text-opacity-70
-text-opacity-80
-text-opacity-90
-text-opacity-95
-text-opacity-100
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```