docs(tokens): renaming crayon tokens to primitive tokens

docs/foundations/color/index.md

@@ -77,26 +77,26 @@ Design tokens are how we communicate and translate our design decisions to code.
 
 To learn more, go to the [Tokens][tokens] section.
 
-### Crayon and semantic tokens
+### Primitive and semantic tokens
 
 Our design system includes two sets of tokens:
 
-- **Crayon tokens** - reference hard-coded values and offer no information about usage
-- **Semantic tokens** - reference crayon colors and define how a color should be used
+- **Primitive tokens** reference hard-coded values and offer no information about usage
+- **Semantic tokens** reference primitive colors and define how a color should be used
 
 <rh-alert state="info">
   <h4 slot="header">Helpful tip</h4>
   <p>Semantic naming is essential not only just for color, but for all foundational styles.</p>
 </rh-alert>
 
 <uxdot-example width-adjustment="730px">
-  <img alt="Diagram showing how crayon color tokens are aliased to semantic tokens, which are used to style a button"
+  <img alt="Diagram showing how primitive color tokens are aliased to semantic tokens, which are used to style a button"
        src="/assets/color/color-semantic-tokens.svg"
        width="840"
        height="599">
 </uxdot-example>
 
-### Color palette tokens
+### Primitive color palette tokens
 
 <section id="crayons-grid">
 {%- for crayon in crayons -%}

docs/theming/customizing.md

@@ -81,7 +81,7 @@ theme might look like this:
 </uxdot-pattern>
 
 <rh-alert>When writing themes, use the semantic, themeable tokens such as
-`--rh-color-interactive-primary-default-on-light` rather than the crayon tokens
+`--rh-color-interactive-primary-default-on-light` rather than the primitive tokens
 e.g. `--rh-color-purple-10`.</rh-alert>
 
 <rh-alert state="warning">

docs/tokens/index.md

@@ -58,11 +58,11 @@ To install design tokens, please visit our dedicated repo for instructions.
 
 <div id="token-types" class="grid xs-two-columns sm-three-columns">
   <rh-card>
-    <h3 slot="header">Global tokens</h3>
-    <p>Global tokens represent the foundations of our design language and should
-    have context-agnostic names. These can be used and are inherited by other
+    <h3 slot="header">Primitive tokens</h3>
+    <p>Primitive tokens represent the foundations of our design language and should
+    have context-agnostic names since they are global. These can be used and are inherited by other
     token types.</p>
-    <p>Example:<br><code>--rh-brand-red-500</code></p>
+    <p>Example:<br><code>--rh-color-red-50</code></p>
   </rh-card>
 
   <rh-card>