From 8427deac3ea46bda24f186b939dc46f50799280a Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Mon, 16 Mar 2026 11:25:54 -0700
Subject: [PATCH] Improve typeset and arrange demos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Typeset: make the before worse (all text same size/color = no
hierarchy) and the after more dramatic (bigger heading, more size
contrast). The transformation should be instantly visible on hover.

Arrange: fix heading split (eyebrow+heading was a typeset change,
not arrange) — keep it as a single heading to stay on-brand.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 public/js/demos/commands/arrange.js |  5 +----
 public/js/demos/commands/typeset.js | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/public/js/demos/commands/arrange.js b/public/js/demos/commands/arrange.js
index e9299c6a8..ae1020c70 100644
--- a/public/js/demos/commands/arrange.js
+++ b/public/js/demos/commands/arrange.js
@@ -25,10 +25,7 @@ export default {
 
   after: `
     <div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
-      <div style="margin-bottom: 20px;">
-        <div style="font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 4px;">Team</div>
-        <div style="font-size: 1.05rem; font-weight: 600; color: var(--color-ink);">Members</div>
-      </div>
+      <div style="font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); margin-bottom: 16px;">Team Members</div>
       <div style="display: flex; flex-direction: column; gap: 6px;">
         <div style="display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-mist);">
           <div style="width: 28px; height: 28px; background: var(--color-accent); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">AC</div>
diff --git a/public/js/demos/commands/typeset.js b/public/js/demos/commands/typeset.js
index 2f226e054..0eb479260 100644
--- a/public/js/demos/commands/typeset.js
+++ b/public/js/demos/commands/typeset.js
@@ -1,23 +1,23 @@
-// Typeset command demo - shows generic typography becoming intentional and hierarchical
+// Typeset command demo - shows flat, hierarchyless text becoming intentional typography
 export default {
   id: 'typeset',
-  caption: 'Generic system fonts → Intentional type hierarchy',
+  caption: 'No type hierarchy → Clear, intentional typography',
 
   before: `
     <div style="width: 100%; max-width: 240px; padding: 16px; font-family: Arial, sans-serif;">
-      <div style="font-size: 15px; font-weight: bold; color: #333; margin-bottom: 6px;">Project Update</div>
-      <div style="font-size: 14px; font-weight: bold; color: #555; margin-bottom: 8px;">Q1 Design Sprint</div>
-      <p style="font-size: 14px; color: #666; line-height: 1.4; margin: 0 0 8px;">The team completed the redesign of the dashboard. All components have been reviewed and approved by stakeholders.</p>
-      <div style="font-size: 13px; color: #888;">Updated 2 hours ago</div>
+      <div style="font-size: 14px; font-weight: bold; color: #444; margin-bottom: 8px;">Project Update</div>
+      <div style="font-size: 14px; color: #444; margin-bottom: 8px;">Q1 Design Sprint</div>
+      <div style="font-size: 14px; color: #444; line-height: 1.4; margin-bottom: 8px;">The team completed the redesign of the dashboard. All components have been reviewed and approved by stakeholders.</div>
+      <div style="font-size: 14px; color: #444;">Updated 2 hours ago</div>
     </div>
   `,
 
   after: `
     <div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
-      <div style="font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 8px;">Project Update</div>
-      <div style="font-family: 'Cormorant Garamond', serif; font-size: 1.375rem; font-weight: 600; color: var(--color-ink); line-height: 1.15; margin-bottom: 10px;">Q1 Design Sprint</div>
-      <p style="font-size: 0.875rem; color: color-mix(in oklch, var(--color-ink) 70%, transparent); line-height: 1.6; margin: 0 0 12px; max-width: 32ch;">The team completed the redesign of the dashboard. All components reviewed and approved.</p>
-      <div style="font-size: 0.75rem; color: var(--color-ash); font-variant-numeric: tabular-nums;">Updated 2 hours ago</div>
+      <div style="font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 6px;">Project Update</div>
+      <div style="font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--color-ink); line-height: 1.1; margin-bottom: 12px;">Q1 Design Sprint</div>
+      <p style="font-size: 0.8125rem; color: color-mix(in oklch, var(--color-ink) 65%, transparent); line-height: 1.65; margin: 0 0 14px; max-width: 30ch;">The team completed the redesign of the dashboard. All components reviewed and approved.</p>
+      <div style="font-size: 0.6875rem; color: var(--color-ash); font-variant-numeric: tabular-nums;">Updated 2 hours ago</div>
     </div>
   `
 };