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

Usage

You can use these variables in your SCSS files or style blocks:

.element {
  color: var(--oc-role-on-primary);
  background-color: var(--oc-role-primary);
}

They can also be used via Tailwind's utility classes:

<div class="bg-role-secondary">
  <span class="text-role-on-secondary">Some text.</span>
</div>