diff --git a/docs/scripts/update-readmes.js b/docs/scripts/update-readmes.js
index 82e129c3..0e9659b4 100644
--- a/docs/scripts/update-readmes.js
+++ b/docs/scripts/update-readmes.js
@@ -9,9 +9,9 @@ import {URL} from 'node:url';
 const FRONTMATTER_RE = /^---/gm;
 
 const updates = {
-  '../../packages/plugin-css/README.md': '../src/pages/docs/plugins/css.md',
-  '../../packages/plugin-sass/README.md': '../src/pages/docs/plugins/sass.md',
-  '../../packages/plugin-js/README.md': '../src/pages/docs/plugins/js.md',
+  '../../packages/plugin-css/README.md': '../src/pages/docs/integrations/css.md',
+  '../../packages/plugin-sass/README.md': '../src/pages/docs/integrations/sass.md',
+  '../../packages/plugin-js/README.md': '../src/pages/docs/integrations/js.md',
 };
 
 const urlRewrites = {
diff --git a/docs/src/components/DocsNav.astro b/docs/src/components/DocsNav.astro
index db884030..7613d246 100644
--- a/docs/src/components/DocsNav.astro
+++ b/docs/src/components/DocsNav.astro
@@ -17,11 +17,14 @@ function showSubPage(url) {
   @use '../../tokens' as *;
 
   .nav {
+    box-shadow: inset 1px 0 0 token('color.ui.contrast.10');
     border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     display: flex;
     flex-direction: column;
     font-size: token('font.size.04');
+    height: max-content;
     margin-bottom: token('space.md');
+    margin-left: auto;
     max-height: calc(100vh - #{token('space.layout.sm')});
     min-width: token('space.layout.2xl');
     padding-bottom: token('space.md');
@@ -37,14 +40,22 @@ function showSubPage(url) {
 
   .a {
     align-items: center;
-    color: token('color.ui.contrast.100');
+    border-left: 1px solid token('color.ui.contrast.10');
+    color: token('color.ui.contrast.70');
     display: flex;
-    min-height: token('space.lg');
-    padding-left: token('space.lg');
+    min-height: token('space.xl');
+    padding-left: token('space.sm');
     position: relative;
     text-decoration: none;
 
+    &:hover {
+      border-left-color: token('color.ui.contrast.50');
+      color: token('color.ui.contrast.80');
+    }
+
     &[aria-current='page'] {
+      background-color: color-mix(in oklab, #{token('color.ui.action')}, transparent 90%);
+      border-color: token('color.ui.action');
       color: token('color.ui.action');
       font-weight: 550;
     }
@@ -56,7 +67,13 @@ function showSubPage(url) {
     }
 
     &--subpage {
+      border-left: none;
       margin-left: token('space.md');
+      min-height: token('space.lg');
+
+      &[aria-current='page'] {
+        background: none;
+      }
 
       &::before {
         left: -0.875rem;
diff --git a/docs/src/docs-manifest.json b/docs/src/docs-manifest.json
index 7aec4801..ff15d11d 100644
--- a/docs/src/docs-manifest.json
+++ b/docs/src/docs-manifest.json
@@ -20,17 +20,17 @@
     {"title": "Custom",                   "pathname": "/docs/tokens/#custom"},
     {"title": "Aliasing",                 "pathname": "/docs/tokens/#aliasing"},
     {"title": "Modes",                    "pathname": "/docs/tokens/#modes"},
+    {"title": "Integrations",             "pathname": "/docs/integrations"},
+    {"title": "CSS",                      "pathname": "/docs/integrations/css"},
+    {"title": "Sass",                     "pathname": "/docs/integrations/sass"},
+    {"title": "JSON/JS/TS",               "pathname": "/docs/integrations/js"},
+    {"title": "Style Dictionary",         "pathname": "/docs/integrations/style-dictionary"},
+    {"title": "Tokens Studio",            "pathname": "/docs/integrations/tokens-studio"},
+    {"title": "Custom Plugins",           "pathname": "/docs/integrations/custom-plugins"},
     {"title": "Guides",                   "pathname": "/docs/guides"},
     {"title": "What are Design Tokens?",  "pathname": "/docs/guides/design-tokens"},
     {"title": "Best Practices",           "pathname": "/docs/guides/best-practices"},
     {"title": "Modes",                    "pathname": "/docs/guides/modes"},
-    {"title": "Style Dictionary",         "pathname": "/docs/guides/style-dictionary"},
-    {"title": "Tokens Studio",            "pathname": "/docs/guides/tokens-studio"},
-    {"title": "Custom Plugins",           "pathname": "/docs/guides/plugins"},
-    {"title": "Plugins",                  "pathname": "/docs/plugins"},
-    {"title": "CSS",                      "pathname": "/docs/plugins/css"},
-    {"title": "Sass",                     "pathname": "/docs/plugins/sass"},
-    {"title": "JS/JSON/TS",               "pathname": "/docs/plugins/js"},
     {"title": "Reference",                "pathname": "/docs/reference"},
     {"title": "CLI",                      "pathname": "/docs/reference/cli"},
     {"title": "Config API",               "pathname": "/docs/reference/config"},
diff --git a/docs/src/layouts/docs.astro b/docs/src/layouts/docs.astro
index bb541935..79ad9e25 100644
--- a/docs/src/layouts/docs.astro
+++ b/docs/src/layouts/docs.astro
@@ -8,7 +8,7 @@ import SkipToMain from '../components/SkipToMain.astro';
 const {content = {}} = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <Head title={content.title ? `${content.title} / Cobalt design tokens}` : 'Docs / Cobalt design tokens'} />
@@ -21,9 +21,16 @@ const {content = {}} = Astro.props;
 
         @media (min-width: 600px) {
           flex-direction: row;
+          gap: 2.5rem;
           padding-right: token('space.layout.2xl');
         }
       }
+
+      .content {
+        margin-right: auto;
+        max-width: 100%;
+        width: 65rem;
+      }
     </style>
   </head>
   <body>
@@ -31,7 +38,7 @@ const {content = {}} = Astro.props;
     <Nav />
     <div class="docs">
       <DocsNav />
-      <main class="wrapper content md-content" id="#main">
+      <main class="content md-content" id="#main">
         <slot />
       </main>
     </div>
diff --git a/docs/src/pages/docs/getting-started/generation.md b/docs/src/pages/docs/getting-started/generation.md
index d6801361..d5c7d622 100644
--- a/docs/src/pages/docs/getting-started/generation.md
+++ b/docs/src/pages/docs/getting-started/generation.md
@@ -71,8 +71,8 @@ That will generate a new `/tokens/` folder along with one output per plugin:
 
 ## Next steps
 
-Learn more about the existing plugins and [view documentation](docs/plugins)
+Learn more about the existing plugins and [view documentation](/docs/integrations)
 
-- **CSS**: [@cobalt-ui/plugin-css](/docs/plugins/css)
-- **JS/TS/JSON**: [@cobalt-ui/plugin-js](/docs/plugins/js)
-- **Sass**: [@cobalt-ui/plugin-sass](/docs/plugins/sass)
+- **CSS**: [@cobalt-ui/plugin-css](/docs/integrations/css)
+- **JS/TS/JSON**: [@cobalt-ui/plugin-js](/docs/integrations/js)
+- **Sass**: [@cobalt-ui/plugin-sass](/docs/integrations/sass)
diff --git a/docs/src/pages/docs/getting-started/index.astro b/docs/src/pages/docs/getting-started/index.astro
index bf97d57d..c51839e9 100644
--- a/docs/src/pages/docs/getting-started/index.astro
+++ b/docs/src/pages/docs/getting-started/index.astro
@@ -17,9 +17,10 @@ const title = 'Getting Started';
   />
 
   <p>
-    Cobalt turns your <a href="/docs/guides/design-tokens">design tokens</a> into code using a CLI or Node.js. Cobalt is configurable and pluggable, and can generate <a href="/plugins/js">JavaScript</a>, <a href="/plugins/js">TypeScript</a
-    >, <a href="/plugins/js">JSON</a>, <a href="/plugins/css">CSS</a>, and <a href="/plugins/js">Sass</a> via the official <a href="/docs/plugins">plugins</a>. Or you can generate anything else by <a href="/docs/guides/plugins"
-      >creating your own plugin</a
+    Cobalt turns your <a href="/docs/guides/design-tokens">design tokens</a> into code using a CLI or Node.js. Cobalt is configurable and pluggable, and can generate <a href="/integrations/js">JavaScript</a>, <a href="/integrations/js"
+      >TypeScript</a
+    >, <a href="/integrations/js">JSON</a>, <a href="/integrations/css">CSS</a>, and <a href="/integrations/js">Sass</a> via the official <a href="/docs/integrations">plugins</a>. Or you can generate anything else by <a
+      href="/docs/guides/plugins">creating your own plugin</a
     >.
   </p>
 
@@ -77,7 +78,10 @@ const title = 'Getting Started';
 
     <blockquote><p>ℹ️ For this step, you’ll need <a href="https://nodejs.org" target="_blank" rel="noopener noreferrer">Node.js</a> installed (v20 is recommended).</p></blockquote>
 
-    <p>For this example, we’ll install the <a href="/docs/plugins/js">JS</a>, <a href="/docs/plugins/sass">Sass</a>, and <a href="/docs/plugins/css">CSS</a> plugins, but skip any you don’t need (you can always install them later).</p>
+    <p>
+      For this example, we’ll install the <a href="/docs/integrations/js">JS</a>, <a href="/docs/integrations/sass">Sass</a>, and <a href="/docs/integrations/css">CSS</a> plugins, but skip any you don’t need (you can always install them
+      later).
+    </p>
 
     <p>Run the following in a terminal, in the code project folder you’d like to generate code to:</p>
 
@@ -109,7 +113,7 @@ export default {
 };`}
     />
 
-    <p>To learn more about the config file, see <a href="/docs/reference/config">config options</a>. To learn about plugin options, see <a href="/docs/plugins">plugins</a>.</p>
+    <p>To learn more about the config file, see <a href="/docs/reference/config">config options</a>. To learn about plugins and integrations, see <a href="/docs/integrations">Integrations</a>.</p>
 
     <p>Lastly, run the following command to generate all code from your tokens:</p>
 
@@ -181,7 +185,7 @@ jobs:
       <li><a href="/docs/tokens">Learn about tokens</a></li>
       <li><a href="/docs/guides/tokens-studio">Sync with Figma using Tokens Studio</a></li>
       <li><a href="/docs/reference/config">Learn how to configure Cobalt</a></li>
-      <li><a href="/docs/plugins">Add plugins</a></li>
+      <li><a href="/docs/integrations">Add integrations</a></li>
     </ul>
   </ol>
 
diff --git a/docs/src/pages/docs/guides/modes.astro b/docs/src/pages/docs/guides/modes.astro
index 3ee8d319..e3aecd94 100644
--- a/docs/src/pages/docs/guides/modes.astro
+++ b/docs/src/pages/docs/guides/modes.astro
@@ -21,8 +21,8 @@ const title = 'Modes';
   </figure>
 
   <p>
-    In this screenshot of GitHub’s dashboard you’ll find 5 color themes: <em>Light default</em>, <em>Light high contrast</em>, <em>Dark default</em>, <em>Dark high contrast</em>, and <em>Dark dimmed</em> (shown above). How might that be represented
-    in tokens?
+    In this screenshot of GitHub’s dashboard you’ll find 5 color themes: <em>Light default</em>, <em>Light high contrast</em>, <em>Dark default</em>, <em>Dark high contrast</em>, and <em>Dark dimmed</em> (shown above). How might that be
+    represented in tokens?
   </p>
 
   <p><em>Note: since this guide was written, GitHub has since added additional color modes. But since that doesn’t change the concept, we’ll stick with the older (simpler) example for the purposes of illustration.</em></p>
@@ -30,8 +30,8 @@ const title = 'Modes';
   <h3>Without Modes</h3>
 
   <p>
-    Consider the <code>red</code> and <code>white</code> colors in the system. Whereas <code>red</code> has a different value for each mode, <code>white</code> is an absolute value that doesn’t change. A (wrong) first attempt may look something
-    like:
+    Consider the <code>red</code> and <code>white</code> colors in the system. Whereas <code>red</code> has a different value for each mode, <code>white</code> is an absolute value that doesn’t change. A (wrong) first attempt may look
+    something like:
   </p>
 
   <JSONYaml
@@ -93,13 +93,13 @@ const title = 'Modes';
   </p>
 
   <p>
-    This simplifies your application code, too, as, you can simply refer to <code>red</code> or <code>white</code> and the mode can be inferred based on the global context (see the <a href="#examples-in-code">Examples in code</a> section below
-    to see the “how”).
+    This simplifies your application code, too, as, you can simply refer to <code>red</code> or <code>white</code> and the mode can be inferred based on the global context (see the <a href="#examples-in-code">Examples in code</a> section
+    below to see the “how”).
   </p>
 
   <h3>With @cobalt/plugin-css</h3>
 
-  <p>If using <a href="/docs/plugins/css">@cobalt/plugin-css</a>, you could generate CSS to handle these modes. That would look something like:</p>
+  <p>If using <a href="/docs/integrations/css">@cobalt/plugin-css</a>, you could generate CSS to handle these modes. That would look something like:</p>
 
   <Code
     lang="js"
@@ -125,8 +125,8 @@ export default {
   />
 
   <p>
-    Then in your CSS, the correct color mode would apply automatically in most instances, but you could also set <code>&lt;body data-color-mode="[mode]"&gt;</code> to override it. Also note there aren’t browser-global colorblind preferences,
-    so for the colorblind color schemes, they’d have to be set manually.
+    Then in your CSS, the correct color mode would apply automatically in most instances, but you could also set <code>&lt;body data-color-mode="[mode]"&gt;</code> to override it. Also note there aren’t browser-global colorblind
+    preferences, so for the colorblind color schemes, they’d have to be set manually.
   </p>
 
   <h2>Example: typographic modes</h2>
@@ -157,8 +157,8 @@ export default {
   />
 
   <p>
-    Referring to a font size as <code>typography.size.title1-Medium</code> or <code>typography.size.title2-Medium</code> is a bad idea, because then every level of your application must be aware of the user’s current preference settings. And
-    if values ever change, now your entire application must be updated everywhere.
+    Referring to a font size as <code>typography.size.title1-Medium</code> or <code>typography.size.title2-Medium</code> is a bad idea, because then every level of your application must be aware of the user’s current preference settings.
+    And if values ever change, now your entire application must be updated everywhere.
   </p>
 
   <h3>With Modes</h3>
@@ -230,9 +230,9 @@ export default {
   <p>The examples above were generic concepts that applied to all languages. To see how to use modes in specific languages, see the following plugin docs:</p>
 
   <ul>
-    <li><a href="/docs/plugins/css#mode-selectors">@cobalt-ui/plugin-css</a></li>
-    <li><a href="/docs/plugins/js#usage">@cobalt-ui/plugin-js</a></li>
-    <li><a href="/docs/plugins/sass#modes">@cobalt-ui/plugin-sass</a></li>
+    <li><a href="/docs/integrations/css#mode-selectors">@cobalt-ui/plugin-css</a></li>
+    <li><a href="/docs/integrations/js#usage">@cobalt-ui/plugin-js</a></li>
+    <li><a href="/docs/integrations/sass#modes">@cobalt-ui/plugin-sass</a></li>
   </ul>
 
   <h2>Advanced</h2>
diff --git a/docs/src/pages/docs/plugins/css.md b/docs/src/pages/docs/integrations/css.md
similarity index 97%
rename from docs/src/pages/docs/plugins/css.md
rename to docs/src/pages/docs/integrations/css.md
index 9d6c6081..553e930d 100644
--- a/docs/src/pages/docs/plugins/css.md
+++ b/docs/src/pages/docs/integrations/css.md
@@ -321,7 +321,7 @@ export default {
 
 ### Usage with @cobalt-ui/plugin-sass
 
-If you’re using Sass in your project, you can load this plugin through [@cobalt-ui/plugin-sass](https://cobalt-ui.pages.dev/docs/plugins/sass/), which lets you use CSS vars while letting Sass typecheck everything and making sure your stylesheet references everything correctly.
+If you’re using Sass in your project, you can load this plugin through [@cobalt-ui/plugin-sass](https://cobalt-ui.pages.dev/docs/integrations/sass/), which lets you use CSS vars while letting Sass typecheck everything and making sure your stylesheet references everything correctly.
 
 To use this, replace this plugin with @cobalt-ui/plugin-sass in `tokens.config.mjs` and pass all options into `pluginCSS: {}`:
 
@@ -342,4 +342,4 @@ To use this, replace this plugin with @cobalt-ui/plugin-sass in `tokens.config.m
   };
 ```
 
-This changes `token('color.blue')` to return CSS vars rather than the original values. To learn more, [read the docs](https://cobalt-ui.pages.dev/docs/plugins/sass/).
+This changes `token('color.blue')` to return CSS vars rather than the original values. To learn more, [read the docs](https://cobalt-ui.pages.dev/docs/integrations/sass/).
diff --git a/docs/src/pages/docs/guides/plugins.md b/docs/src/pages/docs/integrations/custom-plugins.md
similarity index 98%
rename from docs/src/pages/docs/guides/plugins.md
rename to docs/src/pages/docs/integrations/custom-plugins.md
index 74028616..4c782cb9 100644
--- a/docs/src/pages/docs/guides/plugins.md
+++ b/docs/src/pages/docs/integrations/custom-plugins.md
@@ -5,7 +5,7 @@ layout: ../../../layouts/docs.astro
 
 # Create your own plugins
 
-Creating your own Cobalt plugins is easy if you’re comfortable with JavaScript. This guide is for creating a custom plugin yourself; if you’re looking for instructions on how to use existing plugins, [see the plugins directory](/docs/plugins).
+Creating your own Cobalt plugins is easy if you’re comfortable with JavaScript. This guide is for creating a custom plugin yourself; if you’re looking for instructions on how to use existing plugins, [see the plugins directory](/docs/integrations).
 
 ## Why use Cobalt?
 
diff --git a/docs/src/pages/docs/integrations/index.md b/docs/src/pages/docs/integrations/index.md
new file mode 100644
index 00000000..d186c485
--- /dev/null
+++ b/docs/src/pages/docs/integrations/index.md
@@ -0,0 +1,29 @@
+---
+title: Integrations
+layout: ../../../layouts/docs.astro
+---
+
+# Integrations
+
+Plugins let you **generate code** from your `tokens.json` / `tokens.yaml` manifest in your projects.
+
+## Plugins
+
+Each Cobalt plugin lets you generate code for your desired platform. You can use one plugin, or all of them!
+
+| Plugin                                            | Generates        | Platform                       |
+| :------------------------------------------------ | :--------------- | :----------------------------- |
+| [@cobalt-ui/plugin-css](/docs/integrations/css)   | CSS              | Web                            |
+| [@cobalt-ui/plugin-js](/docs/integrations/js)     | JS, TS, and JSON | Web and Native Apps (via JSON) |
+| [@cobalt-ui/plugin-sass](/docs/integrations/sass) | Sass (and CSS)   | Web                            |
+
+## External Tools
+
+Cobalt also supports the following external formats/tools, which can also be used in conjunction with any/all plugins.
+
+- [Style Dictionary](/docs/integrations/style-dictionary)
+- [Tokens Studio for Figma](/docs/integrations/tokens-studio)
+
+## Custom Plugins
+
+Cobalt was designed to be easy to create plugins within minutes. View the [developer guide to creating plugins](/docs/guides/plugins) to learn more.
diff --git a/docs/src/pages/docs/plugins/js.md b/docs/src/pages/docs/integrations/js.md
similarity index 85%
rename from docs/src/pages/docs/plugins/js.md
rename to docs/src/pages/docs/integrations/js.md
index 2bbf52e2..bcedb33e 100644
--- a/docs/src/pages/docs/plugins/js.md
+++ b/docs/src/pages/docs/integrations/js.md
@@ -5,7 +5,7 @@ layout: ../../../layouts/docs.astro
 
 # @cobalt-ui/plugin-js
 
-Generate `.js`, and `.json` from your design tokens using [Cobalt](https://cobalt-ui.pages.dev).
+Generate JSON and JS (with TypeScript types) from your design tokens using [Cobalt](https://cobalt-ui.pages.dev).
 
 **Features**
 
@@ -72,7 +72,13 @@ In addition, you’ll also find the following named exports:
 
 ### JSON
 
-This plugin’s JSON output has the same shape as the JS output. This format may be preferable if you’re preparing the tokens for an API or some other non-JS runtime.
+This plugin’s JSON output has the same shape as the JS output. This format is preferable if you’re preparing tokens for an API, or for native apps (iOS or Android).
+
+Note that even if your tokens started off as a `tokens.json` file, this output JSON differs in the following ways:
+
+- It flattens deeply-nested structures into a single depth (e.g. `color.core.blue.500` becomes `tokens["color.core.blue.500"]`)
+- It resolves all aliases (so you don’t have to)
+- It normalizes token values (especially helpful when the original spec is loose in what’s accepted)
 
 ## Options
 
diff --git a/docs/src/pages/docs/plugins/sass.md b/docs/src/pages/docs/integrations/sass.md
similarity index 98%
rename from docs/src/pages/docs/plugins/sass.md
rename to docs/src/pages/docs/integrations/sass.md
index 9741b9c0..bd27bdf9 100644
--- a/docs/src/pages/docs/plugins/sass.md
+++ b/docs/src/pages/docs/integrations/sass.md
@@ -5,11 +5,11 @@ layout: ../../../layouts/docs.astro
 
 # @cobalt-ui/plugin-sass
 
-Generate `.scss` and `.sass` output from your design tokens using [Cobalt](https://cobalt-ui.pages.dev).
+Generate Sass output (`.scss` or `.sass`) from your design tokens using [Cobalt](https://cobalt-ui.pages.dev).
 
 **Features**
 
-- ✅ Supports all features of the [CSS plugin](https://cobalt-ui.pages.dev/plugins/css)
+- ✅ Supports all features of the [CSS plugin](https://cobalt-ui.pages.dev/integrations/css)
 - ✅ Strong typechecking with Sass to never have broken styles
 
 ## Setup
diff --git a/docs/src/pages/docs/guides/style-dictionary.md b/docs/src/pages/docs/integrations/style-dictionary.md
similarity index 100%
rename from docs/src/pages/docs/guides/style-dictionary.md
rename to docs/src/pages/docs/integrations/style-dictionary.md
diff --git a/docs/src/pages/docs/guides/tokens-studio.md b/docs/src/pages/docs/integrations/tokens-studio.md
similarity index 100%
rename from docs/src/pages/docs/guides/tokens-studio.md
rename to docs/src/pages/docs/integrations/tokens-studio.md
diff --git a/docs/src/pages/docs/plugins/index.md b/docs/src/pages/docs/plugins/index.md
deleted file mode 100644
index 04e7fd20..00000000
--- a/docs/src/pages/docs/plugins/index.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: Plugins
-layout: ../../../layouts/docs.astro
----
-
-# Plugins
-
-Plugins let you **generate code** from `tokens.json`. Here are all current plugins available:
-
-- [@cobalt-ui/plugin-css](/docs/plugins/css): Generate `.css`
-- [@cobalt-ui/plugin-js](/docs/plugins/js): Generate `.js`, `.ts`, and `.json`
-- [@cobalt-ui/plugin-sass](/docs/plugins/sass): Generate `.scss` or `.sass`
-
-## Creating Plugins
-
-Cobalt was designed to be easy to create plugins within minutes. View the [developer guide to creating plugins](/docs/guides/plugins) to learn more.
diff --git a/docs/src/pages/docs/reference/cli.md b/docs/src/pages/docs/reference/cli.md
index 5045720e..3289c7ef 100644
--- a/docs/src/pages/docs/reference/cli.md
+++ b/docs/src/pages/docs/reference/cli.md
@@ -19,7 +19,7 @@ All CLI commands require a [config](/docs/reference/config/) to work properly, w
 
 | Command                       | Notes                                                                                                                                                                                                                                           |
 | :---------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `build`                       | Turn design tokens into output files using [plugins](/docs/plugins). You can watch for changes in dev mode with `build --watch`.                                                                                                                |
+| `build`                       | Turn design tokens into output files using [plugins](/docs/integrations). You can watch for changes in dev mode with `build --watch`.                                                                                                           |
 | `bundle --out [path]`         | Bundle multiple `tokens.json` files into one, e.g. `co bundle --out path/to/output.json`. Can output `.json` or `.yaml`. Requires [multiple schemas set in config](https://cobalt-ui.pages.dev/docs/reference/config/#loading-multiple-schemas) |
 | `check [path]`                | Validate a `tokens.json` file and check for errors. This won’t output any files.                                                                                                                                                                |
 | `init`                        | Create a starter `tokens.json` file.                                                                                                                                                                                                            |
diff --git a/docs/src/pages/docs/reference/config.md b/docs/src/pages/docs/reference/config.md
index 20976ee6..f7e20b55 100644
--- a/docs/src/pages/docs/reference/config.md
+++ b/docs/src/pages/docs/reference/config.md
@@ -91,8 +91,8 @@ export default {
 
 You can sync tokens with Figma by using the [Tokens Studio for Figma](/docs/guides/tokens-studio) plugin.
 
-## Plugins
+## Integrations
 
-Each plugin comes with its own rules and setup. Follow the corresponding plugin guide to enable code generation:
+Each integration comes with its own rules and setup. Follow the corresponding guide to enable code generation:
 
-👉 **[View plugins](/docs/plugins)**
+👉 **[View Integrations](/docs/integrations)**
diff --git a/docs/src/pages/docs/tokens/index.astro b/docs/src/pages/docs/tokens/index.astro
index 087041d7..bcefbfa6 100644
--- a/docs/src/pages/docs/tokens/index.astro
+++ b/docs/src/pages/docs/tokens/index.astro
@@ -26,7 +26,9 @@ const tokenDef = {
   <h1>Tokens</h1>
 
   <p>
-    Tokens are defined via the <a href="https://design-tokens.github.io/community-group/format/" target="_blank">the W3C Design Tokens format</a> schema (Apr 2023). Cobalt supports 100% of the spec, but with the following changes:
+    Tokens are defined via the <a href="https://design-tokens.github.io/community-group/format/" target="_blank">the W3C Design Tokens format</a> schema (Apr 2023). You’ll save your tokens in a <code>tokens.yaml</code> or <code
+      >tokens.json</code
+    > file in the root of your project. Cobalt supports 100% of the spec, but with the following changes:
   </p>
 
   <ul>
diff --git a/packages/cli/README.md b/packages/cli/README.md
index 9ab1ca5e..d93121c5 100644
--- a/packages/cli/README.md
+++ b/packages/cli/README.md
@@ -34,15 +34,15 @@ All CLI commands require a [config](/docs/reference/config/) to work properly, w
 
 | Command                       | Notes                                                                                                                                                                                                                                           |
 | :---------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `build`                       | Turn design tokens into output files using [plugins](/docs/plugins). You can watch for changes in dev mode with `build --watch`.                                                                                                                |
+| `build`                       | Turn design tokens into output files using [plugins]((https://cobalt-ui.pages.dev/docs//integrations). You can watch for changes in dev mode with `build --watch`.                                                                              |
 | `bundle --out [path]`         | Bundle multiple `tokens.json` files into one, e.g. `co bundle --out path/to/output.json`. Can output `.json` or `.yaml`. Requires [multiple schemas set in config](https://cobalt-ui.pages.dev/docs/reference/config/#loading-multiple-schemas) |
 | `check [path]`                | Validate a `tokens.json` file and check for errors. This won’t output any files.                                                                                                                                                                |
 | `init`                        | Create a starter `tokens.json` file.                                                                                                                                                                                                            |
-| `convert [path] --out [path]` | Convert a [Style Dictionary](https://amzn.github.io/style-dictionary) JSON file to the W3C format ([docs](/docs/guides/style-dictionary))                                                                                                       |
+| `convert [path] --out [path]` | Convert a [Style Dictionary](https://amzn.github.io/style-dictionary) JSON file to the W3C format ([docs](https://cobalt-ui.pages.dev/docs/guides/style-dictionary))                                                                            |
 
 ## Plugins
 
-Plugins are the entire purpose of using Cobalt! See the [plugin documentation](https://cobalt-ui.pages.dev/docs/plugins/) for instructions on getting started.
+Plugins are the entire purpose of using Cobalt! See the [plugin documentation](https://cobalt-ui.pages.dev/docs/integrations/) for instructions on getting started.
 
 ## Documentation
 
diff --git a/packages/plugin-css/README.md b/packages/plugin-css/README.md
index 67b785d2..930f57b5 100644
--- a/packages/plugin-css/README.md
+++ b/packages/plugin-css/README.md
@@ -1,6 +1,6 @@
 # @cobalt-ui/plugin-css
 
-Generate `.css` from your design tokens using [Cobalt](https://cobalt-ui.pages.dev).
+Generate CSS from your design tokens using [Cobalt](https://cobalt-ui.pages.dev).
 
 **Features**
 
@@ -316,7 +316,7 @@ export default {
 
 ### Usage with @cobalt-ui/plugin-sass
 
-If you’re using Sass in your project, you can load this plugin through [@cobalt-ui/plugin-sass](https://cobalt-ui.pages.dev/docs/plugins/sass/), which lets you use CSS vars while letting Sass typecheck everything and making sure your stylesheet references everything correctly.
+If you’re using Sass in your project, you can load this plugin through [@cobalt-ui/plugin-sass](https://cobalt-ui.pages.dev/docs/integrations/sass/), which lets you use CSS vars while letting Sass typecheck everything and making sure your stylesheet references everything correctly.
 
 To use this, replace this plugin with @cobalt-ui/plugin-sass in `tokens.config.mjs` and pass all options into `pluginCSS: {}`:
 
@@ -337,4 +337,4 @@ To use this, replace this plugin with @cobalt-ui/plugin-sass in `tokens.config.m
   };
 ```
 
-This changes `token('color.blue')` to return CSS vars rather than the original values. To learn more, [read the docs](https://cobalt-ui.pages.dev/docs/plugins/sass/).
+This changes `token('color.blue')` to return CSS vars rather than the original values. To learn more, [read the docs](https://cobalt-ui.pages.dev/docs/integrations/sass/).
diff --git a/packages/plugin-js/README.md b/packages/plugin-js/README.md
index b5e04736..76ab5b7e 100644
--- a/packages/plugin-js/README.md
+++ b/packages/plugin-js/README.md
@@ -1,6 +1,6 @@
 # @cobalt-ui/plugin-js
 
-Generate `.js`, and `.json` from your design tokens using [Cobalt](https://cobalt-ui.pages.dev).
+Generate JSON and JS (with TypeScript types) from your design tokens using [Cobalt](https://cobalt-ui.pages.dev).
 
 **Features**
 
@@ -67,7 +67,13 @@ In addition, you’ll also find the following named exports:
 
 ### JSON
 
-This plugin’s JSON output has the same shape as the JS output. This format may be preferable if you’re preparing the tokens for an API or some other non-JS runtime.
+This plugin’s JSON output has the same shape as the JS output. This format is preferable if you’re preparing tokens for an API, or for native apps (iOS or Android).
+
+Note that even if your tokens started off as a `tokens.json` file, this output JSON differs in the following ways:
+
+- It flattens deeply-nested structures into a single depth (e.g. `color.core.blue.500` becomes `tokens["color.core.blue.500"]`)
+- It resolves all aliases (so you don’t have to)
+- It normalizes token values (especially helpful when the original spec is loose in what’s accepted)
 
 ## Options
 
diff --git a/packages/plugin-sass/README.md b/packages/plugin-sass/README.md
index 7ccb1181..d07ea182 100644
--- a/packages/plugin-sass/README.md
+++ b/packages/plugin-sass/README.md
@@ -4,7 +4,7 @@ Generate `.scss` and `.sass` output from your design tokens using [Cobalt](https
 
 **Features**
 
-- ✅ Supports all features of the [CSS plugin](https://cobalt-ui.pages.dev/plugins/css)
+- ✅ Supports all features of the [CSS plugin](https://cobalt-ui.pages.dev/integrations/css)
 - ✅ Strong typechecking with Sass to never have broken styles
 
 ## Setup