# Customize the subscription form widget

By default, the subscription form widget uses a neutral style that works on most pages. After you add the [embed code](/product/audience-data-and-segmentation/subscription-forms/create-subscription-forms/#copy-the-embed-code-and-add-it-to-your-site), you can match it to your site's visual identity by setting CSS custom properties on the pushwoosh-subscribe-widget element. The values in the tables below replace the defaults.

<Aside type="caution" icon="setting" title="Developer assistance needed">
You might need assistance from your development team to apply these widget style changes on your website.
</Aside>

## Customize colors

| Variable | Description | Default |
| --- | --- | --- |
| `--esw-primary-color` | Primary color for buttons, links, and accents | `#0E72E5` |
| `--esw-primary-hover` | Primary elements hover color | `#1A85FF` |
| `--esw-text-color` | Main text color | `#4B5057` |
| `--esw-text-secondary` | Secondary text (placeholders, captions) | `#969CA3` |
| `--esw-background` | Widget background | `#FFFFFF` |
| `--esw-surface-color` | Surface color (hovers, secondary background) | `#F7F9FA` |
| `--esw-border-color` | Border color | `#DCE1E5` |
| `--esw-border-color-focus` | Border color in focus state | `#0E72E5` |
| `--esw-error-color` | Error color | `#E52E59` |
| `--esw-success-color` | Success color | `#479900` |
| `--esw-success-bg` | Success message background | `#F7F9FA` |

## Typography

| Variable | Description | Default |
| --- | --- | --- |
| `--esw-font-family` | Font family | `Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` |
| `--esw-font-size-base` | Base font size | `14px` |
| `--esw-font-size-title` | Title font size | `18px` |
| `--esw-font-size-label` | Field label font size | `12px` |
| `--esw-font-size-small` | Small text (errors, notes) | `12px` |
| `--esw-font-weight-regular` | Regular weight | `400` |
| `--esw-font-weight-medium` | Medium weight | `500` |
| `--esw-font-weight-bold` | Bold weight | `700` |
| `--esw-line-height-base` | Base line height | `1.4` |
| `--esw-line-height-title` | Title line height | `1.2` |

## Sizes and spacing

| Variable | Description | Default |
| --- | --- | --- |
| `--esw-input-height` | Input field height | `36px` |
| `--esw-button-height` | Button height | `36px` |
| `--esw-spacing-xs` | Extra small spacing | `4px` |
| `--esw-spacing-sm` | Small spacing | `8px` |
| `--esw-spacing-md` | Medium spacing | `16px` |
| `--esw-spacing-lg` | Large spacing | `24px` |
| `--esw-popup-width` | Modal width | `380px` |
| `--esw-popup-max-width` | Modal max width | `90vw` |

## Appearance

| Variable | Description | Default |
| --- | --- | --- |
| `--esw-border-radius` | Corner radius for elements | `4px` |
| `--esw-border-radius-popup` | Modal corner radius | `8px` |
| `--esw-shadow-popup` | Modal box shadow | `0 0 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.1)` |

## Examples

<Tabs>
<TabItem label="CSS">

```css
pushwoosh-subscribe-widget {
  --esw-primary-color: #ff6b6b;
  --esw-border-radius: 12px;
  --esw-font-family: "Inter", sans-serif;
}
```

</TabItem>
<TabItem label="Style attribute">

```html
<pushwoosh-subscribe-widget
  formCode="YOUR_FORM_CODE"
  style="--esw-primary-color: #ff6b6b; --esw-border-radius: 12px;"
></pushwoosh-subscribe-widget>
```

</TabItem>
</Tabs>