chore: 🧹

src/_components/examples.vto

···
         <a href="{{ item.url |> facetLoaderURL }}">
           {{item.title}}
         </a>
-        <button class="button--tiny button--bg-twist-2" rel="edit">
+        <button class="button--tiny button--bg-accent" rel="edit">
           <span class="with-icon">
             <i class="ph-fill ph-code-block"></i>
             Edit

src/_components/grid.vto

···
   <span class="grid-filter--label">Filter by</span>
 
   <button class="button--border button--tiny" data-filter="all">All</button>
-  <button class="button--border button--tiny button--bg-accent button--tr-accent button--transparent" data-filter="prelude">Features</button>
+  <button class="button--border button--tiny button--bg-twist-4 button--tr-twist-4 button--transparent" data-filter="prelude">Features</button>
   <button class="button--border button--tiny button--bg-twist-2 button--tr-twist-2 button--transparent" data-filter="interface">Interfaces</button>
 
   <div style="flex: 1"></div>
···
   {{ for index, item of items }}
     {{ set color = (() => {
       switch (item.kind) {
-        case "prelude": return "var(--accent)";
+        case "prelude": return "var(--accent-twist-4)";
         default: return "var(--accent-twist-2)";
       }
     })() }}

src/_includes/layouts/kitchen.vto

···
 
 <style>
   .construct, h2 {
-    color: var(--accent-twist-2);
+    color: var(--accent);
   }
 </style>
 

src/build.vto

···
       </p>
       <p>
         <span class="button-row">
-          <button class="button--bg-twist-2" name="save">Save</button>
-          <button class="button--bg-twist-2" name="save+open">Save &amp; Open</button>
+          <button class="button--bg-accent" name="save">Save</button>
+          <button class="button--bg-accent" name="save+open">Save &amp; Open</button>
         </span>
       </p>
     </div>

src/common/facets/category.js

···
 export function color(facet) {
   switch (facet.kind) {
     case "prelude":
-      return "var(--accent)";
+      return "var(--accent-twist-4)";
     default:
       return "var(--accent-twist-2)";
   }

src/common/pages/dashboard.js

···
         All
       </button>
       <button
-        class="button--border button--tiny button--bg-accent button--tr-accent ${filter ===
+        class="button--border button--tiny button--bg-twist-4 button--tr-twist-4 ${filter ===
             "prelude"
           ? ""
           : "button--transparent"}"

src/guide.vto

···
   </p>
 
   <p>
-    <button id="add-sample-content">
+    <button id="add-sample-content" class="button--bg-accent">
       <span>Add sample content</span>
     </button>
   </p>
···
 
   <p>
     <span class="button-row">
-      <a class="button button--bg-twist-2" href="{{ ('facets/playback/auto-queue/index.html') |> facetLoaderURL }}" target="_blank">
+      <a class="button button--bg-accent" href="{{ ('facets/playback/auto-queue/index.html') |> facetLoaderURL }}" target="_blank">
         <span class="with-icon">
           <i class="ph-fill ph-number-circle-one"></i>
           Fill up queue
         </span>
       </a>
-      <a class="button button--bg-twist-2" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
+      <a class="button button--bg-accent" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
         <span class="with-icon">
           <i class="ph-fill ph-number-circle-two"></i>
           Play audio

src/index.vto

···
       {{ await comp.diffuse.logo() }}
       {{ await comp.diffuse.status() }}
     </div>
-    <p class="construct dither-mask">
+    <p class="construct dither-mask" style="color: var(--accent-twist-4)">
       Your audio<br />your data<br />your rules
     </p>
     <p>
···
       <li><a href="featured/">Featured</a></li>
     </ul>
     <p style="margin: var(--space-lg) 0">
-      <a class="button button--bg-accent" href="dashboard/">Open Diffuse</a>
+      <a class="button button--bg-twist-4" href="dashboard/">Open Diffuse</a>
     </p>
     <p>
       <small style="line-height: var(--leading-relaxed)">
···
       </small>
     </p>
   </div>
-  <div class="dither-mask filler"></div>
+  <div class="dither-mask filler filler--bg-twist-4"></div>
 </header>
 <main>
 </main>

src/styles/diffuse/page.css

···
     display: inline-block;
     font-size: var(--fs-2xs);
     font-weight: 600;
+    line-height: 0.75;
     opacity: 0.6;
     padding: var(--space-3xs);
     text-box: trim-both cap alphabetic;
···
 
   &.button--small {
     font-size: var(--fs-sm);
+    line-height: 0.75;
     padding: var(--space-2xs);
     text-box: trim-both cap alphabetic;
   }
···
   &.button--tag {
     font-size: var(--fs-2xs);
     font-weight: 600;
+    line-height: 0.75;
     padding: var(--space-3xs);
     text-box: trim-both cap alphabetic;
     vertical-align: middle;