The colors behind data-color. Use them with Designsystemet.color.

Your theme decides which colors exist. A theme built at theme.designsystemet.no has neutral, usually accent, your brand colors and the four severity colors, so custom takes any name. Keep those names in one module so a typo can only happen once:

module Theme exposing (brand, highlight)


import Designsystemet.Color as Color exposing (Color)


brand : Color
brand =
    Color.custom "brand1"

Theme colors

Severity colors

Some components, such as Alert, only make sense in a severity color. They take a Severity instead of a Color, so they can't get a color the CSS doesn't style.

Conversion