---
title: "Styling | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/styling/"
---

# Styling

> The Handy Editor uses CSS variables to change its appearance and fit the styles of your product page.

The Handy Editor uses CSS variables to customize its appearance and integrate seamlessly with your product's design system. These variables define a "theme" for the editor, allowing you to override semantic elements such as colors, typography, and layout.

This article describes how to customize the Handy Editor using CSS variables, including best practices and examples.

## Customizing the editor with CSS variables

To override the editor's default styles, add a `<style>` tag to your HTML or link an external stylesheet using `<link>`. Define your CSS variables in the `:root` selector.

```css
:root {
  /* Colors */
  --he-color-primary: #2450ff; /* Brand color for buttons, grips, etc. */
  --he-color-primary-hover: #1d4ed8; /* Brand color on hover */
  --he-color-primary-active: #1e40af; /* Brand color when active */
  --he-color-primary-contrast: #ffffff; /* Contrast color for primary elements (e.g., button text) */
  --he-color-warning: #ff7b00; /* Warnings */
  --he-color-danger: #dc2626; /* Errors */
  --he-color-background: #ffffff; /* Background color for panels and elements */
  --he-color-shadow: #00000029; /* Shadow color */

  /* Typography */
  --he-font-family: Inter; /* Font for all text elements */

  /* Buttons */
  --he-buttons-border-radius: 24px; /* Border radius for buttons */

  /* Headings */
  --he-heading-1-font-size: 32px;
  --he-heading-1-font-weight: 600;
  --he-heading-1-line-height: 40px;

  /* Panels, Dialogs*/
  --he-heading-2-font-size: 18px;
  --he-heading-2-font-weight: 600;
  --he-heading-2-line-height: 24px;

  /* Drop-down menus in the properties panel */
  --he-heading-3-font-size: 16px;
  --he-heading-3-font-weight: 600;
  --he-heading-3-line-height: 24px;

  /* Body Text */
  --he-body-font-size: 14px;
  --he-body-line-height: 20px;
  --he-body-font-weight-regular: 400;
  --he-body-font-weight-medium: 500;
  --he-body-font-weight-bold: 600;

  /* Captions, Labels */
  --he-caption-font-size: 12px;
  --he-caption-line-height: 16px;
  --he-caption-font-weight-regular: 400;
  --he-caption-font-weight-medium: 500;

  /* Viewer Selection */
  --he-viewer-items-selection-border-width: 2px;
  --he-viewer-items-selection-grips-size: 12px;
  --he-viewer-items-selection-grips-background: #ffffff;
  --he-viewer-items-selection-rotate-grip-size: 24px;

  /* Interactive Zones */
  --he-viewer-interactive-zone-border-width: 2px;
  --he-viewer-interactive-zone-label-font-size: 11px;
  --he-viewer-interactive-zone-label-color: #ffffff;
  --he-viewer-interactive-zone-color-active: #00b400;
  --he-viewer-interactive-zone-color-hover: #0000ff;

  /* Print Area */
  --he-viewer-print-area-color-default: #ff00ff; /* Color control */
  --he-viewer-print-area-step-default: 8px; /* Dashed line step */
  --he-viewer-print-area-width-default: 1px; /* Line width */
  --he-viewer-print-area-alt-color-default: #00000000; /* Alternative color */
  --he-viewer-print-area-visible: visible; /* Visibility control */

  /* Max Artwork Frame */
  --he-viewer-artwork-frame-color: #FBCA4C;
  --he-viewer-inner-artwork-frame-dash: 5px 2px;
  --he-viewer-artwork-frame-label: visible;
  --he-viewer-artwork-oversize-frame-color: #DC2626;

  /* Overlay */
  --he-overlay-z-index: 1000; /* z-index for editor overlays */
}
```

:::note
If a variable is not defined, the editor will use its default value. For **Design Atoms Viewer**, ensure variables are defined **before** the editor initializes. For best results, embed CSS variables directly in the `<style>` tag.
:::

## Available CSS Variables

### Colors

| Variable | Description | Default Value |
|----------|-------------|---------------|
| `--he-color-primary` | Brand color for buttons, highlights, etc. | `#2450ff` |
| `--he-color-primary-hover` | Brand color on hover | `#1d4ed8` |
| `--he-color-primary-active` | Brand color when active | `#1e40af` |
| `--he-color-primary-contrast` | Contrast color for primary elements | `#ffffff` |
| `--he-color-warning` | Warning color | `#ff7b00` |
| `--he-color-danger` | Error color | `#dc2626` |
| `--he-color-background` | Background color for panels and elements | `#ffffff` |
| `--he-color-shadow` | Shadow color | `#00000029` |

### Typography

| Variable | Description | Default Value |
|----------|-------------|---------------|
| `--he-font-family` | Font for all text elements | `Inter` |
| `--he-heading-1-font-size` | Font size for H1 | `32px` |
| `--he-heading-1-font-weight` | Font weight for H1 | `600` |
| `--he-heading-1-line-height` | Line height for H1 | `40px` |
| `--he-body-font-size` | Font size for body text | `14px` |
| `--he-body-line-height` | Line height for body text | `20px` |

### Buttons

| Variable | Description | Default Value |
|----------|-------------|---------------|
| `--he-buttons-border-radius` | Border radius for buttons | `24px` |

### Viewer Selection

| Variable | Description | Default Value |
|----------|-------------|---------------|
| `--he-viewer-items-selection-border-width` | Border width for selected items | `2px` |
| `--he-viewer-items-selection-grips-size` | Size of selection grips | `12px` |

### Interactive Zones

| Variable | Description | Default Value |
|----------|-------------|---------------|
| `--he-viewer-interactive-zone-border-width` | Border width for interactive zones | `2px` |
| `--he-viewer-interactive-zone-label-font-size` | Font size for zone labels | `11px` |

### Print Area

| Variable | Description | Default Value |
|----------|-------------|---------------|
| `--he-viewer-print-area-color-default` | Color for the print area border | `#ff00ff` |
| `--he-viewer-print-area-step-default` | Step size for the dashed line | `8px` |
| `--he-viewer-print-area-width-default` | Thickness of the print area border | `1px` |
| `--he-viewer-print-area-alt-color-default` | Alternative color for the border | `#00000000` |
| `--he-viewer-print-area-visible` | Visibility of the print area | `visible` |

### Max Artwork Frame

| Variable | Description | Default Value |
|----------|-------------|---------------|
| `--he-viewer-artwork-frame-color` | Color for the max artwork frame | `#FBCA4C` |
| `--he-viewer-inner-artwork-frame-dash` | Dash pattern for the inner artwork frame | `5px 2px` |
| `--he-viewer-artwork-frame-label` | Visibility of the artwork frame label | `visible` |
| `--he-viewer-artwork-oversize-frame-color` | Color for the oversize artwork frame | `#DC2626` |

### Overlay

| Variable | Description | Default Value |
|----------|-------------|---------------|
| `--he-overlay-z-index` | z-index for editor overlays | `1000` |

## How to use CSS variables

### 1. Embed in HTML

Add CSS variables directly in a `<style>` tag:

```html
<style>
  :root {
    --he-color-primary: #3b82f6;
    --he-font-family: "Segoe UI";
  }
</style>
```

### 2. External CSS file

Link an external stylesheet:

```html
<link rel="stylesheet" href="path/to/editor-theme.css">
```

### 3. Adaptive design

Use `media` queries to adjust variables for different screen sizes:

```css
@media (max-width: 768px) {
  :root {
    --he-heading-1-font-size: 24px;
  }
}
```

### 4. Dynamic updates with JavaScript

Modify variables at runtime:

```javascript
document.documentElement.style.setProperty(
  '--he-color-primary',
  '#10b981'
);
```

## Best practices

- **Define variables before editor initialization** to avoid default fallbacks.
- **Use semantic names** for variables (e.g., `--he-color-primary` instead of `--color-blue`).
- **Test responsive behavior** with `media` queries.
- **Avoid overriding internal class names** unless necessary, as they may change in future updates.
- **Use [slots](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/slots.md)** to add custom HTML code. This allows you to customize both the appearance and the functionality of the editor.