From 118cf66b053c63f75fe9a2b26936af83147fca5b Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Mon, 23 Mar 2026 20:38:20 +0100
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_components/examples.vto      | 2 +-
 src/_components/grid.vto          | 4 ++--
 src/_includes/layouts/kitchen.vto | 2 +-
 src/build.vto                     | 4 ++--
 src/common/facets/category.js     | 2 +-
 src/common/pages/dashboard.js     | 2 +-
 src/guide.vto                     | 6 +++---
 src/index.vto                     | 6 +++---
 src/styles/diffuse/page.css       | 3 +++
 9 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/_components/examples.vto b/src/_components/examples.vto
index e8544988..8019bab5 100644
--- a/src/_components/examples.vto
+++ b/src/_components/examples.vto
@@ -5,7 +5,7 @@
         <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
diff --git a/src/_components/grid.vto b/src/_components/grid.vto
index 69d4b912..0cfdfc54 100644
--- a/src/_components/grid.vto
+++ b/src/_components/grid.vto
@@ -2,7 +2,7 @@
   <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>
@@ -15,7 +15,7 @@
   {{ 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)";
       }
     })() }}
diff --git a/src/_includes/layouts/kitchen.vto b/src/_includes/layouts/kitchen.vto
index 409b1f7b..c79cacfd 100644
--- a/src/_includes/layouts/kitchen.vto
+++ b/src/_includes/layouts/kitchen.vto
@@ -17,7 +17,7 @@ scripts:
 
 <style>
   .construct, h2 {
-    color: var(--accent-twist-2);
+    color: var(--accent);
   }
 </style>
 
diff --git a/src/build.vto b/src/build.vto
index 394749a2..53d01aa5 100644
--- a/src/build.vto
+++ b/src/build.vto
@@ -43,8 +43,8 @@ examples:
       </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>
diff --git a/src/common/facets/category.js b/src/common/facets/category.js
index 26d93d40..ef237734 100644
--- a/src/common/facets/category.js
+++ b/src/common/facets/category.js
@@ -9,7 +9,7 @@
 export function color(facet) {
   switch (facet.kind) {
     case "prelude":
-      return "var(--accent)";
+      return "var(--accent-twist-4)";
     default:
       return "var(--accent-twist-2)";
   }
diff --git a/src/common/pages/dashboard.js b/src/common/pages/dashboard.js
index 0694f154..098f965d 100644
--- a/src/common/pages/dashboard.js
+++ b/src/common/pages/dashboard.js
@@ -256,7 +256,7 @@ function _renderList(output, listEl) {
         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"}"
diff --git a/src/guide.vto b/src/guide.vto
index cdce4d6b..96471294 100644
--- a/src/guide.vto
+++ b/src/guide.vto
@@ -60,7 +60,7 @@ title: Guide | Diffuse
   </p>
 
   <p>
-    <button id="add-sample-content">
+    <button id="add-sample-content" class="button--bg-accent">
       <span>Add sample content</span>
     </button>
   </p>
@@ -75,13 +75,13 @@ title: Guide | Diffuse
 
   <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
diff --git a/src/index.vto b/src/index.vto
index 95876b71..20ff621a 100644
--- a/src/index.vto
+++ b/src/index.vto
@@ -35,7 +35,7 @@ links:
       {{ 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>
@@ -50,7 +50,7 @@ links:
       <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)">
@@ -59,7 +59,7 @@ links:
       </small>
     </p>
   </div>
-  <div class="dither-mask filler"></div>
+  <div class="dither-mask filler filler--bg-twist-4"></div>
 </header>
 <main>
 </main>
diff --git a/src/styles/diffuse/page.css b/src/styles/diffuse/page.css
index 3c2f3386..604721cd 100644
--- a/src/styles/diffuse/page.css
+++ b/src/styles/diffuse/page.css
@@ -318,6 +318,7 @@ textarea {
     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;
@@ -488,6 +489,7 @@ a.button {
 
   &.button--small {
     font-size: var(--fs-sm);
+    line-height: 0.75;
     padding: var(--space-2xs);
     text-box: trim-both cap alphabetic;
   }
@@ -499,6 +501,7 @@ a.button {
   &.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;
-- 
2.51.2