# Epic DREAM-73 - New frontend and structure for the colors and design section of the administration based on the Design system

Project: Stream Design System
Status: tested
URL: https://community.openproject.org/work_packages/DREAM-73

## Detailed specification

### Motivation and background information

### Acceptance criteria

### Out of scope

| Attribute | Value |
| --- | --- |
| Mockups | https://www.figma.com/design/XBmJjD7xbK1Urf8SrRkpn1/Design?node-id=0-1 |

## Planning

| Attribute | Value |
| --- | --- |
| Roadmap | 2026 Q4 |
| Date |  |
| Votes |  |
| List |  |
| Target versions | 18.0.0 |
| Sprint |  |
| Backlog bucket |  |
| Relevance |  |

## Subitems

| ID | Type | Subject | Status | Assignee | Target versions | Project | Priority | Spent time |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| DREAM-74 | Feature | Split content of Admin/Design page into separate tabs | tested |  | 14.6.0 | Stream Design System | Medium |  |
| DREAM-121 | Feature | Reduce amount of design variables needed for the sidebar | closed |  | 15.0.0 | Stream Design System | Medium |  |
| DREAM-78 | Feature | Move Colours page into a tab of Admin/Design page | closed |  | 17.7.0 | Stream Design System | Medium |  |
| DREAM-76 | Feature | Primerise Interface tab of Admin/Design page | closed |  | 17.9.0 | Stream Design System | Medium |  |
| DREAM-70 | Feature | Possibility to change logo used in high contrast or dark mode | tested |  | 18.0.0 | Stream Design System | Medium |  |
| DREAM-75 | Feature | Primerise Branding tab of Admin/Design page | tested |  | 18.0.0 | Stream Design System | Medium |  |
| DREAM-77 | Feature | Primerise PDF export tabs of Admin/Design page | tested |  | 18.0.0 | Stream Design System | Medium |  |
| DREAM-917 | Feature | Use color picker when designing the application in the administration | tested |  | 18.0.0 | Stream Design System | Medium |  |
| DREAM-179 | Feature | Remove Color Theme settings from certain tabs in primerized design panel | closed |  | Product Backlog | Stream Design System | Medium |  |

## Bugs and other work packages

_No work packages_

## Details

| Attribute | Value |
| --- | --- |
| Module | Administration / Custom themes, Frontend components and Primer design system |
| Enterprise plan | Enterprise / Basic (BAS) |
| Labels |  |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable | Henriette Darge |
| Product manager |  |
| Designer | Marc Alcobé |
| Developers | OP Dev Dream Team |
| Requested by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| Work |  |

## Description

# User Problem

When looking at the admin/design page there are multiple issues:

1.  It is hard to find, as there is another menu entry called "colors" and it is not clear what menu entry does what

2.  When looking at the page, is very loaded and not clearly structured. It is hard to find what you are looking for. Some things are collapsed, others not. The following things are all part of that one page
    
    1.  Theme
    
    2.  Custom logo
    
    3.  Custom favicon & touch icon
    
    4.  Custom PDF export settings (which has nested settings)
    
    5.  Advanced settings (including the color customisation)

3.  There is no possibility to upload different logos depending on the custom user mode (dark, high-contrast)

# Acceptance criteria

  - The admin/design page uses the Primer::PageHeader, with 4 tabs
    
      - Interface
    
      - Branding
    
      - Default colours
    
      - PDF export styles

  - All tab content uses Primer components

  - **Interface** contains
    
      - Theme
    
      - Advanced settings
        
          - Will be splitted into thee sections: Base colours, Top header colourse, main lateral menu
    
      - see <https://www.figma.com/design/XBmJjD7xbK1Urf8SrRkpn1/Design?node-id=1-13964&t=MZHT9WjgUGvWmaux-0>

  - **Branding** contains
    
      - Theme
    
      - Custom logo
        
          - Including the option to upload different logos depending on the mode
    
      - Custom favicon & touch icon
    
      - see <https://www.figma.com/design/XBmJjD7xbK1Urf8SrRkpn1/Design?node-id=5-3973&t=MZHT9WjgUGvWmaux-0>

  - **Default colours**
    
      - will list all existing colors in a primerized way
    
      - will replace the `colors` page
    
      - see <https://www.figma.com/design/XBmJjD7xbK1Urf8SrRkpn1/Design?node-id=5-6715&t=MZHT9WjgUGvWmaux-0>

  - **PDF export styles** contains
    
      - Theme
    
      - Custom PDF export settings (which has nested settings)
    
      - see <https://www.figma.com/design/XBmJjD7xbK1Urf8SrRkpn1/Design?node-id=5-11607&t=MZHT9WjgUGvWmaux-0>

## Development approach

The development will be split into multiple phases

  - Phase 1: Introduce the PageHeader component with the 3 tabs (except default colors), leave the content as it is now
    
      - <mention class="mention" data-id="56339" data-type="work_package" data-text="##56339">##56339</mention> 

  - Phase 2: Primerise the tabs one by one
    
      - <mention class="mention" data-id="56340" data-type="work_package" data-text="##56340">##56340</mention>
    
      - <mention class="mention" data-id="56190" data-type="work_package" data-text="##56190">##56190</mention>
    
      - <mention class="mention" data-id="56341" data-type="work_package" data-text="##56341">##56341</mention>
    
      - <mention class="mention" data-id="56342" data-type="work_package" data-text="##56342">##56342</mention>

  - Phase 3: move colors into the fourth tab "default colors")
    
      - <mention class="mention" data-id="56343" data-type="work_package" data-text="##56343">##56343</mention>

## 

## Example screenshots

<img class="image_resized op-uc-image op-uc-image_inline" style="width:439px;" src="/api/v3/attachments/113900/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:468px;" src="/api/v3/attachments/113901/content">

## Open questions

  - Primer does not offer a color picker. How do we deal with that?

## **Figma**

<https://www.figma.com/design/XBmJjD7xbK1Urf8SrRkpn1/Design?node-id=0-1>