@sage/design-tokens 2.64.0 → 2.65.0

package/docs/tokens/origin/{colors → origin-colors-reference-only}/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
 
-    <title>Sage Design Tokens / origin / colors</title>
+    <title>Sage Design Tokens / origin / origin-colors (reference only)</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -263,8 +263,8 @@
                 </p>
                 <ul class="menu-list">
                         <li>
-                            <a href="../../origin/colors/index.html">
-                                colors
+                            <a href="../../origin/origin-colors-reference-only/index.html">
+                                origin-colors (reference only)
                             </a>
                         </li>
                 </ul>
@@ -280,7 +280,7 @@
                 origin
             </a>
             /
-            colors
+            origin-colors (reference only)
         </h1>
 
         <section class="my-6">
@@ -299,1165 +299,1165 @@
               </thead>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsJade100"
-                            title="theme: origin; category: colors; name: jade; variant: 100; ">
-                            colorsJade100
-                            <a href="#origin-colorsJade100"
+                            id="origin-originColorsReferenceOnlyYin100"
+                            title="theme: origin; category: origin-colors (reference only); name: yin; variant: 100; ">
+                            originColorsReferenceOnlyYin100
+                            <a href="#origin-originColorsReferenceOnlyYin100"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#8ff8b7ff</pre>
+                            <pre>#000000ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #8ff8b7ff;">
+                         style="background-color: #000000ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsJade200"
-                            title="theme: origin; category: colors; name: jade; variant: 200; ">
-                            colorsJade200
-                            <a href="#origin-colorsJade200"
+                            id="origin-originColorsReferenceOnlyYin010"
+                            title="theme: origin; category: origin-colors (reference only); name: yin; variant: 010; ">
+                            originColorsReferenceOnlyYin010
+                            <a href="#origin-originColorsReferenceOnlyYin010"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#44ed90ff</pre>
+                            <pre>#0000001a</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #44ed90ff;">
+                         style="background-color: #0000001a;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsJade300"
-                            title="theme: origin; category: colors; name: jade; variant: 300; ">
-                            colorsJade300
-                            <a href="#origin-colorsJade300"
+                            id="origin-originColorsReferenceOnlyYin020"
+                            title="theme: origin; category: origin-colors (reference only); name: yin; variant: 020; ">
+                            originColorsReferenceOnlyYin020
+                            <a href="#origin-originColorsReferenceOnlyYin020"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#00ca71ff</pre>
+                            <pre>#00000033</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #00ca71ff;">
+                         style="background-color: #00000033;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsJade400"
-                            title="theme: origin; category: colors; name: jade; variant: 400; ">
-                            colorsJade400
-                            <a href="#origin-colorsJade400"
+                            id="origin-originColorsReferenceOnlyYin030"
+                            title="theme: origin; category: origin-colors (reference only); name: yin; variant: 030; ">
+                            originColorsReferenceOnlyYin030
+                            <a href="#origin-originColorsReferenceOnlyYin030"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#00a65cff</pre>
+                            <pre>#0000004d</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #00a65cff;">
+                         style="background-color: #0000004d;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsJade500"
-                            title="theme: origin; category: colors; name: jade; variant: 500; ">
-                            colorsJade500
-                            <a href="#origin-colorsJade500"
+                            id="origin-originColorsReferenceOnlyYin055"
+                            title="theme: origin; category: origin-colors (reference only); name: yin; variant: 055; ">
+                            originColorsReferenceOnlyYin055
+                            <a href="#origin-originColorsReferenceOnlyYin055"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#00884aff</pre>
+                            <pre>#0000008c</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #00884aff;">
+                         style="background-color: #0000008c;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsJade600"
-                            title="theme: origin; category: colors; name: jade; variant: 600; ">
-                            colorsJade600
-                            <a href="#origin-colorsJade600"
+                            id="origin-originColorsReferenceOnlyYin065"
+                            title="theme: origin; category: origin-colors (reference only); name: yin; variant: 065; ">
+                            originColorsReferenceOnlyYin065
+                            <a href="#origin-originColorsReferenceOnlyYin065"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#006d3bff</pre>
+                            <pre>#000000a6</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #006d3bff;">
+                         style="background-color: #000000a6;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsJade700"
-                            title="theme: origin; category: colors; name: jade; variant: 700; ">
-                            colorsJade700
-                            <a href="#origin-colorsJade700"
+                            id="origin-originColorsReferenceOnlyYin075"
+                            title="theme: origin; category: origin-colors (reference only); name: yin; variant: 075; ">
+                            originColorsReferenceOnlyYin075
+                            <a href="#origin-originColorsReferenceOnlyYin075"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#00522cff</pre>
+                            <pre>#000000bf</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #00522cff;">
+                         style="background-color: #000000bf;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsJade800"
-                            title="theme: origin; category: colors; name: jade; variant: 800; ">
-                            colorsJade800
-                            <a href="#origin-colorsJade800"
+                            id="origin-originColorsReferenceOnlyYin090"
+                            title="theme: origin; category: origin-colors (reference only); name: yin; variant: 090; ">
+                            originColorsReferenceOnlyYin090
+                            <a href="#origin-originColorsReferenceOnlyYin090"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#00361eff</pre>
+                            <pre>#000000e6</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #00361eff;">
+                         style="background-color: #000000e6;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsJade900"
-                            title="theme: origin; category: colors; name: jade; variant: 900; ">
-                            colorsJade900
-                            <a href="#origin-colorsJade900"
+                            id="origin-originColorsReferenceOnlyYang100"
+                            title="theme: origin; category: origin-colors (reference only); name: yang; variant: 100; ">
+                            originColorsReferenceOnlyYang100
+                            <a href="#origin-originColorsReferenceOnlyYang100"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#001b0fff</pre>
+                            <pre>#ffffffff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #001b0fff;">
+                         style="background-color: #ffffffff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsJade010"
-                            title="theme: origin; category: colors; name: jade; variant: 010; ">
-                            colorsJade010
-                            <a href="#origin-colorsJade010"
+                            id="origin-originColorsReferenceOnlyYang030"
+                            title="theme: origin; category: origin-colors (reference only); name: yang; variant: 030; ">
+                            originColorsReferenceOnlyYang030
+                            <a href="#origin-originColorsReferenceOnlyYang030"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#f2fef7ff</pre>
+                            <pre>#ffffff4d</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #f2fef7ff;">
+                         style="background-color: #ffffff4d;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsJade050"
-                            title="theme: origin; category: colors; name: jade; variant: 050; ">
-                            colorsJade050
-                            <a href="#origin-colorsJade050"
+                            id="origin-originColorsReferenceOnlyYang080"
+                            title="theme: origin; category: origin-colors (reference only); name: yang; variant: 080; ">
+                            originColorsReferenceOnlyYang080
+                            <a href="#origin-originColorsReferenceOnlyYang080"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#c4fcd8ff</pre>
+                            <pre>#ffffffcc</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #c4fcd8ff;">
+                         style="background-color: #ffffffcc;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsNavy100"
-                            title="theme: origin; category: colors; name: navy; variant: 100; ">
-                            colorsNavy100
-                            <a href="#origin-colorsNavy100"
+                            id="origin-originColorsReferenceOnlyMalachite100"
+                            title="theme: origin; category: origin-colors (reference only); name: malachite; variant: 100; ">
+                            originColorsReferenceOnlyMalachite100
+                            <a href="#origin-originColorsReferenceOnlyMalachite100"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#89d7edff</pre>
+                            <pre>#8df79fff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #89d7edff;">
+                         style="background-color: #8df79fff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsNavy200"
-                            title="theme: origin; category: colors; name: navy; variant: 200; ">
-                            colorsNavy200
-                            <a href="#origin-colorsNavy200"
+                            id="origin-originColorsReferenceOnlyMalachite200"
+                            title="theme: origin; category: origin-colors (reference only); name: malachite; variant: 200; ">
+                            originColorsReferenceOnlyMalachite200
+                            <a href="#origin-originColorsReferenceOnlyMalachite200"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#65bedfff</pre>
+                            <pre>#42eb64ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #65bedfff;">
+                         style="background-color: #42eb64ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsNavy300"
-                            title="theme: origin; category: colors; name: navy; variant: 300; ">
-                            colorsNavy300
-                            <a href="#origin-colorsNavy300"
+                            id="origin-originColorsReferenceOnlyMalachite300"
+                            title="theme: origin; category: origin-colors (reference only); name: malachite; variant: 300; ">
+                            originColorsReferenceOnlyMalachite300
+                            <a href="#origin-originColorsReferenceOnlyMalachite300"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#41a5d1ff</pre>
+                            <pre>#00d639ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #41a5d1ff;">
+                         style="background-color: #00d639ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsNavy400"
-                            title="theme: origin; category: colors; name: navy; variant: 400; ">
-                            colorsNavy400
-                            <a href="#origin-colorsNavy400"
+                            id="origin-originColorsReferenceOnlyMalachite400"
+                            title="theme: origin; category: origin-colors (reference only); name: malachite; variant: 400; ">
+                            originColorsReferenceOnlyMalachite400
+                            <a href="#origin-originColorsReferenceOnlyMalachite400"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#1d8cc3ff</pre>
+                            <pre>#00af2dff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #1d8cc3ff;">
+                         style="background-color: #00af2dff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsNavy500"
-                            title="theme: origin; category: colors; name: navy; variant: 500; ">
-                            colorsNavy500
-                            <a href="#origin-colorsNavy500"
+                            id="origin-originColorsReferenceOnlyMalachite500"
+                            title="theme: origin; category: origin-colors (reference only); name: malachite; variant: 500; ">
+                            originColorsReferenceOnlyMalachite500
+                            <a href="#origin-originColorsReferenceOnlyMalachite500"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#0e74a7ff</pre>
+                            <pre>#008a21ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #0e74a7ff;">
+                         style="background-color: #008a21ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsNavy600"
-                            title="theme: origin; category: colors; name: navy; variant: 600; ">
-                            colorsNavy600
-                            <a href="#origin-colorsNavy600"
+                            id="origin-originColorsReferenceOnlyMalachite600"
+                            title="theme: origin; category: origin-colors (reference only); name: malachite; variant: 600; ">
+                            originColorsReferenceOnlyMalachite600
+                            <a href="#origin-originColorsReferenceOnlyMalachite600"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#095b84ff</pre>
+                            <pre>#006716ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #095b84ff;">
+                         style="background-color: #006716ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsNavy700"
-                            title="theme: origin; category: colors; name: navy; variant: 700; ">
-                            colorsNavy700
-                            <a href="#origin-colorsNavy700"
+                            id="origin-originColorsReferenceOnlyMalachite700"
+                            title="theme: origin; category: origin-colors (reference only); name: malachite; variant: 700; ">
+                            originColorsReferenceOnlyMalachite700
+                            <a href="#origin-originColorsReferenceOnlyMalachite700"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#054262ff</pre>
+                            <pre>#00460cff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #054262ff;">
+                         style="background-color: #00460cff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsNavy800"
-                            title="theme: origin; category: colors; name: navy; variant: 800; ">
-                            colorsNavy800
-                            <a href="#origin-colorsNavy800"
+                            id="origin-originColorsReferenceOnlyMalachite800"
+                            title="theme: origin; category: origin-colors (reference only); name: malachite; variant: 800; ">
+                            originColorsReferenceOnlyMalachite800
+                            <a href="#origin-originColorsReferenceOnlyMalachite800"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#00293fff</pre>
+                            <pre>#002f08ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #00293fff;">
+                         style="background-color: #002f08ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsNavy900"
-                            title="theme: origin; category: colors; name: navy; variant: 900; ">
-                            colorsNavy900
-                            <a href="#origin-colorsNavy900"
+                            id="origin-originColorsReferenceOnlyMalachite900"
+                            title="theme: origin; category: origin-colors (reference only); name: malachite; variant: 900; ">
+                            originColorsReferenceOnlyMalachite900
+                            <a href="#origin-originColorsReferenceOnlyMalachite900"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#001520ff</pre>
+                            <pre>#001704ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #001520ff;">
+                         style="background-color: #001704ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsNavy010"
-                            title="theme: origin; category: colors; name: navy; variant: 010; ">
-                            colorsNavy010
-                            <a href="#origin-colorsNavy010"
+                            id="origin-originColorsReferenceOnlyMalachite010"
+                            title="theme: origin; category: origin-colors (reference only); name: malachite; variant: 010; ">
+                            originColorsReferenceOnlyMalachite010
+                            <a href="#origin-originColorsReferenceOnlyMalachite010"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#f4fcfeff</pre>
+                            <pre>#effcf0ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #f4fcfeff;">
+                         style="background-color: #effcf0ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsNavy050"
-                            title="theme: origin; category: colors; name: navy; variant: 050; ">
-                            colorsNavy050
-                            <a href="#origin-colorsNavy050"
+                            id="origin-originColorsReferenceOnlyMalachite050"
+                            title="theme: origin; category: origin-colors (reference only); name: malachite; variant: 050; ">
+                            originColorsReferenceOnlyMalachite050
+                            <a href="#origin-originColorsReferenceOnlyMalachite050"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#caf1fcff</pre>
+                            <pre>#c1fac7ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #caf1fcff;">
+                         style="background-color: #c1fac7ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTeal100"
-                            title="theme: origin; category: colors; name: teal; variant: 100; ">
-                            colorsTeal100
-                            <a href="#origin-colorsTeal100"
+                            id="origin-originColorsReferenceOnlyJade100"
+                            title="theme: origin; category: origin-colors (reference only); name: jade; variant: 100; ">
+                            originColorsReferenceOnlyJade100
+                            <a href="#origin-originColorsReferenceOnlyJade100"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#89edeaff</pre>
+                            <pre>#8ff8b7ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #89edeaff;">
+                         style="background-color: #8ff8b7ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTeal200"
-                            title="theme: origin; category: colors; name: teal; variant: 200; ">
-                            colorsTeal200
-                            <a href="#origin-colorsTeal200"
+                            id="origin-originColorsReferenceOnlyJade200"
+                            title="theme: origin; category: origin-colors (reference only); name: jade; variant: 200; ">
+                            originColorsReferenceOnlyJade200
+                            <a href="#origin-originColorsReferenceOnlyJade200"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#5bcfcdff</pre>
+                            <pre>#44ed90ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #5bcfcdff;">
+                         style="background-color: #44ed90ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTeal300"
-                            title="theme: origin; category: colors; name: teal; variant: 300; ">
-                            colorsTeal300
-                            <a href="#origin-colorsTeal300"
+                            id="origin-originColorsReferenceOnlyJade300"
+                            title="theme: origin; category: origin-colors (reference only); name: jade; variant: 300; ">
+                            originColorsReferenceOnlyJade300
+                            <a href="#origin-originColorsReferenceOnlyJade300"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#2eb2b1ff</pre>
+                            <pre>#00ca71ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #2eb2b1ff;">
+                         style="background-color: #00ca71ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTeal400"
-                            title="theme: origin; category: colors; name: teal; variant: 400; ">
-                            colorsTeal400
-                            <a href="#origin-colorsTeal400"
+                            id="origin-originColorsReferenceOnlyJade400"
+                            title="theme: origin; category: origin-colors (reference only); name: jade; variant: 400; ">
+                            originColorsReferenceOnlyJade400
+                            <a href="#origin-originColorsReferenceOnlyJade400"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#009494ff</pre>
+                            <pre>#00a65cff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #009494ff;">
+                         style="background-color: #00a65cff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTeal500"
-                            title="theme: origin; category: colors; name: teal; variant: 500; ">
-                            colorsTeal500
-                            <a href="#origin-colorsTeal500"
+                            id="origin-originColorsReferenceOnlyJade500"
+                            title="theme: origin; category: origin-colors (reference only); name: jade; variant: 500; ">
+                            originColorsReferenceOnlyJade500
+                            <a href="#origin-originColorsReferenceOnlyJade500"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#007776ff</pre>
+                            <pre>#00884aff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #007776ff;">
+                         style="background-color: #00884aff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTeal600"
-                            title="theme: origin; category: colors; name: teal; variant: 600; ">
-                            colorsTeal600
-                            <a href="#origin-colorsTeal600"
+                            id="origin-originColorsReferenceOnlyJade600"
+                            title="theme: origin; category: origin-colors (reference only); name: jade; variant: 600; ">
+                            originColorsReferenceOnlyJade600
+                            <a href="#origin-originColorsReferenceOnlyJade600"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#006362ff</pre>
+                            <pre>#006d3bff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #006362ff;">
+                         style="background-color: #006d3bff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTeal700"
-                            title="theme: origin; category: colors; name: teal; variant: 700; ">
-                            colorsTeal700
-                            <a href="#origin-colorsTeal700"
+                            id="origin-originColorsReferenceOnlyJade700"
+                            title="theme: origin; category: origin-colors (reference only); name: jade; variant: 700; ">
+                            originColorsReferenceOnlyJade700
+                            <a href="#origin-originColorsReferenceOnlyJade700"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#004a4aff</pre>
+                            <pre>#00522cff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #004a4aff;">
+                         style="background-color: #00522cff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTeal800"
-                            title="theme: origin; category: colors; name: teal; variant: 800; ">
-                            colorsTeal800
-                            <a href="#origin-colorsTeal800"
+                            id="origin-originColorsReferenceOnlyJade800"
+                            title="theme: origin; category: origin-colors (reference only); name: jade; variant: 800; ">
+                            originColorsReferenceOnlyJade800
+                            <a href="#origin-originColorsReferenceOnlyJade800"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#003231ff</pre>
+                            <pre>#00361eff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #003231ff;">
+                         style="background-color: #00361eff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTeal900"
-                            title="theme: origin; category: colors; name: teal; variant: 900; ">
-                            colorsTeal900
-                            <a href="#origin-colorsTeal900"
+                            id="origin-originColorsReferenceOnlyJade900"
+                            title="theme: origin; category: origin-colors (reference only); name: jade; variant: 900; ">
+                            originColorsReferenceOnlyJade900
+                            <a href="#origin-originColorsReferenceOnlyJade900"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#001919ff</pre>
+                            <pre>#001b0fff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #001919ff;">
+                         style="background-color: #001b0fff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTeal010"
-                            title="theme: origin; category: colors; name: teal; variant: 010; ">
-                            colorsTeal010
-                            <a href="#origin-colorsTeal010"
+                            id="origin-originColorsReferenceOnlyJade010"
+                            title="theme: origin; category: origin-colors (reference only); name: jade; variant: 010; ">
+                            originColorsReferenceOnlyJade010
+                            <a href="#origin-originColorsReferenceOnlyJade010"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#f4fefeff</pre>
+                            <pre>#f2fef7ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #f4fefeff;">
+                         style="background-color: #f2fef7ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTeal050"
-                            title="theme: origin; category: colors; name: teal; variant: 050; ">
-                            colorsTeal050
-                            <a href="#origin-colorsTeal050"
+                            id="origin-originColorsReferenceOnlyJade050"
+                            title="theme: origin; category: origin-colors (reference only); name: jade; variant: 050; ">
+                            originColorsReferenceOnlyJade050
+                            <a href="#origin-originColorsReferenceOnlyJade050"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#c3faf8ff</pre>
+                            <pre>#c4fcd8ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #c3faf8ff;">
+                         style="background-color: #c4fcd8ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsCherry100"
-                            title="theme: origin; category: colors; name: cherry; variant: 100; ">
-                            colorsCherry100
-                            <a href="#origin-colorsCherry100"
+                            id="origin-originColorsReferenceOnlyNavy100"
+                            title="theme: origin; category: origin-colors (reference only); name: navy; variant: 100; ">
+                            originColorsReferenceOnlyNavy100
+                            <a href="#origin-originColorsReferenceOnlyNavy100"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#f7b3c2ff</pre>
+                            <pre>#89d7edff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #f7b3c2ff;">
+                         style="background-color: #89d7edff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsCherry200"
-                            title="theme: origin; category: colors; name: cherry; variant: 200; ">
-                            colorsCherry200
-                            <a href="#origin-colorsCherry200"
+                            id="origin-originColorsReferenceOnlyNavy200"
+                            title="theme: origin; category: origin-colors (reference only); name: navy; variant: 200; ">
+                            originColorsReferenceOnlyNavy200
+                            <a href="#origin-originColorsReferenceOnlyNavy200"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#ed94aaff</pre>
+                            <pre>#65bedfff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #ed94aaff;">
+                         style="background-color: #65bedfff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsCherry300"
-                            title="theme: origin; category: colors; name: cherry; variant: 300; ">
-                            colorsCherry300
-                            <a href="#origin-colorsCherry300"
+                            id="origin-originColorsReferenceOnlyNavy300"
+                            title="theme: origin; category: origin-colors (reference only); name: navy; variant: 300; ">
+                            originColorsReferenceOnlyNavy300
+                            <a href="#origin-originColorsReferenceOnlyNavy300"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#e27491ff</pre>
+                            <pre>#41a5d1ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #e27491ff;">
+                         style="background-color: #41a5d1ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsCherry400"
-                            title="theme: origin; category: colors; name: cherry; variant: 400; ">
-                            colorsCherry400
-                            <a href="#origin-colorsCherry400"
+                            id="origin-originColorsReferenceOnlyNavy400"
+                            title="theme: origin; category: origin-colors (reference only); name: navy; variant: 400; ">
+                            originColorsReferenceOnlyNavy400
+                            <a href="#origin-originColorsReferenceOnlyNavy400"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#d85579ff</pre>
+                            <pre>#1d8cc3ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #d85579ff;">
+                         style="background-color: #1d8cc3ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsCherry500"
-                            title="theme: origin; category: colors; name: cherry; variant: 500; ">
-                            colorsCherry500
-                            <a href="#origin-colorsCherry500"
+                            id="origin-originColorsReferenceOnlyNavy500"
+                            title="theme: origin; category: origin-colors (reference only); name: navy; variant: 500; ">
+                            originColorsReferenceOnlyNavy500
+                            <a href="#origin-originColorsReferenceOnlyNavy500"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#ba3c63ff</pre>
+                            <pre>#0e74a7ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #ba3c63ff;">
+                         style="background-color: #0e74a7ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsCherry600"
-                            title="theme: origin; category: colors; name: cherry; variant: 600; ">
-                            colorsCherry600
-                            <a href="#origin-colorsCherry600"
+                            id="origin-originColorsReferenceOnlyNavy600"
+                            title="theme: origin; category: origin-colors (reference only); name: navy; variant: 600; ">
+                            originColorsReferenceOnlyNavy600
+                            <a href="#origin-originColorsReferenceOnlyNavy600"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#95304fff</pre>
+                            <pre>#095b84ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #95304fff;">
+                         style="background-color: #095b84ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsCherry700"
-                            title="theme: origin; category: colors; name: cherry; variant: 700; ">
-                            colorsCherry700
-                            <a href="#origin-colorsCherry700"
+                            id="origin-originColorsReferenceOnlyNavy700"
+                            title="theme: origin; category: origin-colors (reference only); name: navy; variant: 700; ">
+                            originColorsReferenceOnlyNavy700
+                            <a href="#origin-originColorsReferenceOnlyNavy700"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#70243bff</pre>
+                            <pre>#054262ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #70243bff;">
+                         style="background-color: #054262ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsCherry800"
-                            title="theme: origin; category: colors; name: cherry; variant: 800; ">
-                            colorsCherry800
-                            <a href="#origin-colorsCherry800"
+                            id="origin-originColorsReferenceOnlyNavy800"
+                            title="theme: origin; category: origin-colors (reference only); name: navy; variant: 800; ">
+                            originColorsReferenceOnlyNavy800
+                            <a href="#origin-originColorsReferenceOnlyNavy800"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#4a1828ff</pre>
+                            <pre>#00293fff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #4a1828ff;">
+                         style="background-color: #00293fff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsCherry900"
-                            title="theme: origin; category: colors; name: cherry; variant: 900; ">
-                            colorsCherry900
-                            <a href="#origin-colorsCherry900"
+                            id="origin-originColorsReferenceOnlyNavy900"
+                            title="theme: origin; category: origin-colors (reference only); name: navy; variant: 900; ">
+                            originColorsReferenceOnlyNavy900
+                            <a href="#origin-originColorsReferenceOnlyNavy900"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#250c14ff</pre>
+                            <pre>#001520ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #250c14ff;">
+                         style="background-color: #001520ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsCherry010"
-                            title="theme: origin; category: colors; name: cherry; variant: 010; ">
-                            colorsCherry010
-                            <a href="#origin-colorsCherry010"
+                            id="origin-originColorsReferenceOnlyNavy010"
+                            title="theme: origin; category: origin-colors (reference only); name: navy; variant: 010; ">
+                            originColorsReferenceOnlyNavy010
+                            <a href="#origin-originColorsReferenceOnlyNavy010"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#fef5f7ff</pre>
+                            <pre>#f4fcfeff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #fef5f7ff;">
+                         style="background-color: #f4fcfeff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsCherry050"
-                            title="theme: origin; category: colors; name: cherry; variant: 050; ">
-                            colorsCherry050
-                            <a href="#origin-colorsCherry050"
+                            id="origin-originColorsReferenceOnlyNavy050"
+                            title="theme: origin; category: origin-colors (reference only); name: navy; variant: 050; ">
+                            originColorsReferenceOnlyNavy050
+                            <a href="#origin-originColorsReferenceOnlyNavy050"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#fad4deff</pre>
+                            <pre>#caf1fcff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #fad4deff;">
+                         style="background-color: #caf1fcff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTerra100"
-                            title="theme: origin; category: colors; name: terra; variant: 100; ">
-                            colorsTerra100
-                            <a href="#origin-colorsTerra100"
+                            id="origin-originColorsReferenceOnlyTeal100"
+                            title="theme: origin; category: origin-colors (reference only); name: teal; variant: 100; ">
+                            originColorsReferenceOnlyTeal100
+                            <a href="#origin-originColorsReferenceOnlyTeal100"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#ffbca6ff</pre>
+                            <pre>#89edeaff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #ffbca6ff;">
+                         style="background-color: #89edeaff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTerra200"
-                            title="theme: origin; category: colors; name: terra; variant: 200; ">
-                            colorsTerra200
-                            <a href="#origin-colorsTerra200"
+                            id="origin-originColorsReferenceOnlyTeal200"
+                            title="theme: origin; category: origin-colors (reference only); name: teal; variant: 200; ">
+                            originColorsReferenceOnlyTeal200
+                            <a href="#origin-originColorsReferenceOnlyTeal200"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#f59a83ff</pre>
+                            <pre>#5bcfcdff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #f59a83ff;">
+                         style="background-color: #5bcfcdff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTerra300"
-                            title="theme: origin; category: colors; name: terra; variant: 300; ">
-                            colorsTerra300
-                            <a href="#origin-colorsTerra300"
+                            id="origin-originColorsReferenceOnlyTeal300"
+                            title="theme: origin; category: origin-colors (reference only); name: teal; variant: 300; ">
+                            originColorsReferenceOnlyTeal300
+                            <a href="#origin-originColorsReferenceOnlyTeal300"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#ea7961ff</pre>
+                            <pre>#2eb2b1ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #ea7961ff;">
+                         style="background-color: #2eb2b1ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTerra400"
-                            title="theme: origin; category: colors; name: terra; variant: 400; ">
-                            colorsTerra400
-                            <a href="#origin-colorsTerra400"
+                            id="origin-originColorsReferenceOnlyTeal400"
+                            title="theme: origin; category: origin-colors (reference only); name: teal; variant: 400; ">
+                            originColorsReferenceOnlyTeal400
+                            <a href="#origin-originColorsReferenceOnlyTeal400"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#e0583eff</pre>
+                            <pre>#009494ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #e0583eff;">
+                         style="background-color: #009494ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTerra500"
-                            title="theme: origin; category: colors; name: terra; variant: 500; ">
-                            colorsTerra500
-                            <a href="#origin-colorsTerra500"
+                            id="origin-originColorsReferenceOnlyTeal500"
+                            title="theme: origin; category: origin-colors (reference only); name: teal; variant: 500; ">
+                            originColorsReferenceOnlyTeal500
+                            <a href="#origin-originColorsReferenceOnlyTeal500"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#c94633ff</pre>
+                            <pre>#007776ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #c94633ff;">
+                         style="background-color: #007776ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTerra600"
-                            title="theme: origin; category: colors; name: terra; variant: 600; ">
-                            colorsTerra600
-                            <a href="#origin-colorsTerra600"
+                            id="origin-originColorsReferenceOnlyTeal600"
+                            title="theme: origin; category: origin-colors (reference only); name: teal; variant: 600; ">
+                            originColorsReferenceOnlyTeal600
+                            <a href="#origin-originColorsReferenceOnlyTeal600"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#a13829ff</pre>
+                            <pre>#006362ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #a13829ff;">
+                         style="background-color: #006362ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTerra700"
-                            title="theme: origin; category: colors; name: terra; variant: 700; ">
-                            colorsTerra700
-                            <a href="#origin-colorsTerra700"
+                            id="origin-originColorsReferenceOnlyTeal700"
+                            title="theme: origin; category: origin-colors (reference only); name: teal; variant: 700; ">
+                            originColorsReferenceOnlyTeal700
+                            <a href="#origin-originColorsReferenceOnlyTeal700"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#782a1eff</pre>
+                            <pre>#004a4aff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #782a1eff;">
+                         style="background-color: #004a4aff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTerra800"
-                            title="theme: origin; category: colors; name: terra; variant: 800; ">
-                            colorsTerra800
-                            <a href="#origin-colorsTerra800"
+                            id="origin-originColorsReferenceOnlyTeal800"
+                            title="theme: origin; category: origin-colors (reference only); name: teal; variant: 800; ">
+                            originColorsReferenceOnlyTeal800
+                            <a href="#origin-originColorsReferenceOnlyTeal800"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#501c14ff</pre>
+                            <pre>#003231ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #501c14ff;">
+                         style="background-color: #003231ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTerra900"
-                            title="theme: origin; category: colors; name: terra; variant: 900; ">
-                            colorsTerra900
-                            <a href="#origin-colorsTerra900"
+                            id="origin-originColorsReferenceOnlyTeal900"
+                            title="theme: origin; category: origin-colors (reference only); name: teal; variant: 900; ">
+                            originColorsReferenceOnlyTeal900
+                            <a href="#origin-originColorsReferenceOnlyTeal900"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#280e0aff</pre>
+                            <pre>#001919ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #280e0aff;">
+                         style="background-color: #001919ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTerra010"
-                            title="theme: origin; category: colors; name: terra; variant: 010; ">
-                            colorsTerra010
-                            <a href="#origin-colorsTerra010"
+                            id="origin-originColorsReferenceOnlyTeal010"
+                            title="theme: origin; category: origin-colors (reference only); name: teal; variant: 010; ">
+                            originColorsReferenceOnlyTeal010
+                            <a href="#origin-originColorsReferenceOnlyTeal010"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#fff7f5ff</pre>
+                            <pre>#f4fefeff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #fff7f5ff;">
+                         style="background-color: #f4fefeff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsTerra050"
-                            title="theme: origin; category: colors; name: terra; variant: 050; ">
-                            colorsTerra050
-                            <a href="#origin-colorsTerra050"
+                            id="origin-originColorsReferenceOnlyTeal050"
+                            title="theme: origin; category: origin-colors (reference only); name: teal; variant: 050; ">
+                            originColorsReferenceOnlyTeal050
+                            <a href="#origin-originColorsReferenceOnlyTeal050"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#ffdcd1ff</pre>
+                            <pre>#c3faf8ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #ffdcd1ff;">
+                         style="background-color: #c3faf8ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsAmber100"
-                            title="theme: origin; category: colors; name: amber; variant: 100; ">
-                            colorsAmber100
-                            <a href="#origin-colorsAmber100"
+                            id="origin-originColorsReferenceOnlyAmber100"
+                            title="theme: origin; category: origin-colors (reference only); name: amber; variant: 100; ">
+                            originColorsReferenceOnlyAmber100
+                            <a href="#origin-originColorsReferenceOnlyAmber100"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1475,10 +1475,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsAmber200"
-                            title="theme: origin; category: colors; name: amber; variant: 200; ">
-                            colorsAmber200
-                            <a href="#origin-colorsAmber200"
+                            id="origin-originColorsReferenceOnlyAmber200"
+                            title="theme: origin; category: origin-colors (reference only); name: amber; variant: 200; ">
+                            originColorsReferenceOnlyAmber200
+                            <a href="#origin-originColorsReferenceOnlyAmber200"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1496,10 +1496,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsAmber300"
-                            title="theme: origin; category: colors; name: amber; variant: 300; ">
-                            colorsAmber300
-                            <a href="#origin-colorsAmber300"
+                            id="origin-originColorsReferenceOnlyAmber300"
+                            title="theme: origin; category: origin-colors (reference only); name: amber; variant: 300; ">
+                            originColorsReferenceOnlyAmber300
+                            <a href="#origin-originColorsReferenceOnlyAmber300"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1517,10 +1517,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsAmber400"
-                            title="theme: origin; category: colors; name: amber; variant: 400; ">
-                            colorsAmber400
-                            <a href="#origin-colorsAmber400"
+                            id="origin-originColorsReferenceOnlyAmber400"
+                            title="theme: origin; category: origin-colors (reference only); name: amber; variant: 400; ">
+                            originColorsReferenceOnlyAmber400
+                            <a href="#origin-originColorsReferenceOnlyAmber400"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1538,10 +1538,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsAmber500"
-                            title="theme: origin; category: colors; name: amber; variant: 500; ">
-                            colorsAmber500
-                            <a href="#origin-colorsAmber500"
+                            id="origin-originColorsReferenceOnlyAmber500"
+                            title="theme: origin; category: origin-colors (reference only); name: amber; variant: 500; ">
+                            originColorsReferenceOnlyAmber500
+                            <a href="#origin-originColorsReferenceOnlyAmber500"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1559,10 +1559,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsAmber600"
-                            title="theme: origin; category: colors; name: amber; variant: 600; ">
-                            colorsAmber600
-                            <a href="#origin-colorsAmber600"
+                            id="origin-originColorsReferenceOnlyAmber600"
+                            title="theme: origin; category: origin-colors (reference only); name: amber; variant: 600; ">
+                            originColorsReferenceOnlyAmber600
+                            <a href="#origin-originColorsReferenceOnlyAmber600"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1580,10 +1580,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsAmber700"
-                            title="theme: origin; category: colors; name: amber; variant: 700; ">
-                            colorsAmber700
-                            <a href="#origin-colorsAmber700"
+                            id="origin-originColorsReferenceOnlyAmber700"
+                            title="theme: origin; category: origin-colors (reference only); name: amber; variant: 700; ">
+                            originColorsReferenceOnlyAmber700
+                            <a href="#origin-originColorsReferenceOnlyAmber700"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1601,10 +1601,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsAmber800"
-                            title="theme: origin; category: colors; name: amber; variant: 800; ">
-                            colorsAmber800
-                            <a href="#origin-colorsAmber800"
+                            id="origin-originColorsReferenceOnlyAmber800"
+                            title="theme: origin; category: origin-colors (reference only); name: amber; variant: 800; ">
+                            originColorsReferenceOnlyAmber800
+                            <a href="#origin-originColorsReferenceOnlyAmber800"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1622,10 +1622,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsAmber900"
-                            title="theme: origin; category: colors; name: amber; variant: 900; ">
-                            colorsAmber900
-                            <a href="#origin-colorsAmber900"
+                            id="origin-originColorsReferenceOnlyAmber900"
+                            title="theme: origin; category: origin-colors (reference only); name: amber; variant: 900; ">
+                            originColorsReferenceOnlyAmber900
+                            <a href="#origin-originColorsReferenceOnlyAmber900"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1643,10 +1643,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsAmber010"
-                            title="theme: origin; category: colors; name: amber; variant: 010; ">
-                            colorsAmber010
-                            <a href="#origin-colorsAmber010"
+                            id="origin-originColorsReferenceOnlyAmber010"
+                            title="theme: origin; category: origin-colors (reference only); name: amber; variant: 010; ">
+                            originColorsReferenceOnlyAmber010
+                            <a href="#origin-originColorsReferenceOnlyAmber010"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1664,10 +1664,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsAmber050"
-                            title="theme: origin; category: colors; name: amber; variant: 050; ">
-                            colorsAmber050
-                            <a href="#origin-colorsAmber050"
+                            id="origin-originColorsReferenceOnlyAmber050"
+                            title="theme: origin; category: origin-colors (reference only); name: amber; variant: 050; ">
+                            originColorsReferenceOnlyAmber050
+                            <a href="#origin-originColorsReferenceOnlyAmber050"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1685,241 +1685,472 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsMalachite100"
-                            title="theme: origin; category: colors; name: malachite; variant: 100; ">
-                            colorsMalachite100
-                            <a href="#origin-colorsMalachite100"
+                            id="origin-originColorsReferenceOnlyCherry100"
+                            title="theme: origin; category: origin-colors (reference only); name: cherry; variant: 100; ">
+                            originColorsReferenceOnlyCherry100
+                            <a href="#origin-originColorsReferenceOnlyCherry100"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#8df79fff</pre>
+                            <pre>#f7b3c2ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #8df79fff;">
+                         style="background-color: #f7b3c2ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsMalachite200"
-                            title="theme: origin; category: colors; name: malachite; variant: 200; ">
-                            colorsMalachite200
-                            <a href="#origin-colorsMalachite200"
+                            id="origin-originColorsReferenceOnlyCherry200"
+                            title="theme: origin; category: origin-colors (reference only); name: cherry; variant: 200; ">
+                            originColorsReferenceOnlyCherry200
+                            <a href="#origin-originColorsReferenceOnlyCherry200"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#42eb64ff</pre>
+                            <pre>#ed94aaff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #42eb64ff;">
+                         style="background-color: #ed94aaff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsMalachite300"
-                            title="theme: origin; category: colors; name: malachite; variant: 300; ">
-                            colorsMalachite300
-                            <a href="#origin-colorsMalachite300"
+                            id="origin-originColorsReferenceOnlyCherry300"
+                            title="theme: origin; category: origin-colors (reference only); name: cherry; variant: 300; ">
+                            originColorsReferenceOnlyCherry300
+                            <a href="#origin-originColorsReferenceOnlyCherry300"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#00d639ff</pre>
+                            <pre>#e27491ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #00d639ff;">
+                         style="background-color: #e27491ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsMalachite400"
-                            title="theme: origin; category: colors; name: malachite; variant: 400; ">
-                            colorsMalachite400
-                            <a href="#origin-colorsMalachite400"
+                            id="origin-originColorsReferenceOnlyCherry400"
+                            title="theme: origin; category: origin-colors (reference only); name: cherry; variant: 400; ">
+                            originColorsReferenceOnlyCherry400
+                            <a href="#origin-originColorsReferenceOnlyCherry400"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#00af2dff</pre>
+                            <pre>#d85579ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #00af2dff;">
+                         style="background-color: #d85579ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsMalachite500"
-                            title="theme: origin; category: colors; name: malachite; variant: 500; ">
-                            colorsMalachite500
-                            <a href="#origin-colorsMalachite500"
+                            id="origin-originColorsReferenceOnlyCherry500"
+                            title="theme: origin; category: origin-colors (reference only); name: cherry; variant: 500; ">
+                            originColorsReferenceOnlyCherry500
+                            <a href="#origin-originColorsReferenceOnlyCherry500"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#008a21ff</pre>
+                            <pre>#ba3c63ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #008a21ff;">
+                         style="background-color: #ba3c63ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsMalachite600"
-                            title="theme: origin; category: colors; name: malachite; variant: 600; ">
-                            colorsMalachite600
-                            <a href="#origin-colorsMalachite600"
+                            id="origin-originColorsReferenceOnlyCherry600"
+                            title="theme: origin; category: origin-colors (reference only); name: cherry; variant: 600; ">
+                            originColorsReferenceOnlyCherry600
+                            <a href="#origin-originColorsReferenceOnlyCherry600"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#006716ff</pre>
+                            <pre>#95304fff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #006716ff;">
+                         style="background-color: #95304fff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsMalachite700"
-                            title="theme: origin; category: colors; name: malachite; variant: 700; ">
-                            colorsMalachite700
-                            <a href="#origin-colorsMalachite700"
+                            id="origin-originColorsReferenceOnlyCherry700"
+                            title="theme: origin; category: origin-colors (reference only); name: cherry; variant: 700; ">
+                            originColorsReferenceOnlyCherry700
+                            <a href="#origin-originColorsReferenceOnlyCherry700"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#00460cff</pre>
+                            <pre>#70243bff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #00460cff;">
+                         style="background-color: #70243bff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsMalachite800"
-                            title="theme: origin; category: colors; name: malachite; variant: 800; ">
-                            colorsMalachite800
-                            <a href="#origin-colorsMalachite800"
+                            id="origin-originColorsReferenceOnlyCherry800"
+                            title="theme: origin; category: origin-colors (reference only); name: cherry; variant: 800; ">
+                            originColorsReferenceOnlyCherry800
+                            <a href="#origin-originColorsReferenceOnlyCherry800"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#002f08ff</pre>
+                            <pre>#4a1828ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #002f08ff;">
+                         style="background-color: #4a1828ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsMalachite900"
-                            title="theme: origin; category: colors; name: malachite; variant: 900; ">
-                            colorsMalachite900
-                            <a href="#origin-colorsMalachite900"
+                            id="origin-originColorsReferenceOnlyCherry900"
+                            title="theme: origin; category: origin-colors (reference only); name: cherry; variant: 900; ">
+                            originColorsReferenceOnlyCherry900
+                            <a href="#origin-originColorsReferenceOnlyCherry900"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#001704ff</pre>
+                            <pre>#250c14ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #001704ff;">
+                         style="background-color: #250c14ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsMalachite010"
-                            title="theme: origin; category: colors; name: malachite; variant: 010; ">
-                            colorsMalachite010
-                            <a href="#origin-colorsMalachite010"
+                            id="origin-originColorsReferenceOnlyCherry010"
+                            title="theme: origin; category: origin-colors (reference only); name: cherry; variant: 010; ">
+                            originColorsReferenceOnlyCherry010
+                            <a href="#origin-originColorsReferenceOnlyCherry010"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#effcf0ff</pre>
+                            <pre>#fef5f7ff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #effcf0ff;">
+                         style="background-color: #fef5f7ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsMalachite050"
-                            title="theme: origin; category: colors; name: malachite; variant: 050; ">
-                            colorsMalachite050
-                            <a href="#origin-colorsMalachite050"
+                            id="origin-originColorsReferenceOnlyCherry050"
+                            title="theme: origin; category: origin-colors (reference only); name: cherry; variant: 050; ">
+                            originColorsReferenceOnlyCherry050
+                            <a href="#origin-originColorsReferenceOnlyCherry050"
                                title="permalink"
                                class="permalink">
                                 🔗
                             </a>
                         </td>
                         <td class="is-vcentered">
-                            <pre>#c1fac7ff</pre>
+                            <pre>#fad4deff</pre>
                         </td>
                         <td class="is-vcentered">
                             <div class="table__color-preview"
-                         style="background-color: #c1fac7ff;">
+                         style="background-color: #fad4deff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="origin-originColorsReferenceOnlyTerra100"
+                            title="theme: origin; category: origin-colors (reference only); name: terra; variant: 100; ">
+                            originColorsReferenceOnlyTerra100
+                            <a href="#origin-originColorsReferenceOnlyTerra100"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#ffbca6ff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #ffbca6ff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="origin-originColorsReferenceOnlyTerra200"
+                            title="theme: origin; category: origin-colors (reference only); name: terra; variant: 200; ">
+                            originColorsReferenceOnlyTerra200
+                            <a href="#origin-originColorsReferenceOnlyTerra200"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#f59a83ff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #f59a83ff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="origin-originColorsReferenceOnlyTerra300"
+                            title="theme: origin; category: origin-colors (reference only); name: terra; variant: 300; ">
+                            originColorsReferenceOnlyTerra300
+                            <a href="#origin-originColorsReferenceOnlyTerra300"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#ea7961ff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #ea7961ff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="origin-originColorsReferenceOnlyTerra400"
+                            title="theme: origin; category: origin-colors (reference only); name: terra; variant: 400; ">
+                            originColorsReferenceOnlyTerra400
+                            <a href="#origin-originColorsReferenceOnlyTerra400"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#e0583eff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #e0583eff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="origin-originColorsReferenceOnlyTerra500"
+                            title="theme: origin; category: origin-colors (reference only); name: terra; variant: 500; ">
+                            originColorsReferenceOnlyTerra500
+                            <a href="#origin-originColorsReferenceOnlyTerra500"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#c94633ff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #c94633ff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="origin-originColorsReferenceOnlyTerra600"
+                            title="theme: origin; category: origin-colors (reference only); name: terra; variant: 600; ">
+                            originColorsReferenceOnlyTerra600
+                            <a href="#origin-originColorsReferenceOnlyTerra600"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#a13829ff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #a13829ff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="origin-originColorsReferenceOnlyTerra700"
+                            title="theme: origin; category: origin-colors (reference only); name: terra; variant: 700; ">
+                            originColorsReferenceOnlyTerra700
+                            <a href="#origin-originColorsReferenceOnlyTerra700"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#782a1eff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #782a1eff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="origin-originColorsReferenceOnlyTerra800"
+                            title="theme: origin; category: origin-colors (reference only); name: terra; variant: 800; ">
+                            originColorsReferenceOnlyTerra800
+                            <a href="#origin-originColorsReferenceOnlyTerra800"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#501c14ff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #501c14ff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="origin-originColorsReferenceOnlyTerra900"
+                            title="theme: origin; category: origin-colors (reference only); name: terra; variant: 900; ">
+                            originColorsReferenceOnlyTerra900
+                            <a href="#origin-originColorsReferenceOnlyTerra900"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#280e0aff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #280e0aff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="origin-originColorsReferenceOnlyTerra010"
+                            title="theme: origin; category: origin-colors (reference only); name: terra; variant: 010; ">
+                            originColorsReferenceOnlyTerra010
+                            <a href="#origin-originColorsReferenceOnlyTerra010"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#fff7f5ff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #fff7f5ff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="origin-originColorsReferenceOnlyTerra050"
+                            title="theme: origin; category: origin-colors (reference only); name: terra; variant: 050; ">
+                            originColorsReferenceOnlyTerra050
+                            <a href="#origin-originColorsReferenceOnlyTerra050"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#ffdcd1ff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #ffdcd1ff;">
                     </div>
                     
                         </td>
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray100"
-                            title="theme: origin; category: colors; name: gray; variant: 100; ">
-                            colorsGray100
-                            <a href="#origin-colorsGray100"
+                            id="origin-originColorsReferenceOnlyGray100"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 100; ">
+                            originColorsReferenceOnlyGray100
+                            <a href="#origin-originColorsReferenceOnlyGray100"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1937,10 +2168,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray200"
-                            title="theme: origin; category: colors; name: gray; variant: 200; ">
-                            colorsGray200
-                            <a href="#origin-colorsGray200"
+                            id="origin-originColorsReferenceOnlyGray200"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 200; ">
+                            originColorsReferenceOnlyGray200
+                            <a href="#origin-originColorsReferenceOnlyGray200"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1958,10 +2189,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray300"
-                            title="theme: origin; category: colors; name: gray; variant: 300; ">
-                            colorsGray300
-                            <a href="#origin-colorsGray300"
+                            id="origin-originColorsReferenceOnlyGray300"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 300; ">
+                            originColorsReferenceOnlyGray300
+                            <a href="#origin-originColorsReferenceOnlyGray300"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -1979,10 +2210,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray400"
-                            title="theme: origin; category: colors; name: gray; variant: 400; ">
-                            colorsGray400
-                            <a href="#origin-colorsGray400"
+                            id="origin-originColorsReferenceOnlyGray400"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 400; ">
+                            originColorsReferenceOnlyGray400
+                            <a href="#origin-originColorsReferenceOnlyGray400"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2000,10 +2231,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray500"
-                            title="theme: origin; category: colors; name: gray; variant: 500; ">
-                            colorsGray500
-                            <a href="#origin-colorsGray500"
+                            id="origin-originColorsReferenceOnlyGray500"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 500; ">
+                            originColorsReferenceOnlyGray500
+                            <a href="#origin-originColorsReferenceOnlyGray500"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2021,10 +2252,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray600"
-                            title="theme: origin; category: colors; name: gray; variant: 600; ">
-                            colorsGray600
-                            <a href="#origin-colorsGray600"
+                            id="origin-originColorsReferenceOnlyGray600"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 600; ">
+                            originColorsReferenceOnlyGray600
+                            <a href="#origin-originColorsReferenceOnlyGray600"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2042,10 +2273,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray700"
-                            title="theme: origin; category: colors; name: gray; variant: 700; ">
-                            colorsGray700
-                            <a href="#origin-colorsGray700"
+                            id="origin-originColorsReferenceOnlyGray700"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 700; ">
+                            originColorsReferenceOnlyGray700
+                            <a href="#origin-originColorsReferenceOnlyGray700"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2063,10 +2294,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray800"
-                            title="theme: origin; category: colors; name: gray; variant: 800; ">
-                            colorsGray800
-                            <a href="#origin-colorsGray800"
+                            id="origin-originColorsReferenceOnlyGray800"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 800; ">
+                            originColorsReferenceOnlyGray800
+                            <a href="#origin-originColorsReferenceOnlyGray800"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2084,10 +2315,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray900"
-                            title="theme: origin; category: colors; name: gray; variant: 900; ">
-                            colorsGray900
-                            <a href="#origin-colorsGray900"
+                            id="origin-originColorsReferenceOnlyGray900"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 900; ">
+                            originColorsReferenceOnlyGray900
+                            <a href="#origin-originColorsReferenceOnlyGray900"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2105,10 +2336,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray1000"
-                            title="theme: origin; category: colors; name: gray; variant: 1000; ">
-                            colorsGray1000
-                            <a href="#origin-colorsGray1000"
+                            id="origin-originColorsReferenceOnlyGray1000"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 1000; ">
+                            originColorsReferenceOnlyGray1000
+                            <a href="#origin-originColorsReferenceOnlyGray1000"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2126,10 +2357,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray000"
-                            title="theme: origin; category: colors; name: gray; variant: 000; ">
-                            colorsGray000
-                            <a href="#origin-colorsGray000"
+                            id="origin-originColorsReferenceOnlyGray000"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 000; ">
+                            originColorsReferenceOnlyGray000
+                            <a href="#origin-originColorsReferenceOnlyGray000"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2147,10 +2378,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray010"
-                            title="theme: origin; category: colors; name: gray; variant: 010; ">
-                            colorsGray010
-                            <a href="#origin-colorsGray010"
+                            id="origin-originColorsReferenceOnlyGray010"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 010; ">
+                            originColorsReferenceOnlyGray010
+                            <a href="#origin-originColorsReferenceOnlyGray010"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2168,10 +2399,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsGray050"
-                            title="theme: origin; category: colors; name: gray; variant: 050; ">
-                            colorsGray050
-                            <a href="#origin-colorsGray050"
+                            id="origin-originColorsReferenceOnlyGray050"
+                            title="theme: origin; category: origin-colors (reference only); name: gray; variant: 050; ">
+                            originColorsReferenceOnlyGray050
+                            <a href="#origin-originColorsReferenceOnlyGray050"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2189,10 +2420,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsSkin400"
-                            title="theme: origin; category: colors; name: skin; variant: 400; ">
-                            colorsSkin400
-                            <a href="#origin-colorsSkin400"
+                            id="origin-originColorsReferenceOnlySkin400"
+                            title="theme: origin; category: origin-colors (reference only); name: skin; variant: 400; ">
+                            originColorsReferenceOnlySkin400
+                            <a href="#origin-originColorsReferenceOnlySkin400"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2210,10 +2441,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsSkin500"
-                            title="theme: origin; category: colors; name: skin; variant: 500; ">
-                            colorsSkin500
-                            <a href="#origin-colorsSkin500"
+                            id="origin-originColorsReferenceOnlySkin500"
+                            title="theme: origin; category: origin-colors (reference only); name: skin; variant: 500; ">
+                            originColorsReferenceOnlySkin500
+                            <a href="#origin-originColorsReferenceOnlySkin500"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2231,10 +2462,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsSkin600"
-                            title="theme: origin; category: colors; name: skin; variant: 600; ">
-                            colorsSkin600
-                            <a href="#origin-colorsSkin600"
+                            id="origin-originColorsReferenceOnlySkin600"
+                            title="theme: origin; category: origin-colors (reference only); name: skin; variant: 600; ">
+                            originColorsReferenceOnlySkin600
+                            <a href="#origin-originColorsReferenceOnlySkin600"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2252,10 +2483,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsSkin700"
-                            title="theme: origin; category: colors; name: skin; variant: 700; ">
-                            colorsSkin700
-                            <a href="#origin-colorsSkin700"
+                            id="origin-originColorsReferenceOnlySkin700"
+                            title="theme: origin; category: origin-colors (reference only); name: skin; variant: 700; ">
+                            originColorsReferenceOnlySkin700
+                            <a href="#origin-originColorsReferenceOnlySkin700"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2273,10 +2504,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsFuchsia400"
-                            title="theme: origin; category: colors; name: fuchsia; variant: 400; ">
-                            colorsFuchsia400
-                            <a href="#origin-colorsFuchsia400"
+                            id="origin-originColorsReferenceOnlyFuchsia400"
+                            title="theme: origin; category: origin-colors (reference only); name: fuchsia; variant: 400; ">
+                            originColorsReferenceOnlyFuchsia400
+                            <a href="#origin-originColorsReferenceOnlyFuchsia400"
                                title="permalink"
                                class="permalink">
                                 🔗
@@ -2294,10 +2525,10 @@
                     </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
-                            id="origin-colorsFuchsia500"
-                            title="theme: origin; category: colors; name: fuchsia; variant: 500; ">
-                            colorsFuchsia500
-                            <a href="#origin-colorsFuchsia500"
+                            id="origin-originColorsReferenceOnlyFuchsia500"
+                            title="theme: origin; category: origin-colors (reference only); name: fuchsia; variant: 500; ">
+                            originColorsReferenceOnlyFuchsia500
+                            <a href="#origin-originColorsReferenceOnlyFuchsia500"
                                title="permalink"
                                class="permalink">
                                 🔗