The current naming of the colours is not accurate enough to be used in the design system, therefore there is a need to rename the current colours in the &quot;Design&quot; admin page. This always will follow the SPOT colours specified in <mention class="mention" data-id="46832" data-type="work_package" data-text="#46832">#46832</mention>.

Begin of the insertion##End of the insertion **Acceptance criteria**

Rename Begin of the insertionand reorganiseEnd of the insertion the current Begin of the insertioncolourEnd of the insertion strings for advance settings colours in the &quot;Design&quot; admin page Begin of the deletion following:

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);"><strong>Current name</strong></td><td class="op-uc-p op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);"><strong>New name</strong></td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Primary</td><td class="op-uc-p op-uc-table--cell">Main</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Primary (dark)</td><td class="op-uc-p op-uc-table--cell">❌ Removed (will deviate from main)</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Alternative</td><td class="op-uc-p op-uc-table--cell">Accent</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Link font</td><td class="op-uc-p op-uc-table--cell">❌ Removed (will be main)</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header background</td><td class="op-uc-p op-uc-table--cell">Top navigation bar background</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header background on hover</td><td class="op-uc-p op-uc-table--cell">Top navigation bar hover</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header font</td><td class="op-uc-p op-uc-table--cell">Top navigation bar text</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header font on hover</td><td class="op-uc-p op-uc-table--cell">Top navigation bar text hover</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Header border</td><td class="op-uc-p op-uc-table--cell">❌ Removed (will be generated if needed)</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu background</td><td class="op-uc-p op-uc-table--cell">Sidebar menu background</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu when selected</td><td class="op-uc-p op-uc-table--cell">Sidebar menu activeEnd of the deletion and Begin of the insertionincludeEnd of the insertion Begin of the deletion hover</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu on hover</td><td class="op-uc-p op-uc-table--cell">❌ Removed</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu font</td><td class="op-uc-p op-uc-table--cell">Sidebar menu text</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu font when selected</td><td class="op-uc-p op-uc-table--cell">Sidebar menu text active and hover</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu font on hover</td><td class="op-uc-p op-uc-table--cell">❌ Removed</td></tr><tr class="op-uc-table--row"><td class="op-uc-p op-uc-table--cell">Main menu border</td><td class="op-uc-p op-uc-table--cell">❌ Removed (will be generated if needed)</td></tr></tbody></table></figure>

ForEnd of the deletion the Begin of the insertionnew variables for:End of the insertion Begin of the deletion specific removed colours this will be mapped with the following approach:End of the deletion

Begin of the insertion1. End of the insertion Begin of the deletion * **Primary (dark):** The deviation **Main/Major 3** from the main colour will be used.
* **Link font:** The links will take **Main** as colour.
* **Header border:** The borders with **Grey 4: #CCCCCC** will be automatically created when using white navigation bar in light mode (in the future will also need to be added with black background and dark mode).
* End of the deletion **Main Begin of the insertionlight**End of the insertion Begin of the deletion menu on hover:** The hover and active colour will be the same therefore one can be removed.End of the deletion
Begin of the insertion2. **Accent dark**End of the insertion Begin of the deletion * **Main menu font on hover:** The hover and active colour will be the same therefore one can be removed.End of the deletion
Begin of the insertion3. **Accent light**

## Visuals

End of the insertion * Begin of the insertionDoes the stringsEnd of the insertion Begin of the deletion **Main menu border:** The borders with **Grey 4: #CCCCCC** will be automatically created when using white navigation barEnd of the deletion in Begin of the insertioncode keepEnd of the insertion Begin of the deletion light mode (inEnd of the deletion the Begin of the insertioncurrent &quot;label&quot; or we update this already following the administration page?

## Visuals

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

## **Figma**

https://www.figma.com/file/QT2DjrZkEcHiKE2dKxgzGp/Scale-Theming?node-id=248-52663End of the insertion Begin of the deletion future will also need to be added with black background and dark mode).End of the deletion