This page lists all the colors available in OUDS Web and their usage, organized by their category. All colors are displayed in both light and dark modes for reference. However, they should be applied semantically using their respective utility classes or custom properties to ensure dynamic adaptation to the color mode .
Background
These colors are used for whole pages and structurally meaningful sections backgrounds.
These colors can be used with our background utilities .
ouds/color/bg/ Light mode Dark mode Usage inverse-high #141414
#eee
.bg-inverse-high inverse-low #141414
#333
.bg-inverse-low primary #fff
#141414
.bg-primary secondary #f4f4f4
#1f1f1f
.bg-secondary tertiary #f9f5f0
#23211a
.bg-tertiary
Surface
These colors should be used as background for elements that are on another background.
These colors can be used with our background utilities . Some of these surface colors have an opacity value and are designed to come on top of another color, we explain how to achieve surface color superposition here .
ouds/color/surface/ Light mode Dark mode Usage inverse-high #272727
#eee
.bg-surface-inverse-high inverse-low #272727
rgba(255, 255, 255, 0.12)
.bg-surface-inverse-low primary #fff
rgba(255, 255, 255, 0.04)
.bg-surface-primary secondary rgba(0, 0, 0, 0.04)
rgba(255, 255, 255, 0.08)
.bg-surface-secondary tertiary rgba(189, 121, 60, 0.08)
rgba(104, 93, 80, 0.4)
.bg-surface-tertiary
ouds/color/surface/brand/ Light mode Dark mode Usage primary #ff7900
#ff7900
.bg-surface-brand-primary
Status
These surface colors are used specifically to indicate a status.
Like other surface colors, they can be used with our background utilities .
ouds/color/surface/status/positive/ Light mode Dark mode Usage emphasized #138126
#94f0a4
.bg-surface-status-positive-emphasized muted rgba(61, 227, 90, 0.12)
rgba(14, 98, 29, 0.64)
.bg-surface-status-positive-muted
ouds/color/surface/status/info/ Light mode Dark mode Usage emphasized #0073b2
#8ad5ff
.bg-surface-status-info-emphasized muted rgba(38, 178, 255, 0.08)
rgba(0, 89, 138, 0.52)
.bg-surface-status-info-muted
ouds/color/surface/status/warning/ Light mode Dark mode Usage emphasized #ffd000
#ffe270
.bg-surface-status-warning-emphasized muted rgba(255, 208, 0, 0.16)
rgba(102, 81, 0, 0.48)
.bg-surface-status-warning-muted
ouds/color/surface/status/negative/ Light mode Dark mode Usage emphasized #db0002
#ff8081
.bg-surface-status-negative-emphasized muted rgba(219, 0, 2, 0.08)
rgba(219, 0, 2, 0.32)
.bg-surface-status-negative-muted
ouds/color/surface/status/accent/ Light mode Dark mode Usage emphasized #ff7900
#ff7900
.bg-surface-status-accent-emphasized muted rgba(189, 121, 60, 0.08)
rgba(104, 93, 80, 0.4)
.bg-surface-status-accent-muted
Content
These colors are used for informative but non-interactive content such as texts and icons.
These colors can be used with our text color utilities .
ouds/color/content/ Light mode Dark mode Usage brand-primary #f15e00
#ff7900
.text-brand-primary default #000
#eee
.text-default disabled rgba(0, 0, 0, 0.2)
rgba(255, 255, 255, 0.2)
.text-disabled inverse #fff
#000
.text-inverse muted rgba(0, 0, 0, 0.68)
rgba(255, 255, 255, 0.64)
.text-muted
ouds/color/content/status/ Light mode Dark mode Usage accent #ff7900
#ff7900
.text-status-accent info #0073b2
#8ad5ff
.text-status-info negative #db0002
#ff8081
.text-status-negative positive #138126
#94f0a4
.text-status-positive warning #856a00
#ffe270
.text-status-warning
Content on other colors
These content colors are used to guarantee maximum legibility for contents displayed on a background or surface color.
Note
In the following lists we display an icon with the content color on their target background color.
ouds/color/content/on/brand/ Light mode Dark mode Usage primary #000
#000
.text-on-brand-primary
ouds/color/content/on/status/positive/ Light mode Dark mode Usage emphasized #fff
#000
.text-on-status-positive-emphasized muted #000
#eee
.text-on-status-positive-muted
ouds/color/content/on/status/info/ Light mode Dark mode Usage emphasized #fff
#000
.text-on-status-info-emphasized muted #000
#eee
.text-on-status-info-muted
ouds/color/content/on/status/warning/ Light mode Dark mode Usage emphasized #000
#000
.text-on-status-warning-emphasized muted #000
#eee
.text-on-status-warning-muted
ouds/color/content/on/status/negative/ Light mode Dark mode Usage emphasized #fff
#000
.text-on-status-negative-emphasized muted #000
#eee
.text-on-status-negative-muted
ouds/color/content/on/status/accent/ Light mode Dark mode Usage emphasized #000
#000
.text-on-status-accent-emphasized muted #000
#eee
.text-on-status-accent-muted
Note
The following content colors are highly specific and should only be used with direction from a designer or within the context of a custom component.
ouds/color/content/on/action/ Light mode Dark mode Usage disabled #fff
#000
var(--bs-color-content-on-action-disabled) enabled #fff
#000
var(--bs-color-content-on-action-enabled) focus #fff
#000
var(--bs-color-content-on-action-focus) highlighted #fff
#000
var(--bs-color-content-on-action-highlighted) hover #fff
#000
var(--bs-color-content-on-action-hover) loading #fff
#000
var(--bs-color-content-on-action-loading) pressed #fff
#000
var(--bs-color-content-on-action-pressed) selected #fff
#000
var(--bs-color-content-on-action-selected)
Action
These colors are used for interactive elements and actions' states.
Heads up!
These colors should only be used for custom components development, this is why no utilities are provided, please use directly the custom properties in your CSS.
ouds/color/action/ Light mode Dark mode Usage disabled rgba(0, 0, 0, 0.2)
rgba(255, 255, 255, 0.2)
var(--bs-color-action-disabled) enabled #000
#eee
var(--bs-color-action-enabled) focus rgba(0, 0, 0, 0.68)
rgba(255, 255, 255, 0.64)
var(--bs-color-action-focus) highlighted #000
#eee
var(--bs-color-action-highlighted) hover rgba(0, 0, 0, 0.68)
rgba(255, 255, 255, 0.64)
var(--bs-color-action-hover) loading #f15e00
#ff7900
var(--bs-color-action-loading) pressed #f15e00
#ff7900
var(--bs-color-action-pressed) read-only-primary rgba(0, 0, 0, 0.68)
rgba(255, 255, 255, 0.64)
var(--bs-color-action-read-only-primary) read-only-secondary rgba(0, 0, 0, 0.2)
rgba(255, 255, 255, 0.2)
var(--bs-color-action-read-only-secondary) selected #f15e00
#ff7900
var(--bs-color-action-selected) visited #5b2f98
#a885d8
var(--bs-color-action-visited)
ouds/color/action/support/ Light mode Dark mode Usage disabled rgba(0, 0, 0, 0.04)
rgba(255, 255, 255, 0.04)
var(--bs-color-action-support-disabled) enabled rgba(0, 0, 0, 0.04)
rgba(255, 255, 255, 0.04)
var(--bs-color-action-support-enabled) focus rgba(0, 0, 0, 0.08)
rgba(255, 255, 255, 0.08)
var(--bs-color-action-support-focus) hover rgba(0, 0, 0, 0.08)
rgba(255, 255, 255, 0.08)
var(--bs-color-action-support-hover) loading rgba(0, 0, 0, 0.12)
rgba(255, 255, 255, 0.12)
var(--bs-color-action-support-loading) pressed rgba(0, 0, 0, 0.12)
rgba(255, 255, 255, 0.12)
var(--bs-color-action-support-pressed)
ouds/color/action/negative/ Light mode Dark mode Usage enabled #db0002
#ff8081
var(--bs-color-action-negative-enabled) focus #b20002
#ffb2b3
var(--bs-color-action-negative-focus) hover #b20002
#ffb2b3
var(--bs-color-action-negative-hover) loading #800001
#ffe5e6
var(--bs-color-action-negative-loading) pressed #800001
#ffe5e6
var(--bs-color-action-negative-pressed)
Border
These colors are used for borders and dividers.
These colors can be used with our border utilities .
ouds/color/border/ Light mode Dark mode Usage brand-primary #f15e00
#ff7900
.border-brand-primary default rgba(0, 0, 0, 0.2)
rgba(255, 255, 255, 0.2)
.border-default emphasized #000
rgba(255, 255, 255, 0.92)
.border-emphasized minimal rgba(0, 0, 0, 0.04)
rgba(255, 255, 255, 0.04)
.border-minimal muted rgba(0, 0, 0, 0.08)
rgba(255, 255, 255, 0.08)
.border-muted
ouds/color/border/status/ Light mode Dark mode Usage accent #ff7900
#ff7900
.border-status-accent info #0073b2
#8ad5ff
.border-status-info negative #db0002
#ff8081
.border-status-negative positive #138126
#94f0a4
.border-status-positive warning #ffd000
#ffe270
.border-status-warning
Note
The following border colors do not have utilities because they are used only in a Sass mixin to create focus rings.
ouds/color/border/ Light mode Dark mode Usage focus-inset #fff
#000
var(--bs-color-border-focus-inset) focus #000
#eee
var(--bs-color-border-focus)
Border on other colors
These border colors will guarantee an acceptable contrast on a specific background or surface color.
ouds/color/border/on/brand/ Light mode Dark mode Usage primary #000
#000
.border-on-brand-primary
Overlay
These colors are used for overlay elements like dropdown, modals and tooltips to create depth and emphasis.
Heads up!
These colors should only be used for custom components development, this is why no utilities are provided, please use directly the custom properties in your CSS.
ouds/color/overlay/ Light mode Dark mode Usage drag rgba(0, 0, 0, 0.04)
rgba(255, 255, 255, 0.08)
var(--bs-color-overlay-drag) dropdown #fff
#3b3b3b
var(--bs-color-overlay-dropdown) modal #fff
#333
var(--bs-color-overlay-modal) tooltip #272727
#3b3b3b
var(--bs-color-overlay-tooltip)
Always
These colors are invariant, they will stay the same on every brand, modes or contexts.
These colors can be used with our background utilities , our text utilities or our border utilities .
ouds/color/always/ All modes Usage black #000
var(--bs-color-always-black) on-black #eee
var(--bs-color-always-on-black) on-white #000
var(--bs-color-always-on-white) white #fff
var(--bs-color-always-white)
Opacity
These colors only define opacities levels, they are used to tweak visibility, hierarchy or emphasis of elements.
These colors can be used with our opacity utilities .
ouds/opacity/ All modes Usage disabled 0.2
.opacity-disabled invisible 0
.opacity-invisible medium 0.56
.opacity-medium opaque 1
.opacity-opaque strong 0.64
.opacity-strong weak 0.32
.opacity-weak weaker 0.16
.opacity-weaker weakest 0.04
.opacity-weakest
Decorative
For design only
Decorative colors are used for coloring illustrations only and should not be needed in OUDS Web. Please contact us if you need to use them in your project.