feat(sb): improve design system

Related to #000

What does this MR do and why?

• adds button documentation
• adds color blocks
• adds custom favicon
• adds table of content
• updates the order of sections
• updates the favicon

Screenshots or screen recordings

How to set up and validate locally (or on alpha)

List all steps to set up and validate the changes on local environment.

---

MR acceptance checklist

To be completed by the chosen reviewer.

Quality -

• For the code that this change impacts, I believe that the automated tests validate functionality that is highly important to users. If the existing automated tests do not cover this functionality, I have added the necessary additional tests or I have added an issue to describe the automation testing gap and linked it to this MR.
• I have made sure that the sonar quality coverage is up to standards.
• I have considered the impact of this change on the front-end, back-end, and database portions of the system where appropriate and applied.
• I have tested this MR in all supported browsers or determined that this testing is not needed.
• I have confirmed that this change is backwards compatible across updates (migrate up needs a migrate down), or I have decided that this does not apply.

Performance, reliability and availability

• I am confident that this MR does not harm performance, or I have asked a reviewer to help assess the performance impact.
• I have considered the scalability risk based on future predicted growth.

Documentation

• The MR is named after the desired squash commit to feed the changelog linked to the current milestone.
• I have added/updated documentation (also updated if the changes feature a deprecation) or I have decided that documentation changes are not needed for this MR.

Security

• I have confirmed that if this MR does not contains any sensitive informations hidden in the changes.

.storybook/public/favicon.svg

+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="144" height="144" rx="10" fill="#E30613" />
+  <path
+    d="M81.2088 32.163C81.1364 32.045 81.0639 31.8984 81.0218 31.7788C79.185 28.1087 76.7754 25.0066 73.8955 22.5531C70.9163 20.1267 67.6809 18.263 64.031 16.9571C60.3844 15.6664 56.6654 15.0496 52.9498 15.0024C49.2308 14.9586 45.6112 15.5029 41.8922 16.6942C38.1732 17.9142 34.9344 19.697 32.0984 22.0594C31.2138 22.7655 30.4066 23.5591 29.6399 24.3831C27.916 22.8463 25.9967 21.4612 23.8347 20.2918C23.7269 20.2413 23.5853 20.1654 23.4623 20.0896C17.8088 17.2452 11.1409 21.4646 11.0145 27.7768L11.001 28.8283C10.9454 32.259 13.1175 35.1826 16.24 36.5929C17.7448 37.2602 18.9749 38.251 19.9169 39.5216C21.2987 41.2336 22.1311 43.2219 22.4968 45.4041L22.6349 99.1166C22.6349 99.2346 22.6113 110.482 22.6113 118.921C22.6113 123.942 26.6522 128 31.6923 128C36.7139 128 40.7699 123.926 40.7699 118.901L40.6284 43.9836C40.6014 39.8653 41.8197 36.7867 44.2985 34.9012C46.7807 33.019 49.6369 31.9894 52.97 32.0164C56.3048 32.0602 59.2858 33.0375 61.6685 35.0899C62.8986 36.0655 63.8608 37.3293 64.4792 38.8509C65.7885 42.0205 68.6498 44.2886 72.0824 44.3324L73.1322 44.3593C79.4445 44.4352 83.878 37.9056 81.2088 32.163Z"
+    fill="white" />
+  <path
+    d="M132 29.5008C132 21.5004 125.503 15 117.5 15C109.503 15 103 21.5004 103 29.5008V44H117.715V43.973C125.628 43.8564 132 37.4321 132 29.5008Z"
+    fill="white" />
+</svg>
\ No newline at end of file