doc: write overview on slab tab in tcm ui

Author: maryiaLichko

doc/tooling/tcm/_images/tcm_ui_slabs.png

@@ -167,7 +167,6 @@ This tab is useful for:
 - Analyzing cache saturation by object size
 - Debugging excessive memory use in real time
 
-
 This visualization is based on the output of:
 
 .. code-block:: lua
@@ -189,16 +188,28 @@ These values are parsed and rendered as visual elements in the UI.
 
 Each block represents a single slab (a fixed-size memory region). The color indicates how full the slab is:
 
-- **Green** — slab is partially filled
+- **Green** — the slab is mostly empty
 - **Red** — slab is full (100% usage)
+- **Gradient colors between green and red** — indicate intermediate fill levels (e.g., 30%, 50%, 75%)
 
-.. image:: _images/tcm_ui_slabs.png
-   :width: 700px
+The color transitions smoothly, providing a quick visual way to understand which slabs are:
+
+- Actively used
+- Partially utilized
+- Potentially underused or contributing to memory fragmentation
 
+In the example screenshot:
 
+- Slab #17 (168 KB) — 75% full (dark red)
+- Slab #18 (320 KB) — 53% full (brownish-red)
+- Slab #16 (40 KB) — only 1% used (bright green)
+- Slab #2 (56 B) — 60% used (intermediate gradient)
 
-If multiple slabs are shown for the same object size, each slab’s fill level is calculated individually and visualized accordingly.
-Each row represents a cache class (object allocation group) for a specific `item_size`.
+Each slab block’s size in the visualization reflects the total memory allocated for its ``item_size`` class --
+the more memory allocated, the larger the visual representation.
+
+.. image:: _images/tcm_ui_slabs.png
+   :width: 700px
 
 The overall fill percentage for a cache class is calculated using: