@sage/design-tokens 2.64.0 → 2.65.0

package/docs/tokens/origin/index.html

@@ -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>
@@ -279,7 +279,7 @@
             origin
         </h1>
             <section class="my-6">
-                <h2 class="hide-on-embedded">colors</h2>
+                <h2 class="hide-on-embedded">origin-colors (reference only)</h2>
                 <table class="table is-bordered is-hoverable is-fullwidth">
                   <colgroup>
                     <col width="50%">
@@ -295,1165 +295,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">
                                     🔗
@@ -1471,10 +1471,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">
                                     🔗
@@ -1492,10 +1492,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">
                                     🔗
@@ -1513,10 +1513,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">
                                     🔗
@@ -1534,10 +1534,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">
                                     🔗
@@ -1555,10 +1555,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">
                                     🔗
@@ -1576,10 +1576,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">
                                     🔗
@@ -1597,10 +1597,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">
                                     🔗
@@ -1618,10 +1618,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">
                                     🔗
@@ -1639,10 +1639,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">
                                     🔗
@@ -1660,10 +1660,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">
                                     🔗
@@ -1681,241 +1681,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">
                                     🔗
@@ -1933,10 +2164,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">
                                     🔗
@@ -1954,10 +2185,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">
                                     🔗
@@ -1975,10 +2206,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">
                                     🔗
@@ -1996,10 +2227,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">
                                     🔗
@@ -2017,10 +2248,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">
                                     🔗
@@ -2038,10 +2269,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">
                                     🔗
@@ -2059,10 +2290,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">
                                     🔗
@@ -2080,10 +2311,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">
                                     🔗
@@ -2101,10 +2332,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">
                                     🔗
@@ -2122,10 +2353,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">
                                     🔗
@@ -2143,10 +2374,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">
                                     🔗
@@ -2164,10 +2395,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">
                                     🔗
@@ -2185,10 +2416,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">
                                     🔗
@@ -2206,10 +2437,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">
                                     🔗
@@ -2227,10 +2458,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">
                                     🔗
@@ -2248,10 +2479,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">
                                     🔗
@@ -2269,10 +2500,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">
                                     🔗
@@ -2290,10 +2521,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">
                                     🔗