Material Design Guideline

[kulmann]

OpenCloud Material Design Guideline

This guide aims at making the OpenCloud adaption of material design easy to
understand and usable across all client platforms.

Material Design Concepts

The base concept of material design is that components are being layered on
top of each other, where the highest layer is the one closest to the users eye,
while the furthest layer is the one in the background.
The background is called Surface.

The main design elements in material design are shapes, fonts and color roles.

Color System

The material design color system consists of color roles. These roles are supposed
to express the different layers of components.

Pairing and Layering Colors

Use matching On roles for text and icons on top of surfaces. This ensures visual accessibility (color contrast of 3:1 or better).
Examples:

• Use OnPrimary for text and icons on Primary colored elements.
• Use OnSurfaceVariant for text and icons on SurfaceVariant colored elements.

Primary

Use primary roles for most prominent components (important buttons, active states).

• Primary for important fills, text and icons against Surface
• PrimaryContainer for standout fills against Surface (rarely or never)

We only use PrimaryContainer for hover and active/focussed states.

Secondary

Use secondary roles for less prominent components (anything that's not a CTA).

• Secondary for regular fills, text and icons against Surface
• SecondaryContainer for recessive components like tonal buttons against Surface

Tertiary

Use tertiary roles for contrasting accents.

• Tertiary for complementary fills, text and icons against Surface
• TertiaryContainer for complementary container fills against Surface, like input fields (e.g. the active state of a toggle-switch).

Error

Use error roles for error states (incorrect password, error message, etc).

• Error for attention-grabbing fills, text and icons against Surface (-> urgency!)
• ErrorContainer for attention-grabbing fills against Surface (-> less urgent)

Surface

Use surface roles for backgrounds, container roles for components like cards, sheets, dialogs.

• Surface default color for backgrounds. Note: In OpenCloud Web the background layer is the app content area.
• Five container roles expressing different level of emphasis:
  • SurfaceContainerLowest lowest-emphasis container
  • SurfaceContainerLow low-emphasis container
  • SurfaceContainer default container
  • SurfaceContainerHigh high-emphasis container
  • SurfaceContainerHighest highest-emphasis container
  • While SurfaceContainer is the default, others are helpful for creating hierarchy and nested containers.
• Most common combination of surface roles uses Surface for a background area and SurfaceContainer for a navigation area.
• Special: for surfaces there are two different On roles:
  • Use OnSurface by default for text and icons against any surface role
  • Use OnSurfaceVariant for lower emphasis text and icons against any surface role

Inverse

Use inverse roles for components to achieve reverse of surrounding UI.

• InverseSurface for background fills (high contrast against surface, e.g. snackbar)
• InverseOnSurface for text and icons against InverseSurface
• InversePrimary for actionable elements, e.g. text buttons (e.g. X for closing a snackbar)

Outline

Use for outlines against surface roles.

• Outline important boundaries, e.g. text field outline, filter chip outline, etc
• OutlineVariant decorative, e.g. dividers, border around cards / multi-element-components

Add-on roles

There are additional color roles with Fixed in their name. Those roles have the same color
independent of the currently active theme variant (light or dark). Because of that, color contrast
ratios are not guaranteed and we don't use them as of now.