Content
View differences
Updated by Parimal Satyal about 1 year ago
### **Context** **Acceptance criteria**
Ever since we moved to Primer, colour definitions have also changed. The big benefit * Define a list of using Primer's named colours, among others, is semantic colours that they automatically adapt to different colour modes like Dark or High contrast. This is because each colour has already-defined variants in different modes.
However, the named colours offered by Primer are not enough for all the uses we have in Open Project. A good example are the colours can be used for specific OP-specific needs like:
* Meeting statuses; we _could_ misuse available colours like `bgColor/attention-emphasis` or `bgColor/neutral-emphasis` but this would be misusing them, since we are ignoring the semantics of these colour definitions.
**Helpful links**
statuses
* [**Named colours in Primer**](https://primer.style/foundations/primitives/color) that we can use as-is
Restricted visibility comments
* [**Base scales**](https://primer.style/foundations/color/base-scales#all-color-scales) that "should only be used to construct functional and component/pattern design tokens, never used directly in code"; we can use them to construct our own semantic colour set.
**Suggestion**
We can define and maintain our own set of semantic colours using Primer's approach, either by basing them on existing scales that already work in different modes out of the box, or by defining our own custom colours that we maintain (with HEX values for different modes for each named colour).
### **Identified semantic colour needs**
<figure class="table op-uc-figure_align-center op-uc-figure" style="height:1535.83px;width:100%;"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:17.0182%;"><p class="op-uc-p">Page/Module</p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:19.1015%;"><p class="op-uc-p">Object</p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:25.676%;"><p class="op-uc-p">State / Specifics</p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:17.5098%;"><p class="op-uc-p">Hue in default theme (light mode)</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.0182%;"><p class="op-uc-p"><strong>Meetings</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:19.1015%;"><p class="op-uc-p"><strong>Meeting status</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><strong>Green</strong></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Open</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">In progress</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Brown</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Closed</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Grey</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:17.0182%;"><p class="op-uc-p"><strong>Activity tab</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:19.1015%;"><p class="op-uc-p"><strong>Restricted visibility comments</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">RVC header background</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Light orange</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">RVC body background </p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Light orange</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">RVC border</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Darker organce</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.0182%;"><p class="op-uc-p"><strong>Work packages</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:19.1015%;"><p class="op-uc-p"><strong>Default types</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Task</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Navy blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Milestone</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Green</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Phase</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Orange</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Feature</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Ocean blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Epic</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Purple</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">User story</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Sky blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Bug</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Red</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.0182%;"><p class="op-uc-p"><strong>Work packages</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:19.1015%;"><p class="op-uc-p"><strong>Default statuses</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">New</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">In progress</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Merged</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Closed</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">... (how many are seeded?)</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.0182%;"><p class="op-uc-p"><strong>Scheduling</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:19.1015%;"><p class="op-uc-p"><strong>Date picker</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Current date background</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Yellow</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Selection: start/end date background</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Selection: in-between dates background</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Light blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:71.9922px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:25.676%;"><p class="op-uc-p">Current date background (disabled)</p></td><td class="op-uc-table--cell" style="height:71.9922px;width:17.5098%;"><p class="op-uc-p">Light yellow</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:71.9922px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:25.676%;"><p class="op-uc-p">Selection: start/end date background (disabled)</p></td><td class="op-uc-table--cell" style="height:71.9922px;width:17.5098%;"><p class="op-uc-p">Grey</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:71.9922px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:25.676%;"><p class="op-uc-p">Selection: in-between dates background (disabled)</p></td><td class="op-uc-table--cell" style="height:71.9922px;width:17.5098%;"><p class="op-uc-p">Light grey</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Active field (not focus) border</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">"Closest" label</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Grey</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">"Inactive" label</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Grey</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.0182%;"><p class="op-uc-p"><strong>Notifications</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p">Notification center</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Unread badge</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p">Top navigation</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Red unread badge</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Red</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.0182%;"><p class="op-uc-p"><strong>Projects</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:19.1015%;"><p class="op-uc-p"><strong>Statuses</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">On track</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">green</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">At risk</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">orange</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Off track</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">red</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Not started</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Finished</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">purple</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Discontinued</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">green</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:17.0182%;"><p class="op-uc-p"><strong>Enterprise plans</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Community</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">-</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Basic</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">Pink</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Professional</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">Green</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Premium</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">Orange</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Corporate</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">Blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p"><br></p></td></tr></tbody></table></figure>
### ...
**Technical notes**
* The colours will need to adapt to different modes (dark, high contrast...) the way Primer's own named colours do
### **Permissions and visibility considerations**
* \-
**Out of scope**
* Front-end colour picker
Ever since we moved to Primer, colour definitions have also changed. The big benefit
However, the named colours offered by Primer are not enough for all the uses we have in Open Project. A good example are the colours
*
**Helpful links**
**Suggestion**
We can define and maintain our own set of semantic colours using Primer's approach, either by basing them on existing scales that already work in different modes out of the box, or by defining our own custom colours that we maintain (with HEX values for different modes for each named colour).
### **Identified semantic colour needs**
<figure class="table op-uc-figure_align-center op-uc-figure" style="height:1535.83px;width:100%;"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:17.0182%;"><p class="op-uc-p">Page/Module</p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:19.1015%;"><p class="op-uc-p">Object</p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:25.676%;"><p class="op-uc-p">State / Specifics</p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:17.5098%;"><p class="op-uc-p">Hue in default theme (light mode)</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.0182%;"><p class="op-uc-p"><strong>Meetings</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:19.1015%;"><p class="op-uc-p"><strong>Meeting status</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><strong>Green</strong></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Open</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">In progress</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Brown</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Closed</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Grey</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:17.0182%;"><p class="op-uc-p"><strong>Activity tab</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:19.1015%;"><p class="op-uc-p"><strong>Restricted visibility comments</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">RVC header background</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Light orange</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">RVC body background </p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Light orange</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">RVC border</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Darker organce</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.0182%;"><p class="op-uc-p"><strong>Work packages</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:19.1015%;"><p class="op-uc-p"><strong>Default types</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Task</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Navy blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Milestone</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Green</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Phase</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Orange</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Feature</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Ocean blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Epic</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Purple</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">User story</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Sky blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Bug</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Red</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.0182%;"><p class="op-uc-p"><strong>Work packages</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:19.1015%;"><p class="op-uc-p"><strong>Default statuses</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">New</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">In progress</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Merged</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Closed</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">... (how many are seeded?)</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.0182%;"><p class="op-uc-p"><strong>Scheduling</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:19.1015%;"><p class="op-uc-p"><strong>Date picker</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Current date background</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Yellow</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Selection: start/end date background</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Selection: in-between dates background</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Light blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:71.9922px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:25.676%;"><p class="op-uc-p">Current date background (disabled)</p></td><td class="op-uc-table--cell" style="height:71.9922px;width:17.5098%;"><p class="op-uc-p">Light yellow</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:71.9922px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:25.676%;"><p class="op-uc-p">Selection: start/end date background (disabled)</p></td><td class="op-uc-table--cell" style="height:71.9922px;width:17.5098%;"><p class="op-uc-p">Grey</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:71.9922px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:25.676%;"><p class="op-uc-p">Selection: in-between dates background (disabled)</p></td><td class="op-uc-table--cell" style="height:71.9922px;width:17.5098%;"><p class="op-uc-p">Light grey</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Active field (not focus) border</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">"Closest" label</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Grey</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">"Inactive" label</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Grey</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.0182%;"><p class="op-uc-p"><strong>Notifications</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:19.1015%;"><p class="op-uc-p">Notification center</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Unread badge</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">Blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p">Top navigation</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Red unread badge</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">Red</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.0182%;"><p class="op-uc-p"><strong>Projects</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:19.1015%;"><p class="op-uc-p"><strong>Statuses</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">On track</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">green</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">At risk</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">orange</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Off track</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">red</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Not started</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Finished</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">purple</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Discontinued</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">green</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:17.0182%;"><p class="op-uc-p"><strong>Enterprise plans</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Community</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">-</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Basic</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">Pink</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Professional</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">Green</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Premium</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">Orange</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Corporate</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">Blue</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:17.0182%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:19.1015%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p"><br></p></td></tr></tbody></table></figure>
###
* The colours will need to adapt to different modes (dark, high contrast...) the way Primer's own named colours do
###
* \-
* Front-end colour picker