OpenCloud Design System

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:

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

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

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