# Styling

## Styling from the Dashboard

Generally, you can customize the form's texts and colors from [Dashboard](https://dev.cotter.app) > Project > Design.

![Customize the design of your login form](/files/-MWQcHEgRhBj89UPBGc7)

## Adding your own CSS

{% hint style="success" %}
This is now available with **`signInWithOTP`**and **`signInWithLink`**
{% endhint %}

To style the form, add field `Styles` to the configuration and specify the CSS styling for each element. The styling accepts a JavaScript object with `camelCased` properties rather than a CSS string, for example:

```javascript
// You need to pass a `config` object instead of your `API_KEY_ID` to cotter:

// 1) Make a Config for adding Styles
var config = {
  ApiKeyID: "<your-API-KEY-ID>",
  Styles: {
    input_label: {
      fontFamily: "Roboto",
      fontSize: 15,
      color: "red",
      fontWeight: 700,
    },
    input_text_container_default: {
      backgroundColor: "#fce883",
      padding: "20px 60px",
    },
    input_text: {
      backgroundColor: "#fce883",
      fontFamily: "Roboto",
      fontSize: 20,
    },
    button_container: {
      borderRadius: 0,
    },
    button_text: {
      color: "aqua",
    },
  },
  
  // your other config...
}

// 2) Then pass the config to Cotter
var cotter = new Cotter(config); // 👈 Put the config in here
cotter
  .signInWithOTP()
  .showEmailForm()
  .then(payload => {})
  .catch(err => {});
```

You can find the element name by checking the `class` of the element you want to style. For reference, here are the elements that you can modify:

* `form_container`
* `loadingImg`
* `input_label`
* `verification_label`
* `pin_row`
* `pin_input`
* `verification_subtitle`
* `error`
* `input_row_container`
* `input_row`
* `input_text_container_default`
* `input_text`
* `input_text_container`
* `country_code`
* `country_code_blank`
* `input_text_p`
* `check_input`

#### Available Fonts

Not all fonts are available because the fonts are not loaded inside Cotter's form. These are the list of fonts that you can use:

* Roboto
* Lato
* Overpass
* Open Sans
* Akkurat
* Akkurat-Bold
* Poppins
* Inter


---

# 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.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/styling.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.