---
url: /api/css/visual-debug.md
---
# CSS: visual-debug

`.-with-visual-debug` — A layout-debugging outline: compound `.-with-visual-debug` onto any element to outline the box and its immediate children, so a layout's structure is visible at a glance.

**Group:** Plugins · **Source:** [visual-debug.css](https://github.com/thedannywahl/pantoken/blob/main/formats/components/src/utilities/visual-debug/visual-debug.css)

## Usage

```css
@import "@pantoken/plugin-visual-debug/visual-debug.css";
```

## Examples

```html
<div class="instui-view -with-visual-debug">
  <span>Outlined child.</span>
</div>
```

## Custom properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `--pantoken-visual-debug-color` | — | — | The outline colour (default a bright magenta); retint it to change every debug outline. |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-logo-canvas-horizontal-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-canvas-horizontal-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-canvas-horizontal-full-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-canvas-horizontal-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-canvas-icon-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-canvas-icon-current-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-canvas-icon-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-canvas-icon-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-canvas-stacked-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-canvas-stacked-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-canvas-stacked-full-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-canvas-stacked-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-igniteai-horizontal-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-igniteai-horizontal-full-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-igniteai-horizontal-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-igniteai-icon-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-igniteai-icon-current-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-igniteai-icon-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-igniteai-icon-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-horizontal-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-horizontal-full-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-horizontal-full-color-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-horizontal-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-icon-single-dot-current-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-icon-single-dot-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-icon-single-dot-full-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-icon-single-dot-full-color-bg` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-icon-single-dot-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-icon-single-dot-reversed-bg` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-icon-three-dot-current-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-icon-three-dot-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-icon-three-dot-full-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-icon-three-dot-full-color-bg` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-icon-three-dot-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-instructure-icon-three-dot-reversed-bg` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-learnplatform-horizontal-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-learnplatform-horizontal-full-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-learnplatform-horizontal-light` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-learnplatform-horizontal-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-learnplatform-icon-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-learnplatform-icon-current-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-learnplatform-icon-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-learnplatform-icon-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-mastery-horizontal-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-mastery-horizontal-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-mastery-horizontal-full-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-mastery-horizontal-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-mastery-icon-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-mastery-icon-current-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-mastery-icon-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-mastery-icon-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-mastery-stacked-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-mastery-stacked-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-mastery-stacked-full-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-mastery-stacked-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color-ar` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color-el` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color-fa` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color-he` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color-hi` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color-hy` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color-jp` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color-ko` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color-ru` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color-th` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color-uk` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-full-color-zh` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed-ar` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed-el` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed-fa` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed-he` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed-hi` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed-hy` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed-jp` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed-ko` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed-ru` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed-th` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed-uk` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-horizontal-reversed-zh` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-icon-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-icon-current-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-icon-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-pantoken-icon-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-parchment-horizontal-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-parchment-horizontal-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-parchment-horizontal-full-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-parchment-horizontal-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-parchment-icon-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-parchment-icon-current-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-parchment-icon-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-parchment-icon-reversed` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-parchment-stacked-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-parchment-stacked-dark` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-parchment-stacked-full-color` | `<url>` | `url("data:image/svg+xml` |
| `--instui-logo-parchment-stacked-reversed` | `<url>` | `url("data:image/svg+xml` |