The design system describes four main entries that here are called Tones.

A tone is a color with five brightness variations and a specific purpose.

The four tones are Gray, Primary, Success, Warning, and Danger.

A grayish tone.

A blueish tone.

A greenish tone.

A yellowish tone.

A redish tone.

Each tone is later split in five brightness variations.

The five variations are Darkest, Middle, Light, Lighter, Lightest.

The darkest variation of some tone.

The base of all variations of some tone.

The first light variation of some tone.

The increased-light variation of some tone.

The lightest variation of some tone.

Palette.Color upholds data about some desired color.

Given a tone and brightness, initiates the building of a color.

Palette.color tonePrimary brightnessMiddle

Given some color, inverts it to contrast. Useful for contrasting text with the background.

backgroundColor
    |> Palette.setContrasting True
    |> Palette.toElementColor
    |> Element.Font.color

Applies an alpha value to the color, making it transparent.

backgroundColor
    |> Palette.withAlpha 0.5
    |> Palette.toElementColor
    |> Element.Background.color

Transforms a Palette.Color into an Elm-UI-compatible color.

let
    backgroundColor =
        Palette.color tonePrimary brightnessMiddle
in
Element.el
    [ backgroundColor
        |> Palette.setContrasting True
        |> Palette.toElementColor
        |> Element.Font.color
    , backgroundColor
        |> Palette.toElementColor
        |> Element.Background.color
    ]
<|
    Element.text "Hello World!"

Transforms a Palette.Color into a CSS-compatible parameter.

Palette.color tonePrimary brightnessMiddle
    |> Palette.toCssColor
    |> Html.Attributes.style "font-color"