# 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](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-MWQ_vh4F5ruFUX2_Z5-%2F-MWQcHEgRhBj89UPBGc7%2FScreen%20Shot%202021-03-22%20at%201.29.24%20PM.png?alt=media\&token=1953633d-e7f7-4b72-ab76-018878c59cb7)

## 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