# For Designers

{% hint style="info" %}
**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.
{% endhint %}

## Theme colors

{% tabs %}
{% tab title="Swissbatt" %}

```css
 /* 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;
}


```

{% endtab %}

{% tab title="Voltimax" %}

```scss
/* 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;
}

```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.meetjoshi.com/use-cases/for-designers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.