---
title: Theme tokens
description: Match the editor to your app by changing its colors, spacing, corners and font with CSS custom properties on the mail-quilt element.
---

The editor draws everything it owns from tokens: the workspace around the email, the side panel, the toolbars on the canvas and the tooltips. Each token is a CSS custom property whose name starts with `--mq-`. Set one on the `<mail-quilt>` element, and the editor uses your value instead of its default.

```css title="styles.css"
mail-quilt {
  --mq-font-family: "Inter", system-ui, sans-serif;
  --mq-color-accent: #7c3aed;
  --mq-color-accent-strong: #6d28d9;
  --mq-color-accent-soft: rgb(124 58 237 / 10%);
  --mq-color-outline-hover: rgb(124 58 237 / 45%);
  --mq-radius: 12px;
}
```

The React component renders the same `<mail-quilt>` element, so the same selector works there. On a [Shell](/docs/shell), set them on `<mail-quilt-shell>` instead. Its header and messages use them, and so does the editor inside it.

The frame around the editor, with its corners and its 1px ring, is the `frame` part. To change it beyond the tokens, style `mail-quilt::part(frame)`, such as `border-radius: 0` for an editor that fills a panel edge to edge.

The editor doesn't take its color, font or background from your page, so it looks the same on a light page and a dark one until you change a token. The defaults below are a light theme. If you set darker colors, check that text stays readable against them.

The email itself never uses these tokens. The card in the middle of the canvas shows the email's own background color, font and width, which people change in the side panel's Settings tab, so it looks the way it will when it's sent.

## Font

| Token | Default | What it changes |
| --- | --- | --- |
| `--mq-font-family` | `system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif` | The font of every control, label and tooltip. |
| `--mq-font-size` | `13px` | The size of text in the panel, the fields and the buttons. |
| `--mq-font-size-small` | `12px` | Hints, field descriptions, a Block's place under its name, an empty Column's placeholder, the names on tiles and thumbnails, and tooltips. |

## Colors

| Token | Default | What it changes |
| --- | --- | --- |
| `--mq-color-workspace` | <span class="site-swatch" style={{ background: "#eeeff1" }} />`#eeeff1` | The background around the email card. |
| `--mq-color-surface` | <span class="site-swatch" style={{ background: "#ffffff" }} />`#ffffff` | The side panel, the toolbars, the selected tab, fields, tiles and an empty Column's placeholder. |
| `--mq-color-surface-muted` | <span class="site-swatch" style={{ background: "#f5f6f7" }} />`#f5f6f7` | Disabled fields, layout thumbnails and the circle behind an empty Column's plus. |
| `--mq-color-surface-hover` | <span class="site-swatch" style={{ background: "#eceef0" }} />`#eceef0` | The track behind the tabs, and a button under the pointer. |
| `--mq-color-text` | <span class="site-swatch" style={{ background: "#16181d" }} />`#16181d` | Text and icons, the tag of the selected Block or Row, the selected Block's toolbar, and the badge in the side panel. |
| `--mq-color-text-muted` | <span class="site-swatch" style={{ background: "#5f6570" }} />`#5f6570` | Field labels, hints, descriptions, units, icons at rest and tabs that aren't selected. |
| `--mq-color-border` | <span class="site-swatch" style={{ background: "#e4e6ea" }} />`#e4e6ea` | The frame around the editor, borders around toolbars, tiles and tabs, the rules between groups of settings, and a lighter mix with `--mq-color-border-strong` for the side panel's edge. |
| `--mq-color-border-strong` | <span class="site-swatch" style={{ background: "#8b919b" }} />`#8b919b` | Field borders, mixed lighter at rest and in full under the pointer, an empty Column's placeholder, and a lighter mix around layout thumbnails. |
| `--mq-color-accent` | <span class="site-swatch" style={{ background: "#3355ff" }} />`#3355ff` | The outline of the selected Block or Row, the tag of one under the pointer, focus rings, the selected tab's icon, the drop line and highlighted drop targets. |
| `--mq-color-accent-strong` | <span class="site-swatch" style={{ background: "#2340d6" }} />`#2340d6` | The outline of a Block with keyboard focus, and the text and icons of pressed controls. |
| `--mq-color-accent-soft` | <span class="site-swatch" style={{ background: "rgb(51 85 255 / 10%)" }} />`rgb(51 85 255 / 10%)` | The background of pressed buttons, of a Block with keyboard focus and of the Column a drop will land in, the ring around a focused field, and layout thumbnails under the pointer. |
| `--mq-color-outline-hover` | <span class="site-swatch" style={{ background: "rgb(51 85 255 / 45%)" }} />`rgb(51 85 255 / 45%)` | The outline of a Block or Row under the pointer, and of Columns while a Block is dragged. |
| `--mq-color-on-accent` | <span class="site-swatch" style={{ background: "#ffffff" }} />`#ffffff` | Text on an accent background, such as a Block's tag and the link field's Apply button. |
| `--mq-color-danger` | <span class="site-swatch" style={{ background: "#c42b1c" }} />`#c42b1c` | Error messages, refused fields, and delete buttons under the pointer. |
| `--mq-color-tooltip` | <span class="site-swatch" style={{ background: "#16181d" }} />`#16181d` | The tooltip's background. |
| `--mq-color-on-tooltip` | <span class="site-swatch" style={{ background: "#f7f7f8" }} />`#f7f7f8` | The tooltip's text. |

## Spacing

| Token | Default | What it changes |
| --- | --- | --- |
| `--mq-space-1` | `4px` | The space between an empty Column's buttons, and other small gaps. |
| `--mq-space-2` | `8px` | The space between tiles, beside a Row and inside an empty Column. |
| `--mq-space-3` | `12px` | The padding around the side panel's tabs and header, and inside tiles. |
| `--mq-space-4` | `16px` | The padding of each group of settings, and how far the floating toolbar sits from the bottom of the window. |
| `--mq-space-5` | `24px` | The space between the email and the floating toolbar. |

## Corners and shadows

| Token | Default | What it changes |
| --- | --- | --- |
| `--mq-radius-small` | `6px` | The corners of icon buttons, tags and tooltips. |
| `--mq-radius` | `10px` | The corners of tiles, toolbars, the tabs, the type badge and the Preview. |
| `--mq-shadow-small` | `0 1px 2px rgb(22 24 29 / 8%)` | The shadow under a Block's drag handle, text buttons and a tile under the pointer. |
| `--mq-shadow` | `0 0 0 1px rgb(22 24 29 / 4%), 0 2px 4px rgb(22 24 29 / 4%), 0 12px 32px -8px rgb(22 24 29 / 14%)` | The shadow under toolbars, tooltips and the Preview. |