Volusion | Styleguide

Primary Palette

#2196F3 blue
#8268FC purple
#4FD0E3 turquoise / teal
#FFC53A yellow
#EB3569 pink
#3BD2A2 green
#E62A10 red / error
#607D8B blue-grey
#181432 rich-purple

Full Palette

#E3F2FD blue lighten-5
#BBDEFB blue lighten-4
#90CAF9 blue lighten-3
#64B5F6 blue lighten-2
#42A5F5 blue lighten-1
#2196F3 blue base
#1E88E5 blue darken-1
#1976D2 blue darken-2
#1565C0 blue darken-3
#0D47A1 blue darken-4
#82B1FF blue a-100
#448AFF blue a-200
#2979FF blue a-400
#2962FF blue a-700
#F0EDFF purple lighten-5
#DAD2FE purple lighten-4
#C1B4FE purple lighten-3
#A895FD purple lighten-2
#957FFC purple lighten-1
#8268FC purple base
#7A60FC purple darken-1
#6F55FB purple darken-2
#654BFB purple darken-3
#523AFA purple darken-4
#B388FF purple a-100
#7C4DFF purple a-200
#651FFF purple a-400
#6200EA purple a-700
#EAF9FC turquoise lighten-5
#CAF1F7 turquoise lighten-4
#A7E8F1 turquoise lighten-3
#84DEEB turquoise lighten-2
#69D7E7 turquoise lighten-1
#4FD0E3 turquoise base
#48CBE0 turquoise darken-1
#3FC4DC turquoise darken-2
#36BED8 turquoise darken-3
#26B3D0 turquoise darken-4
#84FFFF turquoise a-100
#18FFFF turquoise a-200
#00E5FF turquoise a-400
#00B8D4 turquoise a-700
#FFF8E7 yellow lighten-5
#FFEEC4 yellow lighten-6
#FFE29D yellow lighten-3
#FFD675 yellow lighten-2
#FFCE58 yellow lighten-1
#FFC53A yellow base
#FFBF34 yellow darken-1
#FFB82C yellow darken-2
#FFB025 yellow darken-3
#FFA318 yellow darken-4
#FFE57F yellow a-100
#FFD740 yellow a-200
#FFC400 yellow a-400
#FFAB00 yellow a-700
#FDE7ED pink lighten-5
#F9C2D2 pink lighten-4
#F59AB4 pink lighten-3
#F17296 pink lighten-2
#EE5380 pink lighten-1
#EB3569 pink base
#E93061 pink darken-1
#E52856 pink darken-2
#E2224C pink darken-3
#D91741 pink darken-4
#FF80AB pink a-100
#FF4081 pink a-200
#F50057 pink a-400
#C51162 pink a-700
#E7FAF4 green lighten-5
#C4F2E3 green lighten-4
#9DE9D1 green lighten-3
#76E0BE green lighten-2
#58D9B0 green lighten-1
#3BD2A2 green base
#35CD9A green darken-1
#2DC790 green darken-2
#26C186 green darken-3
#19B675 green darken-4
#B9F6CA green a-100
#69F0AE green a-200
#00E676 green a-400
#00C853 green a-700
#FDE0DB red / error lighten-5
#FABEBA red / error lighten-4
#F79A84 red / error lighten-3
#F46F5A red / error lighten-2
#E95337 red / error lighten-1
#E62A10 red / error base
#DE2706 red / error darken-1
#D12400 red / error darken-2
#C52100 red / error darken-3
#B11D00 red / error darken-4
#FF7E96 red / error a-100
#FF5975 red / error a-200
#FF3C6E red / error a-400
#E11D2A red / error a-700
#E4E4E8 blue-grey lighten-5
#CFD8DC blue-grey lighten-4
#B0BEC5 blue-grey lighten-3
#90A4AE blue-grey lighten-2
#78909C blue-grey lighten-1
#607D8B blue-grey base
#546E7A blue-grey darken-1
#455A64 blue-grey darken-2
#37474F blue-grey darken-3
#263238 blue-grey darken-4
#211C41 rich-purple lighten-1
#181432 rich-purple base
#14112A rich-purple darken-1
#0B091C rich-purple darken-2
#FAFAFA grey lighten-5
#F5F5F5 grey lighten-4
#EEEEEE grey lighten-3
#E0E0E0 grey lighten-2
#BDBDBD grey lighten-1
#9E9E9E grey base
#757575 grey darken-1
#616161 grey darken-2
#757575 grey darken-3
#212121 grey darken-4

#000000 black

#ffffff white

#ffffff 85% trans-white

N/A transparent

Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.

Color

Background


                    .pink

                    .purple

                    .blue

                    
                    .turquoise

                    .green

                    .yellow

                    .red

                    .error

                    .grey

                    .blue-grey

                    .rich-purple

Darken/lighten


                    .lighten-5*

                    .lighten-4*

                    .lighten-3*

                    .lighten-2*

                    .darken-1

                    .darken-2*

                    .darken-3*

                    .darken-4*

                    .darken-5*

                    .a-100*

                    .a-200*

                    .a-400*

                    .a-700*

Text


                    .text-pink

                    .text-purple

                    .text-blue

                    
                    .text-turquoise

                    .text-green

                    .text-yellow

                    .text-red

                    .text-error

                    .text-grey

                    .text-blue-grey

                    .text-rich-purple

Darken/lighten


                    .text-lighten-5*

                    .text-lighten-4*

                    .text-lighten-3*

                    .text-lighten-2

                    .text-lighten-1

                    .text-darken-1

                    .text-darken-2*

                    .text-darken-3*

                    .text-darken-4*

                    .text-darken-5*

                    .text-a-100*

                    .text-a-200*

                    .text-a-400*

                    .text-a-700*

Border


                    .border-pink

                    .border-purple

                    .border-blue

                    
                    .border-turquoise

                    .border-green

                    .border-yellow

                    .border-red

                    .border-error

                    .border-grey

                    .border-blue-grey

                    .border-rich-purple

Darken/lighten


                    .border-lighten-5*

                    .border-lighten-4*

                    .border-lighten-3*

                    .border-lighten-2*

                    .border-lighten-1

                    .border-darken-1

                    .border-darken-2*

                    .border-darken-3*

                    .border-darken-4*

                    .border-darken-5*

                    .border-a-100*

                    .border-a-200*

                    .border-a-400*

                    .border-a-700

Background Color

To apply a background color, just add the color name and light/darkness as a class to the element.

This is a card panel with a turquoise lighten-1 class


                    <div class="card-panel turquoise lighten-1">
                      This is a card panel with a turquoise lighten-2 class
                    </div>

Text Color

To apply a text color, just prepend text- to the color class like this:

This is a card panel with dark green text


                    <div class="card-panel">
                      <span class="text-green text-darken-1">This is a card panel with dark green text</span>
                    </div>

Border Color

To apply a border color, use the .border class and prepend border- to the color class like this:

This is a div with light blue border


                    <div class="card-panel">
                      <span class="border border-blue border-lighten-1">This is a card panel with a light blue border</span>
                    </div>

This is a div with .border-pink .border-top

This is a div with .border-pink .border-right

This is a div with .border-pink .border-bottom

This is a div with .border-pink .border-left

This is a div with .border-pink .border-top-bottom

This is a div with .border-pink .border-left-right

This is a div with .border-pink .border-none


                    <div class="card-panel">
                      <span class="border border-blue border-top border-lighten-1">This is a card panel with a light blue top border</span>
                    </div>

Hex color

Variable


                    $vol-pink

                    $vol-purple

                    $vol-blue

                    
                    $vol-turquoise

                    $vol-green

                    $vol-yellow

                    $vol-grey

                    $vol-blue-grey

                    $vol-rich-purple

Sass


                    color("pink", "base");

                    color("purple", "base");

                    color("blue", "base");

                    color("turquoise", "base");

                    
                    color("green", "base");

                    color("yellow", "base");

                    color("grey", "base");

                    color("blue-grey", "base");

                    color("rich-purple", "base");

Darken/Lighten Options


                    lighten-5*

                    lighten-4*

                    lighten-3*

                    lighten-2

                    lighten-1

                    base

                    darken-1

                    darken-2*

                    darken-3*

                    darken-4*

                    darken-5*

                    a-100*

                    a-200*

                    a-400*

                    a-700*

To reference basic varaibles, pass in the variable name with the prefix $vol-.


                  .pink-text {color: $vol-pink;}

To use dynamic variables, pass in a color and a lightness or darkness amount


                .dark-pink-text {color: color("pink", "darken-1");}

For background colors, you can apply the color simply by extending the classes like the example below.


                .ilike-blue-container {@extend .blue, .lighten-4;}

For changing text color, you can apply the color simply by extending the classes like the example below.


                .ilike-blue-container {@extend .blue-text, .text-lighten-4;

Color Palette

Primary Palette

Full Palette

Usage

Color

Background

Text

Border

Background Color

Text Color

Border Color

Sass