Design System
Colour
Primitives
Primitives are the raw colour values for the PLOS design system. Each primitive is a named constant for a specific hex value. Primitives should not be referenced directly in component styles or templates. Rather, semantic tokens should be used instead.
| Swatch | Definition | Hex |
|---|---|---|
| --plos-color-primary-blue | #01156b | |
| --plos-color-white | #ffffff | |
| --plos-color-black | #1a1a1a | |
| --plos-color-secondary-green | #037165 | |
| --plos-color-secondary-red | #f03f10 | |
| --plos-color-secondary-blue | #0c4cbd | |
| --plos-color-secondary-lime | #d7df23 | |
| --plos-color-grey-extra-light | #f5f5f5 | |
| --plos-color-grey-light | #ebebeb | |
| --plos-color-grey-medium | #b8b8b8 | |
| --plos-color-grey-dark | #8e8e8e | |
| --plos-color-grey-extra-dark | #5e5e5e | |
| --plos-color-green | #1a7032 | |
| --plos-color-red | #d32205 | |
| --plos-color-focus | #01156b |
Semantic tokens
Semantic tokens have meaningful names tied to their purpose, not their appearance. Each token references a primitive and describes where and why a color is used. Consuming the semantic layer means that if a primitive value changes, every component that uses the corresponding semantic token updates automatically.
Always use semantic tokens in plos-overrides.min.css and in any
component or template styles. The "Maps to" column shows which primitive each token
resolves through.
Brand
| Swatch | Token | Maps to |
|---|---|---|
| --plos-color-brand-dark-blue | --plos-color-primary-blue | |
| --plos-color-brand-white | --plos-color-white | |
| --plos-color-brand-black | --plos-color-black | |
| --plos-color-brand-blue | --plos-color-secondary-blue | |
| --plos-color-brand-lime | --plos-color-secondary-lime | |
| --plos-color-brand-red | --plos-color-secondary-red | |
| --plos-color-brand-green | --plos-color-secondary-green |
Text
| Swatch | Token | Maps to |
|---|---|---|
| --plos-color-text-primary-light | --plos-color-black | |
| --plos-color-text-primary-dark | --plos-color-white | |
| --plos-color-text-secondary-light | --plos-color-grey-extra-dark | |
| --plos-color-text-link-default | --plos-color-primary-blue |
Surface
| Swatch | Token | Maps to |
|---|---|---|
| --plos-color-surface-background-primary | --plos-color-grey-extra-light | |
| --plos-color-surface-background-secondary | --plos-color-grey-light | |
| --plos-color-surface-background-tertiary | --plos-color-grey-medium |
Border
| Swatch | Token | Maps to |
|---|---|---|
| --plos-color-border-default | --plos-color-grey-medium | |
| --plos-color-border-text-input | --plos-color-grey-dark |
Messaging
| Swatch | Token | Maps to |
|---|---|---|
| --plos-color-messaging-focus | --plos-color-focus | |
| --plos-color-messaging-positive | --plos-color-green | |
| --plos-color-messaging-negative | --plos-color-red |
Journals
Journal colors are an exception to the primitive/semantic color system and map directly to a hex value. They do not have a corresponding primitive.
| Swatch | Token | Hex |
|---|---|---|
| --plos-color-journal-one | #cc00a6 | |
| --plos-color-journal-biology | #0523a2 | |
| --plos-color-journal-medicine | #520043 | |
| --plos-color-journal-pathogens | #320b92 | |
| --plos-color-journal-computational-biology | #1b73c5 | |
| --plos-color-journal-genetics | #0a613b | |
| --plos-color-journal-neglected-tropical-diseases | #1b8372 | |
| --plos-color-journal-digital-health | #d14905 | |
| --plos-color-journal-climate | #038236 | |
| --plos-color-journal-water | #1640f8 | |
| --plos-color-journal-sustainability | #707c03 | |
| --plos-color-journal-complex-systems | #145886 | |
| --plos-color-journal-mental-health | #9249cf | |
| --plos-color-journal-aging-and-health | #7f1092 | |
| --plos-color-journal-ecosystems | #7e6d2d | |
| --plos-color-journal-global-public-health | #cf3030 |