Embed code

Embed the code in the <head> of your HTML. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/web-expressive@1.1.0/dist/schemes/berry-tonal.css" />
<style>
@import url('https://cdn.jsdelivr.net/npm/web-expressive@1.1.0/dist/schemes/berry-tonal.css');
</style>

Example usage

.card {
    background: var(--sys-color-primary-container);
    color: var(--sys-color-on-primary-container);
}

Via npm

npm install web-expressive

Import the scheme into your global stylesheet

@import "web-expressive/schemes/berry-tonal.css";
Learn more about Web Expressive

Light mode

Primary
On Primary
Secondary
On Secondary
Tertiary
On Tertiary
Primary Container
On Primary Container
Secondary Container
On Secondary Container
Tertiary container
On Tertiary container
Primary Fixed
Primary Fixed Dim
On Primary Fixed
On Primary Fixed Variant
Secondary Fixed
Secondary Fixed Dim
On Secondary Fixed
On Secondary Fixed Variant
Tertiary Fixed
Tertiary Fixed Dim
On Tertiary Fixed
On Tertiary Fixed Variant
Surface Dim
Surface
Surface Bright
Surface Container Lowest
Surface Container Low
Surface Container
Surface Container High
Surface Container Highest
On Surface
On Surface Variant
Outline
Outline Variant
Error
On Error
Error Container
On Error Container
Inverse Surface
Inverse On Surface
Inverse Primary
Scrim
Shadow

Preview

Helen Adam

2 days ago

Follow up?
Business trip report

For further assistance, please reach out to myself or Helen.

Dark mode

Primary
On Primary
Secondary
On Secondary
Tertiary
On Tertiary
Primary Container
On Primary Container
Secondary Container
On Secondary Container
Tertiary container
On Tertiary container
Primary Fixed
Primary Fixed Dim
On Primary Fixed
On Primary Fixed Variant
Secondary Fixed
Secondary Fixed Dim
On Secondary Fixed
On Secondary Fixed Variant
Tertiary Fixed
Tertiary Fixed Dim
On Tertiary Fixed
On Tertiary Fixed Variant
Surface Dim
Surface
Surface Bright
Surface Container Lowest
Surface Container Low
Surface Container
Surface Container High
Surface Container Highest
On Surface
On Surface Variant
Outline
Outline Variant
Error
On Error
Error Container
On Error Container
Inverse Surface
Inverse On Surface
Inverse Primary
Scrim
Shadow

Preview

Helen Adam

2 days ago

Follow up?
Business trip report

For further assistance, please reach out to myself or Helen.