> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.ordergroove.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.ordergroove.com/_mcp/server.

# Customizing Cancel Flow Styling

The cancel flow renders inside a shadow DOM host, so — like other Ordergroove web components — most of its styles are scoped and can only be customized through the CSS custom properties (variables) it exposes. Each variable has a built-in default, so setting none of them still renders a fully styled flow.

---

## On Subscription Manager

If your cancel flow runs on a Subscription Manager page — that is, an `<og-smi>` element is present — you don't need to do anything extra. Subscription Manager's theme editor already sets `--og-smi-*` custom properties on `<og-smi>` for whatever you've configured as your theme's Basic Mode colors and fonts, and the cancel flow picks those up automatically since it mounts inside `<og-smi>`.

## On a headless or custom page

If you're [embedding the cancel flow outside of Subscription Manager](/lifecycle/sm/cancel-flow-headless), none of Subscription Manager's theme settings apply, since there's no `<og-smi>` element for them to be set on. The cancel flow instead falls back to its hardcoded default values unless you set the same custom properties yourself on `#og-cancel-flow-container` or an ancestor element.

---

## Basic knobs

These variable names match the Basic Mode knobs available in Subscription Manager's theme editor, so if you already know your theme's colors, you can reuse the same values here:

| Variable                                 | Description                                                 |
| ---------------------------------------- | ----------------------------------------------------------- |
| `--og-smi-font-family`                   | Font family used throughout the cancel flow                 |
| `--og-smi-font-color`                    | Default text color                                          |
| `--og-smi-color-disabled`                | Color used for disabled state text                          |
| `--og-smi-color-button-primary-bg`       | Background color of primary (e.g. "Continue") buttons       |
| `--og-smi-color-button-primary-font`     | Text color of primary buttons                               |
| `--og-smi-color-button-secondary-bg`     | Background color of secondary buttons                       |
| `--og-smi-color-button-secondary-font`   | Text color of secondary buttons                             |
| `--og-smi-color-button-secondary-border` | Border color of secondary buttons                           |
| `--og-smi-button-secondary-border-width` | Border width of secondary buttons                           |
| `--og-smi-color-button-tertiary-bg`      | Background color of tertiary (e.g. text-link style) buttons |
| `--og-smi-color-button-tertiary-font`    | Text color of tertiary buttons                              |
| `--og-smi-color-button-tertiary-border`  | Border color of tertiary buttons                            |
| `--og-smi-button-tertiary-border-width`  | Border width of tertiary buttons                            |

```css
#og-cancel-flow-container {
  --og-smi-font-family: 'DM Sans', sans-serif;
  --og-smi-font-color: #17132f;
  --og-smi-color-disabled: #46547c;
  --og-smi-color-button-primary-bg: #39355b;
  --og-smi-color-button-primary-font: #ffffff;
  --og-smi-color-button-secondary-bg: #eeeef0;
  --og-smi-color-button-secondary-font: #39355b;
  --og-smi-color-button-secondary-border: #39355b;
  --og-smi-button-secondary-border-width: 0px;
  --og-smi-color-button-tertiary-bg: transparent;
  --og-smi-color-button-tertiary-font: #17132f;
  --og-smi-color-button-tertiary-border: #39355b;
  --og-smi-button-tertiary-border-width: 0px;
}
```

---

## Additional style variables

Beyond the basic knobs above, a few more variables cover the dialog container itself and its status colors:

| Variable                         | Description                                                    |
| -------------------------------- | -------------------------------------------------------------- |
| `--og-smi-container-background`  | Background color of the cancel flow dialog                     |
| `--og-smi-dialog-max-width`      | Maximum width of the cancel flow dialog                        |
| `--og-smi-border-radius-sm`      | Corner radius used on smaller elements (e.g. cards)            |
| `--og-smi-border-radius-md`      | Corner radius used on larger elements (e.g. the dialog itself) |
| `--og-smi-color-order-highlight` | Background color used to highlight order details               |
| `--og-smi-color-error`           | Text color for error and validation messages                   |

```css
#og-cancel-flow-container {
  --og-smi-container-background: #ffffff;
  --og-smi-dialog-max-width: 525px;
  --og-smi-border-radius-sm: 8px;
  --og-smi-border-radius-md: 20px;
  --og-smi-color-order-highlight: #f4f7fe;
  --og-smi-color-error: #d14343;
}
```

These aren't the complete set of `--og-smi-*` variables the cancel flow reads — they're the ones most likely to matter for basic theming. Reach out to Ordergroove if you need to customize something not listed here.