🎨For Designers

This guide provides overall outlook of design approach

Good to know: There are two themes Swissbatt24 and Voltimax. A lot of the designs are derived from swissbatt24. as a result, I have given two themes colors code in below snippets. find responsible color codes based on your websites preferences.

Theme colors

Swissbatt

 /* Theme Colours */
:style-swissbatt24{
   /* Primary Colour */
  --primary-color: #fd6565;
  
  /* Secondary Colour */
  --secondary-color: #f0f0f0;
  
  /* Border Colour */
  --border-color: #f0f0f0;
  
  /* Background Colour */
  --background-color: #fff;
  
  /* Status Messages */
  /* Success */
  --success-color: #3cc261;
  
  /* Information */
  --info-color: #26b6cf;
  
  /* Notice */
  --notice-color: #ffbd5d;
  
  /* Error */
  --error-color: #e52427;
  
  /* Typography */
  /* Font type Text */
  --font-text: "TT Mussels", sans-serif;
  
  /* Text Colour */
  --text-color: #474747;
  
  /* Font type Headline */
  --font-headline: "TT Mussels", sans-serif;
  
  /* Headline Colour */
  --headline-color: #2A5B66;
  
  /* E-Commerce */
  /* Price */
  --price-color: #474747;
  
  /* Buy Button */
  --buy-button-color: #fd6565;
  
  /* Buy Button Text */
  --buy-button-text-color: #fff;
}

/* Example usage */

/* Set the background color */
body {
  background-color: #fff;
}

/* Set the primary color for a button */
button {
  background-color: #fd6565;
}

/* Set the font family and color for text */
p {
  font-family: "TT Mussels", sans-serif;
  color: #474747;
}

/* Set the font family, color, and background for a headline */
h1 [any h element] {
  font-family: "TT Mussels", sans-serif;
  color: #2A5B66;
  background-color: #f0f0f0;
}

/* Set the color for a success message */
.success {
  color: #3cc261;
}

/* Set the color for an error message */
.error {
  color: #e52427;
}

/* Set the color for a buy button */
.buy-button {
  background-color: #fd6565;
  color: #fff;
}

Voltimax

/* Theme Colours */
:style-voltimax {
  /* Primary Colour */
  --primary-color: #F3B664;
  
  /* Secondary Colour */
  --secondary-color: #f0f0f0;
  
  /* Border Colour */
  --border-color: #f0f0f0;
  
  /* Background Colour */
  --background-color: #fff;
  
  --background-dark-color: #2F4858;
  
  /* Status Messages */
  /* Success */
  --success-color: #3cc261;
  
  /* Information */
  --info-color: #26b6cf;
  
  /* Notice */
  --notice-color: #ffbd5d;
  
  /* Error */
  --error-color: #e52427;
  
  /* Typography */
  /* Font type Text */
  --font-text: "TT Mussels", sans-serif;
  
  /* Text Colour */
  --text-color: #474747;
  
  /* Font type Headline */
  --font-headline: "TT Mussels", sans-serif;
  
  /* Headline Colour */
  --headline-color: #21656F;
  
  /* E-Commerce */
  /* Price */
  --price-color: #474747;
  
  /* Buy Button */
  --buy-button-color: #F3B664;
  
  /* Buy Button Text */
  --buy-button-text-color: #474747;
}

/* Example usage */

/* Set the background color */
body {
  background-color: #fff;

}

/* Set the primary color for a button */
button {
  background-color: #F3B664;
}

/* Set the font family and color for text */
p {
  font-family: "TT Mussels", sans-serif;
  color: #474747;
}

/* Set the font family, color, and background for a headline */
h1 [any h element] {
  font-family: "TT Mussels", sans-serif;
  color: #21656F;
}

/* Set the color for a success message */
.success {
  color: #3cc261;
}

/* Set the color for an error message */
.error {
  color: #e52427;
}

/* Set the color for a buy button */
.buy-button {
  background-color: #F3B664;
  color: #474747;
}