### **Context**

Ever since we moved to Primer, colour definitions have also changed. The big benefit of using Primer's named colours, among others, is 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 used for 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**

* [**Named colours in Primer**](https://primer.style/foundations/primitives/color) that we can use as-is

* [**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).

### **Approach**

* Include base scales (we currently don't), and point _our_ semantic named colours to these base scale colours.

* Note: they _do_ seem to adapt to different colour modes.

* Architecture: How do we structure that in code so that we avoid devs randomly adding new colour variables?

* Begin of the insertion_To be discussed_End of the insertion Begin of the deletion Where to put it? Primer repo or core?

* We introduce a new file op-primer-colours with our named colours, mapped to base colours.

* Pass CSS variables?End of the deletion

* Begin of the deletion Semantic:

* "open" vs. "op-meeting-status-op" is semantic vs. functional?

* End of the deletion Process:

* Only the Primer team can define new semantic colours based on identified needs. (New additions need to be new features/documented in Lookbook and Figma). Similar to what we do today for Octicons.

* Add an automated test in GitHub to detect the use of base colours and throw a test failed.

* Begin of the insertionPrefix:End of the insertion Begin of the deletion Prefix? Add `op-`.

* End of the deletion `op-role-state` eg. `op-restricted-emphasis` Begin of the deletion

* We have a parallel system for user-defined hex colours (for work pacakge status and types etc) that adapt to modes. We'll need a different feature for linking "created colours" (user) to named semantic colours later. It's out of scope for this.End of the deletion

* How do we handle dark mode for example?

* _\[open\] Begin of the insertionBaseEnd of the insertion Begin of the deletion Do we keep our custom method for adaptingEnd of the deletion colours Begin of the insertiondon't know if they're foreground/background; automatic mode adjustments might not be accurate._End of the insertion Begin of the deletion (eg. status colours with borders using different opacity) or do we use Primer's own modes?_

* We'll probably have to maintain both systems.End of the deletion

* \[open\] Can our semantic colours point to _other_ named colours instead of base colours?

* Generally, no, we should stick to base colours.

* BUT, we have to first establish if we will even _need_ more colours than the base colours.

* Risk: we create too many specific colours that are component-specific. (Eg. `date-picker-selected-start-date` is not a good idea) Begin of the insertion

* We will keep the existing a parallel system for user-defined hex colours (for work pacakge status and types etc) that adapt to the dark modes. We'll need a different feature for linking "created colours" (user) to named semantic colours later. It's out of scope for this.

* The only input needed with this system is the hex code in light mode.

* When using semantic colours, more colours need to be manually defined, eg:

* Background/muted

* Text colour/foreground

* Border, if any

* We'll allow transparency only for border colours (not for fg and bg).

* For every new semantic colour added, it needs to also assign base scale colours to:

* light mode

* dark mode

* high contrast


End of the insertion Begin of the deletion


End of the deletion ### **Identified semantic colour needs**

<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-table--cell" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:120px;"><p class="op-uc-p">Page/Module</p></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:120px;"><p class="op-uc-p">Object</p></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:25.676%;"><p class="op-uc-p">State / Specifics</p></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:17.5098%;"><p class="op-uc-p">Existing Primer colour</p></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:25.676%;"><p class="op-uc-p">Names semantic colour</p></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:17.5098%;"><p class="op-uc-p">Base colour</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:120px;"><p Begin of the insertionclass="op-uc-p"><s><strong>Meetings</strong></s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><strong>Meetings</strong></p></td><tdEnd of the deletion class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:120px;"><p Begin of the insertionclass="op-uc-p"><s><strong>Meeting status</strong></s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><strong>Meeting status</strong></p></td><tdEnd of the deletion 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><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:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p Begin of the insertionclass="op-uc-p"><s>Open</s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">Open</p></td><tdEnd of the deletion class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>op-status-open</s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">op-status-open</p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>base-color-green-5</s></p></td></tr><trEnd of the insertion Begin of the deletion class="op-uc-p">base-color-green-5</p></td></tr><trEnd of the deletion class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p Begin of the insertionclass="op-uc-p"><s>In progress</s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">In progress</p></td><tdEnd of the deletion class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>op-status-inprogress</s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">op-status-inprogress</p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>base-color-yellow-5</s></p></td></tr><trEnd of the insertion Begin of the deletion class="op-uc-p">base-color-yellow-5</p></td></tr><trEnd of the deletion class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p Begin of the insertionclass="op-uc-p"><s>Closed</s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">Closed</p></td><tdEnd of the deletion class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>op-status-closed</s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">op-status-closed</p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>base-colour-neutral-8</s></p></td></tr><trEnd of the insertion Begin of the deletion class="op-uc-p">base-colour-neutral-8</p></td></tr><trEnd of the deletion class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:120px;"><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:120px;"><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><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:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><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"><br></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">op-restricted-emphasis</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">op-restricted-muted</p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">light: base-color-coral-0<br>dark: -&nbsp;<br>hight contrast: -</p></td></tr><trEnd of the insertion Begin of the deletion class="op-uc-p">base-color-coral-0</p></td></tr><trEnd of the deletion class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><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&nbsp;</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">op-restricted-muted</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">op-restricted-emphasis</p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p">base-color-orange-0</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><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">--borderColor-default</p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><i>op-restricted-border</i></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><i>base-color-orange-0 at 40%</i></p></td></tr><trEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td></tr><trEnd of the deletion class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">RDV text</p></td><td class="op-uc-table--cell"><p class="op-uc-p">--fgColor-default</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><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:120px;"><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:120px;"><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><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:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><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 Begin of the insertionclass="op-uc-p">--label-yellow-bgColor-active</p></td><td class="op-uc-table--cell"><pEnd of the insertion class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><br></p></td></tr><trEnd of the insertion Begin of the deletion class="op-uc-p">op-today</p></td><td class="op-uc-table--cell"><p class="op-uc-p">base-color-yellow-0</p></td></tr><trEnd of the deletion class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Non-working days</p></td><td class="op-uc-table--cell"><p class="op-uc-p">--bgColor-disabled</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><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:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><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">--bgColor-accent-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><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:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><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 Begin of the insertionclass="op-uc-p"><i>(re-evaluate, we might be able to use existing values)</i></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>op-date-range</s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">op-date-range</p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>base-color-blue-0</s></p></td></tr><trEnd of the insertion Begin of the deletion class="op-uc-p">base-color-blue-0</p></td></tr><trEnd of the deletion class="op-uc-table--row"><td class="op-uc-table--cell" style="height:71.9922px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:120px;"><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 Begin of the insertionclass="op-uc-p"><i>(re-evaluate, we might be able to use existing values)</i></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>op-date-range-ends</s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">op-date-range-ends</p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>base-color-neutral-8</s></p></td></tr><trEnd of the insertion Begin of the deletion class="op-uc-p">base-color-neutral-8</p></td></tr><trEnd of the deletion class="op-uc-table--row"><td class="op-uc-table--cell" style="height:71.9922px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:120px;"><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 Begin of the insertionclass="op-uc-p"><i>(re-evaluate, we might be able to use existing values)</i></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>op-date-range-disabled</s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">op-date-range-disabled</p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>base-color-neutral-5</s></p></td></tr><trEnd of the insertion Begin of the deletion class="op-uc-p">base-color-neutral-5</p></td></tr><trEnd of the deletion class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><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">--button-outline-bgColor-active</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><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:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><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">--fgColor-neutral</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><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:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><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">--fgColor-neutral</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><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:120px;"><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:120px;"><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><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:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><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 Begin of the insertionclass="op-uc-p"><i>update</i></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>op-unread</s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">op-unread</p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>base-color-blue-5</s></p></td></tr><trEnd of the insertion Begin of the deletion class="op-uc-p">base-color-blue-5</p></td></tr><trEnd of the deletion class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><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 Begin of the insertionclass="op-uc-p">--display-red-bgColor-emphasis</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>op-notification</s></p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p">op-notification</p></td><tdEnd of the deletion class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p"><s>base-color-red-4</s></p></td></tr><trEnd of the insertion Begin of the deletion class="op-uc-p">base-color-red-4</p></td></tr><trEnd of the deletion class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:120px;"><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:120px;"><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><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="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><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">&nbsp;--bgColor-success-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><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:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><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">--bgColor-severe-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><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:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><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">--bgColor-danger-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><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:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><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">--bgColor-neutral-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><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:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><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">--bgColor-done-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><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:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><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">--bgColor-attention-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><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% );width:120px;"><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:120px;"><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><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="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><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><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Basic BG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );width:17.5098%;"><p class="op-uc-p">--bgColor-severe-muted</p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">op-basic-bg?</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Basic FG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );"><p class="op-uc-p">--fgColor-severe</p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">ob-basic-fg?</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Professional BG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );width:17.5098%;"><p class="op-uc-p">--bgColor-sponsors-muted</p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">op-professional-bg?</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Professional FB</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );"><p class="op-uc-p">--fgColor-sponsors</p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">op-professional-fg?</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Premium BG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );width:17.5098%;"><p class="op-uc-p">--bgColor-open-muted</p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">op-premium-bg?</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Premium FG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );"><p class="op-uc-p">--fgColor-open</p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">op-premium-fg?</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Corporate BG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );width:17.5098%;"><p class="op-uc-p">--bgColor-accent-muted</p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">op-corporate-bg?</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Corportate FG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );"><p class="op-uc-p">--fgColor-accent</p></td><td class="op-uc-table--cell"><p Begin of the insertionclass="op-uc-p">op-corporate-fg?</p></td><tdEnd of the insertion Begin of the deletion class="op-uc-p"><br></p></td><tdEnd of the deletion class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr></tbody></table></figure><br>

### **Technical notes**

* The colours will need to adapt to different modes (dark, high contrast...) the way Primer&#39;s own named colours do


### **Out of scope**

* Front-end colour picker