From 413a6f5d5ff9ac8f620e2235fa63cd559f81e6da Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Mon, 5 Oct 2026 23:59:58 +1100
Subject: [PATCH 1/4] feat(brand): explore portable Skill knowledge

---
 .../brand-experiments/PortableKnowledge.vue   | 280 ++++++++++++++++++
 1 file changed, 280 insertions(+)
 create mode 100644 app/components/brand-experiments/PortableKnowledge.vue

diff --git a/app/components/brand-experiments/PortableKnowledge.vue b/app/components/brand-experiments/PortableKnowledge.vue
new file mode 100644
index 00000000..7a24195c
--- /dev/null
+++ b/app/components/brand-experiments/PortableKnowledge.vue
@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const agents = [
+  { name: 'Claude Code', shape: 'round' },
+  { name: 'Codex', shape: 'square' },
+  { name: 'Cursor', shape: 'cut' },
+] as const
+const selected = ref<(typeof agents)[number]>(agents[0])
+</script>
+
+<template>
+  <section class="portable-knowledge" aria-label="Portable knowledge brand experiment">
+    <header class="portable-heading">
+      <h3>Same Skill. Your Agent.</h3>
+      <p>The Agent changes. The knowledge stays yours.</p>
+    </header>
+
+    <div class="portable-stage" :data-shape="selected.shape" aria-hidden="true">
+      <div class="portable-axis axis-horizontal" />
+      <div class="portable-axis axis-vertical" />
+      <div class="portable-shell shell-outer" />
+      <div class="portable-shell shell-inner" />
+      <div class="portable-document">
+        <div class="document-title">
+          SKILL.md
+        </div>
+        <div class="knowledge-pattern">
+          <i v-for="line in 12" :key="line" :class="`knowledge-line line-${line}`" />
+        </div>
+        <div class="document-footer">
+          skilld
+        </div>
+      </div>
+      <span class="context-label">{{ selected.name }}</span>
+      <span class="constant-label">One Skill</span>
+    </div>
+
+    <fieldset class="portable-controls">
+      <legend>Change Agent</legend>
+      <div class="agent-options">
+        <button
+          v-for="agent in agents"
+          :key="agent.name"
+          type="button"
+          :aria-pressed="selected.name === agent.name"
+          @click="selected = agent"
+        >
+          {{ agent.name }}
+        </button>
+      </div>
+    </fieldset>
+    <p class="portable-caption" aria-live="polite">
+      {{ selected.name }} selected. Same SKILL.md.
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.portable-knowledge {
+  color: var(--ui-text);
+  background: var(--ui-bg);
+  container-type: inline-size;
+}
+
+.portable-heading h3 {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: clamp(1.5rem, 5cqi, 2rem);
+  font-weight: 600;
+  letter-spacing: -0.045em;
+}
+
+.portable-heading p {
+  margin: 0.75rem 0 0;
+  color: var(--ui-text-muted);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.portable-stage {
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  place-items: center;
+  height: clamp(300px, 65cqi, 390px);
+  margin: 1.5rem 0;
+  overflow: hidden;
+  background: var(--ui-bg-muted);
+  border: 1px solid var(--ui-border);
+  border-radius: 8px;
+}
+
+.portable-axis {
+  position: absolute;
+  opacity: 0.7;
+  background: var(--ui-border);
+}
+
+.axis-horizontal {
+  width: 100%;
+  height: 1px;
+}
+
+.axis-vertical {
+  width: 1px;
+  height: 100%;
+}
+
+.portable-shell {
+  position: absolute;
+  width: min(76%, 340px);
+  height: 78%;
+  border: 1px solid var(--ui-text-dimmed);
+  border-radius: 50%;
+  transition: border-radius 200ms ease-out, transform 200ms ease-out;
+}
+
+.shell-outer {
+  transform: rotate(-12deg);
+}
+
+.shell-inner {
+  width: min(66%, 298px);
+  height: 68%;
+  border-color: var(--ui-border-accented);
+  transform: rotate(12deg);
+}
+
+[data-shape='square'] .portable-shell {
+  border-radius: 8px;
+  transform: rotate(0deg);
+}
+
+[data-shape='cut'] .shell-outer {
+  border-radius: 64px 8px 64px 8px;
+  transform: rotate(8deg);
+}
+
+[data-shape='cut'] .shell-inner {
+  border-radius: 8px 64px 8px 64px;
+  transform: rotate(-8deg);
+}
+
+.portable-document {
+  z-index: 1;
+  width: clamp(140px, 32cqi, 176px);
+  padding: 1rem;
+  background: var(--ui-bg);
+  border: 1px solid var(--ui-text-muted);
+  border-radius: 4px;
+  transform: rotate(-4deg);
+}
+
+.document-title,
+.document-footer,
+.context-label,
+.constant-label,
+.portable-controls,
+.portable-caption {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+}
+
+.document-title {
+  color: var(--ui-text-highlighted);
+}
+
+.document-footer {
+  margin-top: 0.875rem;
+  color: var(--ui-text-muted);
+}
+
+.knowledge-pattern {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 5px;
+  margin-top: 1rem;
+}
+
+.knowledge-line {
+  display: block;
+  height: 5px;
+  grid-column: span 6;
+  background: var(--ui-text-muted);
+}
+
+.line-2,
+.line-7,
+.line-11 {
+  grid-column: span 4;
+}
+
+.line-3,
+.line-8,
+.line-12 {
+  grid-column: span 2;
+}
+
+.line-5 {
+  grid-column: span 3;
+  background: var(--ui-primary);
+}
+
+.line-6 {
+  grid-column: span 3;
+}
+
+.context-label,
+.constant-label {
+  position: absolute;
+  padding: 0.25rem 0.5rem;
+  color: var(--ui-text-muted);
+  background: var(--ui-bg-muted);
+}
+
+.context-label {
+  bottom: 1rem;
+  left: 1rem;
+}
+
+.constant-label {
+  top: 1rem;
+  right: 1rem;
+}
+
+.portable-controls {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.portable-controls legend {
+  padding: 0;
+  margin-bottom: 0.75rem;
+  color: var(--ui-text-muted);
+}
+
+.agent-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.agent-options button {
+  min-height: 44px;
+  padding: 0.5rem 0.875rem;
+  color: var(--ui-text);
+  background: var(--ui-bg);
+  border: 1px solid var(--ui-border-accented);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 200ms ease-out;
+}
+
+.agent-options button[aria-pressed='true'] {
+  color: var(--ui-text-highlighted);
+  border-color: var(--ui-primary);
+  background: var(--ui-bg-muted);
+}
+
+.agent-options button:focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 3px;
+}
+
+.portable-caption {
+  margin: 0.75rem 0 0;
+  color: var(--ui-text-muted);
+  line-height: 1.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .portable-shell,
+  .agent-options button {
+    transition: none;
+  }
+}
+</style>

From 9af9588b692334a4d1ceba696ef48c8218c90bce Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 00:00:09 +1100
Subject: [PATCH 2/4] feat(brand): explore freshness and human provenance

---
 .../brand-experiments/HumanProvenance.vue     | 88 +++++++++++++++++++
 .../brand-experiments/KnowledgeFreshness.vue  | 74 ++++++++++++++++
 2 files changed, 162 insertions(+)
 create mode 100644 app/components/brand-experiments/HumanProvenance.vue
 create mode 100644 app/components/brand-experiments/KnowledgeFreshness.vue

diff --git a/app/components/brand-experiments/HumanProvenance.vue b/app/components/brand-experiments/HumanProvenance.vue
new file mode 100644
index 00000000..f2f9e0df
--- /dev/null
+++ b/app/components/brand-experiments/HumanProvenance.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const traced = ref(true)
+const revision = ref(0)
+</script>
+
+<template>
+  <section class="provenance-experiment">
+    <div class="experiment-heading">
+      <h3>Knowledge has an author.</h3>
+      <p>A Skill reaches your Agent. The thread leads back to the person who wrote it.</p>
+    </div>
+    <div :key="revision" class="provenance-stage" :class="{ 'is-traced': traced }" role="img" :aria-label="traced ? 'An illustrative Skill connects through a continuous thread to its human-written source.' : 'An illustrative Skill appears without its source thread.'">
+      <div class="thread-path" aria-hidden="true">
+        <i class="thread-top" />
+        <i class="thread-turn" />
+        <i class="thread-bottom" />
+        <span class="thread-knot" />
+      </div>
+      <div class="skill-leaf" aria-hidden="true">
+        <span class="leaf-label">Your Agent</span>
+        <strong>SKILL.md</strong>
+        <div class="written-lines">
+          <i /><i /><i /><i />
+        </div>
+        <span class="leaf-end">Read the Skill</span>
+      </div>
+      <div class="source-leaf" aria-hidden="true">
+        <div class="source-mark">
+          ⏶
+        </div>
+        <span class="leaf-label">Illustrative source</span>
+        <strong>Written by a human.</strong>
+        <span class="leaf-end">The author keeps the source.</span>
+      </div>
+      <div class="trace-label" aria-hidden="true">
+        Source stays attached.
+      </div>
+    </div>
+    <div class="experiment-controls">
+      <UButton color="neutral" variant="outline" :aria-pressed="traced" @click="traced = !traced">
+        {{ traced ? 'Hide source thread' : 'Trace the source' }}
+      </UButton>
+      <UButton color="neutral" variant="ghost" @click="revision++">
+        Replay
+      </UButton>
+    </div>
+    <p class="experiment-footnote">
+      Illustrative source. The thread represents authorship, not a safety claim.
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.provenance-experiment { container-type: inline-size; color: var(--ui-text); }
+.experiment-heading h3 { font-size: clamp(1.4rem, 4cqi, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -.04em; margin: 0 0 12px; }
+.experiment-heading p { max-width: 40ch; font-size: 16px; line-height: 1.6; color: var(--ui-text-muted); margin: 0; }
+.provenance-stage { position: relative; height: 330px; overflow: hidden; border-block: 1px solid var(--ui-border); margin: 24px 0 16px; }
+.skill-leaf { position: absolute; left: 8%; top: 28px; width: 49%; padding: 16px; border: 1px solid var(--ui-border-accented); background: var(--ui-bg); transform: rotate(-3deg); }
+.leaf-label, .leaf-end, .trace-label { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
+.leaf-label { display: block; color: var(--ui-text-muted); margin-bottom: 8px; }
+.skill-leaf strong { font-family: var(--font-mono); font-size: 22px; font-weight: 500; }
+.written-lines { display: flex; gap: 7px; flex-direction: column; padding: 16px 0; }
+.written-lines i { border-top: 2px solid var(--ui-border-accented); width: 90%; }
+.written-lines i:nth-child(2) { width: 72%; }
+.written-lines i:nth-child(3) { width: 83%; }
+.written-lines i:nth-child(4) { width: 44%; }
+.leaf-end { display: block; color: var(--ui-text-muted); }
+.source-leaf { position: absolute; left: 36%; right: 5%; bottom: 24px; padding: 16px 0 16px 28px; border-top: 1px solid var(--ui-border-accented); background: var(--ui-bg); }
+.source-leaf strong { display: block; font-size: clamp(17px, 4cqi, 24px); font-weight: 500; margin-bottom: 8px; letter-spacing: -.03em; }
+.source-mark { position: absolute; left: 0; top: 14px; font-size: 22px; color: var(--ui-primary); }
+.thread-path { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms ease-out; }
+.thread-path i { position: absolute; border-color: var(--ui-primary); }
+.thread-top { top: 101px; left: 42%; width: 42%; border-top: 1px solid; }
+.thread-turn { top: 101px; right: 16%; height: 149px; width: 35%; border-right: 1px solid; border-bottom: 1px solid; border-bottom-right-radius: 48px; }
+.thread-bottom { top: 250px; left: 16%; width: 36%; border-top: 1px solid; }
+.thread-knot { position: absolute; top: 246px; left: 16%; width: 9px; height: 9px; border: 1px solid var(--ui-primary); border-radius: 50%; background: var(--ui-bg); }
+.trace-label { position: absolute; top: 220px; left: 7%; color: var(--ui-primary); background: var(--ui-bg); padding: 4px; opacity: 0; transition: opacity 200ms ease-out; }
+.is-traced .thread-path, .is-traced .trace-label { opacity: 1; }
+.is-traced .thread-path { animation: thread-reveal 360ms ease-out; }
+.experiment-controls { display: flex; gap: 8px; flex-wrap: wrap; }
+.experiment-controls :deep(button) { min-height: 44px; }
+.experiment-footnote { font-size: 14px; line-height: 1.6; color: var(--ui-text-muted); max-width: 58ch; margin: 12px 0 0; }
+@keyframes thread-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
+@container (max-width: 400px) { .skill-leaf { left: 5%; width: 62%; padding: 12px; } .source-leaf { left: 23%; right: 4%; padding-left: 24px; } .trace-label { top: 208px; left: 4%; font-size: 11px; } .thread-turn { right: 10%; } .thread-top { width: 48%; } }
+@media (prefers-reduced-motion: reduce) { .thread-path, .trace-label { animation: none !important; transition: none; } }
+</style>
diff --git a/app/components/brand-experiments/KnowledgeFreshness.vue b/app/components/brand-experiments/KnowledgeFreshness.vue
new file mode 100644
index 00000000..be8549d7
--- /dev/null
+++ b/app/components/brand-experiments/KnowledgeFreshness.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const watching = ref(true)
+const revision = ref(0)
+</script>
+
+<template>
+  <section class="freshness-experiment">
+    <div class="experiment-heading">
+      <h3>See when knowledge moves.</h3>
+      <p>The source changes. Your local copy stays still. Watch makes the difference visible.</p>
+    </div>
+    <div :key="revision" class="freshness-stage" :class="{ 'is-watching': watching }" role="img" :aria-label="watching ? 'Illustrative source has changed. Watch highlights differences without changing the local copy.' : 'Illustrative source has changed while the local copy stays still.'">
+      <div class="sheet sheet-local" aria-hidden="true">
+        <span class="sheet-caption">Local copy</span>
+        <div class="dot-matrix">
+          <i v-for="dot in 120" :key="dot" :class="{ 'ink-dot': dot % 11 < 5 }" />
+        </div>
+        <span class="sheet-foot">Kept in your project</span>
+      </div>
+      <div class="sheet sheet-source" aria-hidden="true">
+        <span class="sheet-caption">Illustrative source</span>
+        <div class="dot-matrix">
+          <i v-for="dot in 120" :key="dot" :class="{ 'ink-dot': dot % 11 < 5, 'changed-dot': dot > 48 && dot < 85 }" />
+        </div>
+        <span class="sheet-foot">Changed at the source</span>
+      </div>
+      <div class="change-seam" aria-hidden="true">
+        <span>Watch for changes</span>
+        <i />
+      </div>
+    </div>
+    <div class="experiment-controls">
+      <UButton color="neutral" variant="outline" :aria-pressed="watching" @click="watching = !watching">
+        {{ watching ? 'Hide differences' : 'Show differences' }}
+      </UButton>
+      <UButton color="neutral" variant="ghost" @click="revision++">
+        Replay
+      </UButton>
+    </div>
+    <p class="experiment-footnote">
+      Illustration only. Watching reports changes. It does not update your local copy.
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.freshness-experiment { container-type: inline-size; color: var(--ui-text); }
+.experiment-heading h3 { font-size: clamp(1.4rem, 4cqi, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -.04em; margin: 0 0 12px; }
+.experiment-heading p { max-width: 40ch; font-size: 16px; line-height: 1.6; color: var(--ui-text-muted); margin: 0; }
+.freshness-stage { height: 330px; position: relative; overflow: hidden; margin: 24px 0 16px; border-block: 1px solid var(--ui-border); }
+.sheet { position: absolute; width: 48%; height: 226px; border: 1px solid var(--ui-border-accented); background: var(--ui-bg); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
+.sheet-local { left: 8%; top: 68px; transform: rotate(-7deg); }
+.sheet-source { left: 44%; top: 27px; transform: rotate(7deg); animation: source-moves 360ms ease-out both; }
+.sheet-caption, .sheet-foot, .change-seam { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
+.sheet-caption { color: var(--ui-text); }
+.sheet-foot { color: var(--ui-text-muted); }
+.dot-matrix { display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; padding-block: 16px; }
+.dot-matrix i { width: 4px; height: 4px; border-radius: 50%; background: var(--ui-border-accented); justify-self: center; }
+.dot-matrix .ink-dot { background: var(--ui-text-muted); }
+.dot-matrix .changed-dot { transform: translateX(3px); }
+.is-watching .dot-matrix .changed-dot { background: var(--ui-primary); }
+.change-seam { position: absolute; left: 6%; right: 6%; top: 173px; color: var(--ui-primary); opacity: 0; transition: opacity 200ms ease-out; }
+.change-seam span { background: var(--ui-bg); padding: 4px 8px; border: 1px solid var(--ui-primary); position: relative; z-index: 1; }
+.change-seam i { position: absolute; top: 9px; left: 0; right: 0; border-top: 1px dashed var(--ui-primary); }
+.is-watching .change-seam { opacity: 1; }
+.experiment-controls { display: flex; gap: 8px; flex-wrap: wrap; }
+.experiment-controls :deep(button) { min-height: 44px; }
+.experiment-footnote { font-size: 14px; line-height: 1.6; color: var(--ui-text-muted); max-width: 58ch; margin: 12px 0 0; }
+@keyframes source-moves { from { transform: rotate(-7deg) translate(-16px, 16px); } to { transform: rotate(7deg); } }
+@container (max-width: 400px) { .sheet { padding: 12px; width: 54%; } .sheet-local { left: 3%; } .sheet-source { left: 41%; } .dot-matrix { gap: 6px; } .sheet-foot { font-size: 11px; } }
+@media (prefers-reduced-motion: reduce) { .sheet-source { animation: none; } .change-seam { transition: none; } }
+</style>

From ac658c73f38b19063be9215084b2e720ed819f7f Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 00:00:31 +1100
Subject: [PATCH 3/4] feat(brand): explore session boundary and Skill bloat
 visuals

---
 .../brand-experiments/SessionBoundary.vue     | 74 +++++++++++++++++
 .../brand-experiments/SkillBloat.vue          | 80 +++++++++++++++++++
 2 files changed, 154 insertions(+)
 create mode 100644 app/components/brand-experiments/SessionBoundary.vue
 create mode 100644 app/components/brand-experiments/SkillBloat.vue

diff --git a/app/components/brand-experiments/SessionBoundary.vue b/app/components/brand-experiments/SessionBoundary.vue
new file mode 100644
index 00000000..177c5bf9
--- /dev/null
+++ b/app/components/brand-experiments/SessionBoundary.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const sessionOpen = ref(true)
+</script>
+
+<template>
+  <section class="session-specimen" aria-label="Session boundary brand experiment">
+    <div class="session-specimen__art" :class="{ 'is-ended': !sessionOpen }" aria-hidden="true">
+      <div class="session-specimen__tracks">
+        <span v-for="line in 11" :key="line" />
+      </div>
+      <div class="session-specimen__aperture">
+        <span class="session-specimen__edge session-specimen__edge--left" />
+        <span class="session-specimen__edge session-specimen__edge--right" />
+        <span class="session-specimen__word">session</span>
+      </div>
+      <div class="session-specimen__ribbon">
+        <span>SKILL.md</span>
+        <span class="session-specimen__ribbon-lines" />
+      </div>
+      <span class="session-specimen__source">source</span>
+      <span class="session-specimen__trace">no files written</span>
+    </div>
+    <div class="session-specimen__caption">
+      <div>
+        <h3>Knowledge for this session.</h3>
+        <p>Run a Skill for the current session. Nothing lands in your repository.</p>
+      </div>
+      <button type="button" :aria-pressed="!sessionOpen" @click="sessionOpen = !sessionOpen">
+        {{ sessionOpen ? 'End session' : 'Run again' }}
+        <span aria-hidden="true">{{ sessionOpen ? '→' : '↺' }}</span>
+      </button>
+    </div>
+    <p class="sr-only" aria-live="polite">
+      {{ sessionOpen ? 'The Skill passes from its source into the current session.' : 'The session ended. No Skill files remain in the repository.' }}
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.session-specimen { color: var(--ui-text); background: var(--ui-bg); }
+.session-specimen__art { position: relative; height: 330px; overflow: hidden; border-block: 1px solid var(--ui-border); }
+.session-specimen__tracks { position: absolute; inset: 58px -20px; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-11deg); }
+.session-specimen__tracks span { height: 1px; background: var(--ui-border); }
+.session-specimen__aperture { position: absolute; inset: 35px 25%; background: var(--ui-bg); }
+.session-specimen__edge { position: absolute; top: 0; bottom: 0; width: 22px; border-block: 2px solid var(--ui-text); }
+.session-specimen__edge--left { left: 0; border-left: 2px solid var(--ui-text); }
+.session-specimen__edge--right { right: 0; border-right: 2px solid var(--ui-text); }
+.session-specimen__word { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 14px; color: var(--ui-text-muted); }
+.session-specimen__ribbon { position: absolute; left: 8%; top: 121px; width: 55%; height: 76px; display: flex; align-items: center; gap: 18px; padding: 0 24px; background: var(--ui-primary); color: var(--color-white); clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%, 5% 50%); transform: rotate(-11deg); transition: transform 900ms cubic-bezier(.22,.8,.22,1), opacity 300ms 450ms; }
+.session-specimen__ribbon > span:first-child { font-family: var(--font-mono); font-size: clamp(18px, 3vw, 25px); font-weight: 500; white-space: nowrap; }
+.session-specimen__ribbon-lines { width: 100%; height: 24px; background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 7px); opacity: .55; }
+.session-specimen__source, .session-specimen__trace { position: absolute; font: 12px var(--font-mono); }
+.session-specimen__source { left: 5%; top: 40px; color: var(--ui-text-muted); }
+.session-specimen__trace { right: 5%; bottom: 26px; color: var(--ui-text-muted); }
+.is-ended .session-specimen__ribbon { transform: translateX(190%) rotate(-11deg); opacity: 0; }
+.session-specimen__caption { display: flex; align-items: start; gap: 24px; padding: 24px 0; }
+.session-specimen__caption > div { flex: 1; }
+.session-specimen h3 { margin: 0; font-family: var(--font-sans); font-size: clamp(23px, 4vw, 30px); font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
+.session-specimen p { font-size: 14px; line-height: 1.6; margin: 12px 0 0; color: var(--ui-text-muted); }
+.session-specimen button { flex-shrink: 0; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); font: 12px var(--font-mono); color: var(--ui-text); background: var(--ui-bg); cursor: pointer; }
+.session-specimen button:hover { border-color: var(--ui-text-muted); }
+.session-specimen button:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 4px; }
+@media (max-width: 450px) {
+  .session-specimen__art { height: 280px; }
+  .session-specimen__ribbon { width: 70%; top: 105px; height: 66px; padding-inline: 20px; }
+  .session-specimen__caption { flex-direction: column; gap: 16px; }
+  .session-specimen__aperture { inset-block: 25px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .session-specimen__ribbon { transition: none; }
+}
+</style>
diff --git a/app/components/brand-experiments/SkillBloat.vue b/app/components/brand-experiments/SkillBloat.vue
new file mode 100644
index 00000000..bf711e41
--- /dev/null
+++ b/app/components/brand-experiments/SkillBloat.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const focused = ref(false)
+const fragments = Array.from({ length: 25 }, (_, index) => ({
+  index,
+  x: (index * 31) % 84 - 8,
+  y: (index * 47) % 210 + 28,
+  angle: (index * 17) % 70 - 35,
+}))
+</script>
+
+<template>
+  <section class="bloat-specimen" aria-label="Skill bloat brand experiment">
+    <div class="bloat-specimen__art" :class="{ 'is-focused': focused }" aria-hidden="true">
+      <div class="bloat-specimen__field">
+        <span
+          v-for="fragment in fragments"
+          :key="fragment.index"
+          class="bloat-specimen__fragment"
+          :style="{ '--x': `${fragment.x}%`, '--y': `${fragment.y}px`, '--angle': `${fragment.angle}deg`, '--delay': `${fragment.index * 9}ms` }"
+        ><i /><i /><i /></span>
+      </div>
+      <div class="bloat-specimen__selection">
+        <span class="bloat-specimen__number">01</span>
+        <div class="bloat-specimen__ribbon">
+          <span>SKILL.md</span><i /><i /><i />
+        </div>
+      </div>
+      <span class="bloat-specimen__annotation">{{ focused ? 'one task · one Skill' : 'what does this task need?' }}</span>
+    </div>
+    <div class="bloat-specimen__caption">
+      <div>
+        <h3>One task. One Skill.</h3>
+        <p>Give this task one Skill. Install only what earns a place.</p>
+      </div>
+      <button type="button" :aria-pressed="focused" @click="focused = !focused">
+        {{ focused ? 'Show all Skills' : 'Focus one Skill' }}
+        <span aria-hidden="true">{{ focused ? '↺' : '→' }}</span>
+      </button>
+    </div>
+    <p class="sr-only" aria-live="polite">
+      {{ focused ? 'One Skill is in focus. The other instruction fragments recede.' : 'Many instruction fragments surround one Skill.' }}
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.bloat-specimen { color: var(--ui-text); background: var(--ui-bg); }
+.bloat-specimen__art { position: relative; height: 330px; overflow: hidden; border-block: 1px solid var(--ui-border); }
+.bloat-specimen__field { position: absolute; inset: 0; }
+.bloat-specimen__fragment { position: absolute; left: var(--x); top: var(--y); width: 170px; height: 40px; padding: 8px 12px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--ui-border-accented); background: var(--ui-bg); transform: rotate(var(--angle)); transition: opacity 500ms var(--delay), transform 700ms var(--delay); }
+.bloat-specimen__fragment i { height: 1px; width: 85%; background: var(--ui-text-muted); opacity: .5; }
+.bloat-specimen__fragment i:nth-child(2) { width: 60%; }
+.bloat-specimen__selection { position: absolute; left: 18%; right: 18%; top: 74px; display: flex; flex-direction: column; align-items: center; }
+.bloat-specimen__number { font: 500 130px/.95 var(--font-sans); letter-spacing: -.09em; color: var(--ui-text); opacity: 0; transform: translateY(18px); transition: opacity 500ms, transform 600ms; }
+.bloat-specimen__ribbon { position: relative; width: 100%; height: 60px; padding-inline: 20px; display: flex; align-items: center; gap: 8px; background: var(--ui-primary); color: var(--color-white); transform: rotate(-9deg) translateY(-30px); transition: transform 700ms; }
+.bloat-specimen__ribbon span { font: 500 20px var(--font-mono); padding-right: 12px; }
+.bloat-specimen__ribbon i { width: 1px; height: 24px; flex: 1; border-block: 1px solid currentColor; opacity: .6; }
+.bloat-specimen__annotation { position: absolute; bottom: 24px; left: 24px; right: 24px; font: 12px var(--font-mono); color: var(--ui-text-muted); }
+.is-focused .bloat-specimen__fragment { opacity: .08; transform: translateY(20px) rotate(0deg); }
+.is-focused .bloat-specimen__number { opacity: 1; transform: translateY(0); }
+.is-focused .bloat-specimen__ribbon { transform: rotate(0) translateY(14px); }
+.bloat-specimen__caption { display: flex; align-items: start; gap: 24px; padding: 24px 0; }
+.bloat-specimen__caption > div { flex: 1; }
+.bloat-specimen h3 { margin: 0; font: 600 clamp(23px, 4vw, 30px)/1.2 var(--font-sans); letter-spacing: -.04em; }
+.bloat-specimen p { font-size: 14px; line-height: 1.6; margin: 12px 0 0; color: var(--ui-text-muted); }
+.bloat-specimen button { flex-shrink: 0; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border: 1px solid var(--ui-border); font: 12px var(--font-mono); color: var(--ui-text); background: var(--ui-bg); cursor: pointer; }
+.bloat-specimen button:hover { border-color: var(--ui-text-muted); }
+.bloat-specimen button:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 4px; }
+@media (max-width: 450px) {
+  .bloat-specimen__art { height: 280px; }
+  .bloat-specimen__selection { left: 12%; right: 12%; top: 52px; }
+  .bloat-specimen__number { font-size: 112px; }
+  .bloat-specimen__caption { flex-direction: column; gap: 16px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .bloat-specimen__fragment, .bloat-specimen__number, .bloat-specimen__ribbon { transition: none; }
+}
+</style>

From a73e4db74239d30879ee1b2ae856a88ade512ca6 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 00:14:42 +1100
Subject: [PATCH 4/4] feat(brand): add five interactive visual experiments

---
 COPY.md                                       | 36 ++++++++
 DESIGN.md                                     |  7 ++
 .../brand-experiments/HumanProvenance.vue     |  4 +-
 .../brand-experiments/KnowledgeFreshness.vue  |  4 +-
 .../brand-experiments/SessionBoundary.vue     |  4 +-
 .../brand-experiments/SkillBloat.vue          |  4 +-
 app/pages/brand-kit/experiments.vue           | 90 +++++++++++++++++++
 app/pages/brand-kit/index.vue                 | 36 ++++++++
 nuxt.config.ts                                |  4 +-
 test/a11y.spec.ts                             | 17 ++++
 10 files changed, 197 insertions(+), 9 deletions(-)
 create mode 100644 app/pages/brand-kit/experiments.vue
 create mode 100644 app/pages/brand-kit/index.vue

diff --git a/COPY.md b/COPY.md
index bea4a98a..15d37e9c 100644
--- a/COPY.md
+++ b/COPY.md
@@ -9,6 +9,42 @@ The canonical source for skilld's verbal identity. Pages, meta tags and registry
 from here; when a canonical string changes, change it here first, then propagate. A string that
 contradicts this file is a bug.
 
+## Brand kit experiment register
+
+`/brand-kit/experiments` uses exploratory copy. It does not replace the approved tagline or homepage hero.
+Use existing product nouns. Label illustrative states without implying measured results or automatic updates.
+
+- Brand kit: `Explore the visual stories behind skilld.`
+- Experiment link: `Five brand experiments`.
+- Experiment summary: `Session, bloat, freshness, provenance, and portability.`
+- Badge summary: `A small mark that links a README to its Skill or Repository.`
+- Experiment title: `Five ways to show what skilld solves.`
+- Experiment description: `Each experiment starts with a product limit. These are exploratory visuals, not adopted brand assets.`
+- Selectors: `Session`, `Bloat`, `Freshness`, `Provenance`, `Portability`.
+- Theme controls: `Light mode`, `Dark mode`.
+
+| Experiment | Product limit | Review question |
+| --- | --- | --- |
+| Session | Run a Skill without keeping it. | Can the session boundary become a recognisable brand shape? |
+| Bloat | Keep only the Skills you need. | Can a dense weave resolving into one thread show the cost of Skill bloat? |
+| Freshness | The source can change while your copy stays still. | Can a visible change seam give watch its own visual language? |
+| Provenance | Knowledge has a human source. | Can a continuous thread make source ownership visible? |
+| Portability | The Skill stays the same when you change Agents. | Can one stable shape moving across contexts express independence? |
+
+Specimen strings:
+
+| Specimen | Heading and explanation | Controls and labels |
+| --- | --- | --- |
+| Session | `Knowledge for this session.` · `Run a Skill for the current session. Nothing lands in your repository.` | `End session`, `Run again`, `source`, `session`, `no files written`, `SKILL.md` |
+| Bloat | `One task. One Skill.` · `Give this task one Skill. Install only what earns a place.` | `Focus one Skill`, `Show all Skills`, `one task · one Skill`, `what does this task need?`, `SKILL.md` |
+| Freshness | `See when knowledge moves.` · `The source changes. Your local copy stays still. Watch makes the difference visible.` | `Hide differences`, `Show differences`, `Replay`, `Local copy`, `Illustrative source`, `Kept in your project`, `Changed at the source`, `Watch for changes` |
+| Provenance | `Knowledge has an author.` · `A Skill reaches your Agent. The thread leads back to the person who wrote it.` | `Hide source thread`, `Trace the source`, `Replay`, `Your Agent`, `Read the Skill`, `Illustrative source`, `Written by a human.`, `The author keeps the source.`, `Source stays attached.`, `SKILL.md` |
+| Portability | `Same Skill. Your Agent.` · `The Agent changes. The knowledge stays yours.` | `Change Agent`, `Claude Code`, `Codex`, `Cursor`, `One Skill`, `SKILL.md`, `skilld`, `{Agent} selected. Same SKILL.md.` |
+
+Freshness footnote: `Illustration only. Watching reports changes. It does not update your local copy.`
+Provenance footnote: `Illustrative source. The thread represents authorship, not a safety claim.`
+Accessible state descriptions name the same illustrated transition. They make no additional product claim.
+
 ## Canonical assets
 
 Comparison navigation uses “Compare Humanizer, Stop Slop, and No AI Slop” on the homepage, writing track, and featured Skill pages.
diff --git a/DESIGN.md b/DESIGN.md
index c8703885..c3c5e857 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -68,6 +68,13 @@ components:
 
 ## Design Principles
 
+### Brand kit experiments
+
+`/brand-kit/experiments` explores five product constraints through isolated visual specimens.
+New shapes and motion there are exploratory exceptions, not adopted brand assets.
+Keep warm stone, rose, readable labels, keyboard controls, and reduced-motion alternatives.
+The homepage and shared components retain the existing identity rules.
+
 ### 1. Quiet
 
 **"Confidence is quiet. The interface recedes; the content speaks."**
diff --git a/app/components/brand-experiments/HumanProvenance.vue b/app/components/brand-experiments/HumanProvenance.vue
index f2f9e0df..f5c86214 100644
--- a/app/components/brand-experiments/HumanProvenance.vue
+++ b/app/components/brand-experiments/HumanProvenance.vue
@@ -58,7 +58,7 @@ const revision = ref(0)
 .experiment-heading p { max-width: 40ch; font-size: 16px; line-height: 1.6; color: var(--ui-text-muted); margin: 0; }
 .provenance-stage { position: relative; height: 330px; overflow: hidden; border-block: 1px solid var(--ui-border); margin: 24px 0 16px; }
 .skill-leaf { position: absolute; left: 8%; top: 28px; width: 49%; padding: 16px; border: 1px solid var(--ui-border-accented); background: var(--ui-bg); transform: rotate(-3deg); }
-.leaf-label, .leaf-end, .trace-label { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
+.leaf-label, .leaf-end, .trace-label { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; }
 .leaf-label { display: block; color: var(--ui-text-muted); margin-bottom: 8px; }
 .skill-leaf strong { font-family: var(--font-mono); font-size: 22px; font-weight: 500; }
 .written-lines { display: flex; gap: 7px; flex-direction: column; padding: 16px 0; }
@@ -83,6 +83,6 @@ const revision = ref(0)
 .experiment-controls :deep(button) { min-height: 44px; }
 .experiment-footnote { font-size: 14px; line-height: 1.6; color: var(--ui-text-muted); max-width: 58ch; margin: 12px 0 0; }
 @keyframes thread-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
-@container (max-width: 400px) { .skill-leaf { left: 5%; width: 62%; padding: 12px; } .source-leaf { left: 23%; right: 4%; padding-left: 24px; } .trace-label { top: 208px; left: 4%; font-size: 11px; } .thread-turn { right: 10%; } .thread-top { width: 48%; } }
+@container (max-width: 400px) { .skill-leaf { left: 5%; width: 62%; padding: 12px; } .source-leaf { left: 23%; right: 4%; padding-left: 24px; } .trace-label { top: auto; bottom: 0; left: 4%; font-size: 14px; } .thread-turn { right: 10%; } .thread-top { width: 48%; } }
 @media (prefers-reduced-motion: reduce) { .thread-path, .trace-label { animation: none !important; transition: none; } }
 </style>
diff --git a/app/components/brand-experiments/KnowledgeFreshness.vue b/app/components/brand-experiments/KnowledgeFreshness.vue
index be8549d7..44ce3e8b 100644
--- a/app/components/brand-experiments/KnowledgeFreshness.vue
+++ b/app/components/brand-experiments/KnowledgeFreshness.vue
@@ -53,7 +53,7 @@ const revision = ref(0)
 .sheet { position: absolute; width: 48%; height: 226px; border: 1px solid var(--ui-border-accented); background: var(--ui-bg); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
 .sheet-local { left: 8%; top: 68px; transform: rotate(-7deg); }
 .sheet-source { left: 44%; top: 27px; transform: rotate(7deg); animation: source-moves 360ms ease-out both; }
-.sheet-caption, .sheet-foot, .change-seam { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
+.sheet-caption, .sheet-foot, .change-seam { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; }
 .sheet-caption { color: var(--ui-text); }
 .sheet-foot { color: var(--ui-text-muted); }
 .dot-matrix { display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; padding-block: 16px; }
@@ -69,6 +69,6 @@ const revision = ref(0)
 .experiment-controls :deep(button) { min-height: 44px; }
 .experiment-footnote { font-size: 14px; line-height: 1.6; color: var(--ui-text-muted); max-width: 58ch; margin: 12px 0 0; }
 @keyframes source-moves { from { transform: rotate(-7deg) translate(-16px, 16px); } to { transform: rotate(7deg); } }
-@container (max-width: 400px) { .sheet { padding: 12px; width: 54%; } .sheet-local { left: 3%; } .sheet-source { left: 41%; } .dot-matrix { gap: 6px; } .sheet-foot { font-size: 11px; } }
+@container (max-width: 400px) { .sheet { padding: 12px; width: 54%; } .sheet-local { left: 3%; } .sheet-source { left: 41%; } .dot-matrix { gap: 6px; } .sheet-foot { font-size: 14px; } }
 @media (prefers-reduced-motion: reduce) { .sheet-source { animation: none; } .change-seam { transition: none; } }
 </style>
diff --git a/app/components/brand-experiments/SessionBoundary.vue b/app/components/brand-experiments/SessionBoundary.vue
index 177c5bf9..1554c308 100644
--- a/app/components/brand-experiments/SessionBoundary.vue
+++ b/app/components/brand-experiments/SessionBoundary.vue
@@ -51,7 +51,7 @@ const sessionOpen = ref(true)
 .session-specimen__ribbon { position: absolute; left: 8%; top: 121px; width: 55%; height: 76px; display: flex; align-items: center; gap: 18px; padding: 0 24px; background: var(--ui-primary); color: var(--color-white); clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%, 5% 50%); transform: rotate(-11deg); transition: transform 900ms cubic-bezier(.22,.8,.22,1), opacity 300ms 450ms; }
 .session-specimen__ribbon > span:first-child { font-family: var(--font-mono); font-size: clamp(18px, 3vw, 25px); font-weight: 500; white-space: nowrap; }
 .session-specimen__ribbon-lines { width: 100%; height: 24px; background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 7px); opacity: .55; }
-.session-specimen__source, .session-specimen__trace { position: absolute; font: 12px var(--font-mono); }
+.session-specimen__source, .session-specimen__trace { position: absolute; font: 14px var(--font-mono); }
 .session-specimen__source { left: 5%; top: 40px; color: var(--ui-text-muted); }
 .session-specimen__trace { right: 5%; bottom: 26px; color: var(--ui-text-muted); }
 .is-ended .session-specimen__ribbon { transform: translateX(190%) rotate(-11deg); opacity: 0; }
@@ -59,7 +59,7 @@ const sessionOpen = ref(true)
 .session-specimen__caption > div { flex: 1; }
 .session-specimen h3 { margin: 0; font-family: var(--font-sans); font-size: clamp(23px, 4vw, 30px); font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
 .session-specimen p { font-size: 14px; line-height: 1.6; margin: 12px 0 0; color: var(--ui-text-muted); }
-.session-specimen button { flex-shrink: 0; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); font: 12px var(--font-mono); color: var(--ui-text); background: var(--ui-bg); cursor: pointer; }
+.session-specimen button { flex-shrink: 0; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border); font: 14px var(--font-mono); color: var(--ui-text); background: var(--ui-bg); cursor: pointer; }
 .session-specimen button:hover { border-color: var(--ui-text-muted); }
 .session-specimen button:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 4px; }
 @media (max-width: 450px) {
diff --git a/app/components/brand-experiments/SkillBloat.vue b/app/components/brand-experiments/SkillBloat.vue
index bf711e41..81134f6b 100644
--- a/app/components/brand-experiments/SkillBloat.vue
+++ b/app/components/brand-experiments/SkillBloat.vue
@@ -57,7 +57,7 @@ const fragments = Array.from({ length: 25 }, (_, index) => ({
 .bloat-specimen__ribbon { position: relative; width: 100%; height: 60px; padding-inline: 20px; display: flex; align-items: center; gap: 8px; background: var(--ui-primary); color: var(--color-white); transform: rotate(-9deg) translateY(-30px); transition: transform 700ms; }
 .bloat-specimen__ribbon span { font: 500 20px var(--font-mono); padding-right: 12px; }
 .bloat-specimen__ribbon i { width: 1px; height: 24px; flex: 1; border-block: 1px solid currentColor; opacity: .6; }
-.bloat-specimen__annotation { position: absolute; bottom: 24px; left: 24px; right: 24px; font: 12px var(--font-mono); color: var(--ui-text-muted); }
+.bloat-specimen__annotation { position: absolute; bottom: 24px; left: 24px; right: 24px; font: 14px var(--font-mono); color: var(--ui-text-muted); }
 .is-focused .bloat-specimen__fragment { opacity: .08; transform: translateY(20px) rotate(0deg); }
 .is-focused .bloat-specimen__number { opacity: 1; transform: translateY(0); }
 .is-focused .bloat-specimen__ribbon { transform: rotate(0) translateY(14px); }
@@ -65,7 +65,7 @@ const fragments = Array.from({ length: 25 }, (_, index) => ({
 .bloat-specimen__caption > div { flex: 1; }
 .bloat-specimen h3 { margin: 0; font: 600 clamp(23px, 4vw, 30px)/1.2 var(--font-sans); letter-spacing: -.04em; }
 .bloat-specimen p { font-size: 14px; line-height: 1.6; margin: 12px 0 0; color: var(--ui-text-muted); }
-.bloat-specimen button { flex-shrink: 0; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border: 1px solid var(--ui-border); font: 12px var(--font-mono); color: var(--ui-text); background: var(--ui-bg); cursor: pointer; }
+.bloat-specimen button { flex-shrink: 0; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border: 1px solid var(--ui-border); font: 14px var(--font-mono); color: var(--ui-text); background: var(--ui-bg); cursor: pointer; }
 .bloat-specimen button:hover { border-color: var(--ui-text-muted); }
 .bloat-specimen button:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 4px; }
 @media (max-width: 450px) {
diff --git a/app/pages/brand-kit/experiments.vue b/app/pages/brand-kit/experiments.vue
new file mode 100644
index 00000000..1d859025
--- /dev/null
+++ b/app/pages/brand-kit/experiments.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import HumanProvenance from '~/components/brand-experiments/HumanProvenance.vue'
+import KnowledgeFreshness from '~/components/brand-experiments/KnowledgeFreshness.vue'
+import PortableKnowledge from '~/components/brand-experiments/PortableKnowledge.vue'
+import SessionBoundary from '~/components/brand-experiments/SessionBoundary.vue'
+import SkillBloat from '~/components/brand-experiments/SkillBloat.vue'
+
+const experiments = [
+  { id: 'session', label: 'Session', component: SessionBoundary, constraint: 'Run a Skill without keeping it.', question: 'Can the session boundary become a recognisable brand shape?' },
+  { id: 'bloat', label: 'Bloat', component: SkillBloat, constraint: 'Keep only the Skills you need.', question: 'Can a dense weave resolving into one thread show the cost of Skill bloat?' },
+  { id: 'freshness', label: 'Freshness', component: KnowledgeFreshness, constraint: 'The source can change while your copy stays still.', question: 'Can a visible change seam give watch its own visual language?' },
+  { id: 'provenance', label: 'Provenance', component: HumanProvenance, constraint: 'Knowledge has a human source.', question: 'Can a continuous thread make source ownership visible?' },
+  { id: 'portability', label: 'Portability', component: PortableKnowledge, constraint: 'The Skill stays the same when you change Agents.', question: 'Can one stable shape moving across contexts express independence?' },
+] as const
+
+const selected = ref(0)
+const activeExperiment = computed(() => experiments[selected.value]!)
+const colorMode = useColorMode()
+const dark = computed(() => colorMode.value === 'dark')
+
+useSeoMeta({
+  title: 'Brand experiments',
+  description: 'Five visual experiments based on the limits skilld solves.',
+  robots: 'noindex,nofollow',
+})
+</script>
+
+<template>
+  <div class="brand-lab mx-auto max-w-6xl px-4 py-10 sm:px-6 md:py-14">
+    <header>
+      <NuxtLink to="/brand-kit" class="inline-flex min-h-11 items-center font-mono text-sm text-muted underline underline-offset-4">
+        Brand kit
+      </NuxtLink>
+      <div class="mt-4 flex flex-wrap items-end justify-between gap-5">
+        <div class="max-w-2xl">
+          <h1 class="text-balance text-3xl font-semibold tracking-tight sm:text-5xl">
+            Five ways to show what skilld solves.
+          </h1>
+          <p class="mt-4 text-base leading-relaxed text-muted">
+            Each experiment starts with a product limit. These are exploratory visuals, not adopted brand assets.
+          </p>
+        </div>
+        <ClientOnly>
+          <UButton
+            :label="dark ? 'Light mode' : 'Dark mode'"
+            color="neutral"
+            variant="outline"
+            class="min-h-11"
+            @click="colorMode.preference = dark ? 'light' : 'dark'"
+          />
+        </ClientOnly>
+      </div>
+    </header>
+
+    <nav class="mt-8 grid grid-cols-2 gap-2 sm:grid-cols-5" aria-label="Brand experiments">
+      <button
+        v-for="(experiment, index) in experiments"
+        :key="experiment.id"
+        type="button"
+        class="experiment-selector min-h-11 rounded-lg border px-3 py-3 text-left font-mono text-sm"
+        :class="selected === index ? 'border-primary bg-primary/10 text-default' : 'border-default text-muted hover:text-default'"
+        :aria-pressed="selected === index"
+        aria-controls="experiment-stage"
+        @click="selected = index"
+      >
+        <span class="mr-2 text-muted">0{{ index + 1 }}</span>{{ experiment.label }}
+      </button>
+    </nav>
+
+    <section id="experiment-stage" class="mt-6" aria-labelledby="experiment-heading">
+      <div class="mb-5 flex flex-wrap items-center justify-between gap-3 border-y border-default py-4">
+        <h2 id="experiment-heading" class="text-lg font-medium">
+          {{ activeExperiment.constraint }}
+        </h2>
+        <span class="font-mono text-sm text-muted">0{{ selected + 1 }} / 05</span>
+      </div>
+      <component :is="activeExperiment.component" :key="activeExperiment.id" />
+      <p class="mt-6 max-w-2xl text-base leading-relaxed text-muted">
+        {{ activeExperiment.question }}
+      </p>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.experiment-selector:focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 3px;
+}
+</style>
diff --git a/app/pages/brand-kit/index.vue b/app/pages/brand-kit/index.vue
new file mode 100644
index 00000000..e2651d3e
--- /dev/null
+++ b/app/pages/brand-kit/index.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+useSeoMeta({
+  title: 'Brand kit',
+  description: 'Explore skilld brand experiments and the GitHub badge.',
+  robots: 'noindex,nofollow',
+})
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl px-4 py-12 sm:px-6">
+    <h1 class="text-4xl font-semibold tracking-tight">
+      Brand kit
+    </h1>
+    <p class="mt-4 max-w-xl text-base text-muted">
+      Explore the visual stories behind skilld.
+    </p>
+    <div class="mt-10 divide-y divide-default border-y border-default">
+      <NuxtLink to="/brand-kit/experiments" class="block py-6 outline-offset-4">
+        <h2 class="text-xl font-semibold">
+          Five brand experiments <span aria-hidden="true">↗</span>
+        </h2>
+        <p class="mt-2 text-base text-muted">
+          Session, bloat, freshness, provenance, and portability.
+        </p>
+      </NuxtLink>
+      <NuxtLink to="/brand-kit/github-badge" class="block py-6 outline-offset-4">
+        <h2 class="text-xl font-semibold">
+          GitHub badge <span aria-hidden="true">↗</span>
+        </h2>
+        <p class="mt-2 text-base text-muted">
+          A small mark that links a README to its Skill or Repository.
+        </p>
+      </NuxtLink>
+    </div>
+  </div>
+</template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5ceedb71..e18b778f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -604,6 +604,8 @@ export default defineNuxtConfig({
     // kit page and Nuxt made it a route. The page went indexable today, so the
     // empty sibling redirects instead of shipping next to it.
     '/brand-kit/_GithubBadgePreview': { redirect: { to: '/brand-kit/github-badge', statusCode: 301 } } as any,
+    '/brand-kit': { headers: { 'x-robots-tag': 'noindex, nofollow' } },
+    '/brand-kit/experiments': { headers: { 'x-robots-tag': 'noindex, nofollow' } },
     // 2026-08-22: llms-full.txt inlined every page's markdown into one 28.5 MB
     // file; agents truncate or time out on it. llms.txt now links each page's
     // .md (aiReady.llmsTxt.markdownLinks), so the dump redirects there. 302 so
@@ -806,7 +808,7 @@ export default defineNuxtConfig({
     // `/learn` index is a 55-word card list, noindex since 2026-08-22
     // (GOOGLE_RECOVERY.md). Articles stay indexable and sitemap-listed; only
     // the bare index leaves. Global so no child sitemap can re-adopt it.
-    exclude: ['/learn'],
+    exclude: ['/learn', '/brand-kit', '/brand-kit/experiments'],
     sitemaps: {
       pages: {
         includeAppSources: true,
diff --git a/test/a11y.spec.ts b/test/a11y.spec.ts
index 097f0356..2c8e98ea 100644
--- a/test/a11y.spec.ts
+++ b/test/a11y.spec.ts
@@ -85,6 +85,23 @@ afterEach(() => {
 })
 
 describe('accessibility: components', () => {
+  it.each([
+    'SessionBoundary',
+    'SkillBloat',
+    'KnowledgeFreshness',
+    'HumanProvenance',
+    'PortableKnowledge',
+  ])('brand experiment %s has no accessibility violations', async (name) => {
+    const container = createIsolatedContainer()
+    const wrapper = await mountSuspended(
+      await loadComponent(`brand-experiments/${name}`),
+      { attachTo: container },
+    )
+    const results = await runAxe(container)
+    expect(results.violations, formatViolations(results)).toHaveLength(0)
+    wrapper.unmount()
+  })
+
   it('appLogo has no violations', async () => {
     const container = createIsolatedContainer()
     const wrapper = await mountSuspended(