diff --git a/docs/styleguide/ux/README.md b/docs/styleguide/ux/README.md
index 6fc79b8..7355499 100644
--- a/docs/styleguide/ux/README.md
+++ b/docs/styleguide/ux/README.md
@@ -8,8 +8,12 @@
 ## Table of contents
 
 1. [How to organize UI](organizing.md)
-1. [How to style UI](styling.md)
+1. [How to style UI](styleguide.md)
 1. [How to write UI text](writing.md)
 1. [Glossary](glossary.md)
 
+## UI reviews
+If you make changes to DevTools UI, make sure to involve us **early**, i.e. already in the
+UI design stage. See also the [Chrome DevTools Design Review Guidelines](../../contributing/design.md#Review-Guidelines)
+
 Back to the [Chromium DevTools Documentation](../../README.md).
diff --git a/docs/styleguide/ux/components.md b/docs/styleguide/ux/components.md
new file mode 100644
index 0000000..a1f8b34
--- /dev/null
+++ b/docs/styleguide/ux/components.md
@@ -0,0 +1,141 @@
+# Components
+
+[TOC]
+
+## Buttons
+
+![Button component](images/button-text-variations.png)
+
+### Variations
+
+#### Primary buttons
+
+![Primary button component](images/primary-buttons.png)
+
+Primary buttons are the most prominent type of button available. They are used
+for a single, necessary action a developer must complete, or for a highly
+recommended, promoted action. Use them sparingly and with purpose.
+
+#### Tonal buttons
+
+![Tonal button component](images/tonal-buttons.png)
+
+Use tonal buttons in dialogs for actions that stand secondary to a primary
+action and are not a cancel or close action.
+
+#### Outlined buttons
+
+![Outlined button component](images/outlined-buttons.png)
+
+Outlined buttons are the default button style. Use them for regular actions in
+the UI or to cancel dialogs.
+
+#### Text buttons
+
+![Text button component](images/text-buttons.png)
+
+Text buttons are the least prominent button choice. Use them in cases outlined
+buttons would create too much visual noise.
+
+#### Micro buttons
+
+Micro buttons are used if we have a small line height.
+
+#### Icon buttons
+
+![Icon button variations](images/button-icon-variations.png)
+
+Use icon buttons in toolbars of contextual actions that shouldn’t take up much
+space.
+
+### Usage
+
+#### Developer guidelines
+
+##### Dos and Don'ts
+
+###### Do
+
+  * Use
+    [`devtools-button`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/buttons/Button.ts)
+    for Primary, Outlined, Text, Micro and Icon buttons
+  * Use
+    [`ToolbarButton`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/Toolbar.ts;drc=2017cd8a8925f180257662f78eaf9eb93e8e394d;bpv=1;bpt=1;l=555?q=toolbar.ts%20devtools&ss=chromium&gsn=ToolbarButton&gs=KYTHE%3A%2F%2Fkythe%3A%2F%2Fchromium.googlesource.com%2Fcodesearch%2Fchromium%2Fsrc%2F%2Fmain%3Flang%3Dtypescript%3Fpath%3Dfront_end%2Fui%2Flegacy%2FToolbar%23ToolbarButton%2523type)
+    for buttons inside
+    [`Toolbars`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/Toolbar.ts).
+    Underneath they make use of `devtools-button`.
+
+###### Don'ts
+
+  * Use `<button>`, as they are not styled correctly
+  * Change the default color of icons (only in exceptions)
+
+##### Developer examples
+
+###### Primary button
+
+Usage within HTML environment:
+
+```html
+<devtools-button
+      class="some-class"
+      .variant=${Buttons.Button.Variant.PRIMARY}
+                 .title=${i18nString(UIStrings.someString)}
+      .jslogContext=${'some-context')
+      @click=${handleClick()}
+      )></devtools-button>
+```
+
+Usage within Typescript environment (mostly when working with legacy code):
+
+```ts
+  const button = new Buttons.Button.Button();
+  button.data = {
+      variant: Buttons.Button.Variant.PRIMARY,
+      title: i18nString(UIStrings.someString),
+      jslogContext: 'some-context',
+    };
+  button.classList.add(‘some-class’);
+  button.addEventListener(‘click’, () => handleClick());
+
+```
+
+#### Design guidelines
+
+##### Dos and Don'ts
+
+###### Primary Buttons
+
+![Primary Buttons](images/primary-dodonts.png)
+
+###### Tonal buttons
+
+![Tonal Buttons](images/tonal-dodonts.png)
+
+#### Outlined buttons
+
+![Outlined Buttons](images/outlined-dodonts.png)
+
+#### Text buttons
+
+![Text Buttons](images/text-dodonts.png)
+
+#### Icon buttons
+
+![Icon Buttons](images/icon-dodonts.png)
+
+### Resources
+
+#### For developers
+
+##### Implementation
+
+  * [`devtools-button`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/buttons/Button.ts)
+
+#### For designers
+
+##### Figma
+
+  * [Buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=481-2167&m=dev)
+  * [Icon
+    buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=571-616&m=dev)
diff --git a/docs/styleguide/ux/images/button-confirmation-dialog.png b/docs/styleguide/ux/images/button-confirmation-dialog.png
new file mode 100644
index 0000000..af691f9
--- /dev/null
+++ b/docs/styleguide/ux/images/button-confirmation-dialog.png
Binary files differ
diff --git a/docs/styleguide/ux/images/button-icon-variations.png b/docs/styleguide/ux/images/button-icon-variations.png
new file mode 100644
index 0000000..1b9f0b7
--- /dev/null
+++ b/docs/styleguide/ux/images/button-icon-variations.png
Binary files differ
diff --git a/docs/styleguide/ux/images/button-multiple-primary.png b/docs/styleguide/ux/images/button-multiple-primary.png
new file mode 100644
index 0000000..db6656d
--- /dev/null
+++ b/docs/styleguide/ux/images/button-multiple-primary.png
Binary files differ
diff --git a/docs/styleguide/ux/images/button-required-action.png b/docs/styleguide/ux/images/button-required-action.png
new file mode 100644
index 0000000..c7b1e80
--- /dev/null
+++ b/docs/styleguide/ux/images/button-required-action.png
Binary files differ
diff --git a/docs/styleguide/ux/images/button-screenshot.png b/docs/styleguide/ux/images/button-screenshot.png
new file mode 100644
index 0000000..675846a
--- /dev/null
+++ b/docs/styleguide/ux/images/button-screenshot.png
Binary files differ
diff --git a/docs/styleguide/ux/images/button-text-variations.png b/docs/styleguide/ux/images/button-text-variations.png
new file mode 100644
index 0000000..93e1650
--- /dev/null
+++ b/docs/styleguide/ux/images/button-text-variations.png
Binary files differ
diff --git a/docs/styleguide/ux/images/icon-dodonts.png b/docs/styleguide/ux/images/icon-dodonts.png
new file mode 100644
index 0000000..ce7e5da
--- /dev/null
+++ b/docs/styleguide/ux/images/icon-dodonts.png
Binary files differ
diff --git a/docs/styleguide/ux/images/outlined-buttons.png b/docs/styleguide/ux/images/outlined-buttons.png
new file mode 100644
index 0000000..a8b9c74
--- /dev/null
+++ b/docs/styleguide/ux/images/outlined-buttons.png
Binary files differ
diff --git a/docs/styleguide/ux/images/outlined-dodonts.png b/docs/styleguide/ux/images/outlined-dodonts.png
new file mode 100644
index 0000000..a7ac394
--- /dev/null
+++ b/docs/styleguide/ux/images/outlined-dodonts.png
Binary files differ
diff --git a/docs/styleguide/ux/images/primary-buttons.png b/docs/styleguide/ux/images/primary-buttons.png
new file mode 100644
index 0000000..8121bef
--- /dev/null
+++ b/docs/styleguide/ux/images/primary-buttons.png
Binary files differ
diff --git a/docs/styleguide/ux/images/primary-dodonts.png b/docs/styleguide/ux/images/primary-dodonts.png
new file mode 100644
index 0000000..d60080c
--- /dev/null
+++ b/docs/styleguide/ux/images/primary-dodonts.png
Binary files differ
diff --git a/docs/styleguide/ux/images/text-buttons.png b/docs/styleguide/ux/images/text-buttons.png
new file mode 100644
index 0000000..d2e57d7
--- /dev/null
+++ b/docs/styleguide/ux/images/text-buttons.png
Binary files differ
diff --git a/docs/styleguide/ux/images/text-dodonts.png b/docs/styleguide/ux/images/text-dodonts.png
new file mode 100644
index 0000000..3b2bb81
--- /dev/null
+++ b/docs/styleguide/ux/images/text-dodonts.png
Binary files differ
diff --git a/docs/styleguide/ux/images/tonal-buttons.png b/docs/styleguide/ux/images/tonal-buttons.png
new file mode 100644
index 0000000..a8b9c74
--- /dev/null
+++ b/docs/styleguide/ux/images/tonal-buttons.png
Binary files differ
diff --git a/docs/styleguide/ux/images/tonal-dodonts.png b/docs/styleguide/ux/images/tonal-dodonts.png
new file mode 100644
index 0000000..a7ac394
--- /dev/null
+++ b/docs/styleguide/ux/images/tonal-dodonts.png
Binary files differ
diff --git a/docs/styleguide/ux/styleguide.md b/docs/styleguide/ux/styleguide.md
new file mode 100644
index 0000000..a01f94d
--- /dev/null
+++ b/docs/styleguide/ux/styleguide.md
@@ -0,0 +1,9 @@
+# How to style UI
+
+## Table of contents
+
+*   [Styles](styles.md)
+*   [Components](components.md)
+
+## Resources
+* [Chrome DevTools Design Kit, Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit)
diff --git a/docs/styleguide/ux/styles.md b/docs/styleguide/ux/styles.md
new file mode 100644
index 0000000..3cc34f8
--- /dev/null
+++ b/docs/styleguide/ux/styles.md
@@ -0,0 +1,326 @@
+# Styles
+
+[TOC]
+
+## Colors
+
+We define three sets of color token types, **reference/palette tokens**,
+**system tokens**, and **application tokens**.
+
+[**Reference or palette
+tokens**](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/tokens.css)
+(e.g. `--ref-palette-X`) are a set of base colors that get updated on [Chrome
+color theme change](###) and should not be directly used.
+
+[**System
+tokens**](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.css)
+(e.g. `--sys-color-X`) are a set of semantic tokens (use is often clear from
+name e.g. `--sys-color-error-container`). They reference palette tokens and
+incorporate light / dark mode switches and should be used in the code directly.
+You can view all system tokens in their light and dark variant when running the
+component server with `npm run components-server` under *Theme Colors*.
+
+[**Application
+tokens**](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/applicationColorTokens.css)
+(e.g. `--app-color-X`) reference palette tokens, and add more semantic meaning
+and handle exception cases, where system tokens are not enough. Should be
+defined for both light and dark modes. An example CL that adds application
+tokens can be found
+[here](https://crrev.com/c/5471945/10/front_end/ui/legacy/themeColors.css).
+
+Each token follows a naming structure that describes its role. Important
+keywords that are used for color roles are defined in the following table:
+
+| Role                         | Description                                                                                        |
+| ---------------------------- | -------------------------------------------------------------------------------------------------- |
+| Surface                      | Universal background colors                                                                        |
+| Primary, Secondary, Tertiary | Colors that are used to emphasize or de-emphasize elements                                         |
+| Containers                   | Background colors for components                                                                   |
+| On                           | For text on top a surface/container that is used                                                   |
+| Variant                      | Color that is used in combination with the "non-variant" counterpart, that should be de-emphasized |
+
+### Custom Color Theming
+
+DevTools adapts its own theme depending on [Chrome's custom theming
+feature](https://blog.google/products/chrome/new-ways-to-customize-chrome-on-your-desktop/).
+On theme changes, the *reference tokens* are automatically updated to align with
+Chrome's theme change. Since all *system tokens*) make use of *reference
+tokens*, they are updated, too.
+
+Chrome's theming differentiates between two *default* color schemes (a blue
+**default** and a **grey default**), and a number of **accent** color schemes
+(blue, purple, yellow, and so on). In DevTools, the default schemes are defined
+as `baseline-grayscale` and `baseline-default` css classes in
+[themeColors.css](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.css).
+The accent color schemes don't require extra color definitions and will adapt
+with the reference colors.
+
+If DevTools doesn't receive any theming information from Chrome, it defaults to
+use the blue default scheme.
+
+### Usage
+
+#### Defaults
+
+Below, we present harmonious color combinations suitable for various scenarios,
+covering default choices for backgrounds, text, and icons.
+
+##### Default colors
+
+  * background: `--sys-color-cdt-base-container`
+  * text default: `--sys-color-on-surface`
+  * text fainter (use rarely): `--sys-color-on-surface-subtle`
+  * icon: `--sys-color-on-surface-subtle`
+  * divider lines: `--sys-color-divider`
+
+##### Selected colors
+
+(when DevTools is focused window)
+
+  * background: `--sys-color-tonal-container`
+  * text: `--sys-color-on-tonal-container`
+
+(when DevTools is unfocused)
+
+  * background: `--sys-color-neutral-container`
+  * text: `--sys-color-on-surface`
+
+##### Disabled colors
+
+  * background: `--sys-color-state-disabled-container`
+  * text: `--sys-color-state-disabled`
+  * icons: `--sys-color-state-disabled`
+
+##### Warning colors
+
+  * background: `--sys-color-surface-yellow`
+  * text: `--sys-color-on-surface-yellow`
+  * icons: `--sys-color-orange-bright`
+
+##### Error colors
+
+  * background: `--sys-color-surface-error`
+  * text: `--sys-color-error`
+  * icons: `--sys-color-error-bright`
+
+##### State layer colors
+
+  * hovered: `--sys-color-state-hover-on-subtle`
+  * keyboard focus outline: `--sys-color-state-focus-ring`
+  * active: `--sys-color-state-ripple-primary`,
+    `--sys-color-state-ripple-neutral-on-subtle` or
+    `--sys-color-state-ripple-on-prominent` (see explanation below)
+
+Ripple colors are for the transparent state layer of the pressed state
+(`active`). They have different intensity and are used for different base
+colors:
+
+  * `--sys-color-state-ripple-primary` is used when elements with the primary
+    color are pressed. Primary buttons use this ripple color for example.
+    -on-prominent is a bit stronger than it's counter parts, making it more
+    visible on primary.
+  * `--sys-color-state-ripple-neutral-on-subtle` is used on light surfaces,
+    grays or transparent backgrounds. This should be the default "pressed" color
+    for everything else.
+  * `--sys-color-state-ripple-on-prominent` is used for inverted components
+    (that are using `--sys-color-inverse-surface` and
+    `--sys-color-inverse-on-surface` colors).
+
+#### Usage of colors by category
+
+In the following we present general guidelines and examples on color choices by
+category (background, text, icon, and syntax highlighting).
+
+##### Background colors
+
+All backgrounds should be either a surface or a container.
+
+  * default toolbar color: `--sys-color-cdt-base-container`
+  * secondary toolbar color (e.g. Sources sidebar section headers like 'Watch'
+    or 'Breakpoints'): `--sys-color-surface2`
+  * default data grid row color: `--sys-color-cdt-base-container`
+  * alternating grid row color: `--sys-color-surface1`
+  * warning message: `--sys-color-surface-yellow`
+  * error message: `--sys-color-surface-error`
+  * info message: `--sys-color-cdt-base-container`
+  * info bar background: `--sys-color-neutral-container`
+
+##### Text colors
+
+Text should generally use on-surface, on-container.
+
+  * regular: `--sys-color-on-surface`
+  * fainter: `--sys-color-on-surface-subtle`
+  * disabled: `--sys-color-state-disabled`
+
+##### Icon colors
+
+Regular (dark grey) icons should also use on-something colors:
+
+  * default: `--sys-color-on-surface-subtle`
+  * on hover: `--sys-color-on-surface`
+  * disabled: `--sys-color-state-disabled`
+
+For colored icons, please use icon application color tokens: `--app-`. In case
+you need to add a new icon application color token, reference
+`--sys-color-something-bright`
+
+##### Syntax highlighting
+
+Syntax highlighting should use `--sys-color-token-X` colors.
+
+#### Dos and Don'ts
+
+##### Dos
+
+  * Use system colors (`--sys-color-X`)
+  * Use application colors (`--app-color-X`) for *rare* deviations
+
+##### Don'ts
+
+  * Don't use reference palette colors (`--ref-palette-X`)
+  * Don't use syntax tokens for anything other than highlighting code
+
+### Token reference
+
+*Note: You can view all system tokens in their light and dark variant when
+running the component server with `npm run components-server` under Theme
+Colors.*
+
+| Sys color token                     | CSS                                               | Figma                                   | Usage                                                                                     |
+| ----------------------------------- | ------------------------------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------- |
+| base                                | `--sys-color-base`                                | sys/base                                |                                                                                           |
+| base-container                      | `--sys-color-base-container`                      | sys/base-container                      |                                                                                           |
+| base-container-elevated             | `--sys-color-base-container-elevated`             | sys/base-container-elevated             |                                                                                           |
+| blue                                | `--sys-color-blue`                                | sys/blue                                |                                                                                           |
+| blue-bright                         | `--sys-color-blue-bright`                         | sys/blue-bright                         | Bright blue for icons                                                                     |
+| cdt-base                            | `--sys-color-cdt-base`                            | sys/cdt-base                            | Default DevTools surface background                                                       |
+| cdt-base-container                  | `--sys-color-cdt-base-container`                  | sys/cdt-base-container                  | Default DevTools container background                                                     |
+| cyan                                | `--sys-color-cyan`                                | sys/cyan                                |                                                                                           |
+| cyan-bright                         | `--sys-color-cyan-bright`                         | sys/cyan-bright                         | Bright cyan for icons                                                                     |
+| divider                             | `--sys-color-divider`                             | sys/divider                             | Color for dividers                                                                        |
+| divider-on-tonal-container          | `--sys-color-divider-on-tonal-container`          | sys/divider-on-tonal-container          | Color for dividers on top of a container with tonal colors                                |
+| divider-prominent                   | `--sys-color-divider-prominent`                   | sys/divider-prominent                   |                                                                                           |
+| error                               | `--sys-color-error`                               | sys/error                               |                                                                                           |
+| error-bright                        | `--sys-color-error-bright`                        | sys/error-bright                        | Bright red for icons                                                                      |
+| error-container                     | `--sys-color-error-container`                     | sys/error-container                     |                                                                                           |
+| error-outline                       | `--sys-color-error-outline`                       | sys/error-outline                       |                                                                                           |
+| gradient-primary                    | `--sys-color-gradient-primary`                    | sys/gradient-primary                    |                                                                                           |
+| gradient-tertiary                   | `--sys-color-gradient-tertiary`                   | sys/gradient-tertiary                   |                                                                                           |
+| green                               | `--sys-color-green`                               | sys/green                               |                                                                                           |
+| green-bright                        | `--sys-color-green-bright`                        | sys/green-bright                        |                                                                                           |
+| inverse-on-surface                  | `--sys-color-inverse-on-surface`                  | sys/inverse-on-surface                  |                                                                                           |
+| inverse-primary                     | `--sys-color-inverse-primary`                     | sys/inverse-primary                     |                                                                                           |
+| inverse-surface                     | `--sys-color-inverse-surface`                     | sys/inverse-surface                     |                                                                                           |
+| neutral-bright                      | `--sys-color-neutral-bright`                      | sys/neutral-bright                      |                                                                                           |
+| neutral-container                   | `--sys-color-neutral-container`                   | sys/neutral-container                   |                                                                                           |
+| neutral-outline                     | `--sys-color-neutral-outline`                     | sys/neutral-outline                     |                                                                                           |
+| omnibox-container                   | `--sys-color-omnibox-container`                   | sys/omnibox-container                   |                                                                                           |
+| on-base                             | `--sys-color-on-base`                             | sys/on-base                             |                                                                                           |
+| on-base-divider                     | `--sys-color-on-base-divider`                     | sys/on-base-divider                     |                                                                                           |
+| on-blue                             | `--sys-color-on-blue`                             | sys/on-blue                             |                                                                                           |
+| on-cyan                             | `--sys-color-on-cyan`                             | sys/on-cyan                             |                                                                                           |
+| on-error                            | `--sys-color-on-error`                            | sys/on-error                            |                                                                                           |
+| on-error-container                  | `--sys-color-on-error-container`                  | sys/on-error-container                  |                                                                                           |
+| on-green                            | `--sys-color-on-green`                            | sys/on-green                            |                                                                                           |
+| on-orange                           | `--sys-color-on-orange`                           | sys/on-orange                           |                                                                                           |
+| on-pink                             | `--sys-color-on-pink`                             | sys/on-pink                             |                                                                                           |
+| on-primary                          | `--sys-color-on-primary`                          | sys/on-primary                          |                                                                                           |
+| on-purple                           | `--sys-color-on-purple`                           | sys/on-purple                           |                                                                                           |
+| on-secondary                        | `--sys-color-on-secondary`                        | sys/on-secondary                        |                                                                                           |
+| on-surface                          | `--sys-color-on-surface`                          | sys/on-surface                          |                                                                                           |
+| on-surface-error                    | `--sys-color-on-surface-error`                    | sys/on-surface-error                    |                                                                                           |
+| on-surface-green                    | `--sys-color-on-surface-green`                    | sys/on-surface-green                    |                                                                                           |
+| on-surface-primary                  | `--sys-color-on-surface-primary`                  | sys/on-surface-primary                  |                                                                                           |
+| on-surface-secondary                | `--sys-color-on-surface-secondary`                | sys/on-surface-secondary                |                                                                                           |
+| on-surface-subtle                   | `--sys-color-on-surface-subtle`                   | sys/on-surface-subtle                   |                                                                                           |
+| on-surface-yellow                   | `--sys-color-on-surface-yellow`                   | sys/on-surface-yellow                   |                                                                                           |
+| on-tertiary                         | `--sys-color-on-tertiary`                         | sys/on-tertiary                         |                                                                                           |
+| on-tertiary-container               | `--sys-color-on-tertiary-container`               | sys/on-tertiary-container               |                                                                                           |
+| on-tonal-container                  | `--sys-color-on-tonal-container`                  | sys/on-tonal-container                  |                                                                                           |
+| on-yellow                           | `--sys-color-on-yellow`                           | sys/on-yellow                           |                                                                                           |
+| on-yellow-container                 | `--sys-color-on-yellow-container`                 | sys/on-yellow-container                 |                                                                                           |
+| orange                              | `--sys-color-orange`                              | sys/orange                              |                                                                                           |
+| orange-bright                       | `--sys-color-orange-bright`                       | sys/orange-bright                       |                                                                                           |
+| outline                             | `--sys-color-outline`                             | sys/outline                             |                                                                                           |
+| pink                                | `--sys-color-pink`                                | sys/pink                                |                                                                                           |
+| pink-bright                         | `--sys-color-pink-bright`                         | sys/pink-bright                         |                                                                                           |
+| primary                             | `--sys-color-primary`                             | sys/primary                             |                                                                                           |
+| primary-bright                      | `--sys-color-primary-bright`                      | sys/primary-bright                      |                                                                                           |
+| purple                              | `--sys-color-purple`                              | sys/purple                              |                                                                                           |
+| purple-bright                       | `--sys-color-purple-bright`                       | sys/purple-bright                       |                                                                                           |
+| secondary                           | `--sys-color-secondary`                           | sys/secondary                           |                                                                                           |
+| state-disabled                      | `--sys-color-state-disabled`                      | sys/state-disabled                      |                                                                                           |
+| state-disabled-container            | `--sys-color-state-disabled-container`            | sys/state-disabled-container            |                                                                                           |
+| state-focus-highlight               | `--sys-color-state-focus-highlight`               | sys/state-focus-highlight               |                                                                                           |
+| state-focus-ring                    | `--sys-color-state-focus-ring`                    | sys/state-focus-ring                    |                                                                                           |
+| state-focus-select                  | `--sys-color-state-focus-select`                  | sys/state-focus-select                  |                                                                                           |
+| state-header-hover                  | `--sys-color-state-header-hover`                  | sys/state-header-hover                  |                                                                                           |
+| state-hover-bright-blend-protection | `--sys-color-state-hover-bright-blend-protection` | sys/state-hover-bright-blend-protection |                                                                                           |
+| state-hover-dim-blend-protection    | `--sys-color-state-hover-dim-blend-protection`    | sys/state-hover-dim-blend-protection    |                                                                                           |
+| state-hover-on-prominent            | `--sys-color-state-hover-on-prominent`            | sys/state-hover-on-prominent            |                                                                                           |
+| state-hover-on-subtle               | `--sys-color-state-hover-on-subtle`               | sys/state-hover-on-subtle               |                                                                                           |
+| state-on-header-hover               | `--sys-color-state-on-header-hover`               | sys/state-on-header-hover               |                                                                                           |
+| state-ripple-neutral-on-prominent   | `--sys-color-state-ripple-neutral-on-prominent`   | sys/state-ripple-neutral-on-prominent   |                                                                                           |
+| state-ripple-neutral-on-subtle      | `--sys-color-state-ripple-neutral-on-subtle`      | sys/state-ripple-neutral-on-subtle      |                                                                                           |
+| state-ripple-primary                | `--sys-color-state-ripple-primary`                | sys/state-ripple-primary                |                                                                                           |
+| surface                             | `--sys-color-surface`                             | sys/surface                             | Universal surface color                                                                   |
+| surface1                            | `--sys-color-surface1`                            | sys/surface1                            | Universal surface color                                                                   |
+| surface2                            | `--sys-color-surface2`                            | sys/surface2                            | Universal surface color                                                                   |
+| surface3                            | `--sys-color-surface3`                            | sys/surface3                            | Universal surface color                                                                   |
+| surface4                            | `--sys-color-surface4`                            | sys/surface4                            | Universal surface color                                                                   |
+| surface5                            | `--sys-color-surface5`                            | sys/surface5                            | Universal surface color                                                                   |
+| surface-error                       | `--sys-color-surface-error`                       | sys/surface-error                       | Surface for error backgrounds                                                             |
+| surface-green                       | `--sys-color-surface-green`                       | sys/surface-green                       |                                                                                           |
+| surface-variant                     | `--sys-color-surface-variant`                     | sys/surface-variant                     |                                                                                           |
+| surface-yellow                      | `--sys-color-surface-yellow`                      | sys/surface-yellow                      | Yellow surface colors used e.g. for warnings                                              |
+| surface-yellow-high                 | `--sys-color-surface-yellow-high`                 | sys/surface-yellow-high                 |                                                                                           |
+| tertiary                            | `--sys-color-tertiary`                            | sys/tertiary                            |                                                                                           |
+| tertiary-container                  | `--sys-color-tertiary-container`                  | sys/tertiary-container                  | Background color for de-emphasizing a container next to a primary and secondary container |
+| token-atom                          | `--sys-color-token-atom`                          | sys/token-atom                          | Syntax highlighting                                                                       |
+| token-attribute                     | `--sys-color-token-attribute`                     | sys/token-attribute                     | Syntax highlighting                                                                       |
+| token-attribute-value               | `--sys-color-token-attribute-value`               | sys/token-attribute-value               | Syntax highlighting                                                                       |
+| token-builtin                       | `--sys-color-token-builtin`                       | sys/token-builtin                       | Syntax highlighting                                                                       |
+| token-comment                       | `--sys-color-token-comment`                       | sys/token-comment                       | Syntax highlighting for comments                                                          |
+| token-definition                    | `--sys-color-token-definition`                    | sys/token-definition                    | Syntax highlighting                                                                       |
+| token-deleted                       | `--sys-color-token-deleted`                       | sys/token-deleted                       | Syntax highlighting                                                                       |
+| token-inserted                      | `--sys-color-token-inserted`                      | sys/token-inserted                      | Syntax highlighting                                                                       |
+| token-keyword                       | `--sys-color-token-keyword`                       | sys/token-keyword                       | Syntax highlighting for keywords                                                          |
+| token-meta                          | `--sys-color-token-meta`                          | sys/token-meta                          | Syntax highlighting                                                                       |
+| token-number                        | `--sys-color-token-number`                        | sys/token-number                        | Syntax highlighting for numbers                                                           |
+| token-property                      | `--sys-color-token-property`                      | sys/token-property                      | Syntax highlighting for properties                                                        |
+| token-property-special              | `--sys-color-token-property-special`              | sys/token-property-special              | Syntax highlighting                                                                       |
+| token-pseudo-element                | `--sys-color-token-pseudo-element`                | sys/token-pseudo-element                | Syntax highlighting for pseudo elements                                                   |
+| token-string                        | `--sys-color-token-string`                        | sys/token-string                        | Syntax highlighting for strings                                                           |
+| token-string-special                | `--sys-color-token-string-special`                | sys/token-string-special                | Syntax highlighting                                                                       |
+| token-subtle                        | `--sys-color-token-subtle`                        | sys/token-subtle                        | Syntax highlighting                                                                       |
+| token-tag                           | `--sys-color-token-tag`                           | sys/token-tag                           | Syntax highlighting                                                                       |
+| token-type                          | `--sys-color-token-type`                          | sys/token-type                          | Syntax highlighting                                                                       |
+| token-variable                      | `--sys-color-token-variable`                      | sys/token-variable                      | Syntax highlighting for variables                                                         |
+| token-variable-special              | `--sys-color-token-variable-special`              | sys/token-variable-special              |                                                                                           |
+| tonal-container                     | `--sys-color-tonal-container`                     | sys/tonal-container                     | Background color for selected containers                                                  |
+| tonal-outline                       | `--sys-color-tonal-outline`                       | sys/tonal-outline                       | Outline color for selected containers with `--sys-color-tonal-container`                  |
+| yellow                              | `--sys-color-yellow`                              | sys/yellow                              |                                                                                           |
+| yellow-bright                       | `--sys-color-yellow-bright`                       | sys/yellow-bright                       | Yellow color for icons                                                                    |
+| yellow-container                    | `--sys-color-yellow-container`                    | sys/yellow-container                    |                                                                                           |
+| yellow-outline                      | `--sys-color-yellow-outline`                      | sys/yellow-outline                      | Yellow outline for containers using `--sys-color-yellow-container`                        |
+
+### Edge cases
+
+In rare edge cases, you might want to define new tokens. If you do so, don't
+define `--sys-color-X` tokens, since these are reserved for Material's design
+system, but instead create an application token `--app-color-X`. Be aware that
+you need to define light, dark and dynamic theme colors for this new token. An
+example CL that adds application tokens can be found
+[here](https://crrev.com/c/5471945/10/front_end/ui/legacy/themeColors.css).
+
+### Resources
+
+  * [Reference color
+    tokens](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/tokens.css)
+  * [System color
+    tokens](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.css)
+  * [Application color
+    tokens](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/applicationColorTokens.css)
+  * [Color definitions in the CDT
+    Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=337-5217&m=dev)
diff --git a/docs/styleguide/ux/styling.md b/docs/styleguide/ux/styling.md
deleted file mode 100644
index baac902..0000000
--- a/docs/styleguide/ux/styling.md
+++ /dev/null
@@ -1,58 +0,0 @@
-# How to style UI
-
-[TOC]
-
-## Background colors
-
-All backgrounds should be either a surface or a container
-- default toolbar color: `--sys-color-cdt-base-container`
-- secondary toolbar color (e.g. Sources sidebar section headers like 'Watch' or 'Breakpoints'): `--sys-color-surface2`
-- default data grid row color: `--sys-color-cdt-base-container`
-- alternating grid row color: `--sys-color-surface1`
-- warning message: `--sys-color-surface-yellow`
-- error message: `--sys-color-surface-error`
-- info message: `--sys-color-cdt-base-container`
-- info bar background: `--sys-color-neutral-container`
-
-States:
-
-- hovered: `--sys-color-state-hover-on-subtle`
-- selected: `--sys-color-tonal-container`
-- focus-visible: `--sys-color-state-focus-highlight`
-- text selection over focus: `--sys-color-state-focus-select`
-
-*** aside
-**NOTE:** For hover/focus colors for elements which background color is other than `--sys-color-cdt-base-container`
-    or in case you need an opaque hover color use [state layer technique](https://carbon.googleplex.com/google-material-3/pages/interaction-states/state-layers).
-    See [example CL](http://crrev.com/c/5003859)
-***
-
-## Text colors
-
-Text should generally use on-surface, on-container
-- regular (old text-primary): `--sys-color-on-surface`
-- fainter (old text-secondary): `--sys-color-on-surface-subtle`
-- disabled (old text-disabled): `--sys-color-text-disabled`
-
-For warnings, errors, text on selected/focused UI elements:
-- `--sys-color-on-surface-yellow`
-- `--sys-color-on-surface-error`
-- `--sys-color-on-tonal-container`
-
-## Syntax highlighting
-
-Syntax highlighting should use token-something colors defined [here](http://crsrc.org/c/third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.css;l=355)
-
-## Icon colors
-
-Regular (dark grey) icons should also use on-something colors
-- default: `--sys-color-on-surface-subtle`
-- on hover: `--sys-color-on-surface`
-- disabled: `--sys-color-state-disabled`
-
-For colored icons, please use icon application color tokens
-In case you need to add a new icon application color token, reference `--sys-color-something-bright`
-
-## Other elements
-
-In case you can’t reuse a component and need to add some new UI element, please follow the [spec](https://www.figma.com/file/5xWeeSmVQTd4yW3s6aFJ1f/CDDS-UX%2FEng-Spec-(NO-LONGER-UPDATED)?node-id=35%3A2599&mode=dev)