Campus Design System

Appearance

Background Color ​

Class NameCSS Equivalent
backgroundbackground-color: rgba(var(--cds-sys-color-background), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-background), var(--cds-sys-text-opacity);
surfacebackground-color: rgba(var(--cds-sys-color-surface), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity);
surface-container-highestbackground-color: rgba(var(--cds-sys-color-surface-container-highest), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity);
surface-container-highbackground-color: rgba(var(--cds-sys-color-surface-container-high), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity);
surface-containerbackground-color: rgba(var(--cds-sys-color-surface-container), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity);
surface-container-lowbackground-color: rgba(var(--cds-sys-color-surface-container-low), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity);
surface-container-lowestbackground-color: rgba(var(--cds-sys-color-surface-container-lowest), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity);
bg-backgroundbackground-color: rgba(var(--cds-sys-color-bacground), var(--cds-sys-background-opacity);
bg-surfacebackground-color: rgba(var(--cds-sys-color-surface), var(--cds-sys-background-opacity);
bg-surface-container-highestbackground-color: rgba(var(--cds-sys-color-surface-container-highest), var(--cds-sys-background-opacity);
bg-surface-container-highbackground-color: rgba(var(--cds-sys-color-surface-container-high), var(--cds-sys-background-opacity);
bg-surface-container-lowbackground-color: rgba(var(--cds-sys-color-surface-container-low), var(--cds-sys-background-opacity);
bg-surface-container-lowestbackground-color: rgba(var(--cds-sys-color-surface-container-lowest), var(--cds-sys-background-opacity);
primarybackground-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-text-opacity);
primary-containerbackground-color: rgba(var(--cds-sys-color-primary-container), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-primary-container), var(--cds-sys-text-opacity);
bg-primarybackground-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-background-opacity);
bg-primary-containerbackground-color: rgba(var(--cds-sys-color-primary-container), var(--cds-sys-background-opacity);
primary-fixedbackground-color: rgba(var(--cds-sys-color-primary-fixed), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-text-opacity);
primary-fixed-dimbackground-color: rgba(var(--cds-sys-color-primary-fixed-dim), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-text-opacity);
bg-primary-fixedbackground-color: rgba(var(--cds-sys-color-primary-fixed), var(--cds-sys-background-opacity);
bg-primary-fixed-variantbackground-color: rgba(var(--cds-sys-color-primary-fixed-variant), var(--cds-sys-background-opacity);
secondarybackground-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-text-opacity);
secondary-containerbackground-color: rgba(var(--cds-sys-color-secondary-container), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-secondary-container), var(--cds-sys-text-opacity);
bg-secondarybackground-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-background-opacity);
bg-secondary-containerbackground-color: rgba(var(--cds-sys-color-secondary-container), var(--cds-sys-background-opacity);
secondary-fixedbackground-color: rgba(var(--cds-sys-color-secondary-fixed), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-text-opacity);
secondary-fixed-dimbackground-color: rgba(var(--cds-sys-color-secondary-fixed-dim), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-text-opacity);
bg-secondary-fixedbackground-color: rgba(var(--cds-sys-color-secondary-fixed), var(--cds-sys-background-opacity);
bg-secondary-fixed-variantbackground-color: rgba(var(--cds-sys-color-secondary-fixed-variant), var(--cds-sys-background-opacity);
errorbackground-color: rgba(var(--cds-sys-color-error), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-text-opacity);
error-containerbackground-color: rgba(var(--cds-sys-color-error-container), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-error-container), var(--cds-sys-text-opacity);
bg-errorbackground-color: rgba(var(--cds-sys-color-error), var(--cds-sys-background-opacity);
successbackground-color: rgba(var(--cds-sys-color-success), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-text-opacity);
success-containerbackground-color: rgba(var(--cds-sys-color-success-container), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-success-container), var(--cds-sys-text-opacity);
bg-successbackground-color: rgba(var(--cds-sys-color-success), var(--cds-sys-background-opacity);
warnbackground-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-text-opacity);
warn-containerbackground-color: rgba(var(--cds-sys-color-warn-container), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-warn-container), var(--cds-sys-text-opacity);
bg-warnbackground-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-background-opacity);
excellentbackground-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-text-opacity);
excellent-containerbackground-color: rgba(var(--cds-sys-color-excellent-container), var(--cds-sys-background-opacity);;
color: rgba(var(--cds-sys-color-on-excellent-container), var(--cds-sys-text-opacity);
bg-excellentbackground-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-background-opacity);

General Concepts ​

💡 Some helpful-to-know words you'll see in the names of color roles:

  • Surface: A role used for backgrounds and large, low-emphasis areas of the screen.
  • Primary, Secondary : Accent color roles used to emphasize or de-emphasize foreground elements.
  • Container: Roles used as a fill color for foreground elements like buttons. They should not be used for text or icons.
  • On: Roles starting with this term indicate a color for text or icons on top of its paired parent color. For example, on-primary is used for text and icons against the primary fill color.
  • Variant: Roles ending with this term offer a lower emphasis alternative to its non-variant pair. For example, on-surface-variant is a less emphasized version of the on-surface color.

1. Surface ​

Roles used for backgrounds and large, low-emphasis areas of the screen.

Class NameCSS Equivalent
backgroundbackground-color: rgba(var(--cds-sys-color-background), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-backround), var(--cds-sys-text-opacity));
surfacebackground-color: rgba(var(--cds-sys-color-surface), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity));
surface-container-highestbackground-color: rgba(var(--cds-sys-color-surface-container-highest), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity));
surface-container-highbackground-color: rgba(var(--cds-sys-color-surface-container-high), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity));
surface-containerbackground-color: rgba(var(--cds-sys-color-surface-container), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity));
surface-container-lowbackground-color: rgba(var(--cds-sys-color-surface-container-low), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity));
surface-container-lowestbackground-color: rgba(var(--cds-sys-color-surface-container-lowest), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity));
bg-backgroundbackground-color: rgba(var(--cds-sys-color-bacground), var(--cds-sys-bg-opacity));
bg-surfacebackground-color: rgba(var(--cds-sys-color-surface), var(--cds-sys-bg-opacity));
bg-surface-container-highestbackground-color: rgba(var(--cds-sys-color-surface-container-highest), var(--cds-sys-bg-opacity));
bg-surface-container-highbackground-color: rgba(var(--cds-sys-color-surface-container-high), var(--cds-sys-bg-opacity));
bg-surface-container-lowbackground-color: rgba(var(--cds-sys-color-surface-container-low), var(--cds-sys-bg-opacity));
bg-surface-container-lowestbackground-color: rgba(var(--cds-sys-color-surface-container-lowest), var(--cds-sys-bg-opacity));

There are five surface roles:

  • Background - Default color for application backgrounds
  • On background - Text and icons against the background color
  • Surface - Default color for backgrounds of sections, cards, areas, ...
  • On surface - Text and icons against any surface color
  • On surface variant - Lower-emphasis color for text and icons against any surface color

There are also five surface container roles named based on their level of emphasis:

  • Surface container lowest – Lowest-emphasis container color
  • Surface container low – Low-emphasis container color
  • Surface container – Default container color
  • Surface container high – High-emphasis container color
  • Surface container highest – Highest-emphasis container color

WARNING

Using the .surface class or any surface-container variant simultaneously sets both the background color and the on-surface text color.

This is the recommended approach for coloring layers in the Campus Design System.

If an exception is necessary, the use of .bg-surface is possible but should be approached with caution, as it is considered highly exceptional.

html
<div class="[...] surface">Surface</div>
-
<div class="[...] surface-container-high">Surface Container High</div>
<div class="[...] surface-container-lowest on-surface-variant">Surface Container Lowest</div>
Surface
Surface

applying surface background and on-surface text color
Surface with On Surface Variant

applying surface background and on-surface-variant text color
Surface-container
Surface Container Highest

applying surface background and on-surface text color
Surface Container High

applying surface background and on-surface text color
Surface Container

applying surface background and on-surface text color
Surface Container Low

applying surface background and on-surface text color
Surface Container Lowest

applying surface background and on-surface text color

2. Primary ​

Roles used for prominent elements and actions on the screen.

Primary Roles:

Class NameCSS Equivalent
primarybackground-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-text-opacity));
primary-containerbackground-color: rgba(var(--cds-sys-color-primary-container), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-text-opacity));
bg-primarybackground-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-bg-opacity));
bg-primary-containerbackground-color: rgba(var(--cds-sys-color-primary), var(--cds-sys-bg-opacity));

There are four primary roles:

  • Primary - Default color for prominent elements and actions
  • On primary - Text and icons against the primary color
  • Primary container - Default color for backgrounds of sections, cards, areas, ...
  • On primary container - Text and icons against any primary container color

WARNING

Using the .primary class or any primary-container variant simultaneously sets both the background color and the on-primary text color.

This is the recommended approach for coloring elements in the Campus Design System.

If an exception is necessary, the use of .bg-primary is possible but should be approached with caution, as it is considered highly exceptional.

html
<div class="[...] primary">Primary</div>
<div class="[...] on-primary">On Primary</div>
<div class="[...] primary-container">Primary Container</div>
<div class="[...] text-primary">Text Primary</div>
Primary

applying primary background and on-primary text color
Primary Container

applying primary background and on-primary text color
Bg Primary

applying primary background color

Primary Addon Roles

INFO

Fixed Accent Colors

Fixed accent colors, including primary fixed, provide fill colors used against the surface. These colors maintain the same tone in light and dark themes, unlike regular container colors, which change in tone between these themes. The fixed color role may be used instead of the equivalent container role in situations where such fixed behavior is desired.

Fixed Dim Accent Colors

Fixed dim accent colors, such as primary fixed dim, provide a stronger, more emphasized tone relative to the equivalent fixed color. They may be used where a deeper color but the same fixed behavior is desired.

Class NameCSS Equivalent
primary-fixedbackground-color: rgba(var(--cds-sys-color-primary-fixed), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-text-opacity));
primary-fixed-dimbackground-color: rgba(var(--cds-sys-color-primary-fixed-dim), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-primary), var(--cds-sys-text-opacity));
bg-primary-fixedbackground-color: rgba(var(--cds-sys-color-primary-fixed), var(--cds-sys-bg-opacity));
bg-primary-fixed-variantbackground-color: rgba(var(--cds-sys-color-primary-fixed-variant), var(--cds-sys-bg-opacity));
  • primary-fixed - Default color for primary elements against the surface, maintaining the same in tone in light and dark themes.
  • on-primary-fixed - Text and icons against the primary fixed color.
  • primary-fixed-dim - Stronger, more emphasized tone for the primary fixed color.
  • on-primary-fixed-variant - Lower-emphasis color for text and icons against the primary fixed color.
html
<div class="[...] primary-fixed">Primary Fixed</div>
<div class="[...] on-primary-fixed">On Primary Fixed</div>
Primary Fixed

applying primary fixed background and on-primary-fixed text color. These do not change between light and dark themes.
Default primary to illustrate difference
Primary Fixed Dim

applying primary fixed dim background and on-primary-fixed text color. These do not change between light and dark themes.
Default primary to illustrate difference

3. Secondary ​

Roles used for elements and actions that are distinct from primary elements on the screen.

Secondary Roles:

Class NameCSS Equivalent
secondarybackground-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-text-opacity));
secondary-containerbackground-color: rgba(var(--cds-sys-color-secondary-container), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-text-opacity));
bg-secondarybackground-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-bg-opacity));
bg-secondary-containerbackground-color: rgba(var(--cds-sys-color-secondary), var(--cds-sys-bg-opacity));

There are four secondary roles:

  • Secondary - Default color for elements and actions distinct from primary elements
  • On secondary - Text and icons against the secondary color
  • Secondary container - Default color for backgrounds of sections, cards, areas, ...
  • On secondary container - Text and icons against any secondary container color

WARNING

Using the .secondary class or any secondary-container variant simultaneously sets both the background color and the on-secondary text color.

This is the recommended approach for coloring elements in the Campus Design System.

If an exception is necessary, the use of .bg-secondary is possible but should be approached with caution, as it is considered highly exceptional.

html
<div class="[...] secondary">Secondary</div>
<div class="[...] on-secondary">On Secondary</div>
<div class="[...] secondary-container">Secondary Container</div>
<div class="[...] bg-secondary">Bg Secondary</div>
Secondary

applying secondary background and on-secondary text color
Secondary Container

applying secondary background and on-secondary text color
Bg Secondary

applying secondary background color

Secondary Addon Roles

INFO

Fixed Accent Colors

Fixed accent colors, including secondary fixed, provide fill colors used against the surface. These colors maintain the same tone in light and dark themes, unlike regular container colors, which change in tone between these themes. The fixed color role may be used instead of the equivalent container role in situations where such fixed behavior is desired.

Fixed Dim Accent Colors

Fixed dim accent colors, such as secondary fixed dim, provide a stronger, more emphasized tone relative to the equivalent fixed color. They may be used where a deeper color but the same fixed behavior is desired.

Class NameCSS Equivalent
secondary-fixedbackground-color: rgba(var(--cds-sys-color-secondary-fixed), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-text-opacity));
secondary-fixed-dimbackground-color: rgba(var(--cds-sys-color-secondary-fixed-dim), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-secondary), var(--cds-sys-text-opacity));
bg-secondary-fixedbackground-color: rgba(var(--cds-sys-color-secondary-fixed), var(--cds-sys-bg-opacity));
bg-secondary-fixed-variantbackground-color: rgba(var(--cds-sys-color-secondary-fixed-variant), var(--cds-sys-bg-opacity));
  • secondary-fixed - Default color for secondary elements against the surface, maintaining the same tone in light and dark themes.
  • on-secondary-fixed - Text and icons against the secondary fixed color.
  • secondary-fixed-dim - Stronger, more emphasized tone for the secondary fixed color.
  • on-secondary-fixed-variant - Lower-emphasis color for text and icons against the secondary fixed color.
html
<div class="[...] secondary-fixed">Secondary Fixed</div>
<div class="[...] on-secondary-fixed">On Secondary Fixed</div>
Secondary Fixed

applying secondary fixed background and on-secondary-fixed text color. These do not change between light and dark themes.
Default secondary to illustrate difference
Secondary Fixed Dim

applying secondary fixed dim background and on-secondary-fixed text color. These do not change between light and dark themes.
Default secondary to illustrate difference

4. Error ​

Roles used to indicate errors and critical information.

Error Roles:

Class NameCSS Equivalent
errorbackground-color: rgba(var(--cds-sys-color-error), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-text-opacity));
error-containerbackground-color: rgba(var(--cds-sys-color-error-container), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-error), var(--cds-sys-text-opacity));
on-errorcolor: rgba(var(--cds-sys-color-on-error), var(--cds-sys-text-opacity));
bg-errorbackground-color: rgba(var(--cds-sys-color-error), var(--cds-sys-bg-opacity));
bg-error-containerbackground-color: rgba(var(--cds-sys-color-error-container), var(--cds-sys-bg-opacity));

There are four error roles:

  • Error - Default color for error elements and critical information
  • On error - Text and icons against the error color
  • Error container - Default color for backgrounds of sections, cards, areas, ...
  • Text error - Default color for error text

WARNING

Using the .error class or any error-container variant simultaneously sets both the background color and the on-error text color.

This is the recommended approach for indicating errors and critical information in the Campus Design System.

If an exception is necessary, the use of .bg-error is possible but should be approached with caution, as it is considered highly exceptional.

html
<div class="[...] error">Error</div>
<div class="[...] on-error">On Error</div>
<div class="[...] error-container">Error Container</div>
<div class="[...] bg-error">Bg Error</div>
Error

applying error background and on-error text color
Error Container

applying error background and on-error text color
Bg Error

applying error text color

5. Success ​

Roles used to indicate successful or positive elements.

Success Roles:

Class NameCSS Equivalent
successbackground-color: rgba(var(--cds-sys-color-success), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-text-opacity));
success-containerbackground-color: rgba(var(--cds-sys-color-success-container), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-success), var(--cds-sys-text-opacity));
on-successcolor: rgba(var(--cds-sys-color-on-success), var(--cds-sys-text-opacity));
bg-successbackground-color: rgba(var(--cds-sys-color-success), var(--cds-sys-bg-opacity));
bg-success-containerbackground-color: rgba(var(--cds-sys-color-success-container), var(--cds-sys-bg-opacity));

There are four success roles:

  • Success - Default color for successful or positive elements
  • On success - Text and icons against the success color
  • Success container - Default color for backgrounds of sections, cards, areas, ...
  • On success container - Text and icons against any success container color

WARNING

Using the .success class or any success-container variant simultaneously sets both the background color and the on-success text color.

This is the recommended approach for indicating success or positive elements in the Campus Design System.

If an exception is necessary, the use of .bg-success is possible but should be approached with caution, as it is considered highly exceptional.

html
<div class="[...] success">Success</div>
<div class="[...] on-success">On Success</div>
<div class="[...] success-container">Success Container</div>
<div class="[...] bg-success">Bg Success</div>
Success

applying success background and on-success text color
Success Container

applying success background and on-success text color
Bg Success

applying success text color

6. Warn ​

Roles used to indicate warnings or cautionary elements.

Warning Roles:

Class NameCSS Equivalent
warnbackground-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-text-opacity));
warn-containerbackground-color: rgba(var(--cds-sys-color-warn-container), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-text-opacity));
on-warncolor: rgba(var(--cds-sys-color-on-warn), var(--cds-sys-text-opacity));
bg-warnbackground-color: rgba(var(--cds-sys-color-warn), var(--cds-sys-bg-opacity));
bg-container-warnbackground-color: rgba(var(--cds-sys-color-container-warn), var(--cds-sys-bg-opacity));

There are four warn roles:

  • Warning - Default color for warn or cautionary elements
  • On warn - Text and icons against the warn color
  • Warning container - Default color for backgrounds of sections, cards, areas, ...
  • On warn container - Text and icons against any warn container color

WARNING

Using the .warn class or any warn-container variant simultaneously sets both the background color and the on-warn text color.

This is the recommended approach for indicating warns or cautionary elements in the Campus Design System.

If an exception is necessary, the use of .bg-warn is possible but should be approached with caution, as it is considered highly exceptional.

html
<div class="[...] warn">Warning</div>
<div class="[...] on-warn">On Warning</div>
<div class="[...] warn-container">Warning Container</div>
<div class="[...] bg-warn">Bg Warning</div>
Warning

applying warn background and on-warn text color
Warning Container

applying warn background and on-warn text color
Bg Warning

applying warn text color

7. Excellent ​

Roles used to indicate excellent or positive elements.

Excellent Roles:

Class NameCSS Equivalent
excellentbackground-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-text-opacity));
excellent-containerbackground-color: rgba(var(--cds-sys-color-excellent-container), var(--cds-sys-bg-opacity));
color: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-text-opacity));
on-excellentcolor: rgba(var(--cds-sys-color-on-excellent), var(--cds-sys-text-opacity));
bg-excellentbackground-color: rgba(var(--cds-sys-color-excellent), var(--cds-sys-bg-opacity));
bg-container-excellentbackground-color: rgba(var(--cds-sys-color-container-excellent), var(--cds-sys-bg-opacity));

There are four excellent roles:

  • Excellent - Default color for excellent or positive elements
  • On excellent - Text and icons against the excellent color
  • Excellent container - Default color for backgrounds of sections, cards, areas, ...
  • On excellent container - Text and icons against any excellent container color

WARNING

Using the .excellent class or any excellent-container variant simultaneously sets both the background color and the on-excellent text color.

This is the recommended approach for indicating excellent or positive elements in the Campus Design System.

If an exception is necessary, the use of .bg-excellent is possible but should be approached with caution, as it is considered highly exceptional.

html
<div class="[...] excellent">Excellent</div>
<div class="[...] on-excellent">On Excellent</div>
<div class="[...] excellent-container">Excellent Container</div>
<div class="[...] bg-excellent">Bg Excellent</div>
Excellent

applying excellent background and on-excellent text color
Excellent Container

applying excellent background and on-excellent text color
Bg Excellent

applying excellent text color

Changing the opacity ​

Control the opacity of an element’s background color using the bg-opacity-{name} classes.

For the full list of classes to apply background-opacity, see: Styles/Utilities/Effects/Opacity.

Showcase ​

.primary
.primary-container
.primary-fixed
.primary-fixed-dim
.secondary
.secondary-container
.secondary-fixed
.secondary-fixed-dim
.error
.error-container
.warn
.warn-container
.success
.success-container
.excellent
.excellent-container
.surface
.surface-variant
.inverse-surface
.background
.surface-container-highest
.surface-container-high
.surface-container
.surface-container-low
.surface-container-lowest
CEO
Alice Johnson
alice.johnson@company.com
About
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.