Open mobile / desktop to see differences

    // Sinch colors
    $primary-color: $TR-50;
    $primary-emphasis: $TR-10;

    $secondary-color: $HO-35; // keeping them for backwards compatibility with MM
    $secondary-emphasis: $HO-40; // keeping them for backwards compatibility with MM

    $tertiary-color: $OC-90; // dark blue

    $success-color: $TR-05;

    $danger-color: $HO-05;
    $danger-emphasis: $HO-10;

    $warning-color: $RA-05; 
    $warning-emphasis: $RA-10; 

    $info-color: $OC-05; 
    $info-emphasis: $OC-10; 

    $light-color: $NE-10; // swapping these around since light-emphasis is not used anywhere currently
    $light-emphasis: $NE-05; 

    $dark-color: $NE-90;
    $body-color: $NE-70;

    $body-emphasis: $NE-100;

    $muted-color: $body-color;

    $special-hover: #a1d5f5; // is this needed? 

    $border-color: #D6D6D6; // is this needed? is it correct? 
    $background-color: $light-color; 
    

    //SPACERS
    // Mostly used in elements
    $spacer-2 : ($spacer * 0.5); // 8px
    $spacer-3 : ($spacer); // 16px
    $spacer-4 : ($spacer * 1.5); // 24px
    $spacer-5 : ($spacer * 2 ); // 32px

    // Mostly used in sections
    $spacer-6 : ($spacer * 2.5 ); // 40px
    $spacer-7 : ($spacer * 3); // 48px
    $spacer-9 : ($spacer * 4); // 64px

    // custom spacing (not added to $spacers object)
    $spacer-10 : ($spacer * 5); // 80px
    $spacer-14 : ($spacer * 7.5); // 120px

    // Rarely used extra spacings
    $spacer-1 : ($spacer * 0.25); // 4px
    $spacer-8 : ($spacer * 3.5); // 56px
    $spacer-11 : ($spacer * 6); // 96px
    $spacer-12 : ($spacer * 6.5); // 104px
    $spacer-13 : ($spacer * 7); // 112px


    // Used as a custom spacing for sections only
    $spacer-sec-1 : $spacer-10;
    $spacer-sec-2 : ($spacer * 7.5);

    // Buttons
    .btn-secondary {
        @include button-variant($secondary-color, // background
        $secondary-color, // border
        $dark-color, // color
        $HO-30, // hover  bg
        $HO-30, // hover border
        $dark-color, // hover color
        $secondary-emphasis, // active bg
        $secondary-emphasis, //active border
        $dark-color, // active color
        );
    }

    .btn-outline-secondary {
        @include button-variant(transparent, // background
        $secondary-color, // border
        $dark-color, // color
        rgba(#fff, 0.8), // hover  bg
        $HO-30, // hover border
        $dark-color, // hover color
        rgba(9, 14, 18, 0.08), // active bg
        $secondary-emphasis, //active border
        $dark-color, // active color
        );
    }
    

Secondary Secondary large Secondary outline Secondary outline large

Secondary outline Secondary outline large

Button Arrow
Button Arrow lead / body2
Button Arrow text-small / body3

Primary text

Body text

Dark text

Heading color

Muted text

Link

Heading 1

Heading 2

Heading 3

Heading 3 bold

Heading 4

Heading 4 bold

Heading 5 bold

Heading 6

Body1 (normal)

Body1 (bold)

Body 2 (normal) = lead

Body 2 (bold) = lead + fw-bold

Body3 (normal) = text-small

Body3 (bold) = text-small + fw-bold

Caption 1 = small or .small

Caption 1 = small or .small

Spacings (exemplified with a bg-light background and only padding bottom) Custom spacings (the defined ones are used for sections, and the rest need to be custom coded in when needed)