diff --git a/docs/docs/themes/index.njk b/docs/docs/themes/index.njk
index 463251eba..920079c5b 100644
--- a/docs/docs/themes/index.njk
+++ b/docs/docs/themes/index.njk
@@ -14,7 +14,7 @@ categories:
## What's a Theme?
-Themes are a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover a range of styles from colors to transitions. We use these custom properties throughout Web Awesome components for a cohesive look and feel. Our [Theming pages](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.
+A theme is a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), also called "design tokens," that cover a range of styles from colors to transitions. We use these tokens throughout Web Awesome components for a cohesive look and feel. Our [Design Tokens pages](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.
Themes are scoped to unique classes, such as `wa-theme-default` or `wa-theme-classic`.
Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions.
diff --git a/docs/docs/tokens/color.md b/docs/docs/tokens/color.md
index 9526cce99..4763300c7 100644
--- a/docs/docs/tokens/color.md
+++ b/docs/docs/tokens/color.md
@@ -487,7 +487,7 @@ Overlays provide a backdrop to isolate content, often allowing background contex
### Shadow
Web Awesome uses a single color for all shadows.
-This is used alongside other [shadow properties](/docs/tokens/shadows) to construct your theme's shadows.
+This is used alongside other [shadow tokens](/docs/tokens/shadows) to construct your theme's shadows.
| Custom Property | Preview |
| ------------------- | --------------------------------------------------------------------------- |
@@ -497,7 +497,7 @@ This is used alongside other [shadow properties](/docs/tokens/shadows) to constr
#### Focus
-Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus properties](/docs/tokens/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
+Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus tokens](/docs/tokens/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
| Custom Property | Preview |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
diff --git a/docs/docs/tokens/focus.md b/docs/docs/tokens/focus.md
index 7bb472676..d1dbac7b0 100644
--- a/docs/docs/tokens/focus.md
+++ b/docs/docs/tokens/focus.md
@@ -3,7 +3,7 @@ title: Focus
description: Configure recognizable focus states with Web Awesome's focus properties.
---
-A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/tokens/color/#interactions), these custom properties create a uniform focus state for Web Awesome components.
+A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/tokens/color/#interactions), these tokens create a uniform focus state for Web Awesome components.
| Custom Property | Default Value |
diff --git a/docs/docs/tokens/shadows.md b/docs/docs/tokens/shadows.md
index 1e2952c26..5691ed721 100644
--- a/docs/docs/tokens/shadows.md
+++ b/docs/docs/tokens/shadows.md
@@ -3,7 +3,7 @@ title: Shadows
description: Elevate your components with Web Awesome's shadow properties.
---
-Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/tokens/color/#shadow), these custom properties create realistic shadows for Web Awesome components.
+Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/tokens/color/#shadow), these tokens create realistic shadows for Web Awesome components.
Shadows are constructed using corresponding offset-x, offset-y, blur, and spread properties, detailed in the sections below. In Web Awesome, shadows use a size-based scale where larger shadows have greater offset and blur values to indicate greater distance from the surface below.
diff --git a/docs/docs/tokens/typography.md b/docs/docs/tokens/typography.md
index 069625d5a..b6ddb2ccf 100644
--- a/docs/docs/tokens/typography.md
+++ b/docs/docs/tokens/typography.md
@@ -69,7 +69,7 @@ Line heights control the distance between lines of text and are unitless to scal
## Links
-Together with [`--wa-color-link`](/docs/tokens/color/#text), these custom properties add text decoration to `` elements to signal their role as hyperlinks.
+Together with [`--wa-color-link`](/docs/tokens/color/#text), these tokens add text decoration to `` elements to signal their role as hyperlinks.
| Custom Property | Default Value |
| ------------------------------ | ---------------------------------------------------------------------------------- |
diff --git a/docs/docs/utilities/gap.md b/docs/docs/utilities/gap.md
index 5f2e0e5b2..fa8938e36 100644
--- a/docs/docs/utilities/gap.md
+++ b/docs/docs/utilities/gap.md
@@ -16,7 +16,7 @@ tags: ["utilities", "layout"]
Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to change the space between items.
Or even by themselves — all gap properties also set `display: flex` with a specificity of 0 so that it can be trivially overridden.
-Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/tokens/space) properties in your theme.
+Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/tokens/space) tokens in your theme.
| Class Name | `gap` Value | Preview |
| ------------ | ---------------- | ----------------------------------------------------------------------------------------------------------- |
diff --git a/docs/docs/utilities/rounding.md b/docs/docs/utilities/rounding.md
index 3cc24f218..2a834bdfc 100644
--- a/docs/docs/utilities/rounding.md
+++ b/docs/docs/utilities/rounding.md
@@ -14,7 +14,7 @@ status: wip
Web Awesome includes classes to set an element's `border-radius` property. They can be used alongside Web Awesome layout utilities, like [frame](/docs/layout/frame), to round all corners of an element.
-Each class corresponds to one of the [`--wa-border-radius-*`](/docs/tokens/borders/#radius) properties in your theme.
+Each class corresponds to one of the [`--wa-border-radius-*`](/docs/tokens/borders/#radius) tokens in your theme.
| Class Name | `border-radius` Value | Preview |
| ------------------------- | --------------------------- | --------------------------------------------------------------------------------------- |
diff --git a/docs/docs/utilities/text.md b/docs/docs/utilities/text.md
index 55cddf9c8..ad8139b4e 100644
--- a/docs/docs/utilities/text.md
+++ b/docs/docs/utilities/text.md
@@ -13,7 +13,7 @@ Use body classes to style the main content of your pages. Each `wa-body-*` class
- `font-weight: var(--wa-font-weight-body);`
- `line-height: var(--wa-line-height-normal);`
-Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) property from your theme.
+Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme.
| Class Name | `font-size` Value | Preview |
| ------------------ | -------------------- | ------------------------------------------------------------------------- |
@@ -31,7 +31,7 @@ Use heading classes to style section titles and headings in your content. Each `
- `line-height: var(--wa-line-height-condensed);`
- `text-wrap: balance;`
-Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) property from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
+Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
| Class Name | `font-size` Value | Preview |
| ---------------- | -------------------- | ----------------------------------------------------- |
@@ -51,7 +51,7 @@ Use caption classes to style descriptions or auxiliary text in your content. Eac
- `font-weight: var(--wa-font-weight-body);`
- `line-height: var(--wa-line-height-condensed);`
-Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) property from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
+Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
| Class Name | `font-size` Value | Preview |
| ---------------- | -------------------- | ------------------------------------------------------------------------------ |