Shorthand for the primary tone with dark brightness

Shorthand for the default primary tone

Shorthand for the primary tone with light brightness

Shorthand for the primary tone with light brightness

Shorthand for the primary tone with light brightness

Shorthand for the primary tone with light brightness

Shorthand for the success tone with dark brightness

Shorthand for the default success tone

Shorthand for the success tone with light brightness

Shorthand for the success tone with light brightness

Shorthand for the success tone with light brightness

Shorthand for the success tone with light brightness

Shorthand for the success danger tone with dark brightness

Shorthand for the default danger tone

Shorthand for the danger tone with light brightness

Shorthand for the danger tone with light brightness

Shorthand for the danger tone with light brightness

Shorthand for the danger tone with light brightness

Shorthand for the danger warning with dark brightness

Shorthand for the default warning

Shorthand for the warning with light brightness

Shorthand for the warning with light brightness

Shorthand for the warning with light brightness

Shorthand for the warning with light brightness

Shorthand for the gray tone with dark brightness

Shorthand for the default gray tone

Shorthand for the gray tone with light brightness

Shorthand for the gray tone with light brightness

Shorthand for the gray tone with light brightness

Shorthand for the gray tone with light brightness

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 greatly 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"