Begin of the insertion### To do

* [x] Standardise and define how numbered labels should look like
* [x] Standardise and define how screenshot areas should look like
* [x] Prepare a Figma prototype with style guide and an example
* [ ] Update documentation style guide

### Adding numbered labels

Numbered labels make it easier to refer to a certain part ofEnd of the insertion Begin of the deletion Green fromEnd of the deletion the Begin of the insertionscreenshot in the docs.

**Numbered labels (dark background):**

End of the insertion Begin of the deletion website:
End of the deletion <img class="op-uc-image op-uc-image_inline" Begin of the insertionsrc="/api/v3/attachments/42929/content">End of the insertion Begin of the deletion src="/api/v3/attachments/42306/content">End of the deletion

Begin of the insertion**Numbered labels (light background):**

**<imgEnd of the insertion Begin of the deletion VS 
Green from the application:
<imgEnd of the deletion class="op-uc-image op-uc-image_inline" Begin of the insertionsrc="/api/v3/attachments/42930/content">**End of the insertion Begin of the deletion src="/api/v3/attachments/42307/content">End of the deletion

Begin of the insertion### Defining areas

You canEnd of the insertion Begin of the deletion Also,End of the deletion define Begin of the insertionzones to numbered labels if you want to document a collectionEnd of the insertion Begin of the deletion width and styleEnd of the deletion of Begin of the insertionfeatures.

**Area outline (dark background):**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/42926/content">

**Area outline (light background):**

**<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/42927/content">**

### Example

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/42931/content">

### **Figma reference**

You can also refer to these guidelinesEnd of the insertion Begin of the deletion the highlightsEnd of the deletion and Begin of the insertionexample on Figma: https://www.figma.com/file/zgfxZFd55uimJFQYX7DmRb/Documentation-Screenshots?node-id=301%3A1820&amp;t=3Rzzv2qMpRpgd194-1End of the insertion Begin of the deletion numbers.End of the deletion