Color Roles
The design system uses material design color roles to ensure a consistent look and feel across the interface. Please visit the official material design documentation for more details on how to use these roles.
Available roles
Color | Name | Value |
|---|---|---|
| oc-role-background | #F5FAFD | |
| oc-role-chrome | #20434F | |
| oc-role-error | #BA1A1A | |
| oc-role-error-container | #FFDAD6 | |
| oc-role-inverse-on-surface | #EDF1F4 | |
| oc-role-inverse-primary | #88D1EC | |
| oc-role-inverse-surface | #2C3134 | |
| oc-role-on-background | #171C1F | |
| oc-role-on-chrome | #FFFFFF | |
| oc-role-on-error | #FFFFFF | |
| oc-role-on-error-container | #410002 | |
| oc-role-on-primary | #FFFFFF | |
| oc-role-on-primary-container | #001F28 | |
| oc-role-on-primary-fixed | #001F28 | |
| oc-role-on-secondary | #FFFFFF | |
| oc-role-on-secondary-container | #071E26 | |
| oc-role-on-secondary-fixed | #071E26 | |
| oc-role-on-surface | #171C1F | |
| oc-role-on-surface-variant | #40484C | |
| oc-role-on-tertiary | #FFFFFF | |
| oc-role-on-tertiary-container | #171937 | |
| oc-role-on-tertiary-fixed | #171937 | |
| oc-role-outline | #70787C | |
| oc-role-outline-variant | #BFC8CC | |
| oc-role-primary | #07677F | |
| oc-role-primary-container | #B7EAFF | |
| oc-role-primary-fixed | #B7EAFF | |
| oc-role-scrim | #000000 | |
| oc-role-secondary | #20434f | |
| oc-role-secondary-container | #F4E5FF | |
| oc-role-secondary-fixed | #CFE6F1 | |
| oc-role-shadow | #000000 | |
| oc-role-surface | #FFFFFF | |
| oc-role-surface-bright | #F5FAFD | |
| oc-role-surface-container | #F1F3F4 | |
| oc-role-surface-container-high | #E4E9EC | |
| oc-role-surface-container-highest | #DEE3E6 | |
| oc-role-surface-container-low | #EFF4F7 | |
| oc-role-surface-container-lowest | #FFFFFF | |
| oc-role-surface-dim | #D6DBDE | |
| oc-role-surface-tint | #715289 | |
| oc-role-surface-variant | #DBE4E8 | |
| oc-role-tertiary | #5A5C7E | |
| oc-role-tertiary-container | #E0E0FF | |
| oc-role-tertiary-fixed | #E0E0FF |
Usage
You can use these variables in your SCSS files or style blocks:
scss
.element {
color: var(--oc-role-on-primary);
background-color: var(--oc-role-primary);
}