From eafa9623dc7a6463e801a79db24efc3ea49b08ff Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 28 Jul 2026 09:08:01 +0300
Subject: [PATCH 01/39] refactor: update button variants to primary

---
 src/frontend/dashboard/action-card.vue        |   0
 src/frontend/fields/list/foldable-list.vue    |   4 +-
 src/frontend/pages/pages-index.vue            |   4 +-
 .../components/request-feedback-modal.vue     |   2 +-
 .../settings/languages/language-list.vue      |   2 +-
 .../settings/languages/languages-edit.vue     |   2 +-
 src/frontend/shared/colors.story.vue          | 143 ++++++++++++++++++
 src/frontend/shared/studio-button.story.vue   |   4 -
 src/frontend/shared/studio-button.vue         |  16 +-
 src/frontend/stories/chapter-preview.vue      |   2 +-
 .../stories/components/panel-list.vue         |   2 +-
 .../components/resource-empty-state.vue       |   4 +-
 .../stories/components/resource-picker.vue    |   4 +-
 .../stories/components/workflow-actions.vue   |   2 +-
 .../team/components/user-form-modal.vue       |   2 +-
 15 files changed, 165 insertions(+), 28 deletions(-)
 create mode 100644 src/frontend/dashboard/action-card.vue
 create mode 100644 src/frontend/shared/colors.story.vue

diff --git a/src/frontend/dashboard/action-card.vue b/src/frontend/dashboard/action-card.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/frontend/fields/list/foldable-list.vue b/src/frontend/fields/list/foldable-list.vue
index 6682e72b..c1cf86a1 100644
--- a/src/frontend/fields/list/foldable-list.vue
+++ b/src/frontend/fields/list/foldable-list.vue
@@ -60,9 +60,9 @@
             </button>
           </template>
 
-          <div v-if="itemHasError(index)" class="z-[1] text-accent-one">
+          <div v-if="itemHasError(index)" class="z-[1] text-error-light">
             <div class="rounded-full border bg-white p-2">
-              <Icon name="exclamation" class="h-10 w-10 text-red-500" />
+              <Icon name="exclamation" class="h-10 w-10 text-error" />
             </div>
           </div>
 
diff --git a/src/frontend/pages/pages-index.vue b/src/frontend/pages/pages-index.vue
index 54386dca..cbf2b302 100644
--- a/src/frontend/pages/pages-index.vue
+++ b/src/frontend/pages/pages-index.vue
@@ -5,12 +5,12 @@
         <StudioButton
           v-if="isShowingPublished"
           label="Add divider"
-          variant="blue"
+          variant="primary"
           @click="addDivider"
         >
           <SeparatorHorizontal class="size-4" aria-hidden="true" />
         </StudioButton>
-        <StudioButton label="Add page" variant="blue" @click="addPage">
+        <StudioButton label="Add page" variant="primary" @click="addPage">
           <Plus class="size-4" aria-hidden="true" />
         </StudioButton>
       </div>
diff --git a/src/frontend/settings/languages/components/request-feedback-modal.vue b/src/frontend/settings/languages/components/request-feedback-modal.vue
index a8bb870f..44d18afe 100644
--- a/src/frontend/settings/languages/components/request-feedback-modal.vue
+++ b/src/frontend/settings/languages/components/request-feedback-modal.vue
@@ -15,7 +15,7 @@
 
     <template #actions>
       <div class="flex w-full justify-end">
-        <StudioButton label="Close" variant="blue" @click="$emit('close')" />
+        <StudioButton label="Close" variant="primary" @click="$emit('close')" />
       </div>
     </template>
   </LanguageModal>
diff --git a/src/frontend/settings/languages/language-list.vue b/src/frontend/settings/languages/language-list.vue
index 2dba4fc0..f86db995 100644
--- a/src/frontend/settings/languages/language-list.vue
+++ b/src/frontend/settings/languages/language-list.vue
@@ -38,7 +38,7 @@
         </p>
         <StudioButton
           label="Request Language"
-          variant="blue"
+          variant="primary"
           class="my-8"
           @click="handleRequestLanguage"
         />
diff --git a/src/frontend/settings/languages/languages-edit.vue b/src/frontend/settings/languages/languages-edit.vue
index d22cade6..31fbf77e 100644
--- a/src/frontend/settings/languages/languages-edit.vue
+++ b/src/frontend/settings/languages/languages-edit.vue
@@ -8,7 +8,7 @@
     <template #actions>
       <StudioButton
         label="Add"
-        variant="blue"
+        variant="primary"
         :disabled="selectedLanguages.length === 0"
         @click="addLanguage"
       />
diff --git a/src/frontend/shared/colors.story.vue b/src/frontend/shared/colors.story.vue
new file mode 100644
index 00000000..2c7ddee7
--- /dev/null
+++ b/src/frontend/shared/colors.story.vue
@@ -0,0 +1,143 @@
+<template>
+  <Story title="Colors" group="shared">
+    <Variant title="Palette">
+      <div class="space-y-12 p-8">
+        <section v-for="section in sections" :key="section.title">
+          <h2 class="mb-6 text-lg font-semibold text-gray-900">{{ section.title }}</h2>
+          <div class="flex flex-wrap gap-8">
+            <div
+              v-for="color in section.colors"
+              :key="color.name"
+              class="flex flex-col gap-2"
+            >
+              <div class="size-80 rounded-xl shadow-md" :class="color.class" />
+              <p class="text-sm font-medium text-gray-900">{{ color.name }}</p>
+              <p v-if="color.hex" class="text-xs text-gray-500">{{ color.hex }}</p>
+            </div>
+          </div>
+        </section>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+type ColorSwatch = {
+  name: string;
+  class?: string;
+  style?: string;
+  hex?: string;
+};
+
+type ColorSection = {
+  title: string;
+  colors: ColorSwatch[];
+};
+
+const sections: ColorSection[] = [
+  {
+    title: 'Brand',
+    colors: [
+      { name: 'tertiary', class: 'bg-tertiary', hex: '#649ABB' },
+      { name: 'purple', class: 'bg-purple', hex: '#B88C9E' },
+      { name: 'black', class: 'bg-black', hex: '#2E2D2C' },
+      { name: 'neutral', class: 'bg-neutral', hex: '#F1F0EA' },
+      { name: 'app_gray', class: 'bg-app_gray', hex: '#F9FAFB' },
+      { name: 'app_green', class: 'bg-app_green', hex: '#16A34A' },
+      { name: 'error', class: 'bg-error', hex: 'red-500' },
+      { name: 'white', class: 'bg-white', hex: '#FFFFFF' },
+    ],
+  },
+  {
+    title: 'Accent',
+    colors: [
+      { name: 'accent', class: 'bg-accent', hex: '#39CCFB' },
+      { name: 'accent-one', class: 'bg-accent-one', hex: '#FF7070' },
+      { name: 'accent-green', class: 'bg-accent-green', hex: '#34D399' },
+      { name: 'accent-orange', class: 'bg-accent-orange', hex: '#FB923C' },
+      { name: 'accent-gray', class: 'bg-accent-gray', hex: '#E2E8F0' },
+      { name: 'accent-pink', class: 'bg-accent-pink', hex: '#EC4899' },
+    ],
+  },
+  {
+    title: 'Studio',
+    colors: [
+      { name: 'studio_forest_green', class: 'bg-studio_forest_green', hex: '#102F35' },
+      { name: 'studio_lime', class: 'bg-studio_lime', hex: '#D7FE96' },
+    ],
+  },
+  {
+    title: 'CSS Variables',
+    colors: [
+      {
+        name: '--primary-color',
+        style: 'background: var(--primary-color)',
+        hex: '#39CCFB',
+      },
+      {
+        name: '--secondary-color',
+        style: 'background: var(--secondary-color)',
+        hex: '#34D399',
+      },
+    ],
+  },
+  {
+    title: 'Gray',
+    colors: [
+      { name: 'gray-50', class: 'bg-gray-50' },
+      { name: 'gray-100', class: 'bg-gray-100' },
+      { name: 'gray-200', class: 'bg-gray-200' },
+      { name: 'gray-300', class: 'bg-gray-300' },
+      { name: 'gray-400', class: 'bg-gray-400' },
+      { name: 'gray-500', class: 'bg-gray-500' },
+      { name: 'gray-600', class: 'bg-gray-600' },
+      { name: 'gray-700', class: 'bg-gray-700' },
+      { name: 'gray-800', class: 'bg-gray-800' },
+      { name: 'gray-900', class: 'bg-gray-900' },
+    ],
+  },
+  {
+    title: 'Blue',
+    colors: [
+      { name: 'blue-50', class: 'bg-blue-50' },
+      { name: 'blue-100', class: 'bg-blue-100' },
+      { name: 'blue-500', class: 'bg-blue-500' },
+      { name: 'blue-600', class: 'bg-blue-600' },
+      { name: 'blue-700', class: 'bg-blue-700' },
+      { name: 'blue-800', class: 'bg-blue-800' },
+    ],
+  },
+  {
+    title: 'Green',
+    colors: [
+      { name: 'green-100', class: 'bg-green-100' },
+      { name: 'green-500', class: 'bg-green-500' },
+      { name: 'green-600', class: 'bg-green-600' },
+      { name: 'green-800', class: 'bg-green-800' },
+    ],
+  },
+  {
+    title: 'Red',
+    colors: [
+      { name: 'red-50', class: 'bg-red-50' },
+      { name: 'red-500', class: 'bg-red-500' },
+    ],
+  },
+  {
+    title: 'Yellow',
+    colors: [
+      { name: 'yellow-500', class: 'bg-yellow-500' },
+      { name: 'yellow-800', class: 'bg-yellow-800' },
+    ],
+  },
+  {
+    title: 'Indigo',
+    colors: [
+      { name: 'indigo-50', class: 'bg-indigo-50' },
+      { name: 'indigo-500', class: 'bg-indigo-500' },
+      { name: 'indigo-600', class: 'bg-indigo-600' },
+      { name: 'indigo-700', class: 'bg-indigo-700' },
+    ],
+  },
+];
+</script>
diff --git a/src/frontend/shared/studio-button.story.vue b/src/frontend/shared/studio-button.story.vue
index b3ef165d..539e4ba7 100644
--- a/src/frontend/shared/studio-button.story.vue
+++ b/src/frontend/shared/studio-button.story.vue
@@ -28,10 +28,6 @@
       </StudioButton>
     </Variant>
 
-    <Variant title="Blue">
-      <StudioButton label="Close" variant="blue" @click="handleClick" />
-    </Variant>
-
     <Variant title="Gray">
       <StudioButton label="Cancel" variant="gray" @click="handleClick" />
     </Variant>
diff --git a/src/frontend/shared/studio-button.vue b/src/frontend/shared/studio-button.vue
index 9be6cdde..cfe2a1b2 100644
--- a/src/frontend/shared/studio-button.vue
+++ b/src/frontend/shared/studio-button.vue
@@ -7,8 +7,7 @@
     <span class="inline-flex" :class="{ 'pointer-events-none': disabled }">
       <button
         type="button"
-        class="inline-flex items-center justify-center gap-2 font-dmsans text-[15px] font-semibold leading-5 tracking-[-0.15px] transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-        :class="[shapeClasses, variantClasses, sizeClasses]"
+        :class="[buttonBaseClasses, shapeClasses, variantClasses, sizeClasses]"
         :aria-label="accessibleLabel"
         :disabled="disabled"
         @click="emit('click')"
@@ -27,8 +26,7 @@
   <button
     v-else
     type="button"
-    class="inline-flex items-center justify-center gap-2 font-dmsans text-[15px] font-semibold leading-5 tracking-[-0.15px] transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-    :class="[shapeClasses, variantClasses, sizeClasses]"
+    :class="[buttonBaseClasses, shapeClasses, variantClasses, sizeClasses]"
     :aria-label="accessibleLabel"
     :disabled="disabled"
     @click="emit('click')"
@@ -42,10 +40,13 @@
 import { computed, useSlots } from 'vue';
 
 export type StudioButtonVariant =
-  'primary' | 'outline' | 'secondary' | 'green' | 'blue' | 'gray' | 'red';
+  'primary' | 'outline' | 'secondary' | 'green' | 'gray' | 'red';
 
 export type StudioButtonShape = 'default' | 'cta';
 
+const buttonBaseClasses =
+  'inline-flex items-center justify-center gap-2 font-dmsans text-[15px] font-semibold leading-5 tracking-[-0.15px] transition-colors disabled:cursor-not-allowed disabled:opacity-50';
+
 const props = withDefaults(
   defineProps<{
     label?: string;
@@ -86,12 +87,11 @@ const shapeClasses = computed(() =>
 );
 
 const variantClassMap: Record<StudioButtonVariant, string> = {
-  primary: 'bg-studio_forest_green text-studio_lime hover:bg-studio_forest_green/90',
+  primary: 'bg-studio-forest text-studio-lime hover:bg-studio-green/90',
   outline:
-    'border border-studio_forest_green bg-transparent text-studio_forest_green hover:bg-studio_forest_green/5',
+    'border border-studio-green bg-transparent text-studio-green hover:bg-studio-green/5',
   secondary: 'bg-blue-600 text-white hover:bg-blue-700',
   green: 'bg-green-500 text-white hover:bg-green-400',
-  blue: 'bg-blue-500 text-white hover:bg-blue-400',
   gray: 'bg-gray-200 text-gray-700 hover:bg-gray-300',
   red: 'bg-red-500 text-white hover:bg-red-400',
 };
diff --git a/src/frontend/stories/chapter-preview.vue b/src/frontend/stories/chapter-preview.vue
index b68b03cf..8f5a8b67 100644
--- a/src/frontend/stories/chapter-preview.vue
+++ b/src/frontend/stories/chapter-preview.vue
@@ -2,7 +2,7 @@
   <AppLayout title="Story" :subtitle="chapterTitle">
     <template #actions>
       <DraftActions :can-delete="false" />
-      <StudioButton label="Edit" variant="blue" @click="editChapter" />
+      <StudioButton label="Edit" variant="primary" @click="editChapter" />
     </template>
     <template #main>
       <div
diff --git a/src/frontend/stories/components/panel-list.vue b/src/frontend/stories/components/panel-list.vue
index e99db270..fb4c7d8e 100644
--- a/src/frontend/stories/components/panel-list.vue
+++ b/src/frontend/stories/components/panel-list.vue
@@ -122,7 +122,7 @@
     <div v-if="!shared.isTranslation" class="mt-6 flex w-full flex-col">
       <button
         type="button"
-        class="inline-flex items-center justify-center rounded-xl border border-dashed border-studio_forest_green px-3 py-[18px] text-sm font-medium leading-4 text-studio_forest_green shadow-sm hover:bg-studio_forest_green/10"
+        class="border-studio-green text-studio-green hover:bg-studio-green/10 inline-flex items-center justify-center rounded-xl border border-dashed px-3 py-[18px] text-sm font-medium leading-4 shadow-sm"
         @click.prevent="addSet"
       >
         <div class="inline-flex items-center justify-center gap-2">
diff --git a/src/frontend/stories/components/resource-empty-state.vue b/src/frontend/stories/components/resource-empty-state.vue
index 3a319c25..76f1968b 100644
--- a/src/frontend/stories/components/resource-empty-state.vue
+++ b/src/frontend/stories/components/resource-empty-state.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="py-11">
-    <p
-      class="text-center font-dmsans text-base font-normal leading-7 text-studio_forest_green"
-    >
+    <p class="text-studio-green text-center font-dmsans text-base font-normal leading-7">
       There are no resources attached to this story. <br />
       Search for resources above or create new ones to attach to this story
     </p>
diff --git a/src/frontend/stories/components/resource-picker.vue b/src/frontend/stories/components/resource-picker.vue
index b4b808d1..a419b779 100644
--- a/src/frontend/stories/components/resource-picker.vue
+++ b/src/frontend/stories/components/resource-picker.vue
@@ -11,7 +11,7 @@
           v-model="searchQuery"
           type="text"
           placeholder="Search resources to attach..."
-          class="w-full rounded-xl border border-gray-300 py-2.5 pl-11 pr-4 focus:border-transparent focus:ring-2 focus:ring-studio_forest_green"
+          class="focus:ring-studio-green w-full rounded-xl border border-gray-300 py-2.5 pl-11 pr-4 focus:border-transparent focus:ring-2"
           @focus="showSearch = true"
           @input="showSearch = true"
         />
@@ -19,7 +19,7 @@
       <button
         v-if="allowCreate"
         type="button"
-        class="inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-xl border border-studio_forest_green px-4 py-2.5 text-sm font-medium text-studio_forest_green transition-colors hover:bg-studio_forest_green/10"
+        class="border-studio-green text-studio-green hover:bg-studio-green/10 inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-xl border px-4 py-2.5 text-sm font-medium transition-colors"
         @click="emit('create')"
       >
         <Plus class="size-4" />
diff --git a/src/frontend/stories/components/workflow-actions.vue b/src/frontend/stories/components/workflow-actions.vue
index 4266e526..9f47ce9c 100644
--- a/src/frontend/stories/components/workflow-actions.vue
+++ b/src/frontend/stories/components/workflow-actions.vue
@@ -8,7 +8,7 @@
   <StudioButton
     v-if="showSubmitButton"
     label="Submit"
-    variant="blue"
+    variant="primary"
     :disabled="widgets.isDirty"
     @click="emit('submit')"
   />
diff --git a/src/frontend/team/components/user-form-modal.vue b/src/frontend/team/components/user-form-modal.vue
index 8f9c53fc..20578ff5 100644
--- a/src/frontend/team/components/user-form-modal.vue
+++ b/src/frontend/team/components/user-form-modal.vue
@@ -72,7 +72,7 @@
 
     <template #actions>
       <div class="mt-9 flex w-full justify-end gap-x-4">
-        <StudioButton :label="submitLabel" variant="blue" @click="emit('submit')" />
+        <StudioButton :label="submitLabel" variant="primary" @click="emit('submit')" />
         <StudioButton label="Cancel" variant="gray" @click="emit('cancel')" />
       </div>
     </template>

From 20ff9f319bf545c7a07a585fcb646761bec42a4d Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 28 Jul 2026 09:36:38 +0300
Subject: [PATCH 02/39] ops: add functon to find colours

---
 AGENTS.md                                    | 128 +++
 CLAUDE.md                                    |   3 +
 package.json                                 |   1 +
 scripts/generate-color-usage.mjs             | 422 +++++++++
 src/frontend/dashboard/action-card.story.vue |  39 +
 src/frontend/dashboard/action-card.vue       |  38 +
 src/frontend/index.css                       |   4 +
 src/frontend/shared/colors.palette.ts        | 163 ++++
 src/frontend/shared/colors.story.vue         | 140 +--
 src/frontend/shared/colors.usage.ts          | 921 +++++++++++++++++++
 tailwind.config.js                           |  24 +-
 11 files changed, 1751 insertions(+), 132 deletions(-)
 create mode 100644 AGENTS.md
 create mode 100644 CLAUDE.md
 create mode 100644 scripts/generate-color-usage.mjs
 create mode 100644 src/frontend/dashboard/action-card.story.vue
 create mode 100644 src/frontend/shared/colors.palette.ts
 create mode 100644 src/frontend/shared/colors.usage.ts

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..fcbd9ff4
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,128 @@
+# AGENTS.md — @story-cms/kit
+
+Instructions for AI coding agents (Codex, Cursor, Claude Code, Copilot, etc.) working in this repository.
+
+## Project overview
+
+**Journeys Studio Kit** (`@story-cms/kit`) is a publishable npm package that provides:
+
+- **Frontend**: Vue 3 + Inertia.js UI components, field widgets, and Pinia stores
+- **Backend**: AdonisJS 6 services, models, middleware, and scaffolding stubs
+- **Documentation**: [Histoire](https://histoire.dev/) component stories (not Storybook)
+
+This repo is the **kit library**, not a full CMS app. Client apps (e.g. `@bnap/cms`) consume the built package. Local development uses Histoire (`npm run dev`) to preview and document components.
+
+## Repository map
+
+| Path | Purpose |
+|------|---------|
+| `src/frontend/` | Vue components, stores, styles |
+| `src/backend/` | Adonis services, models, middleware, stubs |
+| `src/types.ts` | Shared TypeScript types |
+| `tests/unit/` | Playwright unit tests |
+| `tests/e2e/` | Playwright end-to-end tests |
+| `scripts/` | Build helpers (e.g. color usage generator) |
+| `.cursor/rules/` | Detailed, file-scoped Cursor rules (see index below) |
+
+Full directory tree: `.cursor/rules/project-structure.mdc`
+
+## Commands
+
+```bash
+npm run dev              # Histoire dev server (component docs)
+npm run build            # types + frontend (Vite) + backend (tsc)
+npm run ui:build         # Frontend only
+npm run backend:build    # Backend only
+npm run lint             # ESLint
+npm run lint:fix         # ESLint with auto-fix
+npm run test             # Playwright unit tests
+npm run test:e2e         # Playwright e2e tests
+npm run colors:usage     # Regenerate colors.palette.ts + colors.usage.ts
+npm run story:build      # Build Histoire static site
+npm run story:preview    # Preview built Histoire site
+```
+
+Run `npm run colors:usage` after changing theme tokens in `tailwind.config.js` or color-class usage in the frontend.
+
+## Frontend conventions
+
+- Vue 3 **Composition API** with `<script setup lang="ts">`
+- Component files: **kebab-case** (e.g. `action-card.vue`)
+- Co-locate Histoire stories: `component-name.story.vue` beside the component
+- Histoire **`group`** must match the folder (`dashboard`, `shared`, `widgets`, `stories`, `pages`, etc.) — see `histoire.config.ts`
+- State: Pinia stores in `src/frontend/store/`
+- Icons: `@lucide/vue` for new UI; legacy `shared/icon.vue` for existing icon names
+- Styling: Tailwind utilities; studio brand tokens in `tailwind.config.js` (`studio-yellow`, `studio-lime`, `studio-green`, `studio-forest`, `studio-dark`, etc.)
+- Export public components from `src/frontend/index.ts` when adding package surface
+
+Field widgets live under `src/frontend/fields/` and use `commonProps` from `shared/helpers.ts`.
+
+## Generated files — do not edit manually
+
+| File | Regenerate with |
+|------|-----------------|
+| `src/frontend/shared/colors.palette.ts` | `npm run colors:usage` |
+| `src/frontend/shared/colors.usage.ts` | `npm run colors:usage` |
+
+## Backend conventions
+
+- AdonisJS 6 + Lucid ORM
+- Services: `src/backend/services/`
+- Models: `src/backend/models/`
+- Stubs for consumer apps: `src/backend/stubs/`
+
+See `.cursor/rules/adonis.mdc` for backend patterns.
+
+## Testing
+
+- **Unit**: `tests/unit/*.ts` — run with `npm run test`
+- **E2e**: `tests/e2e/*.ts` — run with `npm run test:e2e`
+- After changing field components or shared UI, run relevant tests before claiming work is complete
+- Component behavior can also be checked in Histoire (`npm run dev`)
+
+## Commits and pull requests
+
+Use [Conventional Commits](https://www.conventionalcommits.org/) with **project-specific types**:
+
+| Type | Use for |
+|------|---------|
+| `feat` | New feature |
+| `fix` | Bug fix |
+| `increment` | Functional improvement (not feat/fix) |
+| `ops` | Build, CI, tooling (not `chore`) |
+| `qa` | Tests, docs (not `test`/`docs`) |
+| `refactor` | Maintainability, no behavior change |
+| `revert` | Revert a prior commit |
+
+**Do not** use `chore`, `docs`, `test`, `ci`, or `build` — map them to the types above.
+
+Format: `type: subject` — imperative, lowercase after colon, no trailing period.
+
+**Only create git commits when explicitly asked.** Do not commit secrets (`.env`, credentials).
+
+Full guide: `.cursor/rules/commit-messages.mdc`
+
+## Agent workflow
+
+1. **Minimize scope** — smallest correct diff; do not refactor unrelated code
+2. **Match existing patterns** — read surrounding files before writing
+3. **New UI components** — add or update a co-located `.story.vue`; pick the correct Histoire `group`
+4. **Verify before done** — run lint, tests, or Histoire as appropriate; do not claim success without evidence
+5. **Do not edit plan files** (`.cursor/plans/`) unless asked
+6. **Read scoped rules** — when editing paths covered by `.cursor/rules/`, follow those rules
+
+## Detailed rules index (Cursor)
+
+| Rule file | Topic | Applies when |
+|-----------|-------|--------------|
+| `application-stack.mdc` | Stack, dependencies, scripts | Always (alwaysApply) |
+| `commit-messages.mdc` | Commit format and types | Always |
+| `project-structure.mdc` | Directory layout | Exploring or adding files |
+| `vue-components.mdc` | Vue 3 patterns | `src/frontend/**/*.vue` |
+| `histoire-stories.mdc` | Story conventions | `src/frontend/**/*.story.vue` |
+| `css-styling.mdc` | CSS / Tailwind layers | `src/frontend/**/*.css` |
+| `adonis.mdc` | AdonisJS backend | `src/backend/*` |
+| `cursor-rules.mdc` | How to add/edit rules | Maintaining rules |
+| `self-improvement.mdc` | When to update rules | Rule maintenance |
+
+Cursor loads `.cursor/rules/*.mdc` automatically; this file complements those rules for tools that read `AGENTS.md`.
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 00000000..ef473a47
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,3 @@
+@AGENTS.md
+
+Detailed file-scoped rules live in `.cursor/rules/` — read the relevant `.mdc` files when editing matching paths.
diff --git a/package.json b/package.json
index a789283f..70b2a76d 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "histoire dev",
+    "colors:usage": "node scripts/generate-color-usage.mjs",
     "todo-lint": "eslint .",
     "clean": "del-cli dist",
     "types:build": "tsc -p tsconfig.types.json",
diff --git a/scripts/generate-color-usage.mjs b/scripts/generate-color-usage.mjs
new file mode 100644
index 00000000..8c7bc52e
--- /dev/null
+++ b/scripts/generate-color-usage.mjs
@@ -0,0 +1,422 @@
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'node:fs';
+import { dirname, join, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = join(__dirname, '..');
+const frontendRoot = join(root, 'src/frontend');
+const palettePath = join(frontendRoot, 'shared/colors.palette.ts');
+const usagePath = join(frontendRoot, 'shared/colors.usage.ts');
+const tailwindConfigPath = join(root, 'tailwind.config.js');
+const indexCssPath = join(frontendRoot, 'index.css');
+
+const EXCLUDED_FILES = new Set([
+  'shared/colors.story.vue',
+  'shared/colors.usage.ts',
+  'shared/colors.palette.ts',
+]);
+
+const SOURCE_EXTENSIONS = new Set(['.vue', '.css', '.ts', '.js']);
+
+const SKIP_THEME_KEYS = new Set([
+  'transparent',
+  'current',
+  'gray',
+  'slate',
+  'blue',
+  'yellow',
+  'indigo',
+  'red',
+  'green',
+]);
+
+const SCALE_FAMILIES = ['gray', 'slate', 'blue', 'green', 'red', 'yellow', 'indigo'];
+
+const EXTENDED_SCALE_FAMILIES = [
+  ...SCALE_FAMILIES,
+  'amber',
+  'emerald',
+  'orange',
+  'teal',
+  'violet',
+  'purple',
+  'pink',
+  'cyan',
+  'sky',
+  'rose',
+  'fuchsia',
+  'lime',
+];
+
+const VARIANT_PREFIX = '(?:hover:|focus:|active:|disabled:|checked:|indeterminate:)?';
+
+const CLASS_COLOR_PATTERN = new RegExp(
+  `${VARIANT_PREFIX}(?:bg|text|border|from|to|via|divide|placeholder)-([a-zA-Z][a-zA-Z0-9_-]*(?:-[0-9]+)?)(?:\\/[0-9]+)?\\b`,
+  'g',
+);
+
+const RING_STROKE_FILL_PATTERN = new RegExp(
+  `${VARIANT_PREFIX}(?:ring|stroke|fill)-(${EXTENDED_SCALE_FAMILIES.join('|')}|accent(?:-[a-z0-9]+)?|studio(?:-[a-z0-9]+)+|error(?:-[a-z0-9]+)?|black|white)(?:\\/[0-9]+)?\\b`,
+  'g',
+);
+
+function walkDirectory(directory) {
+  const files = [];
+
+  for (const entry of readdirSync(directory)) {
+    const fullPath = join(directory, entry);
+    const stats = statSync(fullPath);
+
+    if (stats.isDirectory()) {
+      files.push(...walkDirectory(fullPath));
+      continue;
+    }
+
+    const extension = entry.slice(entry.lastIndexOf('.'));
+    if (!SOURCE_EXTENSIONS.has(extension)) continue;
+
+    const relativePath = relative(frontendRoot, fullPath);
+    if (EXCLUDED_FILES.has(relativePath)) continue;
+
+    files.push({ fullPath, relativePath });
+  }
+
+  return files;
+}
+
+function normalizeToken(rawToken) {
+  return rawToken.replace(/\/[0-9]+$/, '');
+}
+
+function isScaleShade(token) {
+  return EXTENDED_SCALE_FAMILIES.some((family) => {
+    if (!token.startsWith(`${family}-`)) return false;
+    return /^[0-9]+$/.test(token.slice(family.length + 1));
+  });
+}
+
+function isThemeGroupToken(token) {
+  return (
+    token === 'accent' ||
+    token.startsWith('accent-') ||
+    token === 'studio' ||
+    token.startsWith('studio-') ||
+    token === 'error' ||
+    token.startsWith('error-')
+  );
+}
+
+function isKnownColorToken(token, themeTokens, cssVariables) {
+  if (cssVariables.has(token)) return true;
+  if (themeTokens.has(token)) return true;
+  if (isScaleShade(token)) return true;
+  if (isThemeGroupToken(token)) return true;
+  if (['black', 'white', 'transparent', 'current'].includes(token)) return true;
+  return false;
+}
+
+function extractRingStrokeFillToken(match) {
+  const value = match[1];
+  const scaleMatch = value.match(/^([a-z_]+)-(\d+)$/);
+  if (scaleMatch) return `${scaleMatch[1]}-${scaleMatch[2]}`;
+  return value;
+}
+
+function parseCssVariables() {
+  const source = readFileSync(indexCssPath, 'utf8');
+  const variables = new Map();
+
+  for (const match of source.matchAll(/(--[a-z-]+)\s*:\s*(#[0-9a-fA-F]{3,8})/g)) {
+    variables.set(match[1], match[2].toUpperCase());
+  }
+
+  return variables;
+}
+
+function parseNestedColorBlocks(block, tokens) {
+  for (const nestedMatch of block.matchAll(/^\s*([a-z_]+):\s*\{([\s\S]*?)\n\s*\},?/gm)) {
+    const groupName = nestedMatch[1];
+    const nestedBlock = nestedMatch[2];
+
+    for (const match of nestedBlock.matchAll(
+      /^\s*(DEFAULT|"[a-z0-9-]+"|[a-z0-9-]+)\s*:\s*['"](#[0-9A-Fa-f]{3,8})['"]/gm,
+    )) {
+      const rawKey = match[1];
+      const hex = match[2].toUpperCase();
+      const key = rawKey === 'DEFAULT' ? null : rawKey.replace(/"/g, '');
+      const tokenName = key === null ? groupName : `${groupName}-${key}`;
+      tokens.set(tokenName, hex);
+    }
+  }
+}
+
+function stripNestedColorBlocks(block) {
+  return block.replace(/^\s*[a-z_]+:\s*\{[\s\S]*?\n\s*\},?/gm, '');
+}
+
+function parseThemeTokens() {
+  const source = readFileSync(tailwindConfigPath, 'utf8');
+  const tokens = new Map();
+
+  const colorsBlock = source.match(/colors:\s*\{([\s\S]*?)\n\s*\},?\n\s*\},/);
+  if (!colorsBlock) return tokens;
+
+  const block = colorsBlock[1];
+
+  parseNestedColorBlocks(block, tokens);
+
+  const flatBlock = stripNestedColorBlocks(block);
+
+  for (const match of flatBlock.matchAll(/^\s*([a-z_]+):\s*'(#[0-9A-Fa-f]{3,8})'/gm)) {
+    if (!SKIP_THEME_KEYS.has(match[1])) {
+      tokens.set(match[1], match[2].toUpperCase());
+    }
+  }
+
+  if (/white:\s*colors\.white/.test(block)) {
+    tokens.set('white', '#FFFFFF');
+  }
+
+  return tokens;
+}
+
+function discoverUsedTokens(files, themeTokens, cssVariables) {
+  const used = new Set();
+
+  for (const { fullPath } of files) {
+    const content = readFileSync(fullPath, 'utf8');
+
+    for (const match of content.matchAll(CLASS_COLOR_PATTERN)) {
+      const token = normalizeToken(match[1]);
+      if (isKnownColorToken(token, themeTokens, cssVariables)) {
+        used.add(token);
+      }
+    }
+
+    for (const match of content.matchAll(RING_STROKE_FILL_PATTERN)) {
+      const token = normalizeToken(extractRingStrokeFillToken(match));
+      if (isKnownColorToken(token, themeTokens, cssVariables)) {
+        used.add(token);
+      }
+    }
+
+    for (const match of content.matchAll(/var\((--[a-z-]+)\)/g)) {
+      used.add(match[1]);
+    }
+  }
+
+  return used;
+}
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function buildPattern(name) {
+  if (name.startsWith('--')) {
+    const escaped = escapeRegExp(name);
+    return new RegExp(`(?:var\\(${escaped}\\)|${escaped})`, 'g');
+  }
+
+  const escaped = escapeRegExp(name);
+
+  if (name === 'accent' || name === 'studio' || name === 'error') {
+    return new RegExp(`-${escaped}(?!-)(?:/[0-9]+)?(?=[\\s"'\\],]|$)`, 'g');
+  }
+
+  return new RegExp(`-${escaped}(?:/[0-9]+)?`, 'g');
+}
+
+function countMatches(content, pattern) {
+  const matches = content.match(pattern);
+  return matches ? matches.length : 0;
+}
+
+function generateUsageMap(colorNames, files) {
+  const usage = Object.fromEntries(
+    colorNames.map((name) => [name, { count: 0, files: new Set() }]),
+  );
+
+  for (const { fullPath, relativePath } of files) {
+    const content = readFileSync(fullPath, 'utf8');
+
+    for (const name of colorNames) {
+      const pattern = buildPattern(name);
+      const matches = countMatches(content, pattern);
+
+      if (matches === 0) continue;
+
+      usage[name].count += matches;
+      usage[name].files.add(relativePath);
+    }
+  }
+
+  return Object.fromEntries(
+    colorNames.map((name) => [
+      name,
+      {
+        count: usage[name].count,
+        files: [...usage[name].files].sort(),
+      },
+    ]),
+  );
+}
+
+function buildPaletteTokens(themeTokens, cssVariables, usedTokens) {
+  const palette = new Set([...themeTokens.keys(), ...cssVariables.keys(), ...usedTokens]);
+  return [...palette].sort();
+}
+
+function sectionForToken(name) {
+  if (name.startsWith('--')) return 'CSS Variables';
+  if (name === 'studio' || name.startsWith('studio-')) return 'Studio';
+  if (name === 'accent' || name.startsWith('accent-')) return 'Accent';
+  if (name === 'error' || name.startsWith('error-')) return 'Error';
+  if (isScaleShade(name)) {
+    const family = EXTENDED_SCALE_FAMILIES.find((scale) => name.startsWith(`${scale}-`));
+    return family.charAt(0).toUpperCase() + family.slice(1);
+  }
+  return 'Brand';
+}
+
+function buildSwatch(name, themeTokens, cssVariables) {
+  if (name.startsWith('--')) {
+    return {
+      name,
+      style: `background: var(${name})`,
+      hex: cssVariables.get(name),
+    };
+  }
+
+  const hex = themeTokens.get(name);
+
+  return {
+    name,
+    class: `bg-${name}`,
+    ...(hex ? { hex } : {}),
+  };
+}
+
+function buildSections(tokenNames, themeTokens, cssVariables) {
+  const sections = new Map();
+
+  for (const name of tokenNames) {
+    const title = sectionForToken(name);
+    if (!sections.has(title)) sections.set(title, []);
+    sections.get(title).push(buildSwatch(name, themeTokens, cssVariables));
+  }
+
+  const sectionOrder = [
+    'Brand',
+    'Accent',
+    'Studio',
+    'Error',
+    'CSS Variables',
+    'Gray',
+    'Slate',
+    'Blue',
+    'Green',
+    'Red',
+    'Yellow',
+    'Indigo',
+    'Amber',
+    'Emerald',
+    'Orange',
+    'Teal',
+    'Violet',
+    'Purple',
+    'Pink',
+    'Cyan',
+    'Sky',
+    'Rose',
+    'Fuchsia',
+    'Lime',
+  ];
+
+  return sectionOrder
+    .filter((title) => sections.has(title))
+    .map((title) => ({
+      title,
+      colors: sections.get(title).sort((a, b) => a.name.localeCompare(b.name)),
+    }));
+}
+
+function serializeValue(value) {
+  if (value === undefined) return undefined;
+  return `'${value.replace(/'/g, "\\'")}'`;
+}
+
+function formatSwatch(swatch) {
+  const parts = [`name: ${serializeValue(swatch.name)}`];
+  if (swatch.class) parts.push(`class: ${serializeValue(swatch.class)}`);
+  if (swatch.style) parts.push(`style: ${serializeValue(swatch.style)}`);
+  if (swatch.hex) parts.push(`hex: ${serializeValue(swatch.hex)}`);
+  return `{ ${parts.join(', ')} }`;
+}
+
+function formatPaletteFile(sections) {
+  const sectionBlocks = sections
+    .map((section) => {
+      const colors = section.colors.map((color) => `      ${formatSwatch(color)},`).join('\n');
+      return `  {
+    title: '${section.title}',
+    colors: [
+${colors}
+    ],
+  },`;
+    })
+    .join('\n');
+
+  return `// Generated by scripts/generate-color-usage.mjs — do not edit
+// Re-run: npm run colors:usage
+export type ColorSwatch = {
+  name: string;
+  class?: string;
+  style?: string;
+  hex?: string;
+};
+
+export type ColorSection = {
+  title: string;
+  colors: ColorSwatch[];
+};
+
+export const colorSections: ColorSection[] = [
+${sectionBlocks}
+];
+`;
+}
+
+function formatUsageFile(usage) {
+  const entries = Object.entries(usage)
+    .map(([name, { count, files }]) => {
+      const fileLines = files.map((file) => `      '${file}',`).join('\n');
+      const filesBlock = files.length ? `files: [\n${fileLines}\n    ]` : 'files: []';
+      return `  '${name}': { count: ${count}, ${filesBlock} },`;
+    })
+    .join('\n');
+
+  return `// Generated by scripts/generate-color-usage.mjs — do not edit
+// Re-run: npm run colors:usage
+export type ColorUsage = { count: number; files: string[] };
+
+export const colorUsage: Record<string, ColorUsage> = {
+${entries}
+};
+`;
+}
+
+const files = walkDirectory(frontendRoot);
+const themeTokens = parseThemeTokens();
+const cssVariables = parseCssVariables();
+const usedTokens = discoverUsedTokens(files, themeTokens, cssVariables);
+const paletteTokens = buildPaletteTokens(themeTokens, cssVariables, usedTokens);
+const sections = buildSections(paletteTokens, themeTokens, cssVariables);
+const usage = generateUsageMap(paletteTokens, files);
+
+writeFileSync(palettePath, formatPaletteFile(sections));
+writeFileSync(usagePath, formatUsageFile(usage));
+
+console.log(
+  `Wrote ${relative(root, palettePath)} and ${relative(root, usagePath)} (${paletteTokens.length} colors, ${files.length} files scanned)`,
+);
diff --git a/src/frontend/dashboard/action-card.story.vue b/src/frontend/dashboard/action-card.story.vue
new file mode 100644
index 00000000..f6ba9d7e
--- /dev/null
+++ b/src/frontend/dashboard/action-card.story.vue
@@ -0,0 +1,39 @@
+<template>
+  <Story title="Action card" group="dashboard" :layout="{ type: 'grid', width: 360 }">
+    <Variant title="New Language">
+      <ActionCard
+        :icon="Languages"
+        title="New Language"
+        description="Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day."
+        @action="handleAction"
+      />
+    </Variant>
+
+    <Variant title="New Story">
+      <ActionCard
+        :icon="BookOpen"
+        title="New Story"
+        description="Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day."
+        @action="handleAction"
+      />
+    </Variant>
+
+    <Variant title="New Page">
+      <ActionCard
+        :icon="FileText"
+        title="New Page"
+        description="Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day."
+        @action="handleAction"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { BookOpen, FileText, Languages } from '@lucide/vue';
+import ActionCard from './action-card.vue';
+
+const handleAction = () => {
+  console.log('Action card clicked');
+};
+</script>
diff --git a/src/frontend/dashboard/action-card.vue b/src/frontend/dashboard/action-card.vue
index e69de29b..582fb617 100644
--- a/src/frontend/dashboard/action-card.vue
+++ b/src/frontend/dashboard/action-card.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="flex flex-col rounded-xl bg-white p-6 font-dmsans">
+    <div class="flex items-center gap-3">
+      <div
+        class="bg-studio-yellow flex size-12 shrink-0 items-center justify-center rounded-full"
+      >
+        <component :is="icon" class="size-5 text-black" aria-hidden="true" />
+      </div>
+      <h2 class="text-gray-800">{{ title }}</h2>
+    </div>
+
+    <p class="mt-4 text-sm leading-5 text-gray-500">{{ description }}</p>
+
+    <div class="mt-6 flex justify-end">
+      <button
+        type="button"
+        class="rounded-full bg-[#F3F4F6] px-4 py-2 text-sm font-semibold leading-5 text-[#182E33] transition-colors hover:bg-gray-200"
+        @click="emit('action')"
+      >
+        Go
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+defineProps<{
+  icon: Component;
+  title: string;
+  description: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'action'): void;
+}>();
+</script>
diff --git a/src/frontend/index.css b/src/frontend/index.css
index c27dd68a..f7c3f832 100644
--- a/src/frontend/index.css
+++ b/src/frontend/index.css
@@ -13,6 +13,10 @@
     --primary-color: #39ccfb;
     --secondary-color: #34d399;
   }
+
+  h2 {
+    @apply font-dmsans font-semibold text-xl leading-7;
+  }
 }
 
 @layer components {
diff --git a/src/frontend/shared/colors.palette.ts b/src/frontend/shared/colors.palette.ts
new file mode 100644
index 00000000..ac95b285
--- /dev/null
+++ b/src/frontend/shared/colors.palette.ts
@@ -0,0 +1,163 @@
+// Generated by scripts/generate-color-usage.mjs — do not edit
+// Re-run: npm run colors:usage
+export type ColorSwatch = {
+  name: string;
+  class?: string;
+  style?: string;
+  hex?: string;
+};
+
+export type ColorSection = {
+  title: string;
+  colors: ColorSwatch[];
+};
+
+export const colorSections: ColorSection[] = [
+  {
+    title: 'Brand',
+    colors: [
+      { name: 'black', class: 'bg-black', hex: '#2E2D2C' },
+      { name: 'current', class: 'bg-current' },
+      { name: 'transparent', class: 'bg-transparent' },
+      { name: 'white', class: 'bg-white', hex: '#FFFFFF' },
+    ],
+  },
+  {
+    title: 'Accent',
+    colors: [
+      { name: 'accent', class: 'bg-accent', hex: '#39CCFB' },
+    ],
+  },
+  {
+    title: 'Studio',
+    colors: [
+      { name: 'studio-dark', class: 'bg-studio-dark', hex: '#64748B' },
+      { name: 'studio-green', class: 'bg-studio-green', hex: '#B9E86C' },
+      { name: 'studio-green-light', class: 'bg-studio-green-light', hex: '#D7FE96' },
+      { name: 'studio-yellow', class: 'bg-studio-yellow', hex: '#FBFF96' },
+    ],
+  },
+  {
+    title: 'Error',
+    colors: [
+      { name: 'error', class: 'bg-error', hex: '#DC2626' },
+      { name: 'error-light', class: 'bg-error-light', hex: '#FECACA' },
+    ],
+  },
+  {
+    title: 'CSS Variables',
+    colors: [
+      { name: '--primary-color', style: 'background: var(--primary-color)', hex: '#39CCFB' },
+      { name: '--secondary-color', style: 'background: var(--secondary-color)', hex: '#34D399' },
+    ],
+  },
+  {
+    title: 'Gray',
+    colors: [
+      { name: 'gray-100', class: 'bg-gray-100' },
+      { name: 'gray-200', class: 'bg-gray-200' },
+      { name: 'gray-300', class: 'bg-gray-300' },
+      { name: 'gray-400', class: 'bg-gray-400' },
+      { name: 'gray-50', class: 'bg-gray-50' },
+      { name: 'gray-500', class: 'bg-gray-500' },
+      { name: 'gray-600', class: 'bg-gray-600' },
+      { name: 'gray-700', class: 'bg-gray-700' },
+      { name: 'gray-800', class: 'bg-gray-800' },
+      { name: 'gray-900', class: 'bg-gray-900' },
+    ],
+  },
+  {
+    title: 'Blue',
+    colors: [
+      { name: 'blue-100', class: 'bg-blue-100' },
+      { name: 'blue-200', class: 'bg-blue-200' },
+      { name: 'blue-400', class: 'bg-blue-400' },
+      { name: 'blue-50', class: 'bg-blue-50' },
+      { name: 'blue-500', class: 'bg-blue-500' },
+      { name: 'blue-600', class: 'bg-blue-600' },
+      { name: 'blue-700', class: 'bg-blue-700' },
+      { name: 'blue-800', class: 'bg-blue-800' },
+      { name: 'blue-900', class: 'bg-blue-900' },
+    ],
+  },
+  {
+    title: 'Green',
+    colors: [
+      { name: 'green-100', class: 'bg-green-100' },
+      { name: 'green-200', class: 'bg-green-200' },
+      { name: 'green-400', class: 'bg-green-400' },
+      { name: 'green-500', class: 'bg-green-500' },
+      { name: 'green-600', class: 'bg-green-600' },
+      { name: 'green-700', class: 'bg-green-700' },
+      { name: 'green-800', class: 'bg-green-800' },
+    ],
+  },
+  {
+    title: 'Red',
+    colors: [
+      { name: 'red-100', class: 'bg-red-100' },
+      { name: 'red-300', class: 'bg-red-300' },
+      { name: 'red-400', class: 'bg-red-400' },
+      { name: 'red-50', class: 'bg-red-50' },
+      { name: 'red-500', class: 'bg-red-500' },
+      { name: 'red-600', class: 'bg-red-600' },
+      { name: 'red-800', class: 'bg-red-800' },
+    ],
+  },
+  {
+    title: 'Yellow',
+    colors: [
+      { name: 'yellow-100', class: 'bg-yellow-100' },
+      { name: 'yellow-50', class: 'bg-yellow-50' },
+      { name: 'yellow-500', class: 'bg-yellow-500' },
+      { name: 'yellow-600', class: 'bg-yellow-600' },
+      { name: 'yellow-800', class: 'bg-yellow-800' },
+    ],
+  },
+  {
+    title: 'Indigo',
+    colors: [
+      { name: 'indigo-100', class: 'bg-indigo-100' },
+      { name: 'indigo-200', class: 'bg-indigo-200' },
+      { name: 'indigo-50', class: 'bg-indigo-50' },
+      { name: 'indigo-500', class: 'bg-indigo-500' },
+      { name: 'indigo-600', class: 'bg-indigo-600' },
+      { name: 'indigo-700', class: 'bg-indigo-700' },
+    ],
+  },
+  {
+    title: 'Amber',
+    colors: [
+      { name: 'amber-100', class: 'bg-amber-100' },
+      { name: 'amber-700', class: 'bg-amber-700' },
+    ],
+  },
+  {
+    title: 'Emerald',
+    colors: [
+      { name: 'emerald-500', class: 'bg-emerald-500' },
+    ],
+  },
+  {
+    title: 'Orange',
+    colors: [
+      { name: 'orange-100', class: 'bg-orange-100' },
+      { name: 'orange-700', class: 'bg-orange-700' },
+    ],
+  },
+  {
+    title: 'Teal',
+    colors: [
+      { name: 'teal-500', class: 'bg-teal-500' },
+    ],
+  },
+  {
+    title: 'Violet',
+    colors: [
+      { name: 'violet-100', class: 'bg-violet-100' },
+      { name: 'violet-50', class: 'bg-violet-50' },
+      { name: 'violet-600', class: 'bg-violet-600' },
+      { name: 'violet-700', class: 'bg-violet-700' },
+    ],
+  },
+];
diff --git a/src/frontend/shared/colors.story.vue b/src/frontend/shared/colors.story.vue
index 2c7ddee7..a7f2fba9 100644
--- a/src/frontend/shared/colors.story.vue
+++ b/src/frontend/shared/colors.story.vue
@@ -8,11 +8,27 @@
             <div
               v-for="color in section.colors"
               :key="color.name"
-              class="flex flex-col gap-2"
+              class="flex w-80 flex-col gap-2"
             >
-              <div class="size-80 rounded-xl shadow-md" :class="color.class" />
+              <div
+                class="size-80 rounded-xl border border-gray-200 shadow-md"
+                :class="color.class"
+                :style="color.style"
+              />
               <p class="text-sm font-medium text-gray-900">{{ color.name }}</p>
               <p v-if="color.hex" class="text-xs text-gray-500">{{ color.hex }}</p>
+              <template v-if="colorUsage[color.name]?.count">
+                <p class="text-xs text-gray-500">
+                  Used {{ colorUsage[color.name].count }} times in
+                  {{ colorUsage[color.name].files.length }} files
+                </p>
+                <ul class="max-h-24 list-none overflow-y-auto text-xs text-gray-400">
+                  <li v-for="file in colorUsage[color.name].files" :key="file">
+                    {{ file }}
+                  </li>
+                </ul>
+              </template>
+              <p v-else class="text-xs text-gray-400">No uses found</p>
             </div>
           </div>
         </section>
@@ -22,122 +38,8 @@
 </template>
 
 <script setup lang="ts">
-type ColorSwatch = {
-  name: string;
-  class?: string;
-  style?: string;
-  hex?: string;
-};
+import { colorSections } from './colors.palette';
+import { colorUsage } from './colors.usage';
 
-type ColorSection = {
-  title: string;
-  colors: ColorSwatch[];
-};
-
-const sections: ColorSection[] = [
-  {
-    title: 'Brand',
-    colors: [
-      { name: 'tertiary', class: 'bg-tertiary', hex: '#649ABB' },
-      { name: 'purple', class: 'bg-purple', hex: '#B88C9E' },
-      { name: 'black', class: 'bg-black', hex: '#2E2D2C' },
-      { name: 'neutral', class: 'bg-neutral', hex: '#F1F0EA' },
-      { name: 'app_gray', class: 'bg-app_gray', hex: '#F9FAFB' },
-      { name: 'app_green', class: 'bg-app_green', hex: '#16A34A' },
-      { name: 'error', class: 'bg-error', hex: 'red-500' },
-      { name: 'white', class: 'bg-white', hex: '#FFFFFF' },
-    ],
-  },
-  {
-    title: 'Accent',
-    colors: [
-      { name: 'accent', class: 'bg-accent', hex: '#39CCFB' },
-      { name: 'accent-one', class: 'bg-accent-one', hex: '#FF7070' },
-      { name: 'accent-green', class: 'bg-accent-green', hex: '#34D399' },
-      { name: 'accent-orange', class: 'bg-accent-orange', hex: '#FB923C' },
-      { name: 'accent-gray', class: 'bg-accent-gray', hex: '#E2E8F0' },
-      { name: 'accent-pink', class: 'bg-accent-pink', hex: '#EC4899' },
-    ],
-  },
-  {
-    title: 'Studio',
-    colors: [
-      { name: 'studio_forest_green', class: 'bg-studio_forest_green', hex: '#102F35' },
-      { name: 'studio_lime', class: 'bg-studio_lime', hex: '#D7FE96' },
-    ],
-  },
-  {
-    title: 'CSS Variables',
-    colors: [
-      {
-        name: '--primary-color',
-        style: 'background: var(--primary-color)',
-        hex: '#39CCFB',
-      },
-      {
-        name: '--secondary-color',
-        style: 'background: var(--secondary-color)',
-        hex: '#34D399',
-      },
-    ],
-  },
-  {
-    title: 'Gray',
-    colors: [
-      { name: 'gray-50', class: 'bg-gray-50' },
-      { name: 'gray-100', class: 'bg-gray-100' },
-      { name: 'gray-200', class: 'bg-gray-200' },
-      { name: 'gray-300', class: 'bg-gray-300' },
-      { name: 'gray-400', class: 'bg-gray-400' },
-      { name: 'gray-500', class: 'bg-gray-500' },
-      { name: 'gray-600', class: 'bg-gray-600' },
-      { name: 'gray-700', class: 'bg-gray-700' },
-      { name: 'gray-800', class: 'bg-gray-800' },
-      { name: 'gray-900', class: 'bg-gray-900' },
-    ],
-  },
-  {
-    title: 'Blue',
-    colors: [
-      { name: 'blue-50', class: 'bg-blue-50' },
-      { name: 'blue-100', class: 'bg-blue-100' },
-      { name: 'blue-500', class: 'bg-blue-500' },
-      { name: 'blue-600', class: 'bg-blue-600' },
-      { name: 'blue-700', class: 'bg-blue-700' },
-      { name: 'blue-800', class: 'bg-blue-800' },
-    ],
-  },
-  {
-    title: 'Green',
-    colors: [
-      { name: 'green-100', class: 'bg-green-100' },
-      { name: 'green-500', class: 'bg-green-500' },
-      { name: 'green-600', class: 'bg-green-600' },
-      { name: 'green-800', class: 'bg-green-800' },
-    ],
-  },
-  {
-    title: 'Red',
-    colors: [
-      { name: 'red-50', class: 'bg-red-50' },
-      { name: 'red-500', class: 'bg-red-500' },
-    ],
-  },
-  {
-    title: 'Yellow',
-    colors: [
-      { name: 'yellow-500', class: 'bg-yellow-500' },
-      { name: 'yellow-800', class: 'bg-yellow-800' },
-    ],
-  },
-  {
-    title: 'Indigo',
-    colors: [
-      { name: 'indigo-50', class: 'bg-indigo-50' },
-      { name: 'indigo-500', class: 'bg-indigo-500' },
-      { name: 'indigo-600', class: 'bg-indigo-600' },
-      { name: 'indigo-700', class: 'bg-indigo-700' },
-    ],
-  },
-];
+const sections = colorSections;
 </script>
diff --git a/src/frontend/shared/colors.usage.ts b/src/frontend/shared/colors.usage.ts
new file mode 100644
index 00000000..30c2a3ac
--- /dev/null
+++ b/src/frontend/shared/colors.usage.ts
@@ -0,0 +1,921 @@
+// Generated by scripts/generate-color-usage.mjs — do not edit
+// Re-run: npm run colors:usage
+export type ColorUsage = { count: number; files: string[] };
+
+export const colorUsage: Record<string, ColorUsage> = {
+  '--primary-color': { count: 5, files: [
+      'auth/login-index.vue',
+      'index.css',
+      'shared/pagination.vue',
+    ] },
+  '--secondary-color': { count: 6, files: [
+      'auth/login-index.vue',
+      'index.css',
+    ] },
+  'accent': { count: 3, files: [
+      'fields/attachments/attachment-field.vue',
+      'fields/attachments/video-progress.vue',
+    ] },
+  'amber-100': { count: 1, files: [
+      'invitation/invitation-index-item.vue',
+    ] },
+  'amber-700': { count: 1, files: [
+      'invitation/invitation-index-item.vue',
+    ] },
+  'black': { count: 27, files: [
+      'audience/audience-index.vue',
+      'auth/create-account.vue',
+      'auth/forgot-password.vue',
+      'auth/login-index.vue',
+      'fields/scripture-field.vue',
+      'index.css',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-modal.vue',
+      'settings/languages/components/language-table-row.vue',
+      'settings/languages/components/member-row.vue',
+      'settings/languages/components/request-app-update-modal.vue',
+      'settings/languages/components/request-feedback-modal.vue',
+      'settings/languages/language-list.vue',
+      'settings/languages/languages-edit.vue',
+      'shared/app-layout-header.story.vue',
+      'shared/context-menu.vue',
+      'shared/drop-down.vue',
+      'shared/drop-up.vue',
+      'shared/label-hint-popup.vue',
+      'shared/language-selector.vue',
+      'ui/components/ui-string-item.vue',
+    ] },
+  'blue-100': { count: 13, files: [
+      'dashboard/dashboard-index.vue',
+      'invitation/invitation-index-item.vue',
+      'settings/languages/components/language-list-controls.vue',
+      'shared/icon-button.story.vue',
+      'shared/icon-button.vue',
+      'shared/label-button.vue',
+      'shared/language-selector.vue',
+      'shared/nav-rail-toolbar.vue',
+      'shared/status-tag.vue',
+      'stories/components/resource-picker.vue',
+      'stories/components/resource-utils.ts',
+    ] },
+  'blue-200': { count: 5, files: [
+      'invitation/invitations-index.vue',
+      'resources/resources-index.vue',
+      'shared/icon-button.story.vue',
+      'shared/icon-button.vue',
+      'shared/label-button.vue',
+    ] },
+  'blue-400': { count: 4, files: [
+      'audience/audience-index.vue',
+      'index.css',
+      'shared/pill-button.vue',
+      'shared/studio-button.vue',
+    ] },
+  'blue-50': { count: 73, files: [
+      'audience/audience-index.vue',
+      'dashboard/dashboard-index.vue',
+      'dashboard/ring-block.vue',
+      'dashboard/ring.vue',
+      'fields/select-field.vue',
+      'index.css',
+      'invitation/invitation-index-item.vue',
+      'invitation/invitations-index.vue',
+      'resources/resource-index-item.vue',
+      'resources/resources-index.vue',
+      'settings/languages/components/bible-translations-modal.story.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-list-item.vue',
+      'settings/languages/components/language-table-row.vue',
+      'settings/languages/components/remove-language-modal.story.vue',
+      'settings/languages/components/request-feedback-modal.story.vue',
+      'settings/settings-index.vue',
+      'shared/draft-actions.vue',
+      'shared/expandable-search.vue',
+      'shared/glass-button.vue',
+      'shared/index-filter.vue',
+      'shared/label-hint.vue',
+      'shared/message-centre.vue',
+      'shared/pill-button.vue',
+      'shared/rich-listbox.vue',
+      'shared/studio-button.vue',
+      'stories/components/index-card.vue',
+      'stories/components/resource-attached-item.vue',
+      'stories/components/resource-picker.vue',
+      'stories/components/story-item.vue',
+      'team/components/user-row.vue',
+      'ui/components/ui-card.vue',
+      'ui/components/ui-string-item.vue',
+      'ui/ui-page.vue',
+    ] },
+  'blue-500': { count: 41, files: [
+      'audience/audience-index.vue',
+      'dashboard/dashboard-index.vue',
+      'dashboard/ring-block.vue',
+      'dashboard/ring.vue',
+      'fields/select-field.vue',
+      'index.css',
+      'invitation/invitations-index.vue',
+      'resources/resources-index.vue',
+      'settings/languages/components/bible-translations-modal.story.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-list-item.vue',
+      'settings/languages/components/remove-language-modal.story.vue',
+      'settings/languages/components/request-feedback-modal.story.vue',
+      'settings/settings-index.vue',
+      'shared/expandable-search.vue',
+      'shared/glass-button.vue',
+      'shared/label-hint.vue',
+      'shared/message-centre.vue',
+      'shared/pill-button.vue',
+      'shared/rich-listbox.vue',
+      'shared/studio-button.vue',
+      'ui/components/ui-card.vue',
+      'ui/components/ui-string-item.vue',
+    ] },
+  'blue-600': { count: 22, files: [
+      'invitation/invitation-index-item.vue',
+      'invitation/invitations-index.vue',
+      'resources/resource-index-item.vue',
+      'resources/resources-index.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-table-row.vue',
+      'settings/settings-index.vue',
+      'shared/draft-actions.vue',
+      'shared/studio-button.vue',
+      'stories/components/index-card.vue',
+      'stories/components/resource-attached-item.vue',
+      'stories/components/resource-label-group.vue',
+      'stories/components/resource-picker.vue',
+      'stories/components/story-item.vue',
+      'team/components/user-row.vue',
+      'ui/components/ui-card.vue',
+    ] },
+  'blue-700': { count: 13, files: [
+      'dashboard/dashboard-index.vue',
+      'invitation/invitation-index-item.vue',
+      'resources/resource-index-item.vue',
+      'settings/languages/components/request-app-update-modal.vue',
+      'shared/index-filter.vue',
+      'shared/studio-button.vue',
+      'stories/components/resource-utils.ts',
+      'team/components/user-row.vue',
+    ] },
+  'blue-800': { count: 7, files: [
+      'fields/pill/pill-field.vue',
+      'shared/icon-button.story.vue',
+      'shared/icon-button.vue',
+      'shared/label-button.vue',
+      'shared/language-selector.vue',
+      'shared/nav-rail-toolbar.vue',
+      'shared/status-tag.vue',
+    ] },
+  'blue-900': { count: 2, files: [
+      'settings/languages/components/request-app-update-modal.vue',
+    ] },
+  'current': { count: 5, files: [
+      'shared/bookmark-action.vue',
+      'shared/index-filter.vue',
+      'shared/navigation-pane.vue',
+      'shared/tab-navigation.vue',
+    ] },
+  'emerald-500': { count: 5, files: [
+      'test/error-control.vue',
+      'test/language-control.vue',
+      'test/model-control.vue',
+    ] },
+  'error': { count: 43, files: [
+      'auth/create-account.vue',
+      'auth/forgot-password.vue',
+      'auth/login-index.vue',
+      'auth/reset-password.vue',
+      'fields/attachments/attachment-field.vue',
+      'fields/attachments/file-upload.vue',
+      'fields/boolean-field.vue',
+      'fields/list/flat-list.vue',
+      'fields/list/foldable-list.vue',
+      'fields/markdown-field.vue',
+      'fields/number-field.vue',
+      'fields/panel-field.vue',
+      'fields/pill/pill-field.vue',
+      'fields/scripture-field.vue',
+      'fields/section-panel-field.vue',
+      'fields/select-field.vue',
+      'fields/string-field.vue',
+      'shared/tab-button.vue',
+      'stories/components/panel-list.vue',
+      'team/components/user-form-modal.vue',
+    ] },
+  'error-light': { count: 1, files: [
+      'fields/list/foldable-list.vue',
+    ] },
+  'gray-100': { count: 70, files: [
+      'fields/list/flat-list.vue',
+      'fields/region-field.vue',
+      'fields/scripture-field.vue',
+      'fields/scripture-reference-field.vue',
+      'fields/section-panel-field.vue',
+      'invitation/invitation-index-item.vue',
+      'pages/page-index-item.story.vue',
+      'pages/pages-index.vue',
+      'resources/resource-index-item.vue',
+      'resources/resource-used-in.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-list-controls.vue',
+      'settings/languages/components/language-list-item.vue',
+      'settings/languages/components/language-modal.vue',
+      'settings/languages/components/request-app-update-modal.vue',
+      'shared/action-button.vue',
+      'shared/context-menu.vue',
+      'shared/drop-down.vue',
+      'shared/drop-up.vue',
+      'shared/gallery-grid.story.vue',
+      'shared/label-hint-popup.vue',
+      'shared/language-selector.vue',
+      'shared/list-switcher.vue',
+      'shared/meta-box.vue',
+      'shared/nav-rail-panel.vue',
+      'shared/nav-rail-toolbar.vue',
+      'stories/components/index-card.vue',
+      'stories/components/panel-list.vue',
+      'stories/components/resource-attached-item.vue',
+      'stories/components/resource-label-group.vue',
+      'stories/components/resource-picker.vue',
+      'stories/components/resource-thumbnail.vue',
+      'stories/components/resource-utils.ts',
+      'stories/components/story-item.vue',
+      'streams/components/drop-item.vue',
+      'streams/components/stream-item.vue',
+      'team/components/user-row.vue',
+    ] },
+  'gray-200': { count: 96, files: [
+      'audience/audience-index.vue',
+      'dashboard/ring-block.vue',
+      'dashboard/stat-tile.vue',
+      'fields/attachments/file-upload.vue',
+      'fields/attachments/video-meta.vue',
+      'fields/boolean-field.vue',
+      'fields/date-field.vue',
+      'fields/date-range-field.vue',
+      'fields/image-field.story.vue',
+      'fields/list/flat-list.vue',
+      'fields/list/foldable-list.vue',
+      'fields/pill/pill-field.vue',
+      'fields/scripture-field.vue',
+      'fields/section-panel-field.vue',
+      'fields/select-field.vue',
+      'fields/string-field.vue',
+      'index.css',
+      'invitation/invitation-index-item.story.vue',
+      'invitation/invitation-index-item.vue',
+      'invitation/invitations-index.vue',
+      'pages/page-index-item.story.vue',
+      'pages/pages-index.vue',
+      'resources/resource-index-item.story.vue',
+      'resources/resource-index-item.vue',
+      'resources/resource-used-in.vue',
+      'resources/resources-index.vue',
+      'settings/languages/components/language-table.vue',
+      'settings/languages/components/request-app-update-modal.vue',
+      'shared/nav-rail-panel.vue',
+      'shared/navigation-pane.vue',
+      'shared/pagination.vue',
+      'shared/pill-button.vue',
+      'shared/rich-listbox.vue',
+      'shared/studio-button.vue',
+      'stories/components/index-card.story.vue',
+      'stories/components/index-card.vue',
+      'stories/components/panel-list.vue',
+      'stories/components/resource-label-group.vue',
+      'stories/components/resource-picker.vue',
+      'stories/components/story-item.story.vue',
+      'stories/components/story-item.vue',
+      'stories/story-gallery.vue',
+      'stories/story-index.vue',
+      'team/users-index.vue',
+      'ui/components/ui-card.vue',
+      'ui/components/ui-string-item.vue',
+    ] },
+  'gray-300': { count: 59, files: [
+      'audience/audience-index.vue',
+      'auth/create-account.vue',
+      'auth/login-index.vue',
+      'fields/attachments/attachment-field.vue',
+      'fields/attachments/video-progress.vue',
+      'fields/list/flat-list.vue',
+      'fields/list/foldable-list.vue',
+      'fields/panel-field.vue',
+      'fields/pill/pill-field.vue',
+      'fields/region-field.vue',
+      'fields/select-field.vue',
+      'index.css',
+      'invitation/invitations-index.vue',
+      'pages/page-index-item.vue',
+      'resources/resources-index.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-list-item.vue',
+      'settings/languages/components/request-app-update-modal.vue',
+      'shared/context-menu.vue',
+      'shared/drop-down.vue',
+      'shared/expandable-search.story.vue',
+      'shared/expandable-search.vue',
+      'shared/list-switcher.vue',
+      'shared/navigation-pane.vue',
+      'shared/pagination.vue',
+      'shared/rich-listbox.vue',
+      'shared/studio-button.vue',
+      'shared/toggle-button.vue',
+      'stories/components/resource-picker.vue',
+      'streams/stream-index.vue',
+      'ui/components/ui-card.vue',
+      'ui/ui-page.vue',
+    ] },
+  'gray-400': { count: 78, files: [
+      'audience/audience-index.vue',
+      'dashboard/dashboard-index.vue',
+      'dashboard/stat-tiles.vue',
+      'fields/attachments/attachment-field.vue',
+      'fields/section-panel-field.vue',
+      'index.css',
+      'invitation/invitation-index-item.vue',
+      'invitation/invitations-index.vue',
+      'pages/page-index-item.vue',
+      'resources/resource-index-item.vue',
+      'resources/resources-index.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-modal.vue',
+      'settings/languages/components/language-table-row.vue',
+      'shared/app-layout-header.vue',
+      'shared/bookmark-action.vue',
+      'shared/draft-actions.vue',
+      'shared/expandable-search.vue',
+      'shared/label-hint-popup.vue',
+      'shared/label-hint.vue',
+      'shared/pagination.vue',
+      'shared/pill-button.vue',
+      'shared/rich-listbox.vue',
+      'stories/components/index-card.vue',
+      'stories/components/panel-list.vue',
+      'stories/components/resource-attached-item.vue',
+      'stories/components/resource-label-group.vue',
+      'stories/components/resource-picker.vue',
+      'stories/components/story-edit-details.vue',
+      'stories/components/story-item.vue',
+      'streams/stream-index.vue',
+      'team/components/user-form-modal.vue',
+      'team/components/user-row.vue',
+      'ui/components/ui-card.vue',
+    ] },
+  'gray-50': { count: 223, files: [
+      'audience/audience-index.vue',
+      'audience/components/audience-row.vue',
+      'dashboard/language-block.vue',
+      'dashboard/ring-block.vue',
+      'dashboard/ring.vue',
+      'dashboard/stat-tile.vue',
+      'fields/attachments/attachment-field.vue',
+      'fields/attachments/file-upload.vue',
+      'fields/attachments/video-meta.vue',
+      'fields/attachments/video-progress.vue',
+      'fields/list/flat-list.vue',
+      'fields/list/foldable-list.vue',
+      'fields/panel-field.vue',
+      'fields/scripture-field.vue',
+      'fields/scripture-reference-field.vue',
+      'fields/section-panel-field.vue',
+      'invitation/invitation-index-item.story.vue',
+      'invitation/invitation-index-item.vue',
+      'invitation/invitations-index.vue',
+      'pages/page-index-item.vue',
+      'pages/pages-index.vue',
+      'resources/resource-index-item.story.vue',
+      'resources/resource-index-item.vue',
+      'resources/resource-not-found.vue',
+      'resources/resource-used-in.vue',
+      'resources/resources-edit.vue',
+      'resources/resources-index.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-list-controls.vue',
+      'settings/languages/components/language-strip.vue',
+      'settings/languages/components/language-table-row.vue',
+      'settings/languages/components/language-table.story.vue',
+      'settings/languages/components/language-table.vue',
+      'settings/languages/components/member-row.vue',
+      'settings/languages/components/request-app-update-modal.vue',
+      'settings/settings-index.vue',
+      'shared/action-button.vue',
+      'shared/app-layout-header.story.vue',
+      'shared/app-layout.vue',
+      'shared/context-menu.vue',
+      'shared/expandable-search.story.vue',
+      'shared/expandable-search.vue',
+      'shared/gallery-grid.story.vue',
+      'shared/gallery-item.vue',
+      'shared/glass-button.story.vue',
+      'shared/list-switcher.vue',
+      'shared/meta-box.vue',
+      'shared/nav-rail-panel.story.vue',
+      'shared/pagination.vue',
+      'shared/public-layout.vue',
+      'shared/rich-listbox.vue',
+      'stories/components/index-card.story.vue',
+      'stories/components/index-card.vue',
+      'stories/components/resource-attached-item.vue',
+      'stories/components/resource-attached-list.vue',
+      'stories/components/resource-label-group.vue',
+      'stories/components/resource-picker.vue',
+      'stories/components/resource-thumbnail.vue',
+      'stories/components/story-item.story.vue',
+      'stories/components/story-item.vue',
+      'stories/story-gallery.vue',
+      'stories/story-index.vue',
+      'team/components/user-row.vue',
+      'team/users-index.vue',
+      'ui/ui-page.vue',
+    ] },
+  'gray-500': { count: 155, files: [
+      'audience/audience-index.vue',
+      'audience/components/audience-row.vue',
+      'dashboard/language-block.vue',
+      'dashboard/ring-block.vue',
+      'dashboard/ring.vue',
+      'dashboard/stat-tile.vue',
+      'fields/attachments/attachment-field.vue',
+      'fields/attachments/file-upload.vue',
+      'fields/attachments/video-meta.vue',
+      'fields/attachments/video-progress.vue',
+      'fields/list/flat-list.vue',
+      'fields/list/foldable-list.vue',
+      'fields/scripture-field.vue',
+      'fields/scripture-reference-field.vue',
+      'fields/section-panel-field.vue',
+      'invitation/invitation-index-item.story.vue',
+      'invitation/invitation-index-item.vue',
+      'invitation/invitations-index.vue',
+      'pages/page-index-item.vue',
+      'pages/pages-index.vue',
+      'resources/resource-index-item.story.vue',
+      'resources/resource-index-item.vue',
+      'resources/resource-not-found.vue',
+      'resources/resource-used-in.vue',
+      'resources/resources-edit.vue',
+      'resources/resources-index.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-list-controls.vue',
+      'settings/languages/components/language-strip.vue',
+      'settings/languages/components/language-table-row.vue',
+      'settings/languages/components/language-table.story.vue',
+      'settings/languages/components/language-table.vue',
+      'settings/languages/components/member-row.vue',
+      'settings/languages/components/request-app-update-modal.vue',
+      'settings/settings-index.vue',
+      'shared/action-button.vue',
+      'shared/expandable-search.story.vue',
+      'shared/expandable-search.vue',
+      'shared/gallery-grid.story.vue',
+      'shared/gallery-item.vue',
+      'shared/list-switcher.vue',
+      'shared/meta-box.vue',
+      'shared/rich-listbox.vue',
+      'stories/components/index-card.story.vue',
+      'stories/components/index-card.vue',
+      'stories/components/resource-attached-item.vue',
+      'stories/components/resource-attached-list.vue',
+      'stories/components/resource-label-group.vue',
+      'stories/components/resource-picker.vue',
+      'stories/components/resource-thumbnail.vue',
+      'stories/components/story-item.story.vue',
+      'stories/components/story-item.vue',
+      'stories/story-gallery.vue',
+      'stories/story-index.vue',
+      'team/components/user-row.vue',
+      'team/users-index.vue',
+      'ui/ui-page.vue',
+    ] },
+  'gray-600': { count: 56, files: [
+      'auth/login-index.vue',
+      'fields/attachments/attachment-field.vue',
+      'fields/attachments/file-upload.vue',
+      'fields/date-field.vue',
+      'fields/date-range-field.vue',
+      'fields/markdown-field.vue',
+      'fields/number-field.vue',
+      'fields/pill/pill-field.vue',
+      'fields/region-field.vue',
+      'fields/scripture-field.vue',
+      'fields/select-field.vue',
+      'fields/string-field.vue',
+      'invitation/invitation-index-item.vue',
+      'invitation/invitations-index.vue',
+      'resources/resource-index-item.vue',
+      'resources/resources-index.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-modal.vue',
+      'shared/action-button.story.vue',
+      'shared/expandable-search.story.vue',
+      'shared/expandable-search.vue',
+      'shared/glass-button.story.vue',
+      'shared/label-hint-popup.vue',
+      'shared/label-hint.vue',
+      'shared/list-switcher.story.vue',
+      'shared/meta-box.vue',
+      'shared/navigation-pane.story.vue',
+      'shared/navigation-pane.vue',
+      'shared/rich-listbox.vue',
+      'shared/tab-navigation.story.vue',
+      'stories/components/panel-list.vue',
+      'stories/components/resource-attached-list.vue',
+      'stories/components/resource-picker.vue',
+      'stories/components/story-edit-details.vue',
+      'stories/components/story-item.story.vue',
+      'stories/components/story-item.vue',
+      'stories/story-index.vue',
+      'team/components/user-row.vue',
+      'ui/components/ui-card.vue',
+    ] },
+  'gray-700': { count: 45, files: [
+      'fields/attachments/video-meta.vue',
+      'fields/list/foldable-list.vue',
+      'fields/panel-field.vue',
+      'index.css',
+      'invitation/invitation-index-item.vue',
+      'invitation/invitations-index.vue',
+      'resources/resource-index-item.vue',
+      'resources/resources-index.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'shared/context-menu.vue',
+      'shared/drop-down.vue',
+      'shared/drop-up.vue',
+      'shared/expandable-search.vue',
+      'shared/language-selector.vue',
+      'shared/list-switcher.vue',
+      'shared/pagination.vue',
+      'shared/pill-button.vue',
+      'shared/studio-button.vue',
+      'shared/toggle-button.vue',
+      'stories/components/resource-attached-item.vue',
+      'stories/components/resource-picker.vue',
+      'stories/components/resource-utils.ts',
+      'stories/components/story-item.vue',
+      'team/components/user-row.vue',
+      'ui/components/ui-card.vue',
+    ] },
+  'gray-800': { count: 21, files: [
+      'dashboard/language-block.vue',
+      'dashboard/ring-block.vue',
+      'dashboard/ring.vue',
+      'fields/section-panel-field.vue',
+      'settings/languages/components/language-list-controls.vue',
+      'settings/languages/components/language-table-row.vue',
+      'settings/languages/components/language-table.story.vue',
+      'settings/settings-index.vue',
+      'shared/gallery-grid.story.vue',
+      'shared/gallery-item.vue',
+      'stories/components/panel-list.vue',
+      'streams/components/drop-item.vue',
+      'streams/components/stream-item.vue',
+      'ui/ui-page.vue',
+    ] },
+  'gray-900': { count: 50, files: [
+      'audience/components/audience-row.vue',
+      'auth/login-index.vue',
+      'auth/reset-password.vue',
+      'dashboard/stat-tile.vue',
+      'fields/attachments/video-meta.vue',
+      'fields/boolean-field.vue',
+      'fields/pill/pill-field.vue',
+      'fields/region-field.vue',
+      'fields/select-field.vue',
+      'index.css',
+      'invitation/invitation-index-item.vue',
+      'invitation/invitations-index.vue',
+      'pages/page-index-item.vue',
+      'resources/resource-index-item.vue',
+      'resources/resource-not-found.vue',
+      'resources/resource-used-in.vue',
+      'resources/resources-index.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-list-controls.vue',
+      'settings/languages/components/language-strip.vue',
+      'settings/languages/components/request-app-update-modal.vue',
+      'shared/context-menu.vue',
+      'shared/drop-down.vue',
+      'shared/drop-up.vue',
+      'shared/expandable-search.vue',
+      'shared/language-selector.vue',
+      'shared/list-switcher.vue',
+      'shared/navigation-pane.vue',
+      'shared/pagination.vue',
+      'shared/rich-listbox.vue',
+      'shared/studio-button.vue',
+      'stories/components/index-card.vue',
+      'stories/components/resource-attached-item.vue',
+      'stories/components/resource-label-group.vue',
+      'stories/components/resource-picker.vue',
+      'stories/components/story-item.vue',
+      'streams/stream-index.vue',
+      'team/components/user-row.vue',
+      'ui/components/ui-card.vue',
+    ] },
+  'green-100': { count: 7, files: [
+      'dashboard/stat-tile.vue',
+      'invitation/invitation-index-item.vue',
+      'pages/page-index-item.vue',
+      'resources/resource-index-item.vue',
+      'stories/components/story-item.vue',
+      'streams/components/stream-item.vue',
+    ] },
+  'green-200': { count: 1, files: [
+      'settings/languages/components/language-modal.vue',
+    ] },
+  'green-400': { count: 2, files: [
+      'shared/pill-button.vue',
+      'shared/studio-button.vue',
+    ] },
+  'green-500': { count: 14, files: [
+      'auth/forgot-password.vue',
+      'auth/reset-password.vue',
+      'dashboard/dashboard-index.vue',
+      'dashboard/language-block.vue',
+      'dashboard/ring.vue',
+      'dashboard/stat-tile.vue',
+      'settings/languages/components/request-app-update-modal.story.vue',
+      'shared/message-centre.vue',
+      'shared/pill-button.vue',
+      'shared/status-tag.vue',
+      'shared/studio-button.vue',
+    ] },
+  'green-600': { count: 10, files: [
+      'shared/icon-button.story.vue',
+      'shared/label-button.story.vue',
+    ] },
+  'green-700': { count: 4, files: [
+      'invitation/invitation-index-item.vue',
+      'pages/page-index-item.vue',
+      'resources/resource-index-item.vue',
+      'stories/components/story-item.vue',
+    ] },
+  'green-800': { count: 4, files: [
+      'dashboard/stat-tile.vue',
+      'settings/languages/components/language-modal.vue',
+      'stories/components/story-item.vue',
+      'streams/components/stream-item.vue',
+    ] },
+  'indigo-100': { count: 1, files: [
+      'shared/toggle-button.vue',
+    ] },
+  'indigo-200': { count: 2, files: [
+      'settings/languages/components/request-app-update-modal.vue',
+    ] },
+  'indigo-50': { count: 14, files: [
+      'audience/audience-index.vue',
+      'fields/attachments/file-upload.vue',
+      'fields/list/foldable-list.vue',
+      'fields/panel-field.vue',
+      'fields/section-panel-field.vue',
+      'index.css',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/request-app-update-modal.vue',
+      'shared/add-item-button.vue',
+      'shared/pill-button.vue',
+    ] },
+  'indigo-500': { count: 10, files: [
+      'audience/audience-index.vue',
+      'fields/attachments/file-upload.vue',
+      'fields/list/foldable-list.vue',
+      'fields/panel-field.vue',
+      'index.css',
+      'settings/languages/components/bible-translations-modal.vue',
+      'shared/pill-button.vue',
+    ] },
+  'indigo-600': { count: 14, files: [
+      'settings/languages/components/request-app-update-modal.vue',
+      'shared/navigation-pane.vue',
+      'streams/stream-index.vue',
+      'ui/components/ui-card.vue',
+      'ui/ui-page.vue',
+    ] },
+  'indigo-700': { count: 7, files: [
+      'fields/attachments/file-upload.vue',
+      'fields/section-panel-field.vue',
+      'shared/add-item-button.vue',
+      'shared/navigation-pane.vue',
+      'shared/toggle-button.vue',
+    ] },
+  'orange-100': { count: 1, files: [
+      'stories/components/resource-utils.ts',
+    ] },
+  'orange-700': { count: 1, files: [
+      'stories/components/resource-utils.ts',
+    ] },
+  'red-100': { count: 3, files: [
+      'dashboard/stat-tile.vue',
+      'settings/languages/components/language-modal.vue',
+      'streams/components/stream-item.vue',
+    ] },
+  'red-300': { count: 2, files: [
+      'fields/video-field.vue',
+      'team/components/user-row.vue',
+    ] },
+  'red-400': { count: 2, files: [
+      'shared/pill-button.vue',
+      'shared/studio-button.vue',
+    ] },
+  'red-50': { count: 26, files: [
+      'auth/create-account.vue',
+      'dashboard/stat-tile.vue',
+      'dashboard/stat-tiles.vue',
+      'fields/date-field.vue',
+      'fields/date-range-field.vue',
+      'fields/select-field.vue',
+      'index.css',
+      'pages/page-index-item.vue',
+      'resources/resource-index-item.vue',
+      'settings/languages/components/language-table-row.vue',
+      'settings/languages/components/request-feedback-modal.story.vue',
+      'shared/draft-actions.vue',
+      'shared/drop-down.vue',
+      'shared/drop-up.vue',
+      'shared/message-centre.vue',
+      'shared/pill-button.vue',
+      'shared/status-tag.vue',
+      'shared/studio-button.vue',
+      'stories/components/panel-list.vue',
+      'stories/components/resource-attached-item.vue',
+      'team/components/user-row.vue',
+    ] },
+  'red-500': { count: 18, files: [
+      'auth/create-account.vue',
+      'dashboard/stat-tile.vue',
+      'dashboard/stat-tiles.vue',
+      'fields/date-field.vue',
+      'fields/date-range-field.vue',
+      'fields/select-field.vue',
+      'index.css',
+      'settings/languages/components/request-feedback-modal.story.vue',
+      'shared/drop-down.vue',
+      'shared/drop-up.vue',
+      'shared/message-centre.vue',
+      'shared/pill-button.vue',
+      'shared/status-tag.vue',
+      'shared/studio-button.vue',
+    ] },
+  'red-600': { count: 9, files: [
+      'pages/page-index-item.vue',
+      'resources/resource-index-item.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-table-row.vue',
+      'shared/draft-actions.vue',
+      'stories/components/panel-list.vue',
+      'stories/components/resource-attached-item.vue',
+      'team/components/user-row.vue',
+    ] },
+  'red-800': { count: 3, files: [
+      'dashboard/stat-tile.vue',
+      'settings/languages/components/language-modal.vue',
+      'streams/components/stream-item.vue',
+    ] },
+  'studio-dark': { count: 0, files: [] },
+  'studio-green': { count: 14, files: [
+      'shared/studio-button.vue',
+      'stories/components/panel-list.vue',
+      'stories/components/resource-empty-state.vue',
+      'stories/components/resource-picker.vue',
+    ] },
+  'studio-green-light': { count: 1, files: [
+      'shared/studio-button.vue',
+    ] },
+  'studio-yellow': { count: 0, files: [] },
+  'teal-500': { count: 4, files: [
+      'dashboard/ring-block.vue',
+    ] },
+  'transparent': { count: 25, files: [
+      'dashboard/ring-block.vue',
+      'dashboard/ring.vue',
+      'fields/attachments/video-progress.vue',
+      'fields/boolean-field.vue',
+      'fields/markdown/toolbar-buttons.ts',
+      'fields/pill/pill-field.vue',
+      'index.css',
+      'invitation/invitations-index.vue',
+      'resources/resources-index.vue',
+      'shared/expandable-search.vue',
+      'shared/navigation-pane.vue',
+      'shared/studio-button.vue',
+      'shared/tab-button.vue',
+      'stories/components/resource-picker.vue',
+    ] },
+  'violet-100': { count: 2, files: [
+      'resources/resource-used-in.vue',
+      'stories/components/resource-utils.ts',
+    ] },
+  'violet-50': { count: 1, files: [
+      'resources/resource-used-in.vue',
+    ] },
+  'violet-600': { count: 1, files: [
+      'resources/resource-used-in.vue',
+    ] },
+  'violet-700': { count: 1, files: [
+      'stories/components/resource-utils.ts',
+    ] },
+  'white': { count: 158, files: [
+      'audience/audience-index.vue',
+      'dashboard/language-block.vue',
+      'dashboard/ring-block.story.vue',
+      'dashboard/stat-tile.vue',
+      'fields/attachments/attachment-field.vue',
+      'fields/attachments/file-upload.vue',
+      'fields/attachments/video-progress.vue',
+      'fields/boolean-field.vue',
+      'fields/date-field.vue',
+      'fields/date-range-field.vue',
+      'fields/list/flat-list.vue',
+      'fields/list/foldable-list.vue',
+      'fields/markdown-field.vue',
+      'fields/number-field.vue',
+      'fields/object-field.vue',
+      'fields/panel-field.vue',
+      'fields/pill/pill-field.vue',
+      'fields/region-field.vue',
+      'fields/scripture-field.vue',
+      'fields/section-panel-field.vue',
+      'fields/select-field.vue',
+      'fields/string-field.vue',
+      'index.css',
+      'invitation/invitation-index-item.story.vue',
+      'invitation/invitation-index-item.vue',
+      'invitation/invitations-index.vue',
+      'pages/page-index-item.story.vue',
+      'pages/pages-index.vue',
+      'resources/resource-index-item.story.vue',
+      'resources/resource-index-item.vue',
+      'resources/resource-used-in.vue',
+      'resources/resources-index.vue',
+      'settings/languages/components/bible-translations-modal.story.vue',
+      'settings/languages/components/bible-translations-modal.vue',
+      'settings/languages/components/language-list-item.vue',
+      'settings/languages/components/language-modal.vue',
+      'settings/languages/components/language-table.vue',
+      'settings/languages/components/remove-language-modal.story.vue',
+      'settings/languages/components/request-app-update-modal.story.vue',
+      'settings/languages/components/request-app-update-modal.vue',
+      'settings/languages/components/request-feedback-modal.story.vue',
+      'shared/context-menu.vue',
+      'shared/drop-down.vue',
+      'shared/drop-up.vue',
+      'shared/expandable-search.vue',
+      'shared/gallery-item.vue',
+      'shared/glass-button.vue',
+      'shared/index-filter.story.vue',
+      'shared/label-hint-popup.vue',
+      'shared/language-selector.vue',
+      'shared/list-switcher.vue',
+      'shared/message-centre.story.vue',
+      'shared/meta-box.vue',
+      'shared/pagination.vue',
+      'shared/pill-button.vue',
+      'shared/rich-listbox.vue',
+      'shared/studio-button.vue',
+      'shared/tab-button.vue',
+      'shared/toggle-button.vue',
+      'stories/components/index-card.story.vue',
+      'stories/components/index-card.vue',
+      'stories/components/panel-list.vue',
+      'stories/components/resource-label-group.vue',
+      'stories/components/resource-picker.vue',
+      'stories/components/story-item.story.vue',
+      'stories/components/story-item.vue',
+      'stories/journa-story-edit.vue',
+      'stories/story-gallery.vue',
+      'stories/story-index.vue',
+      'streams/components/drop-item.vue',
+      'streams/components/stream-item.vue',
+      'streams/stream-index.vue',
+      'team/components/user-row.vue',
+      'team/users-index.vue',
+      'ui/components/ui-card.vue',
+      'ui/components/ui-string-item.vue',
+      'ui/ui-page.vue',
+    ] },
+  'yellow-100': { count: 2, files: [
+      'stories/components/story-item.vue',
+      'streams/components/stream-item.vue',
+    ] },
+  'yellow-50': { count: 5, files: [
+      'shared/bookmark-action.vue',
+      'shared/message-centre.vue',
+      'shared/status-tag.vue',
+    ] },
+  'yellow-500': { count: 3, files: [
+      'shared/bookmark-action.vue',
+      'shared/message-centre.vue',
+      'shared/status-tag.vue',
+    ] },
+  'yellow-600': { count: 2, files: [
+      'shared/bookmark-action.vue',
+    ] },
+  'yellow-800': { count: 3, files: [
+      'shared/status-tag.vue',
+      'stories/components/story-item.vue',
+      'streams/components/stream-item.vue',
+    ] },
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index d9746bc3..e73cc2fd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,21 +20,23 @@ export default {
         amiri: ['Amiri', 'serif'],
       },
       colors: {
-        tertiary: '#649ABB',
         accent: {
           DEFAULT: '#39CCFB',
-          one: '#FF7070',
-          green: '#34D399',
-          orange: '#FB923C',
-          gray: '#E2E8F0',
-          pink: '#EC4899'
         },
-        error: colors.red['500'],
+        studio: {
+          yellow:"#FBFF96",
+          lime: '#D7FE96',
+          green: '#B9E86C',
+          dark: '#64748B',
+          forest: "#102F35",
+        },
+        error:{
+          DEFAULT: '#DC2626',
+          light: '#FECACA',
+        },
         red: colors.red,
         green: colors.green,
-        purple: '#B88C9E',
         black: '#2E2D2C',
-        neutral: '#F1F0EA',
         transparent: 'transparent',
         current: 'currentColor',
         white: colors.white,
@@ -43,10 +45,6 @@ export default {
         blue: colors.blue,
         yellow: colors.yellow,
         indigo: colors.indigo,
-        app_gray: '#F9FAFB',
-        app_green: '#16A34A',
-        studio_forest_green: '#102F35',
-        studio_lime: '#D7FE96',
       },
     },
   },

From fab54fa355f9963b688e0c8895a0652b78967d5e Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 28 Jul 2026 10:55:55 +0300
Subject: [PATCH 03/39] increment: enhance ActionCard component with new
 disabled variant and update styles

---
 src/frontend/dashboard/action-card.story.vue |  9 +++++++++
 src/frontend/dashboard/action-card.vue       | 21 ++++++++++----------
 src/frontend/index.css                       |  3 +++
 src/frontend/shared/studio-button.vue        |  2 +-
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/frontend/dashboard/action-card.story.vue b/src/frontend/dashboard/action-card.story.vue
index f6ba9d7e..fc01894b 100644
--- a/src/frontend/dashboard/action-card.story.vue
+++ b/src/frontend/dashboard/action-card.story.vue
@@ -26,6 +26,15 @@
         @action="handleAction"
       />
     </Variant>
+    <Variant title="New Page disabled">
+      <ActionCard
+        :icon="FileText"
+        title="New Page"
+        description="Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day."
+        @action="handleAction"
+        disabled
+      />
+    </Variant>
   </Story>
 </template>
 
diff --git a/src/frontend/dashboard/action-card.vue b/src/frontend/dashboard/action-card.vue
index 582fb617..0ed6c3f3 100644
--- a/src/frontend/dashboard/action-card.vue
+++ b/src/frontend/dashboard/action-card.vue
@@ -1,35 +1,36 @@
 <template>
-  <div class="flex flex-col rounded-xl bg-white p-6 font-dmsans">
+  <div class="flex flex-col gap-8 rounded-xl bg-white p-6 font-dmsans">
     <div class="flex items-center gap-3">
       <div
-        class="bg-studio-yellow flex size-12 shrink-0 items-center justify-center rounded-full"
+        class="flex size-12 shrink-0 items-center justify-center rounded-full bg-studio-yellow"
       >
         <component :is="icon" class="size-5 text-black" aria-hidden="true" />
       </div>
       <h2 class="text-gray-800">{{ title }}</h2>
     </div>
 
-    <p class="mt-4 text-sm leading-5 text-gray-500">{{ description }}</p>
+    <p>{{ description }}</p>
 
-    <div class="mt-6 flex justify-end">
-      <button
-        type="button"
-        class="rounded-full bg-[#F3F4F6] px-4 py-2 text-sm font-semibold leading-5 text-[#182E33] transition-colors hover:bg-gray-200"
+    <div class="flex justify-end">
+      <StudioButton
+        label="Go"
+        variant="secondary"
+        :disabled="disabled"
         @click="emit('action')"
-      >
-        Go
-      </button>
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { Component } from 'vue';
+import StudioButton from '../shared/studio-button.vue';
 
 defineProps<{
   icon: Component;
   title: string;
   description: string;
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits<{
diff --git a/src/frontend/index.css b/src/frontend/index.css
index f7c3f832..77c6e082 100644
--- a/src/frontend/index.css
+++ b/src/frontend/index.css
@@ -17,6 +17,9 @@
   h2 {
     @apply font-dmsans font-semibold text-xl leading-7;
   }
+  p {
+    @apply font-dmsans font-normal text-sm leading-5 text-gray-500;
+  }
 }
 
 @layer components {
diff --git a/src/frontend/shared/studio-button.vue b/src/frontend/shared/studio-button.vue
index cfe2a1b2..b80e878d 100644
--- a/src/frontend/shared/studio-button.vue
+++ b/src/frontend/shared/studio-button.vue
@@ -90,7 +90,7 @@ const variantClassMap: Record<StudioButtonVariant, string> = {
   primary: 'bg-studio-forest text-studio-lime hover:bg-studio-green/90',
   outline:
     'border border-studio-green bg-transparent text-studio-green hover:bg-studio-green/5',
-  secondary: 'bg-blue-600 text-white hover:bg-blue-700',
+  secondary: 'bg-gray-200 text-gray-700 hover:bg-gray-800 hover:text-white min-w-32',
   green: 'bg-green-500 text-white hover:bg-green-400',
   gray: 'bg-gray-200 text-gray-700 hover:bg-gray-300',
   red: 'bg-red-500 text-white hover:bg-red-400',

From f0b337d67637615e16ac17c4977b6f1c606c94fc Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 28 Jul 2026 12:54:20 +0300
Subject: [PATCH 04/39] wip

---
 src/frontend/shared/colors.palette.ts |  3 +-
 src/frontend/shared/colors.usage.ts   | 44 +++++++++++++++------------
 src/frontend/shared/studio-button.vue | 13 ++++----
 3 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/frontend/shared/colors.palette.ts b/src/frontend/shared/colors.palette.ts
index ac95b285..70f67e69 100644
--- a/src/frontend/shared/colors.palette.ts
+++ b/src/frontend/shared/colors.palette.ts
@@ -32,8 +32,9 @@ export const colorSections: ColorSection[] = [
     title: 'Studio',
     colors: [
       { name: 'studio-dark', class: 'bg-studio-dark', hex: '#64748B' },
+      { name: 'studio-forest', class: 'bg-studio-forest', hex: '#102F35' },
       { name: 'studio-green', class: 'bg-studio-green', hex: '#B9E86C' },
-      { name: 'studio-green-light', class: 'bg-studio-green-light', hex: '#D7FE96' },
+      { name: 'studio-lime', class: 'bg-studio-lime', hex: '#D7FE96' },
       { name: 'studio-yellow', class: 'bg-studio-yellow', hex: '#FBFF96' },
     ],
   },
diff --git a/src/frontend/shared/colors.usage.ts b/src/frontend/shared/colors.usage.ts
index 30c2a3ac..b0d6ce06 100644
--- a/src/frontend/shared/colors.usage.ts
+++ b/src/frontend/shared/colors.usage.ts
@@ -22,11 +22,12 @@ export const colorUsage: Record<string, ColorUsage> = {
   'amber-700': { count: 1, files: [
       'invitation/invitation-index-item.vue',
     ] },
-  'black': { count: 27, files: [
+  'black': { count: 28, files: [
       'audience/audience-index.vue',
       'auth/create-account.vue',
       'auth/forgot-password.vue',
       'auth/login-index.vue',
+      'dashboard/action-card.vue',
       'fields/scripture-field.vue',
       'index.css',
       'settings/languages/components/bible-translations-modal.vue',
@@ -65,13 +66,12 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/icon-button.vue',
       'shared/label-button.vue',
     ] },
-  'blue-400': { count: 4, files: [
+  'blue-400': { count: 3, files: [
       'audience/audience-index.vue',
       'index.css',
       'shared/pill-button.vue',
-      'shared/studio-button.vue',
     ] },
-  'blue-50': { count: 73, files: [
+  'blue-50': { count: 72, files: [
       'audience/audience-index.vue',
       'dashboard/dashboard-index.vue',
       'dashboard/ring-block.vue',
@@ -97,7 +97,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/message-centre.vue',
       'shared/pill-button.vue',
       'shared/rich-listbox.vue',
-      'shared/studio-button.vue',
       'stories/components/index-card.vue',
       'stories/components/resource-attached-item.vue',
       'stories/components/resource-picker.vue',
@@ -107,7 +106,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'ui/components/ui-string-item.vue',
       'ui/ui-page.vue',
     ] },
-  'blue-500': { count: 41, files: [
+  'blue-500': { count: 40, files: [
       'audience/audience-index.vue',
       'dashboard/dashboard-index.vue',
       'dashboard/ring-block.vue',
@@ -128,11 +127,10 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/message-centre.vue',
       'shared/pill-button.vue',
       'shared/rich-listbox.vue',
-      'shared/studio-button.vue',
       'ui/components/ui-card.vue',
       'ui/components/ui-string-item.vue',
     ] },
-  'blue-600': { count: 22, files: [
+  'blue-600': { count: 21, files: [
       'invitation/invitation-index-item.vue',
       'invitation/invitations-index.vue',
       'resources/resource-index-item.vue',
@@ -141,7 +139,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'settings/languages/components/language-table-row.vue',
       'settings/settings-index.vue',
       'shared/draft-actions.vue',
-      'shared/studio-button.vue',
       'stories/components/index-card.vue',
       'stories/components/resource-attached-item.vue',
       'stories/components/resource-label-group.vue',
@@ -150,13 +147,12 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'blue-700': { count: 13, files: [
+  'blue-700': { count: 12, files: [
       'dashboard/dashboard-index.vue',
       'invitation/invitation-index-item.vue',
       'resources/resource-index-item.vue',
       'settings/languages/components/request-app-update-modal.vue',
       'shared/index-filter.vue',
-      'shared/studio-button.vue',
       'stories/components/resource-utils.ts',
       'team/components/user-row.vue',
     ] },
@@ -247,7 +243,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'streams/components/stream-item.vue',
       'team/components/user-row.vue',
     ] },
-  'gray-200': { count: 96, files: [
+  'gray-200': { count: 97, files: [
       'audience/audience-index.vue',
       'dashboard/ring-block.vue',
       'dashboard/stat-tile.vue',
@@ -365,7 +361,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-50': { count: 223, files: [
+  'gray-50': { count: 224, files: [
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
@@ -382,6 +378,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'fields/scripture-field.vue',
       'fields/scripture-reference-field.vue',
       'fields/section-panel-field.vue',
+      'index.css',
       'invitation/invitation-index-item.story.vue',
       'invitation/invitation-index-item.vue',
       'invitation/invitations-index.vue',
@@ -432,7 +429,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/users-index.vue',
       'ui/ui-page.vue',
     ] },
-  'gray-500': { count: 155, files: [
+  'gray-500': { count: 156, files: [
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
@@ -448,6 +445,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'fields/scripture-field.vue',
       'fields/scripture-reference-field.vue',
       'fields/section-panel-field.vue',
+      'index.css',
       'invitation/invitation-index-item.story.vue',
       'invitation/invitation-index-item.vue',
       'invitation/invitations-index.vue',
@@ -532,7 +530,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-700': { count: 45, files: [
+  'gray-700': { count: 46, files: [
       'fields/attachments/video-meta.vue',
       'fields/list/foldable-list.vue',
       'fields/panel-field.vue',
@@ -559,7 +557,8 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-800': { count: 21, files: [
+  'gray-800': { count: 23, files: [
+      'dashboard/action-card.vue',
       'dashboard/language-block.vue',
       'dashboard/ring-block.vue',
       'dashboard/ring.vue',
@@ -570,6 +569,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'settings/settings-index.vue',
       'shared/gallery-grid.story.vue',
       'shared/gallery-item.vue',
+      'shared/studio-button.vue',
       'stories/components/panel-list.vue',
       'streams/components/drop-item.vue',
       'streams/components/stream-item.vue',
@@ -775,16 +775,21 @@ export const colorUsage: Record<string, ColorUsage> = {
       'streams/components/stream-item.vue',
     ] },
   'studio-dark': { count: 0, files: [] },
-  'studio-green': { count: 14, files: [
+  'studio-forest': { count: 1, files: [
+      'shared/studio-button.vue',
+    ] },
+  'studio-green': { count: 12, files: [
       'shared/studio-button.vue',
       'stories/components/panel-list.vue',
       'stories/components/resource-empty-state.vue',
       'stories/components/resource-picker.vue',
     ] },
-  'studio-green-light': { count: 1, files: [
+  'studio-lime': { count: 1, files: [
       'shared/studio-button.vue',
     ] },
-  'studio-yellow': { count: 0, files: [] },
+  'studio-yellow': { count: 1, files: [
+      'dashboard/action-card.vue',
+    ] },
   'teal-500': { count: 4, files: [
       'dashboard/ring-block.vue',
     ] },
@@ -819,6 +824,7 @@ export const colorUsage: Record<string, ColorUsage> = {
     ] },
   'white': { count: 158, files: [
       'audience/audience-index.vue',
+      'dashboard/action-card.vue',
       'dashboard/language-block.vue',
       'dashboard/ring-block.story.vue',
       'dashboard/stat-tile.vue',
diff --git a/src/frontend/shared/studio-button.vue b/src/frontend/shared/studio-button.vue
index b80e878d..8854f9f2 100644
--- a/src/frontend/shared/studio-button.vue
+++ b/src/frontend/shared/studio-button.vue
@@ -87,13 +87,14 @@ const shapeClasses = computed(() =>
 );
 
 const variantClassMap: Record<StudioButtonVariant, string> = {
-  primary: 'bg-studio-forest text-studio-lime hover:bg-studio-green/90',
+  primary: 'bg-studio-forest text-studio-lime enabled:hover:bg-studio-green/90',
   outline:
-    'border border-studio-green bg-transparent text-studio-green hover:bg-studio-green/5',
-  secondary: 'bg-gray-200 text-gray-700 hover:bg-gray-800 hover:text-white min-w-32',
-  green: 'bg-green-500 text-white hover:bg-green-400',
-  gray: 'bg-gray-200 text-gray-700 hover:bg-gray-300',
-  red: 'bg-red-500 text-white hover:bg-red-400',
+    'border border-studio-green bg-transparent text-studio-green enabled:hover:bg-studio-green/5',
+  secondary:
+    'min-w-32 bg-gray-200 text-gray-700 enabled:hover:bg-gray-800 enabled:hover:text-white',
+  green: 'bg-green-500 text-white enabled:hover:bg-green-400',
+  gray: 'bg-gray-200 text-gray-700 enabled:hover:bg-gray-300',
+  red: 'bg-red-500 text-white enabled:hover:bg-red-400',
 };
 
 const variantClasses = computed(() => variantClassMap[props.variant]);

From b48f4a8cc4b9ab6db331c38b172206e42eddfd87 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 28 Jul 2026 15:08:41 +0300
Subject: [PATCH 05/39] increment: add ActionGrid component for quick actions
 and update styles for headings

---
 src/frontend/dashboard/action-grid.story.vue | 41 ++++++++++++++
 src/frontend/dashboard/action-grid.vue       | 37 +++++++++++++
 src/frontend/dashboard/dashboard-index.vue   | 57 +++++++++++++++-----
 src/frontend/dashboard/stat-tiles.vue        |  6 +--
 src/frontend/index.css                       |  4 ++
 5 files changed, 127 insertions(+), 18 deletions(-)
 create mode 100644 src/frontend/dashboard/action-grid.story.vue
 create mode 100644 src/frontend/dashboard/action-grid.vue

diff --git a/src/frontend/dashboard/action-grid.story.vue b/src/frontend/dashboard/action-grid.story.vue
new file mode 100644
index 00000000..fc3bd371
--- /dev/null
+++ b/src/frontend/dashboard/action-grid.story.vue
@@ -0,0 +1,41 @@
+<template>
+  <Story title="Action grid" group="dashboard">
+    <Variant title="Default">
+      <ActionGrid :items="items" @action="handleAction" />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { BookOpen, FileText, Languages } from '@lucide/vue';
+import ActionGrid, { ActionGridItem } from './action-grid.vue';
+
+const items: ActionGridItem[] = [
+  {
+    url: '/en/language/create',
+    icon: Languages,
+    title: 'New Language',
+    description:
+      'Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day.',
+  },
+  {
+    url: '/en/story/create',
+    icon: BookOpen,
+    title: 'New Story',
+    description:
+      'Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day.',
+  },
+  {
+    url: '/en/page/create',
+    icon: FileText,
+    title: 'New Page',
+    description:
+      'Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day.',
+    disabled: true,
+  },
+];
+
+const handleAction = (url: string) => {
+  console.log('Action grid action:', url);
+};
+</script>
diff --git a/src/frontend/dashboard/action-grid.vue b/src/frontend/dashboard/action-grid.vue
new file mode 100644
index 00000000..deddfa3e
--- /dev/null
+++ b/src/frontend/dashboard/action-grid.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="space-y-6">
+    <h1>Quick actions</h1>
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <ActionCard
+        v-for="item in items"
+        :key="item.url"
+        :icon="item.icon"
+        :title="item.title"
+        :description="item.description"
+        :disabled="item.disabled"
+        @action="emit('action', item.url)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import ActionCard from './action-card.vue';
+
+export interface ActionGridItem {
+  url: string;
+  icon: Component;
+  title: string;
+  description: string;
+  disabled?: boolean;
+}
+
+defineProps<{
+  items: ActionGridItem[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'action', url: string): void;
+}>();
+</script>
diff --git a/src/frontend/dashboard/dashboard-index.vue b/src/frontend/dashboard/dashboard-index.vue
index 487ce706..ba7f95e7 100644
--- a/src/frontend/dashboard/dashboard-index.vue
+++ b/src/frontend/dashboard/dashboard-index.vue
@@ -2,13 +2,6 @@
   <AppLayout title="Dashboard" :subtitle="greeting">
     <template #actions>
       <div class="flex flex-wrap gap-4">
-        <Link
-          :href="`/${shared.locale}/page/create`"
-          class="flex items-center gap-x-2 rounded-full bg-blue-50 px-3 py-[9px] text-sm font-medium leading-4 text-blue-700 shadow-[0px_1px_2px_0px_#0000000D] hover:bg-blue-100"
-        >
-          <Icon name="document-add" />
-          New Page
-        </Link>
         <Link
           v-if="shared.user.isAdmin"
           :href="`/${shared.locale}/user`"
@@ -33,14 +26,15 @@
       <div>
         <StatTiles :stats="stats" :is-loading="isLoading" :error="error" />
       </div>
+      <div class="pt-10">
+        <ActionGrid :items="actionItems" @action="handleActionGrid" />
+      </div>
       <div>
         <div>
           <div class="flex items-center justify-between py-10">
-            <h3
-              class="text-xl font-semibold leading-7 tracking-[-0.45px] text-[#182E33] [&>span]:text-gray-400"
-            >
-              {{ isMultiLingual ? 'Language translation' : '' }}
-            </h3>
+            <h1>
+              {{ isMultiLingual ? 'Translations' : '' }}
+            </h1>
           </div>
         </div>
         <div
@@ -94,9 +88,11 @@ import AppLayout from '../shared/app-layout.vue';
 import StatTiles from './stat-tiles.vue';
 import IndexFilter from '../shared/index-filter.vue';
 import LanguageBlock from './language-block.vue';
+import ActionGrid, { ActionGridItem } from './action-grid.vue';
 import Icon from '../shared/icon.vue';
+import { BookOpen, FileText, Languages } from '@lucide/vue';
 import { ref, computed, onMounted } from 'vue';
-import { Link } from '@inertiajs/vue3';
+import { Link, router } from '@inertiajs/vue3';
 import axios from 'axios';
 
 import { SharedPageProps, DashboardProps, StatMetric } from '../../types';
@@ -114,6 +110,41 @@ const greeting = computed(() => {
   return `Hey ${firstName}!`;
 });
 
+const actionItems = computed<ActionGridItem[]>(() => {
+  const disabled = !shared.user.isAdmin;
+
+  return [
+    {
+      url: `/${shared.locale}/settings/languages/edit`,
+      icon: Languages,
+      title: 'New Language',
+      description:
+        'Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day. ',
+      disabled,
+    },
+    {
+      url: `/${shared.locale}/story/create`,
+      icon: BookOpen,
+      title: 'New Story',
+      description:
+        'Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day. ',
+      disabled,
+    },
+    {
+      url: `/${shared.locale}/page/create`,
+      icon: FileText,
+      title: 'New Page',
+      description:
+        'Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day. ',
+      disabled,
+    },
+  ];
+});
+
+const handleActionGrid = (url: string) => {
+  router.visit(url);
+};
+
 const activeFilter = ref<'To do' | 'All'>('To do');
 
 const todoCount = computed(() => {
diff --git a/src/frontend/dashboard/stat-tiles.vue b/src/frontend/dashboard/stat-tiles.vue
index 36b90716..2348b1db 100644
--- a/src/frontend/dashboard/stat-tiles.vue
+++ b/src/frontend/dashboard/stat-tiles.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="pt-[30px]">
-    <h3
-      class="text-xl font-semibold leading-7 tracking-[-0.45px] text-[#182E33] [&>span]:text-gray-400"
-    >
-      Analytics
-    </h3>
+    <h1>Analytics</h1>
     <div>
       <div v-if="error" class="text-red-500">
         {{ error }}
diff --git a/src/frontend/index.css b/src/frontend/index.css
index 77c6e082..00310678 100644
--- a/src/frontend/index.css
+++ b/src/frontend/index.css
@@ -14,6 +14,10 @@
     --secondary-color: #34d399;
   }
 
+  h1 {
+    @apply font-dmsans text-2xl leading-8 font-semibold text-gray-800;
+  }
+
   h2 {
     @apply font-dmsans font-semibold text-xl leading-7;
   }

From 813b312d2a4d0593c53501d015f01093abf75ddd Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 28 Jul 2026 15:12:18 +0300
Subject: [PATCH 06/39] refactor: remove unused action links from dashboard and
 clean up imports

---
 src/frontend/dashboard/dashboard-index.vue | 24 +---------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/src/frontend/dashboard/dashboard-index.vue b/src/frontend/dashboard/dashboard-index.vue
index ba7f95e7..d7799abf 100644
--- a/src/frontend/dashboard/dashboard-index.vue
+++ b/src/frontend/dashboard/dashboard-index.vue
@@ -1,27 +1,5 @@
 <template>
   <AppLayout title="Dashboard" :subtitle="greeting">
-    <template #actions>
-      <div class="flex flex-wrap gap-4">
-        <Link
-          v-if="shared.user.isAdmin"
-          :href="`/${shared.locale}/user`"
-          class="flex items-center gap-x-2 rounded-full bg-blue-50 px-3 py-[9px] text-sm font-medium leading-4 text-blue-700 shadow-[0px_1px_2px_0px_#0000000D] hover:bg-blue-100"
-        >
-          <Icon name="user-add" />
-          New User
-        </Link>
-        <a
-          v-if="shared.config.helpUrl"
-          class="flex items-center gap-x-2 rounded-full bg-blue-50 px-3 py-[9px] text-sm font-medium leading-4 text-blue-700 shadow-[0px_1px_2px_0px_#0000000D] hover:bg-blue-100"
-          :href="shared.config.helpUrl"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Icon name="question-mark-circle" />
-          Get Support
-        </a>
-      </div>
-    </template>
     <template #main>
       <div>
         <StatTiles :stats="stats" :is-loading="isLoading" :error="error" />
@@ -92,7 +70,7 @@ import ActionGrid, { ActionGridItem } from './action-grid.vue';
 import Icon from '../shared/icon.vue';
 import { BookOpen, FileText, Languages } from '@lucide/vue';
 import { ref, computed, onMounted } from 'vue';
-import { Link, router } from '@inertiajs/vue3';
+import { router } from '@inertiajs/vue3';
 import axios from 'axios';
 
 import { SharedPageProps, DashboardProps, StatMetric } from '../../types';

From 2bce672ee9dabcba4f2c08128df0c6898b74e592 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 29 Jul 2026 07:41:28 +0300
Subject: [PATCH 07/39] style: update stat-tile component styles

---
 src/frontend/dashboard/stat-tile.vue | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/frontend/dashboard/stat-tile.vue b/src/frontend/dashboard/stat-tile.vue
index f24c85ee..be2273dd 100644
--- a/src/frontend/dashboard/stat-tile.vue
+++ b/src/frontend/dashboard/stat-tile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full rounded-xl bg-white p-6 shadow">
     <div>
-      <dt class="text-base font-normal text-gray-900">
+      <dt class="font-dmsans text-xs font-normal leading-4 text-gray-900">
         <span
           v-if="isLoading"
           class="inline-block h-4 w-32 animate-pulse rounded-xl bg-gray-200"
@@ -9,7 +9,9 @@
         <span v-else>{{ props.metric.name }}</span>
       </dt>
       <dd class="mt-1 flex items-baseline justify-between">
-        <div class="flex items-baseline text-2xl font-semibold leading-8 text-gray-900">
+        <div
+          class="flex items-baseline font-dmsans text-2xl font-semibold leading-8 text-gray-900"
+        >
           <template v-if="isLoading">
             <span
               class="inline-block h-8 w-24 animate-pulse rounded-xl bg-gray-200"
@@ -20,7 +22,7 @@
           </template>
           <template v-else>
             {{ props.metric.stat.toLocaleString() }}
-            <span class="ml-2 text-sm font-medium text-gray-500"
+            <span class="ml-2 text-sm font-normal leading-5 text-gray-500"
               >from {{ props.metric.previousStat.toLocaleString() }}</span
             >
           </template>
@@ -30,26 +32,25 @@
           v-if="!isLoading"
           :class="[
             changeType === 'increase'
-              ? 'bg-green-100 text-green-800'
-              : 'bg-red-100 text-red-800',
+              ? 'bg-studio-lime text-green-800'
+              : 'bg-error-light text-error',
             'inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-medium md:mt-2 lg:mt-0',
           ]"
         >
+          <span class="sr-only">
+            {{ changeType === 'increase' ? 'Increased' : 'Decreased' }} by
+          </span>
+          {{ changePercentage }}
           <Icon
             v-if="changeType === 'increase'"
             name="arrow-up"
-            class="-ml-1 mr-0.5 size-3 shrink-0 self-center text-green-500"
+            class="ml-1 size-3 shrink-0 self-center text-green-500"
           />
           <Icon
             v-else
             name="arrow-up"
-            class="-ml-1 mr-0.5 size-3 shrink-0 rotate-180 self-center text-red-500"
+            class="ml-1 size-3 shrink-0 rotate-180 self-center text-error"
           />
-
-          <span class="sr-only">
-            {{ changeType === 'increase' ? 'Increased' : 'Decreased' }} by
-          </span>
-          {{ changePercentage }}
         </div>
         <div
           v-else

From b2c4bde8c48b91232b74fc33c314d24a6284ccba Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 29 Jul 2026 07:42:42 +0300
Subject: [PATCH 08/39] refactor: simplify dashboard layout by consolidating
 StatTiles and ActionGrid components

---
 src/frontend/dashboard/dashboard-index.vue | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/frontend/dashboard/dashboard-index.vue b/src/frontend/dashboard/dashboard-index.vue
index d7799abf..582bc004 100644
--- a/src/frontend/dashboard/dashboard-index.vue
+++ b/src/frontend/dashboard/dashboard-index.vue
@@ -1,13 +1,11 @@
 <template>
   <AppLayout title="Dashboard" :subtitle="greeting">
     <template #main>
-      <div>
-        <StatTiles :stats="stats" :is-loading="isLoading" :error="error" />
-      </div>
-      <div class="pt-10">
-        <ActionGrid :items="actionItems" @action="handleActionGrid" />
-      </div>
-      <div>
+      <StatTiles :stats="stats" :is-loading="isLoading" :error="error" />
+
+      <ActionGrid :items="actionItems" @action="handleActionGrid" />
+
+      <section>
         <div>
           <div class="flex items-center justify-between py-10">
             <h1>
@@ -41,7 +39,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </section>
       <div
         v-if="isMultiLingual"
         class="grid grid-cols-[repeat(auto-fit,_minmax(207px,_207px))] justify-center gap-x-[34px] gap-y-[27px]"

From fa4ee5a9145aab2d4dc0edc0a54bf1213e5fa296 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 29 Jul 2026 08:14:54 +0300
Subject: [PATCH 09/39] increment: add IndexTabs component and integrate into
 dashboard layout

---
 src/frontend/dashboard/dashboard-index.vue |  4 +-
 src/frontend/index.ts                      |  2 +
 src/frontend/shared/colors.usage.ts        | 65 ++++++++++++----------
 src/frontend/shared/index-tab-button.vue   | 46 +++++++++++++++
 src/frontend/shared/index-tabs.story.vue   | 48 ++++++++++++++++
 src/frontend/shared/index-tabs.vue         | 43 ++++++++++++++
 6 files changed, 176 insertions(+), 32 deletions(-)
 create mode 100644 src/frontend/shared/index-tab-button.vue
 create mode 100644 src/frontend/shared/index-tabs.story.vue
 create mode 100644 src/frontend/shared/index-tabs.vue

diff --git a/src/frontend/dashboard/dashboard-index.vue b/src/frontend/dashboard/dashboard-index.vue
index 582bc004..a9e37616 100644
--- a/src/frontend/dashboard/dashboard-index.vue
+++ b/src/frontend/dashboard/dashboard-index.vue
@@ -18,7 +18,7 @@
           class="mb-7 flex flex-col justify-between gap-y-4 md:flex-row md:items-center md:gap-x-4"
         >
           <div class="flex gap-x-4">
-            <IndexFilter
+            <IndexTabs
               :tabs="[
                 { label: 'To do', count: todoCount },
                 { label: 'All', count: allCount },
@@ -62,7 +62,7 @@
 <script setup lang="ts">
 import AppLayout from '../shared/app-layout.vue';
 import StatTiles from './stat-tiles.vue';
-import IndexFilter from '../shared/index-filter.vue';
+import IndexTabs from '../shared/index-tabs.vue';
 import LanguageBlock from './language-block.vue';
 import ActionGrid, { ActionGridItem } from './action-grid.vue';
 import Icon from '../shared/icon.vue';
diff --git a/src/frontend/index.ts b/src/frontend/index.ts
index b8982710..93385277 100644
--- a/src/frontend/index.ts
+++ b/src/frontend/index.ts
@@ -21,6 +21,7 @@ import IconButton from './shared/icon-button.vue';
 import ImageField from './fields/image-field.vue';
 import IndexCard from './stories/components/index-card.vue';
 import IndexFilter from './shared/index-filter.vue';
+import IndexTabs from './shared/index-tabs.vue';
 import LabelButton from './shared/label-button.vue';
 import PillButton from './shared/pill-button.vue';
 import LanguagesEdit from './settings/languages/languages-edit.vue';
@@ -93,6 +94,7 @@ export {
   ImageField,
   IndexCard,
   IndexFilter,
+  IndexTabs,
   InvitationsEdit,
   InvitationsIndex,
   LabelButton,
diff --git a/src/frontend/shared/colors.usage.ts b/src/frontend/shared/colors.usage.ts
index b0d6ce06..2a1c1bba 100644
--- a/src/frontend/shared/colors.usage.ts
+++ b/src/frontend/shared/colors.usage.ts
@@ -46,8 +46,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/language-selector.vue',
       'ui/components/ui-string-item.vue',
     ] },
-  'blue-100': { count: 13, files: [
-      'dashboard/dashboard-index.vue',
+  'blue-100': { count: 10, files: [
       'invitation/invitation-index-item.vue',
       'settings/languages/components/language-list-controls.vue',
       'shared/icon-button.story.vue',
@@ -71,7 +70,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'index.css',
       'shared/pill-button.vue',
     ] },
-  'blue-50': { count: 72, files: [
+  'blue-50': { count: 69, files: [
       'audience/audience-index.vue',
       'dashboard/dashboard-index.vue',
       'dashboard/ring-block.vue',
@@ -147,8 +146,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'blue-700': { count: 12, files: [
-      'dashboard/dashboard-index.vue',
+  'blue-700': { count: 9, files: [
       'invitation/invitation-index-item.vue',
       'resources/resource-index-item.vue',
       'settings/languages/components/request-app-update-modal.vue',
@@ -168,9 +166,10 @@ export const colorUsage: Record<string, ColorUsage> = {
   'blue-900': { count: 2, files: [
       'settings/languages/components/request-app-update-modal.vue',
     ] },
-  'current': { count: 5, files: [
+  'current': { count: 6, files: [
       'shared/bookmark-action.vue',
       'shared/index-filter.vue',
+      'shared/index-tabs.vue',
       'shared/navigation-pane.vue',
       'shared/tab-navigation.vue',
     ] },
@@ -179,11 +178,12 @@ export const colorUsage: Record<string, ColorUsage> = {
       'test/language-control.vue',
       'test/model-control.vue',
     ] },
-  'error': { count: 43, files: [
+  'error': { count: 45, files: [
       'auth/create-account.vue',
       'auth/forgot-password.vue',
       'auth/login-index.vue',
       'auth/reset-password.vue',
+      'dashboard/stat-tile.vue',
       'fields/attachments/attachment-field.vue',
       'fields/attachments/file-upload.vue',
       'fields/boolean-field.vue',
@@ -201,10 +201,11 @@ export const colorUsage: Record<string, ColorUsage> = {
       'stories/components/panel-list.vue',
       'team/components/user-form-modal.vue',
     ] },
-  'error-light': { count: 1, files: [
+  'error-light': { count: 2, files: [
+      'dashboard/stat-tile.vue',
       'fields/list/foldable-list.vue',
     ] },
-  'gray-100': { count: 70, files: [
+  'gray-100': { count: 71, files: [
       'fields/list/flat-list.vue',
       'fields/region-field.vue',
       'fields/scripture-field.vue',
@@ -225,6 +226,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/drop-down.vue',
       'shared/drop-up.vue',
       'shared/gallery-grid.story.vue',
+      'shared/index-tab-button.vue',
       'shared/label-hint-popup.vue',
       'shared/language-selector.vue',
       'shared/list-switcher.vue',
@@ -291,7 +293,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'ui/components/ui-card.vue',
       'ui/components/ui-string-item.vue',
     ] },
-  'gray-300': { count: 59, files: [
+  'gray-300': { count: 61, files: [
       'audience/audience-index.vue',
       'auth/create-account.vue',
       'auth/login-index.vue',
@@ -314,6 +316,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/drop-down.vue',
       'shared/expandable-search.story.vue',
       'shared/expandable-search.vue',
+      'shared/index-tabs.vue',
       'shared/list-switcher.vue',
       'shared/navigation-pane.vue',
       'shared/pagination.vue',
@@ -325,10 +328,8 @@ export const colorUsage: Record<string, ColorUsage> = {
       'ui/components/ui-card.vue',
       'ui/ui-page.vue',
     ] },
-  'gray-400': { count: 78, files: [
+  'gray-400': { count: 76, files: [
       'audience/audience-index.vue',
-      'dashboard/dashboard-index.vue',
-      'dashboard/stat-tiles.vue',
       'fields/attachments/attachment-field.vue',
       'fields/section-panel-field.vue',
       'index.css',
@@ -361,7 +362,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-50': { count: 224, files: [
+  'gray-50': { count: 226, files: [
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
@@ -408,6 +409,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/gallery-grid.story.vue',
       'shared/gallery-item.vue',
       'shared/glass-button.story.vue',
+      'shared/index-tab-button.vue',
       'shared/list-switcher.vue',
       'shared/meta-box.vue',
       'shared/nav-rail-panel.story.vue',
@@ -429,7 +431,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/users-index.vue',
       'ui/ui-page.vue',
     ] },
-  'gray-500': { count: 156, files: [
+  'gray-500': { count: 157, files: [
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
@@ -471,6 +473,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/expandable-search.vue',
       'shared/gallery-grid.story.vue',
       'shared/gallery-item.vue',
+      'shared/index-tab-button.vue',
       'shared/list-switcher.vue',
       'shared/meta-box.vue',
       'shared/rich-listbox.vue',
@@ -489,7 +492,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/users-index.vue',
       'ui/ui-page.vue',
     ] },
-  'gray-600': { count: 56, files: [
+  'gray-600': { count: 57, files: [
       'auth/login-index.vue',
       'fields/attachments/attachment-field.vue',
       'fields/attachments/file-upload.vue',
@@ -512,6 +515,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/expandable-search.story.vue',
       'shared/expandable-search.vue',
       'shared/glass-button.story.vue',
+      'shared/index-tabs.story.vue',
       'shared/label-hint-popup.vue',
       'shared/label-hint.vue',
       'shared/list-switcher.story.vue',
@@ -557,12 +561,13 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-800': { count: 23, files: [
+  'gray-800': { count: 24, files: [
       'dashboard/action-card.vue',
       'dashboard/language-block.vue',
       'dashboard/ring-block.vue',
       'dashboard/ring.vue',
       'fields/section-panel-field.vue',
+      'index.css',
       'settings/languages/components/language-list-controls.vue',
       'settings/languages/components/language-table-row.vue',
       'settings/languages/components/language-table.story.vue',
@@ -616,8 +621,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'green-100': { count: 7, files: [
-      'dashboard/stat-tile.vue',
+  'green-100': { count: 6, files: [
       'invitation/invitation-index-item.vue',
       'pages/page-index-item.vue',
       'resources/resource-index-item.vue',
@@ -707,8 +711,7 @@ export const colorUsage: Record<string, ColorUsage> = {
   'orange-700': { count: 1, files: [
       'stories/components/resource-utils.ts',
     ] },
-  'red-100': { count: 3, files: [
-      'dashboard/stat-tile.vue',
+  'red-100': { count: 2, files: [
       'settings/languages/components/language-modal.vue',
       'streams/components/stream-item.vue',
     ] },
@@ -720,9 +723,8 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/pill-button.vue',
       'shared/studio-button.vue',
     ] },
-  'red-50': { count: 26, files: [
+  'red-50': { count: 25, files: [
       'auth/create-account.vue',
-      'dashboard/stat-tile.vue',
       'dashboard/stat-tiles.vue',
       'fields/date-field.vue',
       'fields/date-range-field.vue',
@@ -743,9 +745,8 @@ export const colorUsage: Record<string, ColorUsage> = {
       'stories/components/resource-attached-item.vue',
       'team/components/user-row.vue',
     ] },
-  'red-500': { count: 18, files: [
+  'red-500': { count: 17, files: [
       'auth/create-account.vue',
-      'dashboard/stat-tile.vue',
       'dashboard/stat-tiles.vue',
       'fields/date-field.vue',
       'fields/date-range-field.vue',
@@ -769,13 +770,13 @@ export const colorUsage: Record<string, ColorUsage> = {
       'stories/components/resource-attached-item.vue',
       'team/components/user-row.vue',
     ] },
-  'red-800': { count: 3, files: [
-      'dashboard/stat-tile.vue',
+  'red-800': { count: 2, files: [
       'settings/languages/components/language-modal.vue',
       'streams/components/stream-item.vue',
     ] },
   'studio-dark': { count: 0, files: [] },
-  'studio-forest': { count: 1, files: [
+  'studio-forest': { count: 4, files: [
+      'shared/index-tab-button.vue',
       'shared/studio-button.vue',
     ] },
   'studio-green': { count: 12, files: [
@@ -784,7 +785,9 @@ export const colorUsage: Record<string, ColorUsage> = {
       'stories/components/resource-empty-state.vue',
       'stories/components/resource-picker.vue',
     ] },
-  'studio-lime': { count: 1, files: [
+  'studio-lime': { count: 3, files: [
+      'dashboard/stat-tile.vue',
+      'shared/index-tab-button.vue',
       'shared/studio-button.vue',
     ] },
   'studio-yellow': { count: 1, files: [
@@ -822,7 +825,7 @@ export const colorUsage: Record<string, ColorUsage> = {
   'violet-700': { count: 1, files: [
       'stories/components/resource-utils.ts',
     ] },
-  'white': { count: 158, files: [
+  'white': { count: 161, files: [
       'audience/audience-index.vue',
       'dashboard/action-card.vue',
       'dashboard/language-block.vue',
@@ -872,6 +875,8 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/gallery-item.vue',
       'shared/glass-button.vue',
       'shared/index-filter.story.vue',
+      'shared/index-tab-button.vue',
+      'shared/index-tabs.story.vue',
       'shared/label-hint-popup.vue',
       'shared/language-selector.vue',
       'shared/list-switcher.vue',
diff --git a/src/frontend/shared/index-tab-button.vue b/src/frontend/shared/index-tab-button.vue
new file mode 100644
index 00000000..b6c8e6bb
--- /dev/null
+++ b/src/frontend/shared/index-tab-button.vue
@@ -0,0 +1,46 @@
+<template>
+  <button
+    type="button"
+    class="flex flex-1 items-center justify-center gap-1 text-nowrap px-4 py-[9px] text-sm font-medium leading-4 transition-colors"
+    :class="stateClasses"
+    @click="emit('click')"
+  >
+    <slot />
+    <span
+      v-if="count !== undefined"
+      class="inline-flex items-center justify-center rounded-full px-[10px] py-[2px] text-xs font-medium leading-4"
+      :class="badgeClasses"
+    >
+      {{ count }}
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    isActive?: boolean;
+    count?: number;
+  }>(),
+  {
+    isActive: false,
+    count: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'click'): void;
+}>();
+
+const stateClasses = computed(() =>
+  props.isActive
+    ? 'bg-studio-forest text-white'
+    : 'bg-white text-studio-forest hover:bg-gray-50',
+);
+
+const badgeClasses = computed(() =>
+  props.isActive ? 'bg-studio-lime text-studio-forest' : 'bg-gray-100 text-gray-500',
+);
+</script>
diff --git a/src/frontend/shared/index-tabs.story.vue b/src/frontend/shared/index-tabs.story.vue
new file mode 100644
index 00000000..179c4ff4
--- /dev/null
+++ b/src/frontend/shared/index-tabs.story.vue
@@ -0,0 +1,48 @@
+<template>
+  <Story title="Index Tabs" group="shared">
+    <Variant title="Default">
+      <IndexTabs :tabs="tabItems" :current-tab="currentTab" @change="changeTab" />
+    </Variant>
+
+    <Variant title="Interactive">
+      <div class="space-y-4">
+        <IndexTabs :tabs="tabItems" :current-tab="currentTab" @change="changeTab" />
+        <p class="text-sm text-gray-600">Selected: {{ currentTab }}</p>
+      </div>
+    </Variant>
+
+    <Variant title="On white background">
+      <div class="rounded-xl bg-white p-6">
+        <IndexTabs :tabs="publishedTabs" :current-tab="publishedTab" @change="changePublishedTab" />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import IndexTabs from './index-tabs.vue';
+import type { TabItem } from '../../types';
+
+const currentTab = ref('To Do');
+
+const changeTab = (tab: string) => {
+  currentTab.value = tab;
+};
+
+const tabItems: TabItem[] = [
+  { label: 'To Do', count: 6 },
+  { label: 'Done', count: 2 },
+];
+
+const publishedTab = ref('Published');
+
+const changePublishedTab = (tab: string) => {
+  publishedTab.value = tab;
+};
+
+const publishedTabs: TabItem[] = [
+  { label: 'Published', count: 12 },
+  { label: 'Unpublished', count: 3 },
+];
+</script>
diff --git a/src/frontend/shared/index-tabs.vue b/src/frontend/shared/index-tabs.vue
new file mode 100644
index 00000000..41ee6e1b
--- /dev/null
+++ b/src/frontend/shared/index-tabs.vue
@@ -0,0 +1,43 @@
+<template>
+  <nav aria-label="Filter tabs">
+    <div class="inline-flex overflow-hidden rounded-full border border-gray-300">
+      <IndexTabButton
+        v-for="(tab, index) in tabs"
+        :key="tab.label"
+        :is-active="tab.current"
+        :count="tab.count"
+        :class="index === 0 ? 'border-r border-gray-300' : undefined"
+        :aria-current="tab.current ? 'page' : undefined"
+        @click="emit('change', tab.label)"
+      >
+        {{ tab.label }}
+      </IndexTabButton>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { TabItem } from '../../types';
+import IndexTabButton from './index-tab-button.vue';
+
+const props = defineProps({
+  tabs: {
+    type: Array<TabItem>,
+    required: true,
+  },
+  currentTab: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['change']);
+
+const tabs = computed(() =>
+  props.tabs.map((tab: TabItem) => ({
+    ...tab,
+    current: tab.label === props.currentTab,
+  })),
+);
+</script>

From 6631d2f99411dd778b9e738997264b132471d8e0 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 29 Jul 2026 08:16:43 +0300
Subject: [PATCH 10/39] style: update icon colors and text styles in dashboard
 index

---
 src/frontend/dashboard/dashboard-index.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/frontend/dashboard/dashboard-index.vue b/src/frontend/dashboard/dashboard-index.vue
index a9e37616..048cf3fa 100644
--- a/src/frontend/dashboard/dashboard-index.vue
+++ b/src/frontend/dashboard/dashboard-index.vue
@@ -30,12 +30,12 @@
 
           <div class="flex gap-x-6">
             <div class="flex items-center justify-center gap-x-2">
-              <Icon name="pie-chart" class="size-5 text-green-500" />
-              <span class="text-sm font-medium leading-4">Done</span>
+              <Icon name="pie-chart" class="size-5 text-gray-800" />
+              <span class="text-sm font-medium leading-4 text-black">Done</span>
             </div>
             <div class="flex items-center justify-center gap-x-2">
-              <Icon name="pie-chart" class="size-5 text-blue-500" />
-              <span class="text-sm font-medium leading-4">Pending</span>
+              <Icon name="pie-chart" class="size-5 text-gray-400" />
+              <span class="text-sm font-medium leading-4 text-black">Pending</span>
             </div>
           </div>
         </div>

From 598fdc53e050bba40f1a29091cb38325a0b13821 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 29 Jul 2026 08:20:33 +0300
Subject: [PATCH 11/39] refactor: replace Icon component with ArrowUp and
 ArrowDown

---
 src/frontend/dashboard/stat-tile.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/frontend/dashboard/stat-tile.vue b/src/frontend/dashboard/stat-tile.vue
index be2273dd..82ecd477 100644
--- a/src/frontend/dashboard/stat-tile.vue
+++ b/src/frontend/dashboard/stat-tile.vue
@@ -41,15 +41,15 @@
             {{ changeType === 'increase' ? 'Increased' : 'Decreased' }} by
           </span>
           {{ changePercentage }}
-          <Icon
+          <ArrowUp
             v-if="changeType === 'increase'"
-            name="arrow-up"
             class="ml-1 size-3 shrink-0 self-center text-green-500"
+            aria-hidden="true"
           />
-          <Icon
+          <ArrowDown
             v-else
-            name="arrow-up"
-            class="ml-1 size-3 shrink-0 rotate-180 self-center text-error"
+            class="ml-1 size-3 shrink-0 self-center text-error"
+            aria-hidden="true"
           />
         </div>
         <div
@@ -62,8 +62,8 @@
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
+import { ArrowUp, ArrowDown } from '@lucide/vue';
 import { StatMetric } from '../../types';
-import Icon from '../shared/icon.vue';
 
 const props = defineProps<{
   metric: StatMetric;

From ecf5bda5daf2b6f0d25b5125029e9d92b49ef16b Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 29 Jul 2026 09:17:55 +0300
Subject: [PATCH 12/39] wip

---
 .../dashboard/language-block.story.vue        | 27 +++++++++++++++++++
 src/frontend/dashboard/language-block.vue     | 20 +++++---------
 src/frontend/index.css                        |  5 ++++
 src/frontend/shared/helpers.ts                | 20 ++++++++++++--
 tests/unit/toRelativeTime.spec.ts             | 20 +++++++++++++-
 5 files changed, 75 insertions(+), 17 deletions(-)

diff --git a/src/frontend/dashboard/language-block.story.vue b/src/frontend/dashboard/language-block.story.vue
index acf6ed4f..36b3d3fc 100644
--- a/src/frontend/dashboard/language-block.story.vue
+++ b/src/frontend/dashboard/language-block.story.vue
@@ -75,9 +75,36 @@
         }"
       />
     </Variant>
+    <Variant title="Last update yesterday">
+      <LanguageBlock
+        :progress="{
+          progress: [
+            {
+              name: 'Interface',
+              done: 10,
+              draft: 10,
+              total: 100,
+              lastUpdated: yesterday,
+            },
+            {
+              name: 'Content',
+              done: 200,
+              draft: 50,
+              total: 300,
+              lastUpdated: yesterday,
+            },
+          ],
+          language: 'Hausa',
+          locale: 'ha',
+          isReadOnly: false,
+        }"
+      />
+    </Variant>
   </Story>
 </template>
 
 <script setup lang="ts">
 import LanguageBlock from './language-block.vue';
+
+const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString();
 </script>
diff --git a/src/frontend/dashboard/language-block.vue b/src/frontend/dashboard/language-block.vue
index b03e18ba..fd0f4cdf 100644
--- a/src/frontend/dashboard/language-block.vue
+++ b/src/frontend/dashboard/language-block.vue
@@ -30,15 +30,11 @@
         hasCompleteRings ? 'mt-3' : 'mt-10',
       ]"
     >
-      <p
-        class="text-base font-bold leading-6 text-gray-800"
-        v-text="hasNativeName ? nativeName : englishName"
-      ></p>
-      <p>
-        <span v-if="hasNativeName">{{ englishName }} </span>
+      <h3>
+        <span>{{ englishName }} </span>
         <span class="uppercase"> ({{ progress.locale }}) </span>
-      </p>
-      <p class="text-xs">
+      </h3>
+      <p class="text-xs font-normal leading-4 text-gray-500">
         Last update: <span>{{ lastUpdate }}</span>
       </p>
     </div>
@@ -51,6 +47,7 @@ import Ring from './ring.vue';
 import Icon from '../shared/icon.vue';
 import { Progress, TranslationProgress } from '../../types';
 import { router } from '@inertiajs/vue3';
+import { toRelativeDate } from '../shared/helpers';
 
 const props = defineProps<{ progress: TranslationProgress }>();
 
@@ -63,12 +60,8 @@ const nameParts = computed(() => {
   return props.progress.language.split(new RegExp(separators.join('|')));
 });
 
-const hasNativeName = computed(() => nameParts.value.length > 1);
-
 const englishName = computed(() => nameParts.value[0]?.trim() || '');
 
-const nativeName = computed(() => nameParts.value[1]?.trim() || '');
-
 const goTo = (item: Progress) => {
   if (props.progress.isReadOnly) return;
 
@@ -89,7 +82,6 @@ const lastUpdate = computed(() => {
 
   if (!timestamp) return '';
 
-  const date = new Date(timestamp);
-  return date.toISOString().split('T')[0];
+  return toRelativeDate(timestamp);
 });
 </script>
diff --git a/src/frontend/index.css b/src/frontend/index.css
index 00310678..d283482b 100644
--- a/src/frontend/index.css
+++ b/src/frontend/index.css
@@ -21,6 +21,11 @@
   h2 {
     @apply font-dmsans font-semibold text-xl leading-7;
   }
+
+  h3 {
+    @apply font-dmsans font-bold text-base leading-5 text-gray-800;
+  }
+
   p {
     @apply font-dmsans font-normal text-sm leading-5 text-gray-500;
   }
diff --git a/src/frontend/shared/helpers.ts b/src/frontend/shared/helpers.ts
index f629acb9..b9dd9424 100644
--- a/src/frontend/shared/helpers.ts
+++ b/src/frontend/shared/helpers.ts
@@ -61,7 +61,7 @@ export const formatDate = (value: string): string => {
   )}, ${padZero(d.getHours())}:${padZero(d.getMinutes())}`;
 };
 
-export const toRelativeTime = (value: string, now?: DateTime): string => {
+const relativeBucket = (value: string, now?: DateTime): string | null => {
   const saved = DateTime.fromISO(value);
   const currentTime = now ?? DateTime.now();
 
@@ -79,7 +79,14 @@ export const toRelativeTime = (value: string, now?: DateTime): string => {
   const elapsedDays = Math.floor(elapsedHours / 24);
   if (elapsedDays < 7) return pluralize(elapsedDays, 'day');
 
-  const display = saved.toUTC();
+  return null;
+};
+
+export const toRelativeTime = (value: string, now?: DateTime): string => {
+  const bucket = relativeBucket(value, now);
+  if (bucket) return bucket;
+
+  const display = DateTime.fromISO(value).toUTC();
   const hour12 = display.hour % 12 === 0 ? 12 : display.hour % 12;
   const meridiem = display.hour < 12 ? 'am' : 'pm';
 
@@ -88,6 +95,15 @@ export const toRelativeTime = (value: string, now?: DateTime): string => {
   )}${meridiem}`;
 };
 
+export const toRelativeDate = (value: string, now?: DateTime): string => {
+  const bucket = relativeBucket(value, now);
+  if (bucket) return bucket;
+
+  const display = DateTime.fromISO(value).toUTC();
+
+  return `on ${padZero(display.day)}/${padZero(display.month)}/${display.year}`;
+};
+
 export const indexCardTags = (scope: string, itemTags: string[]): string[] => {
   if (scope === 'Live' || scope === 'Ready') {
     return itemTags.includes('Draft') ? ['Changed'] : [];
diff --git a/tests/unit/toRelativeTime.spec.ts b/tests/unit/toRelativeTime.spec.ts
index 56e003d0..1ca09e1a 100644
--- a/tests/unit/toRelativeTime.spec.ts
+++ b/tests/unit/toRelativeTime.spec.ts
@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 import { DateTime } from 'luxon';
 
-import { toRelativeTime } from '../../src/frontend/shared/helpers';
+import { toRelativeTime, toRelativeDate } from '../../src/frontend/shared/helpers';
 
 const now = DateTime.fromISO('2026-07-13T12:00:00.000Z');
 
@@ -83,3 +83,21 @@ test.describe('toRelativeTime', () => {
     expect(toRelativeTime(value, laterNow)).toBe('on 01/01/2026 at 12:00pm');
   });
 });
+
+test.describe('toRelativeDate', () => {
+  test('returns the same relative buckets as toRelativeTime under a week', () => {
+    expect(toRelativeDate(secondsAgo(3600), now)).toBe('1 hour ago');
+    expect(toRelativeDate(secondsAgo(6 * 86400), now)).toBe('6 days ago');
+  });
+
+  test('switches to an absolute date, without a time, at 7 days elapsed', () => {
+    const value = '2026-07-02T17:11:00.000Z';
+    expect(toRelativeDate(value, now)).toBe('on 02/07/2026');
+  });
+
+  test('formats the absolute date across a month/year rollover', () => {
+    const laterNow = DateTime.fromISO('2026-01-10T09:05:00.000Z');
+    const value = '2025-12-31T09:05:00.000Z';
+    expect(toRelativeDate(value, laterNow)).toBe('on 31/12/2025');
+  });
+});

From d5766abfe82761d423863ae1b167092422f6644c Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 29 Jul 2026 13:12:59 +0300
Subject: [PATCH 13/39] refactor: update translation progress data and improve
 date handling in dashboard components

---
 .../dashboard/dashboard-index.story.vue       | 129 +++++++++++++-----
 src/frontend/dashboard/language-block.vue     |  17 +--
 src/frontend/dashboard/ring.story.vue         |  94 ++++++++-----
 src/frontend/dashboard/ring.vue               |  86 ++++++------
 src/frontend/shared/colors.usage.ts           |  41 +++---
 src/frontend/shared/helpers.ts                |  59 +++-----
 src/frontend/team/components/user-row.vue     |  28 +---
 tests/unit/toRelativeTime.spec.ts             | 107 +++------------
 8 files changed, 278 insertions(+), 283 deletions(-)

diff --git a/src/frontend/dashboard/dashboard-index.story.vue b/src/frontend/dashboard/dashboard-index.story.vue
index bf00c72b..864ffa20 100644
--- a/src/frontend/dashboard/dashboard-index.story.vue
+++ b/src/frontend/dashboard/dashboard-index.story.vue
@@ -55,7 +55,6 @@
           isManager: true,
           isAdmin: false,
           role: 'editor',
-          language: '*',
         }"
         :translation-progress="translationProgress"
         :is-read-only="false"
@@ -75,23 +74,19 @@ const loadData: StoryHandler = ({ app, story, variant }): void => {
   miniSidebar({ app, story, variant });
 };
 
+const daysAgo = (days: number): string =>
+  new Date(Date.now() - days * 24 * 60 * 60 * 1000).toISOString();
+
+const yesterday = daysAgo(1);
+const aboutAWeekAgo = daysAgo(8);
+const earlyLastYear = daysAgo(400);
+const overAYearAgo = daysAgo(750);
+
 const translationProgress = [
   {
     progress: [
-      {
-        name: 'Interface',
-        done: 100,
-        draft: 0,
-        total: 100,
-        lastUpdated: '2025-04-10 15:22:16.448+03',
-      },
-      {
-        name: 'Content',
-        done: 200,
-        draft: 0,
-        total: 200,
-        lastUpdated: '2025-04-10 15:22:16.448+03',
-      },
+      { name: 'Interface', done: 100, draft: 0, total: 100, lastUpdated: yesterday },
+      { name: 'Content', done: 35, draft: 15, total: 100, lastUpdated: yesterday },
     ],
     language: 'German',
     locale: 'de',
@@ -99,23 +94,95 @@ const translationProgress = [
   },
   {
     progress: [
-      {
-        name: 'Interface',
-        done: 75,
-        draft: 0,
-        total: 100,
-        lastUpdated: '2025-04-10 15:22:16.448+03',
-      },
-      {
-        name: 'Content',
-        done: 150,
-        draft: 50,
-        total: 200,
-        lastUpdated: '2025-04-10 15:22:16.448+03',
-      },
+      { name: 'Interface', done: 100, draft: 0, total: 100, lastUpdated: earlyLastYear },
+      { name: 'Content', done: 200, draft: 0, total: 200, lastUpdated: earlyLastYear },
+    ],
+    language: 'Francais',
+    locale: 'fr',
+    isReadOnly: false,
+  },
+  {
+    progress: [
+      { name: 'Interface', done: 100, draft: 0, total: 100, lastUpdated: earlyLastYear },
+      { name: 'Content', done: 150, draft: 0, total: 150, lastUpdated: earlyLastYear },
+    ],
+    language: 'Latviešu',
+    locale: 'lv',
+    isReadOnly: false,
+  },
+  {
+    progress: [
+      { name: 'Interface', done: 100, draft: 0, total: 100, lastUpdated: aboutAWeekAgo },
+      { name: 'Content', done: 70, draft: 30, total: 100, lastUpdated: aboutAWeekAgo },
+    ],
+    language: 'Español',
+    locale: 'es',
+    isReadOnly: false,
+  },
+  {
+    progress: [
+      { name: 'Interface', done: 100, draft: 0, total: 100, lastUpdated: yesterday },
+      { name: 'Content', done: 35, draft: 15, total: 100, lastUpdated: yesterday },
+    ],
+    language: 'Hindi',
+    locale: 'hi',
+    isReadOnly: false,
+  },
+  {
+    progress: [
+      { name: 'Interface', done: 75, draft: 0, total: 100, lastUpdated: yesterday },
+      { name: 'Content', done: 50, draft: 0, total: 100, lastUpdated: yesterday },
+    ],
+    language: 'Swiss German Alemanni',
+    locale: 'gsw',
+    isReadOnly: false,
+  },
+  {
+    progress: [
+      { name: 'Interface', done: 100, draft: 0, total: 100, lastUpdated: yesterday },
+      { name: 'Content', done: 80, draft: 20, total: 100, lastUpdated: yesterday },
+    ],
+    language: 'Japanese',
+    locale: 'ja',
+    isReadOnly: false,
+  },
+  {
+    // done: 1 (not 0) keeps `done !== total` so language-block.vue doesn't
+    // treat this trivially-equal 0-total pair as "all done"; total: 0 gives
+    // each ring's blank/no-data look.
+    progress: [
+      { name: 'Interface', done: 1, draft: 0, total: 0, lastUpdated: overAYearAgo },
+      { name: 'Content', done: 1, draft: 0, total: 0, lastUpdated: overAYearAgo },
+    ],
+    language: 'Korean',
+    locale: 'ko',
+    isReadOnly: false,
+  },
+  {
+    progress: [
+      { name: 'Interface', done: 75, draft: 0, total: 100, lastUpdated: yesterday },
+      { name: 'Content', done: 100, draft: 0, total: 200, lastUpdated: yesterday },
+    ],
+    language: 'Marathi',
+    locale: 'mr',
+    isReadOnly: false,
+  },
+  {
+    progress: [
+      { name: 'Interface', done: 100, draft: 0, total: 100, lastUpdated: yesterday },
+      { name: 'Content', done: 35, draft: 15, total: 100, lastUpdated: yesterday },
+    ],
+    language: 'Portuguese',
+    locale: 'pt',
+    isReadOnly: false,
+  },
+  {
+    progress: [
+      { name: 'Interface', done: 0, draft: 0, total: 0, lastUpdated: '' },
+      { name: 'Content', done: 0, draft: 0, total: 0, lastUpdated: '' },
     ],
-    language: 'Bengali',
-    locale: 'bn',
+    language: 'Cantonese',
+    locale: 'yue',
     isReadOnly: false,
   },
 ];
diff --git a/src/frontend/dashboard/language-block.vue b/src/frontend/dashboard/language-block.vue
index fd0f4cdf..6490d992 100644
--- a/src/frontend/dashboard/language-block.vue
+++ b/src/frontend/dashboard/language-block.vue
@@ -4,10 +4,10 @@
     :class="progress.isReadOnly ? 'opacity-60' : ''"
   >
     <div v-if="hasCompleteRings" class="grow">
-      <div class="relative mx-auto size-24 rounded-full border-[3px] border-green-500">
-        <div class="absolute inset-0 flex items-center justify-center">
-          <Icon name="check-large" class="h-auto w-6 text-green-500" />
-        </div>
+      <div
+        class="mx-auto flex size-24 items-center justify-center rounded-full bg-studio-lime"
+      >
+        <Check class="h-auto w-9 text-studio-forest" />
       </div>
       <p class="mt-2 text-center text-xs font-medium leading-4">All done</p>
     </div>
@@ -34,9 +34,10 @@
         <span>{{ englishName }} </span>
         <span class="uppercase"> ({{ progress.locale }}) </span>
       </h3>
-      <p class="text-xs font-normal leading-4 text-gray-500">
+      <p v-if="lastUpdate" class="text-xs font-normal leading-4 text-gray-500">
         Last update: <span>{{ lastUpdate }}</span>
       </p>
+      <p v-else class="text-xs font-normal leading-4 text-gray-500">No updates</p>
     </div>
   </div>
 </template>
@@ -44,10 +45,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import Ring from './ring.vue';
-import Icon from '../shared/icon.vue';
+import { Check } from '@lucide/vue';
 import { Progress, TranslationProgress } from '../../types';
 import { router } from '@inertiajs/vue3';
-import { toRelativeDate } from '../shared/helpers';
+import { toRelativeTime } from '../shared/helpers';
 
 const props = defineProps<{ progress: TranslationProgress }>();
 
@@ -82,6 +83,6 @@ const lastUpdate = computed(() => {
 
   if (!timestamp) return '';
 
-  return toRelativeDate(timestamp);
+  return toRelativeTime(timestamp);
 });
 </script>
diff --git a/src/frontend/dashboard/ring.story.vue b/src/frontend/dashboard/ring.story.vue
index 580109c7..6457cb55 100644
--- a/src/frontend/dashboard/ring.story.vue
+++ b/src/frontend/dashboard/ring.story.vue
@@ -1,61 +1,81 @@
 <template>
   <Story title="Ring" group="dashboard" :layout="{ type: 'grid', width: 200 }">
     <Variant title="Started">
-      <Ring
-        name="Deutsch"
-        :done="50"
-        :draft="20"
-        :total="100"
-        last-updated="2025-07-16"
-      />
+      <div class="bg-white p-8">
+        <Ring
+          name="Deutsch"
+          :done="50"
+          :draft="20"
+          :total="100"
+          last-updated="2025-07-16"
+        />
+      </div>
     </Variant>
 
     <Variant title="Not started">
-      <Ring name="Deutsch" :done="0" :draft="0" :total="110" last-updated="2025-07-16" />
+      <div class="bg-white p-8">
+        <Ring
+          name="Deutsch"
+          :done="0"
+          :draft="0"
+          :total="110"
+          last-updated="2025-07-16"
+        />
+      </div>
     </Variant>
 
     <Variant title="Done">
-      <Ring
-        name="Deutsch"
-        :done="100"
-        :draft="0"
-        :total="100"
-        last-updated="2025-07-16"
-      />
+      <div class="bg-white p-8">
+        <Ring
+          name="Deutsch"
+          :done="100"
+          :draft="0"
+          :total="100"
+          last-updated="2025-07-16"
+        />
+      </div>
     </Variant>
 
     <Variant title="Done not QAed">
-      <Ring
-        name="Deutsch"
-        :done="80"
-        :draft="20"
-        :total="100"
-        last-updated="2025-07-16"
-      />
+      <div class="bg-white p-8">
+        <Ring
+          name="Deutsch"
+          :done="80"
+          :draft="20"
+          :total="100"
+          last-updated="2025-07-16"
+        />
+      </div>
     </Variant>
 
     <Variant title="Overdone">
-      <Ring
-        name="Deutsch"
-        :done="100"
-        :draft="50"
-        :total="120"
-        last-updated="2025-07-16"
-      />
+      <div class="bg-white p-8">
+        <Ring
+          name="Deutsch"
+          :done="100"
+          :draft="50"
+          :total="120"
+          last-updated="2025-07-16"
+        />
+      </div>
     </Variant>
 
     <Variant title="Error: Total is 0">
-      <Ring name="Deutsch" :done="0" :draft="0" :total="0" last-updated="2025-07-16" />
+      <div class="bg-white p-8">
+        <Ring name="Deutsch" :done="0" :draft="0" :total="0" last-updated="2025-07-16" />
+      </div>
     </Variant>
 
     <Variant title="Error: data is garbage">
-      <Ring
-        name="Deutsch"
-        done="something"
-        :draft="50"
-        :total="0"
-        last-updated="2025-07-16"
-      />
+      <div class="bg-white p-8">
+        <Ring
+          name="Deutsch"
+          :done="NaN"
+          :draft="50"
+          :total="0"
+          last-updated="2025-07-16"
+        />
+      </div>
     </Variant>
   </Story>
 </template>
diff --git a/src/frontend/dashboard/ring.vue b/src/frontend/dashboard/ring.vue
index 302cac66..517a1949 100644
--- a/src/frontend/dashboard/ring.vue
+++ b/src/frontend/dashboard/ring.vue
@@ -1,60 +1,68 @@
 <template>
   <div>
-    <div class="relative flex flex-col items-center justify-center">
-      <svg
-        v-if="label !== ''"
-        class="-rotate-90"
-        :height="circleWidth"
-        :width="circleWidth"
-      >
-        <!-- Green segment -->
-        <circle
-          class="fill-transparent stroke-green-500 stroke-[6px]"
-          stroke="currentColor"
-          :r="circleRadius"
-          :cx="center"
-          :cy="center"
-          :stroke-dasharray="`${greenSegment} ${circumference}`"
-          stroke-dashoffset="0"
-        />
-        <!-- Blue segment -->
-        <circle
-          class="fill-transparent stroke-blue-500 stroke-[6px]"
-          stroke="currentColor"
-          :r="circleRadius"
-          :cx="center"
-          :cy="center"
-          :stroke-dasharray="`${blueSegment} ${circumference}`"
-          :stroke-dashoffset="`-${greenSegment}`"
-        />
-        <!-- Gray segment -->
+    <div
+      v-if="isComplete"
+      class="mx-auto flex items-center justify-center rounded-full bg-studio-lime"
+      :style="{ width: `${circleWidth}px`, height: `${circleWidth}px` }"
+    >
+      <Check class="h-auto w-6 text-studio-forest" />
+    </div>
+    <div v-else class="relative flex flex-col items-center justify-center">
+      <svg class="-rotate-90" :height="circleWidth" :width="circleWidth">
+        <template v-if="label !== ''">
+          <!-- Gray 800 segment -->
+          <circle
+            class="fill-transparent stroke-gray-800 stroke-[6px]"
+            stroke="currentColor"
+            :r="circleRadius"
+            :cx="center"
+            :cy="center"
+            :stroke-dasharray="`${greenSegment} ${circumference}`"
+            stroke-dashoffset="0"
+          />
+          <!-- Gray 400 segment -->
+          <circle
+            class="fill-transparent stroke-gray-400 stroke-[6px]"
+            stroke="currentColor"
+            :r="circleRadius"
+            :cx="center"
+            :cy="center"
+            :stroke-dasharray="`${blueSegment} ${circumference}`"
+            :stroke-dashoffset="`-${greenSegment}`"
+          />
+          <!-- Gray 50 segment -->
+          <circle
+            class="fill-transparent stroke-gray-50 stroke-[6px]"
+            stroke="currentColor"
+            :r="circleRadius"
+            :cx="center"
+            :cy="center"
+            :stroke-dasharray="`${graySegment} ${circumference}`"
+            :stroke-dashoffset="`-${greenSegment + blueSegment}`"
+          />
+        </template>
+        <!-- No progress data: plain empty track -->
         <circle
+          v-else
           class="fill-transparent stroke-gray-50 stroke-[6px]"
           stroke="currentColor"
           :r="circleRadius"
           :cx="center"
           :cy="center"
-          :stroke-dasharray="`${graySegment} ${circumference}`"
-          :stroke-dashoffset="`-${greenSegment + blueSegment}`"
         />
       </svg>
       <div class="absolute inset-0 flex items-center justify-center">
-        <div v-if="donePercentage === 100">
-          <Icon name="check" class="h-auto w-4 text-green-500" />
-        </div>
-        <span v-else class="text-sm font-normal leading-none text-gray-800">{{
-          label
-        }}</span>
+        <span class="text-sm font-normal leading-none text-gray-800">{{ label }}</span>
       </div>
     </div>
-    <p class="text-center text-sm font-medium leading-4 text-gray-500">
+    <p class="mt-2 text-center text-sm font-medium leading-4 text-gray-500">
       {{ name }}
     </p>
   </div>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
-import Icon from '../shared/icon.vue';
+import { Check } from '@lucide/vue';
 import { Progress } from '../../types';
 
 const props = defineProps<Progress>();
@@ -85,6 +93,8 @@ const donePercentage = computed(() => {
   return Math.round((workingDone.value / props.total) * 100);
 });
 
+const isComplete = computed(() => donePercentage.value === 100);
+
 const draftPercentage = computed(() => {
   return Math.round((props.draft / props.total) * 100);
 });
diff --git a/src/frontend/shared/colors.usage.ts b/src/frontend/shared/colors.usage.ts
index 2a1c1bba..21de5a83 100644
--- a/src/frontend/shared/colors.usage.ts
+++ b/src/frontend/shared/colors.usage.ts
@@ -22,12 +22,13 @@ export const colorUsage: Record<string, ColorUsage> = {
   'amber-700': { count: 1, files: [
       'invitation/invitation-index-item.vue',
     ] },
-  'black': { count: 28, files: [
+  'black': { count: 30, files: [
       'audience/audience-index.vue',
       'auth/create-account.vue',
       'auth/forgot-password.vue',
       'auth/login-index.vue',
       'dashboard/action-card.vue',
+      'dashboard/dashboard-index.vue',
       'fields/scripture-field.vue',
       'index.css',
       'settings/languages/components/bible-translations-modal.vue',
@@ -70,11 +71,9 @@ export const colorUsage: Record<string, ColorUsage> = {
       'index.css',
       'shared/pill-button.vue',
     ] },
-  'blue-50': { count: 69, files: [
+  'blue-50': { count: 67, files: [
       'audience/audience-index.vue',
-      'dashboard/dashboard-index.vue',
       'dashboard/ring-block.vue',
-      'dashboard/ring.vue',
       'fields/select-field.vue',
       'index.css',
       'invitation/invitation-index-item.vue',
@@ -105,11 +104,9 @@ export const colorUsage: Record<string, ColorUsage> = {
       'ui/components/ui-string-item.vue',
       'ui/ui-page.vue',
     ] },
-  'blue-500': { count: 40, files: [
+  'blue-500': { count: 38, files: [
       'audience/audience-index.vue',
-      'dashboard/dashboard-index.vue',
       'dashboard/ring-block.vue',
-      'dashboard/ring.vue',
       'fields/select-field.vue',
       'index.css',
       'invitation/invitations-index.vue',
@@ -328,8 +325,10 @@ export const colorUsage: Record<string, ColorUsage> = {
       'ui/components/ui-card.vue',
       'ui/ui-page.vue',
     ] },
-  'gray-400': { count: 76, files: [
+  'gray-400': { count: 78, files: [
       'audience/audience-index.vue',
+      'dashboard/dashboard-index.vue',
+      'dashboard/ring.vue',
       'fields/attachments/attachment-field.vue',
       'fields/section-panel-field.vue',
       'index.css',
@@ -362,7 +361,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-50': { count: 226, files: [
+  'gray-50': { count: 229, files: [
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
@@ -431,7 +430,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/users-index.vue',
       'ui/ui-page.vue',
     ] },
-  'gray-500': { count: 157, files: [
+  'gray-500': { count: 159, files: [
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
@@ -561,9 +560,9 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-800': { count: 24, files: [
+  'gray-800': { count: 26, files: [
       'dashboard/action-card.vue',
-      'dashboard/language-block.vue',
+      'dashboard/dashboard-index.vue',
       'dashboard/ring-block.vue',
       'dashboard/ring.vue',
       'fields/section-panel-field.vue',
@@ -635,12 +634,9 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/pill-button.vue',
       'shared/studio-button.vue',
     ] },
-  'green-500': { count: 14, files: [
+  'green-500': { count: 9, files: [
       'auth/forgot-password.vue',
       'auth/reset-password.vue',
-      'dashboard/dashboard-index.vue',
-      'dashboard/language-block.vue',
-      'dashboard/ring.vue',
       'dashboard/stat-tile.vue',
       'settings/languages/components/request-app-update-modal.story.vue',
       'shared/message-centre.vue',
@@ -775,7 +771,9 @@ export const colorUsage: Record<string, ColorUsage> = {
       'streams/components/stream-item.vue',
     ] },
   'studio-dark': { count: 0, files: [] },
-  'studio-forest': { count: 4, files: [
+  'studio-forest': { count: 6, files: [
+      'dashboard/language-block.vue',
+      'dashboard/ring.vue',
       'shared/index-tab-button.vue',
       'shared/studio-button.vue',
     ] },
@@ -785,7 +783,9 @@ export const colorUsage: Record<string, ColorUsage> = {
       'stories/components/resource-empty-state.vue',
       'stories/components/resource-picker.vue',
     ] },
-  'studio-lime': { count: 3, files: [
+  'studio-lime': { count: 5, files: [
+      'dashboard/language-block.vue',
+      'dashboard/ring.vue',
       'dashboard/stat-tile.vue',
       'shared/index-tab-button.vue',
       'shared/studio-button.vue',
@@ -796,7 +796,7 @@ export const colorUsage: Record<string, ColorUsage> = {
   'teal-500': { count: 4, files: [
       'dashboard/ring-block.vue',
     ] },
-  'transparent': { count: 25, files: [
+  'transparent': { count: 26, files: [
       'dashboard/ring-block.vue',
       'dashboard/ring.vue',
       'fields/attachments/video-progress.vue',
@@ -825,11 +825,12 @@ export const colorUsage: Record<string, ColorUsage> = {
   'violet-700': { count: 1, files: [
       'stories/components/resource-utils.ts',
     ] },
-  'white': { count: 161, files: [
+  'white': { count: 168, files: [
       'audience/audience-index.vue',
       'dashboard/action-card.vue',
       'dashboard/language-block.vue',
       'dashboard/ring-block.story.vue',
+      'dashboard/ring.story.vue',
       'dashboard/stat-tile.vue',
       'fields/attachments/attachment-field.vue',
       'fields/attachments/file-upload.vue',
diff --git a/src/frontend/shared/helpers.ts b/src/frontend/shared/helpers.ts
index b9dd9424..e94b5206 100644
--- a/src/frontend/shared/helpers.ts
+++ b/src/frontend/shared/helpers.ts
@@ -61,47 +61,30 @@ export const formatDate = (value: string): string => {
   )}, ${padZero(d.getHours())}:${padZero(d.getMinutes())}`;
 };
 
-const relativeBucket = (value: string, now?: DateTime): string | null => {
-  const saved = DateTime.fromISO(value);
-  const currentTime = now ?? DateTime.now();
-
-  const pluralize = (n: number, unit: string): string => `${n} ${unit}${n === 1 ? '' : 's'} ago`;
-
-  const elapsedSeconds = Math.floor(currentTime.diff(saved, 'seconds').seconds);
-  if (elapsedSeconds < 60) return pluralize(Math.max(1, elapsedSeconds), 'sec');
-
-  const elapsedMinutes = Math.floor(elapsedSeconds / 60);
-  if (elapsedMinutes < 60) return pluralize(elapsedMinutes, 'min');
-
-  const elapsedHours = Math.floor(elapsedMinutes / 60);
-  if (elapsedHours < 24) return pluralize(elapsedHours, 'hour');
-
-  const elapsedDays = Math.floor(elapsedHours / 24);
-  if (elapsedDays < 7) return pluralize(elapsedDays, 'day');
-
-  return null;
-};
-
 export const toRelativeTime = (value: string, now?: DateTime): string => {
-  const bucket = relativeBucket(value, now);
-  if (bucket) return bucket;
-
-  const display = DateTime.fromISO(value).toUTC();
-  const hour12 = display.hour % 12 === 0 ? 12 : display.hour % 12;
-  const meridiem = display.hour < 12 ? 'am' : 'pm';
-
-  return `on ${padZero(display.day)}/${padZero(display.month)}/${display.year} at ${hour12}:${padZero(
-    display.minute,
-  )}${meridiem}`;
-};
-
-export const toRelativeDate = (value: string, now?: DateTime): string => {
-  const bucket = relativeBucket(value, now);
-  if (bucket) return bucket;
+  const date = DateTime.fromISO(value);
+  const currentTime = now ?? DateTime.now();
 
-  const display = DateTime.fromISO(value).toUTC();
+  const diff = currentTime.diff(date, 'days').days;
+
+  if (diff < 1) return 'Today';
+  if (diff < 2) return 'Yesterday';
+  if (diff < 7) return date.toFormat('cccc');
+
+  if (date.year === currentTime.year) {
+    const day = date.day;
+    const ordinal =
+      day === 1 || day === 21 || day === 31
+        ? 'st'
+        : day === 2 || day === 22
+          ? 'nd'
+          : day === 3 || day === 23
+            ? 'rd'
+            : 'th';
+    return `${day}${ordinal} ${date.toFormat('MMMM')}`;
+  }
 
-  return `on ${padZero(display.day)}/${padZero(display.month)}/${display.year}`;
+  return date.toFormat('dd/MM/yyyy');
 };
 
 export const indexCardTags = (scope: string, itemTags: string[]): string[] => {
diff --git a/src/frontend/team/components/user-row.vue b/src/frontend/team/components/user-row.vue
index 30a6768b..37fd8814 100644
--- a/src/frontend/team/components/user-row.vue
+++ b/src/frontend/team/components/user-row.vue
@@ -67,10 +67,10 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { DateTime } from 'luxon';
 import { SquarePen, Trash2 } from '@lucide/vue';
 import type { UserMeta } from '../../../types';
 import { useSharedStore } from '../../store';
+import { toRelativeTime } from '../../shared/helpers';
 
 const shared = useSharedStore();
 
@@ -88,31 +88,7 @@ const lastActivity = computed(() => {
     return 'No activity';
   }
 
-  const date = DateTime.fromISO(props.user.lastActivity);
-  const now = DateTime.now();
-
-  const diff = now.diff(date, 'days').days;
-
-  if (diff < 1) {
-    return 'Today';
-  } else if (diff < 2) {
-    return 'Yesterday';
-  } else if (diff < 7) {
-    return date.toFormat('cccc');
-  } else if (date.year === now.year) {
-    const day = date.day;
-    const ordinal =
-      day === 1 || day === 21 || day === 31
-        ? 'st'
-        : day === 2 || day === 22
-          ? 'nd'
-          : day === 3 || day === 23
-            ? 'rd'
-            : 'th';
-    return `${day}${ordinal} ${date.toFormat('MMMM')}`;
-  } else {
-    return date.toFormat('dd/MM/yyyy');
-  }
+  return toRelativeTime(props.user.lastActivity);
 });
 
 const language = computed(() => {
diff --git a/tests/unit/toRelativeTime.spec.ts b/tests/unit/toRelativeTime.spec.ts
index 1ca09e1a..669356f3 100644
--- a/tests/unit/toRelativeTime.spec.ts
+++ b/tests/unit/toRelativeTime.spec.ts
@@ -1,103 +1,40 @@
 import { test, expect } from '@playwright/test';
 import { DateTime } from 'luxon';
 
-import { toRelativeTime, toRelativeDate } from '../../src/frontend/shared/helpers';
+import { toRelativeTime } from '../../src/frontend/shared/helpers';
 
 const now = DateTime.fromISO('2026-07-13T12:00:00.000Z');
 
-const secondsAgo = (n: number): string => now.minus({ seconds: n }).toISO() as string;
+const hoursAgo = (n: number): string => now.minus({ hours: n }).toISO() as string;
+const daysAgo = (n: number): string => now.minus({ days: n }).toISO() as string;
 
 test.describe('toRelativeTime', () => {
-  test('returns "1 sec ago" at zero elapsed time', () => {
-    expect(toRelativeTime(secondsAgo(0), now)).toBe('1 sec ago');
+  test('returns "Today" for the current day', () => {
+    expect(toRelativeTime(hoursAgo(5), now)).toBe('Today');
   });
 
-  test('returns singular "1 sec ago"', () => {
-    expect(toRelativeTime(secondsAgo(1), now)).toBe('1 sec ago');
+  test('returns "Yesterday" for one day ago', () => {
+    expect(toRelativeTime(daysAgo(1), now)).toBe('Yesterday');
   });
 
-  test('returns plural seconds', () => {
-    expect(toRelativeTime(secondsAgo(2), now)).toBe('2 secs ago');
+  test('returns the weekday name between 2 and 6 days ago', () => {
+    expect(toRelativeTime(daysAgo(3), now)).toBe(now.minus({ days: 3 }).toFormat('cccc'));
+    expect(toRelativeTime(daysAgo(6), now)).toBe(now.minus({ days: 6 }).toFormat('cccc'));
   });
 
-  test('stays in seconds just before the minute rollover', () => {
-    expect(toRelativeTime(secondsAgo(59), now)).toBe('59 secs ago');
+  test('returns an ordinal day and month within the same year', () => {
+    expect(toRelativeTime('2026-07-01T12:00:00.000Z', now)).toBe('1st July');
+    expect(toRelativeTime('2026-06-02T12:00:00.000Z', now)).toBe('2nd June');
+    expect(toRelativeTime('2026-05-03T12:00:00.000Z', now)).toBe('3rd May');
+    expect(toRelativeTime('2026-01-11T12:00:00.000Z', now)).toBe('11th January');
+    expect(toRelativeTime('2026-02-21T12:00:00.000Z', now)).toBe('21st February');
+    expect(toRelativeTime('2026-03-22T12:00:00.000Z', now)).toBe('22nd March');
+    expect(toRelativeTime('2026-04-23T12:00:00.000Z', now)).toBe('23rd April');
+    expect(toRelativeTime('2026-01-31T12:00:00.000Z', now)).toBe('31st January');
   });
 
-  test('rolls over to singular "1 min ago" at 60 seconds', () => {
-    expect(toRelativeTime(secondsAgo(60), now)).toBe('1 min ago');
-  });
-
-  test('returns plural minutes', () => {
-    expect(toRelativeTime(secondsAgo(125), now)).toBe('2 mins ago');
-  });
-
-  test('stays in minutes just before the hour rollover', () => {
-    expect(toRelativeTime(secondsAgo(3599), now)).toBe('59 mins ago');
-  });
-
-  test('rolls over to singular "1 hour ago" at 3600 seconds', () => {
-    expect(toRelativeTime(secondsAgo(3600), now)).toBe('1 hour ago');
-  });
-
-  test('returns plural hours', () => {
-    expect(toRelativeTime(secondsAgo(7200), now)).toBe('2 hours ago');
-  });
-
-  test('stays in hours just before the day rollover', () => {
-    expect(toRelativeTime(secondsAgo(86399), now)).toBe('23 hours ago');
-  });
-
-  test('rolls over to singular "1 day ago" at 86400 seconds', () => {
-    expect(toRelativeTime(secondsAgo(86400), now)).toBe('1 day ago');
-  });
-
-  test('returns plural days', () => {
-    expect(toRelativeTime(secondsAgo(172800), now)).toBe('2 days ago');
-  });
-
-  test('stays in days just before the week rollover', () => {
-    expect(toRelativeTime(secondsAgo(6 * 86400), now)).toBe('6 days ago');
-  });
-
-  test('switches to absolute date/time at 7 days elapsed', () => {
-    const value = '2026-07-02T17:11:00.000Z';
-    expect(toRelativeTime(value, now)).toBe('on 02/07/2026 at 5:11pm');
-  });
-
-  test('formats the absolute date across a month/year rollover', () => {
-    const laterNow = DateTime.fromISO('2026-01-10T09:05:00.000Z');
-    const value = '2025-12-31T09:05:00.000Z';
-    expect(toRelativeTime(value, laterNow)).toBe('on 31/12/2025 at 9:05am');
-  });
-
-  test('formats midnight as 12am in the absolute format', () => {
-    const laterNow = DateTime.fromISO('2026-01-09T00:00:00.000Z');
-    const value = '2026-01-01T00:00:00.000Z';
-    expect(toRelativeTime(value, laterNow)).toBe('on 01/01/2026 at 12:00am');
-  });
-
-  test('formats noon as 12pm in the absolute format', () => {
-    const laterNow = DateTime.fromISO('2026-01-09T12:00:00.000Z');
-    const value = '2026-01-01T12:00:00.000Z';
-    expect(toRelativeTime(value, laterNow)).toBe('on 01/01/2026 at 12:00pm');
-  });
-});
-
-test.describe('toRelativeDate', () => {
-  test('returns the same relative buckets as toRelativeTime under a week', () => {
-    expect(toRelativeDate(secondsAgo(3600), now)).toBe('1 hour ago');
-    expect(toRelativeDate(secondsAgo(6 * 86400), now)).toBe('6 days ago');
-  });
-
-  test('switches to an absolute date, without a time, at 7 days elapsed', () => {
-    const value = '2026-07-02T17:11:00.000Z';
-    expect(toRelativeDate(value, now)).toBe('on 02/07/2026');
-  });
-
-  test('formats the absolute date across a month/year rollover', () => {
-    const laterNow = DateTime.fromISO('2026-01-10T09:05:00.000Z');
-    const value = '2025-12-31T09:05:00.000Z';
-    expect(toRelativeDate(value, laterNow)).toBe('on 31/12/2025');
+  test('falls back to dd/MM/yyyy across a year boundary', () => {
+    const laterNow = DateTime.fromISO('2026-01-10T12:00:00.000Z');
+    expect(toRelativeTime('2025-12-31T12:00:00.000Z', laterNow)).toBe('31/12/2025');
   });
 });

From 84ce374cd6f377b3fc58da5f653ee370e0130def Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 29 Jul 2026 13:24:08 +0300
Subject: [PATCH 14/39] increment: add AppFooter with Kit version

---
 src/frontend/shared/app-footer.vue | 20 ++++++++++
 src/frontend/shared/app-layout.vue |  5 ++-
 src/frontend/shared/icon.vue       | 63 ++++++++++++++++++++++++++++++
 tsconfig.frontend.json             |  1 +
 4 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/shared/app-footer.vue

diff --git a/src/frontend/shared/app-footer.vue b/src/frontend/shared/app-footer.vue
new file mode 100644
index 00000000..5dd8d872
--- /dev/null
+++ b/src/frontend/shared/app-footer.vue
@@ -0,0 +1,20 @@
+<template>
+  <footer>
+    <div class="mx-auto max-w-7xl pb-10 pt-20">
+      <div class="flex flex-col items-center justify-center">
+        <div class="flex items-center gap-x-2">
+          <Icon name="studio-logo" />
+          <span
+            class="rounded-full border border-studio-forest px-2 py-px text-[10px] leading-4 text-studio-forest"
+            >{{ version }}</span
+          >
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import Icon from './icon.vue';
+import { version } from '../../../package.json';
+</script>
diff --git a/src/frontend/shared/app-layout.vue b/src/frontend/shared/app-layout.vue
index 332bf961..1debed12 100644
--- a/src/frontend/shared/app-layout.vue
+++ b/src/frontend/shared/app-layout.vue
@@ -34,7 +34,9 @@
           <main class="mt-6">
             <slot name="main" />
           </main>
-          <footer></footer>
+          <footer>
+            <AppFooter />
+          </footer>
         </div>
       </div>
     </div>
@@ -55,6 +57,7 @@ import { usePage } from '@inertiajs/vue3';
 import { useSharedStore } from '../store';
 import AppLayoutHeader from './app-layout-header.vue';
 import type { SharedPageProps } from '../../types';
+import AppFooter from './app-footer.vue';
 
 defineProps<{
   title?: string;
diff --git a/src/frontend/shared/icon.vue b/src/frontend/shared/icon.vue
index 380246f8..c0a9ad22 100644
--- a/src/frontend/shared/icon.vue
+++ b/src/frontend/shared/icon.vue
@@ -998,6 +998,69 @@
         d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
       />
     </svg>
+
+    <svg
+      v-if="name === 'studio-logo'"
+      width="94"
+      height="18"
+      viewBox="0 0 94 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.48175 12.5997L12.1854 3.59969L13.9261 5.39968L5.22247 14.3997L3.48175 12.5997Z"
+        fill="#102F35"
+      />
+      <path
+        d="M3.48139 5.40008L5.22211 3.60008L13.9257 12.6001L12.185 14.4001L3.48139 5.40008Z"
+        fill="#102F35"
+      />
+      <path
+        d="M6.9629 1.8L8.70363 0L10.4444 1.8L8.70363 3.6L6.9629 1.8Z"
+        fill="#102F35"
+      />
+      <path d="M0 9L1.74073 7.2L3.48145 9L1.74073 10.8L0 9Z" fill="#102F35" />
+      <path
+        d="M6.9629 16.2L8.70363 14.4L10.4444 16.2L8.70363 18L6.9629 16.2Z"
+        fill="#102F35"
+      />
+      <path
+        d="M13.926 8.99983L15.6667 7.19983L17.4074 8.99983L15.6667 10.7998L13.926 8.99983Z"
+        fill="#102F35"
+      />
+      <path
+        d="M90.3924 14.3935C89.6208 14.3935 88.9498 14.2665 88.3795 14.0127C87.8092 13.7588 87.3619 13.4069 87.0376 12.9569C86.7133 12.5069 86.5288 11.9992 86.4841 11.4338H88.7318C88.7877 11.653 88.8827 11.855 89.0169 12.0396C89.1511 12.2127 89.33 12.3511 89.5537 12.455C89.7773 12.5588 90.0457 12.6107 90.3588 12.6107C90.6607 12.6107 90.9068 12.5704 91.0969 12.4896C91.287 12.3973 91.4268 12.2761 91.5162 12.1261C91.6169 11.9761 91.6672 11.8203 91.6672 11.6588C91.6672 11.4165 91.6001 11.2319 91.4659 11.1049C91.3317 10.9665 91.136 10.8569 90.8788 10.7761C90.6216 10.6953 90.3085 10.6146 89.9395 10.5338C89.5369 10.453 89.1399 10.3549 88.7485 10.2395C88.3683 10.1126 88.0273 9.95685 87.7253 9.77223C87.4234 9.58761 87.183 9.35107 87.004 9.06261C86.8251 8.77414 86.7357 8.41644 86.7357 7.98951C86.7357 7.47027 86.8699 7.00873 87.1382 6.60488C87.4066 6.18948 87.798 5.86063 88.3124 5.61832C88.8268 5.37601 89.4474 5.25485 90.1743 5.25485C91.1919 5.25485 91.9971 5.4914 92.5897 5.96448C93.1824 6.43756 93.5347 7.0895 93.6465 7.92028H91.5162C91.4491 7.65489 91.2981 7.4472 91.0633 7.29719C90.8397 7.13565 90.5377 7.05488 90.1575 7.05488C89.755 7.05488 89.4474 7.12988 89.235 7.27989C89.0225 7.42989 88.9163 7.62604 88.9163 7.86836C88.9163 8.0299 88.9834 8.17413 89.1176 8.30105C89.2629 8.42798 89.4642 8.5376 89.7214 8.62991C89.9786 8.71068 90.2917 8.79145 90.6607 8.87222C91.3093 9.01068 91.8796 9.17222 92.3717 9.35684C92.8637 9.52992 93.2495 9.78377 93.5291 10.1184C93.8086 10.4415 93.9484 10.9146 93.9484 11.5376C93.9484 12.0915 93.803 12.5877 93.5123 13.0261C93.2215 13.4531 92.8078 13.7877 92.271 14.03C91.7455 14.2723 91.1192 14.3935 90.3924 14.3935Z"
+        fill="#102F35"
+      />
+      <path
+        d="M78.4644 17.9935L80.5108 13.2165H80.0076L76.6193 5.46255H79.0851L81.5005 11.0876L83.6811 5.46255H86.0798L80.8631 17.9935H78.4644Z"
+        fill="#102F35"
+      />
+      <path
+        d="M71.9369 14.3935C71.087 14.3935 70.3322 14.2088 69.6724 13.8396C69.0239 13.4588 68.515 12.9338 68.146 12.2646C67.7882 11.5838 67.6093 10.7992 67.6093 9.9107C67.6093 8.99914 67.7882 8.19721 68.146 7.50489C68.515 6.80103 69.0239 6.25295 69.6724 5.86063C70.321 5.45678 71.0759 5.25485 71.9369 5.25485C72.7756 5.25485 73.5081 5.44524 74.1343 5.82602C74.7605 6.20679 75.247 6.72026 75.5936 7.36642C75.9403 8.01259 76.1136 8.74529 76.1136 9.56454C76.1136 9.67992 76.1136 9.81262 76.1136 9.96262C76.1136 10.1011 76.1024 10.2453 76.0801 10.3953H69.2196V8.97606H73.8324C73.7988 8.41067 73.6031 7.96643 73.2453 7.64335C72.8986 7.32027 72.4625 7.15873 71.9369 7.15873C71.5567 7.15873 71.2045 7.25104 70.8802 7.43566C70.5559 7.60874 70.2987 7.87989 70.1086 8.24913C69.9296 8.61837 69.8402 9.08568 69.8402 9.65108V10.153C69.8402 10.6261 69.9241 11.0415 70.0918 11.3992C70.2707 11.7453 70.5167 12.0165 70.8298 12.2127C71.143 12.3973 71.5064 12.4896 71.9201 12.4896C72.3339 12.4896 72.675 12.3973 72.9433 12.2127C73.2229 12.028 73.4298 11.7915 73.564 11.503H75.8788C75.7222 12.0453 75.4594 12.5357 75.0904 12.9742C74.7214 13.4127 74.2685 13.7588 73.7317 14.0127C73.195 14.2665 72.5967 14.3935 71.9369 14.3935Z"
+        fill="#102F35"
+      />
+      <path
+        d="M57.6928 14.1858V5.46255H59.6889L59.8566 6.8818C60.1138 6.39718 60.4772 6.00487 60.9469 5.70486C61.4278 5.40486 61.9981 5.25485 62.6578 5.25485C63.3623 5.25485 63.955 5.40486 64.4359 5.70486C64.9167 6.00487 65.2802 6.44333 65.5262 7.02027C65.7834 7.5972 65.912 8.30682 65.912 9.14914V14.1858H63.6643V9.37415C63.6643 8.68183 63.5189 8.15105 63.2281 7.78182C62.9486 7.41258 62.5125 7.22796 61.9198 7.22796C61.5396 7.22796 61.1985 7.32027 60.8966 7.50489C60.6058 7.68951 60.3766 7.9549 60.2089 8.30105C60.0411 8.63568 59.9572 9.0453 59.9572 9.52992V14.1858H57.6928Z"
+        fill="#102F35"
+      />
+      <path
+        d="M50.997 14.1858V5.46255H53.0099L53.2279 7.07219C53.4292 6.69141 53.6808 6.36833 53.9827 6.10294C54.2958 5.83756 54.6481 5.62986 55.0395 5.47986C55.4421 5.32986 55.8838 5.25485 56.3646 5.25485V7.72989H55.593C55.2575 7.72989 54.9444 7.77028 54.6537 7.85105C54.3741 7.93182 54.1281 8.06451 53.9156 8.24913C53.7032 8.42221 53.541 8.66452 53.4292 8.97606C53.3174 9.28761 53.2615 9.67992 53.2615 10.153V14.1858H50.997Z"
+        fill="#102F35"
+      />
+      <path
+        d="M43.982 14.3935C43.2998 14.3935 42.7128 14.2492 42.2207 13.9608C41.7399 13.6608 41.3708 13.2281 41.1136 12.6627C40.8565 12.0857 40.7279 11.3761 40.7279 10.5338V5.46255H42.9923V10.2915C42.9923 10.9953 43.1321 11.5261 43.4117 11.8838C43.7024 12.2415 44.1441 12.4204 44.7368 12.4204C45.117 12.4204 45.4525 12.3338 45.7432 12.1607C46.034 11.9761 46.2632 11.7165 46.431 11.3819C46.6099 11.0357 46.6993 10.6146 46.6993 10.1184V5.46255H48.947V14.1858H46.9677L46.7832 12.7665C46.5372 13.2627 46.1738 13.6608 45.6929 13.9608C45.2121 14.2492 44.6418 14.3935 43.982 14.3935Z"
+        fill="#102F35"
+      />
+      <path
+        d="M34.7505 14.3935C33.9453 14.3935 33.2184 14.2031 32.5699 13.8223C31.9325 13.43 31.4236 12.8934 31.0434 12.2127C30.6744 11.5203 30.4899 10.7299 30.4899 9.84146C30.4899 8.92991 30.6744 8.13374 31.0434 7.45296C31.4236 6.76065 31.938 6.2241 32.5866 5.84333C33.2352 5.45101 33.9621 5.25485 34.7672 5.25485C35.5836 5.25485 36.3104 5.45101 36.9478 5.84333C37.5964 6.2241 38.1052 6.76065 38.4743 7.45296C38.8545 8.13374 39.0446 8.92414 39.0446 9.82416C39.0446 10.7242 38.8545 11.5203 38.4743 12.2127C38.1052 12.8934 37.5964 13.43 36.9478 13.8223C36.2992 14.2031 35.5668 14.3935 34.7505 14.3935ZM34.7505 12.3684C35.1307 12.3684 35.4661 12.2761 35.7569 12.0915C36.0588 11.9069 36.2937 11.6242 36.4614 11.2434C36.6403 10.8626 36.7298 10.3895 36.7298 9.82416C36.7298 9.25876 36.6403 8.79145 36.4614 8.42221C36.2937 8.04144 36.0588 7.75874 35.7569 7.57412C35.4661 7.37796 35.1363 7.27989 34.7672 7.27989C34.4094 7.27989 34.0795 7.37796 33.7776 7.57412C33.4756 7.75874 33.2352 8.04144 33.0563 8.42221C32.8886 8.79145 32.8047 9.25876 32.8047 9.82416C32.8047 10.3895 32.8886 10.8626 33.0563 11.2434C33.2352 11.6242 33.4701 11.9069 33.7608 12.0915C34.0627 12.2761 34.3926 12.3684 34.7505 12.3684Z"
+        fill="#102F35"
+      />
+      <path
+        d="M25.0381 14.3935C24.2777 14.3935 23.6068 14.2435 23.0253 13.9434C22.455 13.6434 22.0132 13.205 21.7001 12.628C21.387 12.0396 21.2305 11.3299 21.2305 10.4992H23.4949C23.4949 10.8684 23.5453 11.1915 23.6459 11.4684C23.7577 11.7338 23.9199 11.9415 24.1323 12.0915C24.356 12.23 24.6412 12.2992 24.9878 12.2992C25.3233 12.2992 25.5917 12.2357 25.793 12.1088C26.0054 11.9703 26.1564 11.78 26.2459 11.5376C26.3465 11.2838 26.3968 10.9838 26.3968 10.6376V2.07019H28.6613V10.6376C28.6613 11.8492 28.3314 12.778 27.6716 13.4242C27.023 14.0704 26.1452 14.3935 25.0381 14.3935Z"
+        fill="#102F35"
+      />
+    </svg>
   </span>
 </template>
 
diff --git a/tsconfig.frontend.json b/tsconfig.frontend.json
index 1af45865..a99547c4 100644
--- a/tsconfig.frontend.json
+++ b/tsconfig.frontend.json
@@ -2,6 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "allowJs": true,
+    "resolveJsonModule": true,
     "lib": ["ESNext", "DOM"],
     "outDir": "./dist/frontend"
   },

From f20dff5617d6616c74144c18502ec2c0f870d1bd Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 29 Jul 2026 13:44:40 +0300
Subject: [PATCH 15/39] increment: enhance AppLayout and AppFooter to
 conditionally display branding elements

---
 src/frontend/dashboard/dashboard-index.vue |  2 +-
 src/frontend/shared/app-footer.vue         | 12 ++++++++++--
 src/frontend/shared/app-layout.vue         |  3 ++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/frontend/dashboard/dashboard-index.vue b/src/frontend/dashboard/dashboard-index.vue
index 048cf3fa..b38e7df1 100644
--- a/src/frontend/dashboard/dashboard-index.vue
+++ b/src/frontend/dashboard/dashboard-index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppLayout title="Dashboard" :subtitle="greeting">
+  <AppLayout title="Dashboard" :subtitle="greeting" show-brand>
     <template #main>
       <StatTiles :stats="stats" :is-loading="isLoading" :error="error" />
 
diff --git a/src/frontend/shared/app-footer.vue b/src/frontend/shared/app-footer.vue
index 5dd8d872..eefbff54 100644
--- a/src/frontend/shared/app-footer.vue
+++ b/src/frontend/shared/app-footer.vue
@@ -2,13 +2,19 @@
   <footer>
     <div class="mx-auto max-w-7xl pb-10 pt-20">
       <div class="flex flex-col items-center justify-center">
-        <div class="flex items-center gap-x-2">
+        <a
+          href="https://startjourneys.io/"
+          target="_blank"
+          class="flex items-center gap-x-2"
+          :class="{ invisible: !showBrand }"
+          :tabindex="showBrand ? undefined : -1"
+        >
           <Icon name="studio-logo" />
           <span
             class="rounded-full border border-studio-forest px-2 py-px text-[10px] leading-4 text-studio-forest"
             >{{ version }}</span
           >
-        </div>
+        </a>
       </div>
     </div>
   </footer>
@@ -17,4 +23,6 @@
 <script setup lang="ts">
 import Icon from './icon.vue';
 import { version } from '../../../package.json';
+
+withDefaults(defineProps<{ showBrand?: boolean }>(), { showBrand: false });
 </script>
diff --git a/src/frontend/shared/app-layout.vue b/src/frontend/shared/app-layout.vue
index 1debed12..5be78fef 100644
--- a/src/frontend/shared/app-layout.vue
+++ b/src/frontend/shared/app-layout.vue
@@ -35,7 +35,7 @@
             <slot name="main" />
           </main>
           <footer>
-            <AppFooter />
+            <AppFooter :show-brand="showBrand" />
           </footer>
         </div>
       </div>
@@ -62,6 +62,7 @@ import AppFooter from './app-footer.vue';
 defineProps<{
   title?: string;
   subtitle?: string;
+  showBrand?: boolean;
 }>();
 
 const shared = useSharedStore();

From b226dd3d9e2be6b4071c96f614c6d2aa5e404ac3 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 29 Jul 2026 14:10:29 +0300
Subject: [PATCH 16/39] refactor: remove RingBlock component and update Ring
 component usage in dashboard and language settings

---
 src/frontend/dashboard/ring-block.story.vue   |  51 ---
 src/frontend/dashboard/ring-block.vue         | 121 -------
 src/frontend/dashboard/ring.story.vue         |  90 ++++-
 src/frontend/dashboard/ring.vue               | 321 ++++++++++++------
 .../components/language-table-row.vue         |   4 +-
 src/frontend/shared/colors.palette.ts         |   6 -
 src/frontend/shared/colors.usage.ts           |  24 +-
 7 files changed, 301 insertions(+), 316 deletions(-)
 delete mode 100644 src/frontend/dashboard/ring-block.story.vue
 delete mode 100644 src/frontend/dashboard/ring-block.vue

diff --git a/src/frontend/dashboard/ring-block.story.vue b/src/frontend/dashboard/ring-block.story.vue
deleted file mode 100644
index e35ef4b4..00000000
--- a/src/frontend/dashboard/ring-block.story.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <Story title="Ring block" group="dashboard" :layout="{ type: 'grid', width: 350 }">
-    <Variant title="Incomplete">
-      <div class="bg-white p-8">
-        <RingBlock
-          :progress="[
-            { name: 'Interface', done: 75, draft: 0, total: 100 },
-            { name: 'Content', done: 100, draft: 20, total: 100 },
-          ]"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="All done">
-      <div class="bg-white p-8">
-        <RingBlock
-          :progress="[
-            { name: 'Interface', done: 100, draft: 50, total: 100 },
-            { name: 'Content', done: 300, draft: 10, total: 300 },
-          ]"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Not started">
-      <div class="bg-white p-8">
-        <RingBlock
-          :progress="[
-            { name: 'Interface', done: 0, draft: 0, total: 100 },
-            { name: 'Content', done: 0, draft: 0, total: 300 },
-          ]"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="In progress">
-      <div class="bg-white p-8">
-        <RingBlock
-          :progress="[
-            { name: 'Interface', done: 50, draft: 10, total: 100 },
-            { name: 'Content', done: 150, draft: 0, total: 300 },
-          ]"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>
-
-<script setup lang="ts">
-import RingBlock from './ring-block.vue';
-</script>
diff --git a/src/frontend/dashboard/ring-block.vue b/src/frontend/dashboard/ring-block.vue
deleted file mode 100644
index fe0ab80c..00000000
--- a/src/frontend/dashboard/ring-block.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <div class="flex flex-col items-center text-gray-500">
-    <template v-if="hasCompleteRings">
-      <div class="relative mx-auto size-[42px] rounded-full border-[3px] border-teal-500">
-        <div class="absolute inset-0 flex items-center justify-center">
-          <Icon name="check-large" class="h-auto w-[14px] text-teal-500" />
-        </div>
-      </div>
-      <p class="mt-2 text-center text-xs font-medium leading-4">All done</p>
-    </template>
-    <template v-else>
-      <div class="flex justify-between gap-8">
-        <div v-for="item in ringData" :key="item.name" class="flex flex-col items-center">
-          <p
-            class="mb-2 text-center text-[10px] font-medium leading-[10.07px] tracking-[0em]"
-          >
-            {{ item.name }}
-          </p>
-          <div class="relative flex flex-col items-center justify-center">
-            <svg
-              v-if="item.label !== ''"
-              class="-rotate-90"
-              :height="circleWidth"
-              :width="circleWidth"
-            >
-              <circle
-                class="fill-transparent stroke-teal-500 stroke-[4px]"
-                stroke="currentColor"
-                :r="circleRadius"
-                :cx="center"
-                :cy="center"
-                :stroke-dasharray="`${item.tealSegment} ${circumference}`"
-                stroke-dashoffset="0"
-              />
-              <circle
-                class="fill-transparent stroke-blue-500 stroke-[4px]"
-                stroke="currentColor"
-                :r="circleRadius"
-                :cx="center"
-                :cy="center"
-                :stroke-dasharray="`${item.blueSegment} ${circumference}`"
-                :stroke-dashoffset="`-${item.tealSegment}`"
-              />
-              <circle
-                class="fill-transparent stroke-gray-200 stroke-[4px]"
-                stroke="currentColor"
-                :r="circleRadius"
-                :cx="center"
-                :cy="center"
-                :stroke-dasharray="`${item.unfilledSegment} ${circumference}`"
-                :stroke-dashoffset="`-${item.tealSegment + item.blueSegment}`"
-              />
-            </svg>
-            <div class="absolute inset-0 flex items-center justify-center">
-              <template v-if="item.donePercentage === 100 && item.draftPercentage === 0">
-                <Icon name="check-large" class="h-auto w-[13px] text-teal-500" />
-              </template>
-              <span
-                v-else
-                class="text-center text-[9px] font-normal leading-[9px] tracking-[0em] text-gray-800"
-              >
-                {{ item.label }}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import Icon from '../shared/icon.vue';
-import type { Progress } from '../../types';
-
-const props = defineProps<{ progress: Omit<Progress, 'lastUpdated'>[] }>();
-
-const hasCompleteRings = computed(() => {
-  return props.progress.every((stat) => stat.done === stat.total);
-});
-
-const circleWidth = 45;
-const center = circleWidth / 2;
-const circleRadius = circleWidth / 2 - 6;
-const circumference = 2 * Math.PI * circleRadius;
-
-function computeRingData(item: Omit<Progress, 'lastUpdated'>) {
-  const isOverdone = item.done + item.draft > item.total;
-  const workingDone = isOverdone
-    ? item.done - (item.done + item.draft - item.total)
-    : item.done;
-  const donePercentage =
-    item.total === 0 ? 0 : Math.round((workingDone / item.total) * 100);
-  const draftPercentage =
-    item.total === 0 ? 0 : Math.round((item.draft / item.total) * 100);
-  const unfilledPercentage = 100 - (donePercentage + draftPercentage);
-
-  let label = '';
-  const nr = donePercentage + draftPercentage;
-  if (!isNaN(nr)) {
-    label = nr > 100 ? '100%' : `${nr}%`;
-  }
-
-  const tealSegment = circumference * (donePercentage / 100);
-  const blueSegment = circumference * (draftPercentage / 100);
-  const unfilledSegment = circumference * (unfilledPercentage / 100);
-
-  return {
-    name: item.name,
-    label,
-    donePercentage,
-    draftPercentage,
-    tealSegment,
-    blueSegment,
-    unfilledSegment,
-  };
-}
-
-const ringData = computed(() => props.progress.map(computeRingData));
-</script>
diff --git a/src/frontend/dashboard/ring.story.vue b/src/frontend/dashboard/ring.story.vue
index 6457cb55..e80ddbc7 100644
--- a/src/frontend/dashboard/ring.story.vue
+++ b/src/frontend/dashboard/ring.story.vue
@@ -1,8 +1,10 @@
 <template>
-  <Story title="Ring" group="dashboard" :layout="{ type: 'grid', width: 200 }">
-    <Variant title="Started">
+  <Story title="Ring" group="dashboard" :layout="{ type: 'grid', width: 350 }">
+    <Variant title="Card: started">
       <div class="bg-white p-8">
         <Ring
+          size="card"
+          label-position="bottom"
           name="Deutsch"
           :done="50"
           :draft="20"
@@ -12,9 +14,11 @@
       </div>
     </Variant>
 
-    <Variant title="Not started">
+    <Variant title="Card: not started">
       <div class="bg-white p-8">
         <Ring
+          size="card"
+          label-position="bottom"
           name="Deutsch"
           :done="0"
           :draft="0"
@@ -24,9 +28,11 @@
       </div>
     </Variant>
 
-    <Variant title="Done">
+    <Variant title="Card: done">
       <div class="bg-white p-8">
         <Ring
+          size="card"
+          label-position="bottom"
           name="Deutsch"
           :done="100"
           :draft="0"
@@ -36,9 +42,11 @@
       </div>
     </Variant>
 
-    <Variant title="Done not QAed">
+    <Variant title="Card: done not QAed">
       <div class="bg-white p-8">
         <Ring
+          size="card"
+          label-position="bottom"
           name="Deutsch"
           :done="80"
           :draft="20"
@@ -48,9 +56,11 @@
       </div>
     </Variant>
 
-    <Variant title="Overdone">
+    <Variant title="Card: overdone">
       <div class="bg-white p-8">
         <Ring
+          size="card"
+          label-position="bottom"
           name="Deutsch"
           :done="100"
           :draft="50"
@@ -60,15 +70,25 @@
       </div>
     </Variant>
 
-    <Variant title="Error: Total is 0">
+    <Variant title="Card: total is 0">
       <div class="bg-white p-8">
-        <Ring name="Deutsch" :done="0" :draft="0" :total="0" last-updated="2025-07-16" />
+        <Ring
+          size="card"
+          label-position="bottom"
+          name="Deutsch"
+          :done="0"
+          :draft="0"
+          :total="0"
+          last-updated="2025-07-16"
+        />
       </div>
     </Variant>
 
-    <Variant title="Error: data is garbage">
+    <Variant title="Card: garbage data">
       <div class="bg-white p-8">
         <Ring
+          size="card"
+          label-position="bottom"
           name="Deutsch"
           :done="NaN"
           :draft="50"
@@ -77,6 +97,58 @@
         />
       </div>
     </Variant>
+
+    <Variant title="Compact: incomplete">
+      <div class="bg-white p-8">
+        <Ring
+          size="compact"
+          label-position="top"
+          :progress="[
+            { name: 'Interface', done: 75, draft: 0, total: 100 },
+            { name: 'Content', done: 100, draft: 20, total: 100 },
+          ]"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Compact: all done">
+      <div class="bg-white p-8">
+        <Ring
+          size="compact"
+          label-position="top"
+          :progress="[
+            { name: 'Interface', done: 100, draft: 50, total: 100 },
+            { name: 'Content', done: 300, draft: 10, total: 300 },
+          ]"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Compact: not started">
+      <div class="bg-white p-8">
+        <Ring
+          size="compact"
+          label-position="top"
+          :progress="[
+            { name: 'Interface', done: 0, draft: 0, total: 100 },
+            { name: 'Content', done: 0, draft: 0, total: 300 },
+          ]"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Compact: in progress">
+      <div class="bg-white p-8">
+        <Ring
+          size="compact"
+          label-position="top"
+          :progress="[
+            { name: 'Interface', done: 50, draft: 10, total: 100 },
+            { name: 'Content', done: 150, draft: 0, total: 300 },
+          ]"
+        />
+      </div>
+    </Variant>
   </Story>
 </template>
 
diff --git a/src/frontend/dashboard/ring.vue b/src/frontend/dashboard/ring.vue
index 517a1949..70554070 100644
--- a/src/frontend/dashboard/ring.vue
+++ b/src/frontend/dashboard/ring.vue
@@ -1,125 +1,226 @@
 <template>
-  <div>
-    <div
-      v-if="isComplete"
-      class="mx-auto flex items-center justify-center rounded-full bg-studio-lime"
-      :style="{ width: `${circleWidth}px`, height: `${circleWidth}px` }"
-    >
-      <Check class="h-auto w-6 text-studio-forest" />
-    </div>
-    <div v-else class="relative flex flex-col items-center justify-center">
-      <svg class="-rotate-90" :height="circleWidth" :width="circleWidth">
-        <template v-if="label !== ''">
-          <!-- Gray 800 segment -->
-          <circle
-            class="fill-transparent stroke-gray-800 stroke-[6px]"
-            stroke="currentColor"
-            :r="circleRadius"
-            :cx="center"
-            :cy="center"
-            :stroke-dasharray="`${greenSegment} ${circumference}`"
-            stroke-dashoffset="0"
-          />
-          <!-- Gray 400 segment -->
-          <circle
-            class="fill-transparent stroke-gray-400 stroke-[6px]"
-            stroke="currentColor"
-            :r="circleRadius"
-            :cx="center"
-            :cy="center"
-            :stroke-dasharray="`${blueSegment} ${circumference}`"
-            :stroke-dashoffset="`-${greenSegment}`"
-          />
-          <!-- Gray 50 segment -->
-          <circle
-            class="fill-transparent stroke-gray-50 stroke-[6px]"
-            stroke="currentColor"
-            :r="circleRadius"
-            :cx="center"
-            :cy="center"
-            :stroke-dasharray="`${graySegment} ${circumference}`"
-            :stroke-dashoffset="`-${greenSegment + blueSegment}`"
-          />
-        </template>
-        <!-- No progress data: plain empty track -->
-        <circle
-          v-else
-          class="fill-transparent stroke-gray-50 stroke-[6px]"
-          stroke="currentColor"
-          :r="circleRadius"
-          :cx="center"
-          :cy="center"
-        />
-      </svg>
-      <div class="absolute inset-0 flex items-center justify-center">
-        <span class="text-sm font-normal leading-none text-gray-800">{{ label }}</span>
+  <div :class="isArrayMode ? 'flex flex-col items-center text-gray-500' : undefined">
+    <template v-if="showAggregateComplete">
+      <div
+        class="mx-auto flex items-center justify-center rounded-full bg-studio-lime"
+        :style="{ width: `${preset.circleWidth}px`, height: `${preset.circleWidth}px` }"
+      >
+        <Check :class="[preset.checkClass, 'text-studio-forest']" />
+      </div>
+      <p class="mt-2 text-center" :class="preset.allDoneClass">All done</p>
+    </template>
+    <div v-else :class="isArrayMode ? 'flex justify-between gap-8' : undefined">
+      <div
+        v-for="item in displayItems"
+        :key="item.name"
+        class="flex flex-col items-center"
+      >
+        <p
+          v-if="labelPosition === 'top' && item.name"
+          class="mb-2 text-center"
+          :class="preset.nameClass"
+        >
+          {{ item.name }}
+        </p>
+        <div
+          v-if="item.data.isComplete"
+          class="mx-auto flex items-center justify-center rounded-full bg-studio-lime"
+          :style="{ width: `${geometry.circleWidth}px`, height: `${geometry.circleWidth}px` }"
+        >
+          <Check :class="[preset.checkClass, 'text-studio-forest']" />
+        </div>
+        <div v-else class="relative flex flex-col items-center justify-center">
+          <svg class="-rotate-90" :height="geometry.circleWidth" :width="geometry.circleWidth">
+            <template v-if="item.data.label !== ''">
+              <circle
+                :class="['fill-transparent stroke-gray-800', preset.strokeClass]"
+                stroke="currentColor"
+                :r="geometry.circleRadius"
+                :cx="geometry.center"
+                :cy="geometry.center"
+                :stroke-dasharray="`${item.data.doneSegment} ${geometry.circumference}`"
+                stroke-dashoffset="0"
+              />
+              <circle
+                :class="['fill-transparent stroke-gray-400', preset.strokeClass]"
+                stroke="currentColor"
+                :r="geometry.circleRadius"
+                :cx="geometry.center"
+                :cy="geometry.center"
+                :stroke-dasharray="`${item.data.draftSegment} ${geometry.circumference}`"
+                :stroke-dashoffset="`-${item.data.doneSegment}`"
+              />
+              <circle
+                :class="['fill-transparent stroke-gray-50', preset.strokeClass]"
+                stroke="currentColor"
+                :r="geometry.circleRadius"
+                :cx="geometry.center"
+                :cy="geometry.center"
+                :stroke-dasharray="`${item.data.unfilledSegment} ${geometry.circumference}`"
+                :stroke-dashoffset="`-${item.data.doneSegment + item.data.draftSegment}`"
+              />
+            </template>
+            <circle
+              v-else
+              :class="['fill-transparent stroke-gray-50', preset.strokeClass]"
+              stroke="currentColor"
+              :r="geometry.circleRadius"
+              :cx="geometry.center"
+              :cy="geometry.center"
+            />
+          </svg>
+          <div class="absolute inset-0 flex items-center justify-center">
+            <span class="text-center" :class="preset.centerClass">{{ item.data.label }}</span>
+          </div>
+        </div>
+        <p
+          v-if="labelPosition === 'bottom' && item.name"
+          class="mt-2 text-center"
+          :class="preset.nameClass"
+        >
+          {{ item.name }}
+        </p>
       </div>
     </div>
-    <p class="mt-2 text-center text-sm font-medium leading-4 text-gray-500">
-      {{ name }}
-    </p>
   </div>
 </template>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 import { Check } from '@lucide/vue';
-import { Progress } from '../../types';
-
-const props = defineProps<Progress>();
-
-const label = computed(() => {
-  const nr = donePercentage.value + draftPercentage.value;
-  if (isNaN(nr)) {
-    return '';
-  }
-
-  if (nr > 100) {
-    return '100%';
+import type { Progress } from '../../types';
+
+type RingSize = 'compact' | 'card';
+
+type RingProgressData = {
+  donePercentage: number;
+  draftPercentage: number;
+  label: string;
+  doneSegment: number;
+  draftSegment: number;
+  unfilledSegment: number;
+  isComplete: boolean;
+};
+
+const RING_SIZES = {
+  compact: {
+    circleWidth: 45,
+    strokeWidth: 4,
+    nameClass: 'text-[10px] font-medium leading-[10px]',
+    centerClass: 'text-[9px] font-normal leading-[9px] text-gray-800',
+    checkClass: 'h-auto w-[13px]',
+    allDoneClass: 'text-xs font-medium leading-4',
+    strokeClass: 'stroke-[4px]',
+  },
+  card: {
+    circleWidth: 66,
+    strokeWidth: 6,
+    nameClass: 'text-sm font-medium leading-4 text-gray-500',
+    centerClass: 'text-sm font-normal leading-none text-gray-800',
+    checkClass: 'h-auto w-6',
+    allDoneClass: 'text-xs font-medium leading-4',
+    strokeClass: 'stroke-[6px]',
+  },
+} as const;
+
+function getRingGeometry(size: RingSize) {
+  const { circleWidth, strokeWidth } = RING_SIZES[size];
+  const center = circleWidth / 2;
+  const circleRadius = circleWidth / 2 - strokeWidth;
+  const circumference = 2 * Math.PI * circleRadius;
+
+  return { circleWidth, strokeWidth, center, circleRadius, circumference };
+}
+
+function computeRingProgress(
+  item: { done: number; draft: number; total: number },
+  circumference: number,
+): RingProgressData {
+  const isOverdone = item.done + item.draft > item.total;
+  const workingDone = isOverdone
+    ? item.done - (item.done + item.draft - item.total)
+    : item.done;
+  const donePercentage =
+    item.total === 0 ? 0 : Math.round((workingDone / item.total) * 100);
+  const draftPercentage =
+    item.total === 0 ? 0 : Math.round((item.draft / item.total) * 100);
+  const unfilledPercentage = 100 - (donePercentage + draftPercentage);
+
+  let label = '';
+  const nr = donePercentage + draftPercentage;
+  if (!isNaN(nr)) {
+    label = nr > 100 ? '100%' : `${nr}%`;
   }
 
-  return `${nr}%`;
-});
-
-const isOverdone = computed(() => {
-  return props.done + props.draft > props.total;
-});
-
-const workingDone = computed(() => {
-  if (!isOverdone.value) return props.done;
-  return props.done - (props.done + props.draft - props.total);
-});
-
-const donePercentage = computed(() => {
-  return Math.round((workingDone.value / props.total) * 100);
+  const doneSegment = circumference * (donePercentage / 100);
+  const draftSegment = circumference * (draftPercentage / 100);
+  const unfilledSegment = circumference * (unfilledPercentage / 100);
+  const isComplete = donePercentage === 100 && draftPercentage === 0;
+
+  return {
+    donePercentage,
+    draftPercentage,
+    label,
+    doneSegment,
+    draftSegment,
+    unfilledSegment,
+    isComplete,
+  };
+}
+
+const props = withDefaults(
+  defineProps<{
+    size?: RingSize;
+    labelPosition?: 'top' | 'bottom';
+    progress?: Omit<Progress, 'lastUpdated'>[];
+    name?: string;
+    done?: number;
+    draft?: number;
+    total?: number;
+    lastUpdated?: string;
+  }>(),
+  {
+    size: 'card',
+    labelPosition: 'bottom',
+    progress: undefined,
+    name: undefined,
+    done: undefined,
+    draft: undefined,
+    total: undefined,
+    lastUpdated: undefined,
+  },
+);
+
+const preset = computed(() => RING_SIZES[props.size]);
+const geometry = computed(() => getRingGeometry(props.size));
+
+const isArrayMode = computed(() => props.progress !== undefined);
+
+const showAggregateComplete = computed(() => {
+  if (!props.progress?.length) return false;
+  return props.progress.every((stat) => stat.done === stat.total);
 });
 
-const isComplete = computed(() => donePercentage.value === 100);
-
-const draftPercentage = computed(() => {
-  return Math.round((props.draft / props.total) * 100);
-});
-
-const grayPercentage = computed(() => {
-  return 100 - (donePercentage.value + draftPercentage.value);
-});
-
-const circleWidth = 66;
-const center = circleWidth / 2;
-
-// circleRadius = (width / 2) - (strokeWidth)
-const circleRadius = circleWidth / 2 - 6;
-
-const circumference = 2 * Math.PI * circleRadius;
-
-const greenSegment = computed(() => {
-  return circumference * (donePercentage.value / 100);
-});
-
-const blueSegment = computed(() => {
-  return circumference * (draftPercentage.value / 100);
-});
+const displayItems = computed(() => {
+  if (props.progress !== undefined) {
+    return props.progress.map((item) => ({
+      name: item.name,
+      data: computeRingProgress(item, geometry.value.circumference),
+    }));
+  }
 
-const graySegment = computed(() => {
-  return circumference * (grayPercentage.value / 100);
+  return [
+    {
+      name: props.name ?? '',
+      data: computeRingProgress(
+        {
+          done: props.done ?? 0,
+          draft: props.draft ?? 0,
+          total: props.total ?? 0,
+        },
+        geometry.value.circumference,
+      ),
+    },
+  ];
 });
 </script>
diff --git a/src/frontend/settings/languages/components/language-table-row.vue b/src/frontend/settings/languages/components/language-table-row.vue
index 7ebefe12..3dcda645 100644
--- a/src/frontend/settings/languages/components/language-table-row.vue
+++ b/src/frontend/settings/languages/components/language-table-row.vue
@@ -14,7 +14,7 @@
       </div>
     </td>
     <td class="whitespace-nowrap px-6 py-4 align-top text-sm">
-      <RingBlock :progress="rowProgress" />
+      <Ring size="compact" label-position="top" :progress="rowProgress" />
     </td>
     <td class="max-w-[400px] px-6 py-4 align-top text-sm text-gray-800">
       <div v-if="item.teamMembers?.length" class="flex min-w-0 flex-col gap-1">
@@ -76,7 +76,7 @@
 import { computed } from 'vue';
 import { BookOpen, Trash2, Users } from '@lucide/vue';
 import MemberRow from './member-row.vue';
-import RingBlock from '../../../dashboard/ring-block.vue';
+import Ring from '../../../dashboard/ring.vue';
 import LangStrip from './language-strip.vue';
 import type { LanguageTableItem } from '../../../../types';
 
diff --git a/src/frontend/shared/colors.palette.ts b/src/frontend/shared/colors.palette.ts
index 70f67e69..b662544c 100644
--- a/src/frontend/shared/colors.palette.ts
+++ b/src/frontend/shared/colors.palette.ts
@@ -146,12 +146,6 @@ export const colorSections: ColorSection[] = [
       { name: 'orange-700', class: 'bg-orange-700' },
     ],
   },
-  {
-    title: 'Teal',
-    colors: [
-      { name: 'teal-500', class: 'bg-teal-500' },
-    ],
-  },
   {
     title: 'Violet',
     colors: [
diff --git a/src/frontend/shared/colors.usage.ts b/src/frontend/shared/colors.usage.ts
index 21de5a83..0380e077 100644
--- a/src/frontend/shared/colors.usage.ts
+++ b/src/frontend/shared/colors.usage.ts
@@ -71,9 +71,8 @@ export const colorUsage: Record<string, ColorUsage> = {
       'index.css',
       'shared/pill-button.vue',
     ] },
-  'blue-50': { count: 67, files: [
+  'blue-50': { count: 66, files: [
       'audience/audience-index.vue',
-      'dashboard/ring-block.vue',
       'fields/select-field.vue',
       'index.css',
       'invitation/invitation-index-item.vue',
@@ -104,9 +103,8 @@ export const colorUsage: Record<string, ColorUsage> = {
       'ui/components/ui-string-item.vue',
       'ui/ui-page.vue',
     ] },
-  'blue-500': { count: 38, files: [
+  'blue-500': { count: 37, files: [
       'audience/audience-index.vue',
-      'dashboard/ring-block.vue',
       'fields/select-field.vue',
       'index.css',
       'invitation/invitations-index.vue',
@@ -242,9 +240,8 @@ export const colorUsage: Record<string, ColorUsage> = {
       'streams/components/stream-item.vue',
       'team/components/user-row.vue',
     ] },
-  'gray-200': { count: 97, files: [
+  'gray-200': { count: 96, files: [
       'audience/audience-index.vue',
-      'dashboard/ring-block.vue',
       'dashboard/stat-tile.vue',
       'fields/attachments/file-upload.vue',
       'fields/attachments/video-meta.vue',
@@ -365,7 +362,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
-      'dashboard/ring-block.vue',
       'dashboard/ring.vue',
       'dashboard/stat-tile.vue',
       'fields/attachments/attachment-field.vue',
@@ -434,7 +430,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
-      'dashboard/ring-block.vue',
       'dashboard/ring.vue',
       'dashboard/stat-tile.vue',
       'fields/attachments/attachment-field.vue',
@@ -563,7 +558,6 @@ export const colorUsage: Record<string, ColorUsage> = {
   'gray-800': { count: 26, files: [
       'dashboard/action-card.vue',
       'dashboard/dashboard-index.vue',
-      'dashboard/ring-block.vue',
       'dashboard/ring.vue',
       'fields/section-panel-field.vue',
       'index.css',
@@ -771,9 +765,10 @@ export const colorUsage: Record<string, ColorUsage> = {
       'streams/components/stream-item.vue',
     ] },
   'studio-dark': { count: 0, files: [] },
-  'studio-forest': { count: 6, files: [
+  'studio-forest': { count: 9, files: [
       'dashboard/language-block.vue',
       'dashboard/ring.vue',
+      'shared/app-footer.vue',
       'shared/index-tab-button.vue',
       'shared/studio-button.vue',
     ] },
@@ -783,7 +778,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'stories/components/resource-empty-state.vue',
       'stories/components/resource-picker.vue',
     ] },
-  'studio-lime': { count: 5, files: [
+  'studio-lime': { count: 6, files: [
       'dashboard/language-block.vue',
       'dashboard/ring.vue',
       'dashboard/stat-tile.vue',
@@ -793,11 +788,7 @@ export const colorUsage: Record<string, ColorUsage> = {
   'studio-yellow': { count: 1, files: [
       'dashboard/action-card.vue',
     ] },
-  'teal-500': { count: 4, files: [
-      'dashboard/ring-block.vue',
-    ] },
-  'transparent': { count: 26, files: [
-      'dashboard/ring-block.vue',
+  'transparent': { count: 23, files: [
       'dashboard/ring.vue',
       'fields/attachments/video-progress.vue',
       'fields/boolean-field.vue',
@@ -829,7 +820,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'audience/audience-index.vue',
       'dashboard/action-card.vue',
       'dashboard/language-block.vue',
-      'dashboard/ring-block.story.vue',
       'dashboard/ring.story.vue',
       'dashboard/stat-tile.vue',
       'fields/attachments/attachment-field.vue',

From 2d90c717c47717efe3398674c5a7534df885f85b Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 29 Jul 2026 14:36:31 +0300
Subject: [PATCH 17/39] style: update button variant and tint color in
 invitation components

---
 src/frontend/invitation/invitations-edit.vue  | 2 +-
 src/frontend/invitation/invitations-index.vue | 2 +-
 src/frontend/shared/studio-button.vue         | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/frontend/invitation/invitations-edit.vue b/src/frontend/invitation/invitations-edit.vue
index cdda2c70..086d163f 100644
--- a/src/frontend/invitation/invitations-edit.vue
+++ b/src/frontend/invitation/invitations-edit.vue
@@ -8,7 +8,7 @@
           label: 'Published',
           widget: 'boolean',
           default: false,
-          tintColor: 'green-400',
+          tintColor: 'studio-forest',
           labelOrder: 'start',
         }"
         :is-nested="true"
diff --git a/src/frontend/invitation/invitations-index.vue b/src/frontend/invitation/invitations-index.vue
index 39db1559..c3d4619d 100644
--- a/src/frontend/invitation/invitations-index.vue
+++ b/src/frontend/invitation/invitations-index.vue
@@ -1,7 +1,7 @@
 <template>
   <AppLayout title="Invitations" subtitle="Manage Invitations">
     <template #actions>
-      <StudioButton label="Create Invitation" variant="secondary" @click="addInvitation">
+      <StudioButton label="Create Invitation" variant="primary" @click="addInvitation">
         <Plus class="size-4" aria-hidden="true" />
       </StudioButton>
     </template>
diff --git a/src/frontend/shared/studio-button.vue b/src/frontend/shared/studio-button.vue
index 8854f9f2..e39cc079 100644
--- a/src/frontend/shared/studio-button.vue
+++ b/src/frontend/shared/studio-button.vue
@@ -87,7 +87,8 @@ const shapeClasses = computed(() =>
 );
 
 const variantClassMap: Record<StudioButtonVariant, string> = {
-  primary: 'bg-studio-forest text-studio-lime enabled:hover:bg-studio-green/90',
+  primary:
+    'bg-studio-forest text-studio-lime enabled:hover:bg-studio-green enabled:hover:text-studio-forest',
   outline:
     'border border-studio-green bg-transparent text-studio-green enabled:hover:bg-studio-green/5',
   secondary:

From eb33542a9b7d59c062da20ed68550042aef764f6 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 29 Jul 2026 15:39:03 +0300
Subject: [PATCH 18/39] style: update button variants to primary and adjust tab
 button styles for consistency

---
 src/frontend/resources/resources-edit.vue     |   2 +-
 src/frontend/shared/index-filter.vue          |   5 +-
 src/frontend/shared/tab-button.story.vue      | 220 ++++++++++++++++++
 src/frontend/shared/tab-button.vue            |  10 +-
 .../stories/components/resource-picker.vue    |  13 +-
 .../stories/components/workflow-actions.vue   |   2 +-
 src/frontend/stories/story-create.vue         |   2 +-
 src/frontend/stories/story-edit.vue           |   2 +-
 8 files changed, 240 insertions(+), 16 deletions(-)
 create mode 100644 src/frontend/shared/tab-button.story.vue

diff --git a/src/frontend/resources/resources-edit.vue b/src/frontend/resources/resources-edit.vue
index 4a3161ca..b25107ca 100644
--- a/src/frontend/resources/resources-edit.vue
+++ b/src/frontend/resources/resources-edit.vue
@@ -6,7 +6,7 @@
             v-if="!resource.id"
             label="Create Resource"
             :disabled="isSaving || !canCreate"
-            variant="secondary"
+            variant="primary"
             @click="save"
           />
           <StudioButton
diff --git a/src/frontend/shared/index-filter.vue b/src/frontend/shared/index-filter.vue
index 14240bd9..f7cd2316 100644
--- a/src/frontend/shared/index-filter.vue
+++ b/src/frontend/shared/index-filter.vue
@@ -11,7 +11,10 @@
         {{ tab.label }}
         <span
           v-if="tab.count"
-          class="inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700"
+          class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+          :class="
+            tab.current ? 'bg-studio-green text-studio-forest' : 'bg-gray-100 text-gray-500'
+          "
         >
           {{ tab.count }}
         </span>
diff --git a/src/frontend/shared/tab-button.story.vue b/src/frontend/shared/tab-button.story.vue
new file mode 100644
index 00000000..26fd3784
--- /dev/null
+++ b/src/frontend/shared/tab-button.story.vue
@@ -0,0 +1,220 @@
+<template>
+  <Story title="Tab Button" group="shared" :layout="{ type: 'grid', width: 420 }">
+    <Variant title="Label only">
+      <div class="flex flex-wrap gap-1 bg-white p-8">
+        <TabButton
+          v-for="tab in labelTabs"
+          :key="tab"
+          :is-active="tab === activeLabelTab"
+          @click="activeLabelTab = tab"
+        >
+          {{ tab }}
+        </TabButton>
+      </div>
+    </Variant>
+
+    <Variant title="With count badge (index-filter usage)">
+      <div class="flex flex-wrap gap-1 bg-white p-8">
+        <TabButton
+          v-for="tab in countTabs"
+          :key="tab.label"
+          :is-active="tab.label === activeCountTab"
+          @click="activeCountTab = tab.label"
+        >
+          {{ tab.label }}
+          <span
+            class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+            :class="
+              tab.label === activeCountTab
+                ? 'bg-studio-green text-studio-forest'
+                : 'bg-gray-100 text-gray-500'
+            "
+          >
+            {{ tab.count }}
+          </span>
+        </TabButton>
+      </div>
+    </Variant>
+
+    <Variant title="With sort icon (ui-toolbar / story-gallery usage)">
+      <div class="flex flex-wrap gap-1 bg-white p-8">
+        <TabButton
+          v-for="tab in sortTabs"
+          :key="tab.label"
+          :label="tab.label"
+          :is-active="sortField === tab.field"
+          @click="toggleSort(tab.field)"
+        >
+          <ArrowDownWideNarrow
+            v-if="sortField === tab.field && sortDescending"
+            class="size-4"
+            aria-hidden="true"
+          />
+          <ArrowUpWideNarrow v-else class="size-4" aria-hidden="true" />
+        </TabButton>
+      </div>
+    </Variant>
+
+    <Variant title="Section nav with icons (tab-navigation usage)">
+      <div class="flex flex-wrap gap-1 bg-white p-8">
+        <TabButton
+          v-for="tab in sectionTabs"
+          :key="tab.label"
+          :label="tab.label"
+          :is-active="tab.label === activeSectionTab"
+          @click="activeSectionTab = tab.label"
+        >
+          <component :is="tab.icon" class="size-4" aria-hidden="true" />
+        </TabButton>
+      </div>
+    </Variant>
+
+    <Variant title="With errors">
+      <div class="flex flex-wrap gap-1 bg-white p-8">
+        <TabButton
+          v-for="tab in errorTabs"
+          :key="tab.label"
+          :label="tab.label"
+          :is-active="tab.label === activeErrorTab"
+          :has-error="tab.hasError"
+          @click="activeErrorTab = tab.label"
+        >
+          <component :is="tab.icon" class="size-4" aria-hidden="true" />
+        </TabButton>
+      </div>
+    </Variant>
+
+    <Variant title="Non-interactive display (translation-index usage)">
+      <div class="flex flex-wrap gap-1 bg-white p-8">
+        <TabButton :label="sourceLanguage" :is-active="false" :is-action="false">
+          <Eye aria-hidden="true" class="size-4" />
+        </TabButton>
+      </div>
+    </Variant>
+
+    <Variant title="Toggle with aria-pressed (translation-index usage)">
+      <div class="flex flex-wrap gap-1 bg-white p-8">
+        <TabButton
+          :label="targetLanguage"
+          :is-active="showSourceColumn"
+          :aria-pressed="showSourceColumn"
+          @click="showSourceColumn = !showSourceColumn"
+        >
+          <Eye v-if="showSourceColumn" aria-hidden="true" class="size-4" />
+          <EyeOff v-else aria-hidden="true" class="size-4" />
+        </TabButton>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="flex flex-wrap gap-1 bg-white p-8">
+        <TabButton label="Active, disabled" :is-active="true" :disabled="true" />
+        <TabButton label="Inactive, disabled" :is-active="false" :disabled="true" />
+      </div>
+    </Variant>
+
+    <Variant title="All states">
+      <div class="flex flex-wrap gap-2">
+        <TabButton label="Inactive">
+          <Folder class="size-4" aria-hidden="true" />
+        </TabButton>
+        <TabButton label="Active" :is-active="true">
+          <Folder class="size-4" aria-hidden="true" />
+        </TabButton>
+        <TabButton label="Inactive, error" :has-error="true">
+          <Folder class="size-4" aria-hidden="true" />
+        </TabButton>
+        <TabButton label="Active, error" :is-active="true" :has-error="true">
+          <Folder class="size-4" aria-hidden="true" />
+        </TabButton>
+        <TabButton label="Disabled" :disabled="true">
+          <Folder class="size-4" aria-hidden="true" />
+        </TabButton>
+        <TabButton :is-action="false" label="Non-interactive">
+          <Folder class="size-4" aria-hidden="true" />
+        </TabButton>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  ArrowDownWideNarrow,
+  ArrowUpWideNarrow,
+  BookOpen,
+  Eye,
+  EyeOff,
+  Folder,
+  LayoutList,
+} from '@lucide/vue';
+import TabButton from './tab-button.vue';
+
+const labelTabs = ['All', 'Published', 'Drafts'];
+const activeLabelTab = ref('All');
+
+const countTabs = [
+  { label: 'All', count: 156 },
+  { label: 'Published', count: 98 },
+  { label: 'Drafts', count: 58 },
+];
+const activeCountTab = ref('All');
+
+const sortTabs: { label: string; field: 'lastEdited' | 'status' }[] = [
+  { label: 'Last Edited', field: 'lastEdited' },
+  { label: 'Status', field: 'status' },
+];
+const sortField = ref<'lastEdited' | 'status'>('lastEdited');
+const sortDescending = ref(true);
+const toggleSort = (field: 'lastEdited' | 'status') => {
+  if (sortField.value === field) {
+    sortDescending.value = !sortDescending.value;
+    return;
+  }
+  sortField.value = field;
+  sortDescending.value = true;
+};
+
+const sectionTabs = [
+  { label: 'Details', icon: BookOpen },
+  { label: 'Sections', icon: LayoutList },
+  { label: 'Resources', icon: Folder },
+];
+const activeSectionTab = ref('Sections');
+
+const errorTabs = [
+  { label: 'Details', icon: BookOpen, hasError: true },
+  { label: 'Sections', icon: LayoutList, hasError: true },
+  { label: 'Resources', icon: Folder, hasError: false },
+];
+const activeErrorTab = ref('Details');
+
+const sourceLanguage = 'English';
+const targetLanguage = 'French';
+const showSourceColumn = ref(true);
+</script>
+
+<docs lang="md">
+# Tab Button
+
+Shared pill-shaped button used to build tab-like controls: filter tabs
+(`index-filter.vue`), editor sidebar sections (`tab-navigation.vue`),
+toolbar sort toggles (`ui-toolbar.vue`, `story-gallery.vue`), and
+translation column visibility toggles (`translation-index.vue`).
+
+## Props
+
+- `label` — optional text rendered after the default slot; usages that need
+  the label inside slot content (e.g. filter tab counts) omit this and put
+  text directly in the slot instead.
+- `isActive` — highlights the button as the current selection.
+- `hasError` — shows an error indicator dot and error coloring.
+- `isAction` — `true` (default) renders a clickable `<button>`; `false`
+  renders a non-interactive `<span>`.
+- `disabled` — disables the button when `isAction` is `true`.
+
+## Events
+
+- `click` — emitted when an enabled, actionable button is clicked.
+</docs>
diff --git a/src/frontend/shared/tab-button.vue b/src/frontend/shared/tab-button.vue
index d9adb3aa..0496e10a 100644
--- a/src/frontend/shared/tab-button.vue
+++ b/src/frontend/shared/tab-button.vue
@@ -3,7 +3,7 @@
     :is="isAction ? 'button' : 'span'"
     :type="isAction ? 'button' : undefined"
     :disabled="isAction && disabled ? true : undefined"
-    class="font-dmsans box-border inline-flex flex-none items-center gap-2 rounded-full border-b border-white px-4 py-3 text-sm font-medium leading-[19px] tracking-[-0.15px] [&_svg]:size-4"
+    class="font-dmsans box-border inline-flex flex-none items-center gap-2 rounded-full border px-4 py-3 text-sm font-medium leading-[19px] tracking-[-0.15px] [&_svg]:size-4"
     :class="[
       stateClasses,
       isAction
@@ -55,13 +55,13 @@ const onClick = () => {
 const stateClasses = computed(() => {
   if (props.isActive) {
     if (props.hasError) {
-      return 'border border-error bg-[#F3F4F6] text-error [&_svg]:text-error';
+      return 'border-error bg-[#F3F4F6] text-error [&_svg]:text-error';
     }
-    return 'bg-[#F3F4F6] text-[#182E33] [&_svg]:text-[#111827]';
+    return 'border-studio-forest bg-studio-lime font-semibold text-studio-forest [&_svg]:text-studio-forest';
   }
   if (props.hasError) {
-    return 'bg-transparent text-error [&_svg]:text-error';
+    return 'border-transparent bg-transparent text-error [&_svg]:text-error';
   }
-  return 'bg-transparent text-[#6A7282] [&_svg]:text-[#6A7282]';
+  return 'border-gray-200 bg-white text-studio-forest [&_svg]:text-studio-forest';
 });
 </script>
diff --git a/src/frontend/stories/components/resource-picker.vue b/src/frontend/stories/components/resource-picker.vue
index a419b779..cebda0a8 100644
--- a/src/frontend/stories/components/resource-picker.vue
+++ b/src/frontend/stories/components/resource-picker.vue
@@ -16,15 +16,15 @@
           @input="showSearch = true"
         />
       </div>
-      <button
+      <StudioButton
         v-if="allowCreate"
-        type="button"
-        class="border-studio-green text-studio-green hover:bg-studio-green/10 inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-xl border px-4 py-2.5 text-sm font-medium transition-colors"
+        class="shrink-0"
+        label="Create New Resource"
+        variant="secondary"
         @click="emit('create')"
       >
-        <Plus class="size-4" />
-        Create New Resource
-      </button>
+        <Plus class="size-4" aria-hidden="true" />
+      </StudioButton>
     </div>
 
     <div
@@ -97,6 +97,7 @@ import { computed, ref } from 'vue';
 import { Plus, Search, Tag, X } from '@lucide/vue';
 import ResourceThumbnail from './resource-thumbnail.vue';
 import ResourceTypeBadge from './resource-type-badge.vue';
+import StudioButton from '../../shared/studio-button.vue';
 import { compareResourcesByRecentlyEdited } from './resource-utils';
 import type { ResourceItem } from '../../../types';
 
diff --git a/src/frontend/stories/components/workflow-actions.vue b/src/frontend/stories/components/workflow-actions.vue
index 9f47ce9c..445b4619 100644
--- a/src/frontend/stories/components/workflow-actions.vue
+++ b/src/frontend/stories/components/workflow-actions.vue
@@ -15,7 +15,7 @@
   <StudioButton
     v-if="showPublishButton"
     :label="publishLabel"
-    variant="green"
+    variant="primary"
     :disabled="widgets.isDirty"
     @click="emit('publish')"
   />
diff --git a/src/frontend/stories/story-create.vue b/src/frontend/stories/story-create.vue
index 1e76c952..e9e1e279 100644
--- a/src/frontend/stories/story-create.vue
+++ b/src/frontend/stories/story-create.vue
@@ -3,7 +3,7 @@
     <template #actions>
       <StudioButton
         label="Create Story"
-        variant="secondary"
+        variant="primary"
         :disabled="isSaving"
         @click="createStory"
       />
diff --git a/src/frontend/stories/story-edit.vue b/src/frontend/stories/story-edit.vue
index cc7aaff0..3a022cd2 100644
--- a/src/frontend/stories/story-edit.vue
+++ b/src/frontend/stories/story-edit.vue
@@ -12,7 +12,7 @@
       </StudioButton>
       <StudioButton
         label="Save Changes"
-        variant="secondary"
+        variant="primary"
         :disabled="isSaving"
         @click="saveStory"
       />

From 2216fdf4059559e24026f65eb3e63132e4556ba3 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 30 Jul 2026 07:32:24 +0300
Subject: [PATCH 19/39] increment: update streams

---
 docs/qa/changelog-qa.story.md         | 115 ++++++++++
 package.json                          |   1 +
 scripts/generate-qa-changelog.mjs     | 298 ++++++++++++++++++++++++++
 src/frontend/streams/stream-index.vue |  19 +-
 4 files changed, 426 insertions(+), 7 deletions(-)
 create mode 100644 docs/qa/changelog-qa.story.md
 create mode 100644 scripts/generate-qa-changelog.mjs

diff --git a/docs/qa/changelog-qa.story.md b/docs/qa/changelog-qa.story.md
new file mode 100644
index 00000000..a1ffef86
--- /dev/null
+++ b/docs/qa/changelog-qa.story.md
@@ -0,0 +1,115 @@
+---
+title: QA sco
+group: top
+icon: carbon:checklist
+---
+
+# QA: sco-2751-refine-studio-colours-brand
+
+**Base:** main @ `e214281`  
+**Histoire:** `npm run dev` — open this page from the sidebar under the top group, or use relative links below.
+
+_Generated by `npm run changelog:qa -- --format histoire`. Edit the Summary section below._
+
+## Summary
+
+- _Describe the main themes of this branch for QA_
+
+## Visual checks — changed (Histoire)
+
+| Area | Group | Component | Open in Histoire |
+|------|-------|-----------|------------------|
+| Action card | dashboard | `action-card.vue` | [Action card](../../src/frontend/dashboard/action-card.story.vue) |
+| Action grid | dashboard | `action-grid.vue` | [Action grid](../../src/frontend/dashboard/action-grid.story.vue) |
+| Colors | shared | `colors.vue` | [Colors](../../src/frontend/shared/colors.story.vue) |
+| Dashboard Index | dashboard | `dashboard-index.vue` | [Dashboard Index](../../src/frontend/dashboard/dashboard-index.story.vue) |
+| Index Filter | shared | `index-filter.vue` | [Index Filter](../../src/frontend/shared/index-filter.story.vue) |
+| Index Page | pages | `pages-index.vue` | [Index Page](../../src/frontend/pages/pages-index.story.vue) |
+| Index Tabs | shared | `index-tabs.vue` | [Index Tabs](../../src/frontend/shared/index-tabs.story.vue) |
+| Invitation edit | invitation | `invitations-edit.vue` | [Invitation edit](../../src/frontend/invitation/invitations-edit.story.vue) |
+| Invitations index page | invitation | `invitations-index.vue` | [Invitations index page](../../src/frontend/invitation/invitations-index.story.vue) |
+| Language block | dashboard | `language-block.vue` | [Language block](../../src/frontend/dashboard/language-block.story.vue) |
+| Language List | settings | `language-list.vue` | [Language List](../../src/frontend/settings/languages/language-list.story.vue) |
+| Languages Edit | settings | `languages-edit.vue` | [Languages Edit](../../src/frontend/settings/languages/languages-edit.story.vue) |
+| Panel List | stories | `panel-list.vue` | [Panel List](../../src/frontend/stories/components/panel-list.story.vue) |
+| Preview | stories | `chapter-preview.vue` | [Preview](../../src/frontend/stories/chapter-preview.story.vue) |
+| Request Feedback Modal | settings | `request-feedback-modal.vue` | [Request Feedback Modal](../../src/frontend/settings/languages/components/request-feedback-modal.story.vue) |
+| Resource edit | resources | `resources-edit.vue` | [Resource edit](../../src/frontend/resources/resources-edit.story.vue) |
+| Resource Empty State | resources | `resource-empty-state.vue` | [Resource Empty State](../../src/frontend/stories/components/resource-empty-state.story.vue) |
+| Resource Picker | resources | `resource-picker.vue` | [Resource Picker](../../src/frontend/stories/components/resource-picker.story.vue) |
+| Ring | dashboard | `ring.vue` | [Ring](../../src/frontend/dashboard/ring.story.vue) |
+| Stat tiles | dashboard | `stat-tiles.vue` | [Stat tiles](../../src/frontend/dashboard/stat-tiles.story.vue) |
+| Story Create | stories | `story-create.vue` | [Story Create](../../src/frontend/stories/story-create.story.vue) |
+| Story Edit | stories | `story-edit.vue` | [Story Edit](../../src/frontend/stories/story-edit.story.vue) |
+| Studio Button | shared | `studio-button.vue` | [Studio Button](../../src/frontend/shared/studio-button.story.vue) |
+| Tab Button | shared | `tab-button.vue` | [Tab Button](../../src/frontend/shared/tab-button.story.vue) |
+| Workflow Buttons | stories | `workflow-actions.vue` | [Workflow Buttons](../../src/frontend/stories/components/workflow-actions.story.vue) |
+
+## Unchanged — regression check
+
+_Unchanged `.vue` files with co-located stories in folders where something changed. Confirm these still look correct._
+
+| Area | Group | Component | Open in Histoire |
+|------|-------|-----------|------------------|
+| Action Button | shared | `action-button.vue` | [Action Button](../../src/frontend/shared/action-button.story.vue) |
+| Add Item Button | shared | `add-item-button.vue` | [Add Item Button](../../src/frontend/shared/add-item-button.story.vue) |
+| App Layout Header | shared | `app-layout-header.vue` | [App Layout Header](../../src/frontend/shared/app-layout-header.story.vue) |
+| Bible Translations Modal | settings | `bible-translations-modal.vue` | [Bible Translations Modal](../../src/frontend/settings/languages/components/bible-translations-modal.story.vue) |
+| Bookmark Action | shared | `bookmark-action.vue` | [Bookmark Action](../../src/frontend/shared/bookmark-action.story.vue) |
+| Context Menu | shared | `context-menu.vue` | [Context Menu](../../src/frontend/shared/context-menu.story.vue) |
+| Draft Page | stories | `draft-index.vue` | [Draft Page](../../src/frontend/stories/draft-index.story.vue) |
+| Drop Down | shared | `drop-down.vue` | [Drop Down](../../src/frontend/shared/drop-down.story.vue) |
+| Expandable Search | shared | `expandable-search.vue` | [Expandable Search](../../src/frontend/shared/expandable-search.story.vue) |
+| Gallery Grid | shared | `gallery-grid.vue` | [Gallery Grid](../../src/frontend/shared/gallery-grid.story.vue) |
+| Glass Button | shared | `glass-button.vue` | [Glass Button](../../src/frontend/shared/glass-button.story.vue) |
+| Icon Button | shared | `icon-button.vue` | [Icon Button](../../src/frontend/shared/icon-button.story.vue) |
+| Index Card | stories | `index-card.vue` | [Index Card](../../src/frontend/stories/components/index-card.story.vue) |
+| Invitation index item | invitation | `invitation-index-item.vue` | [Invitation index item](../../src/frontend/invitation/invitation-index-item.story.vue) |
+| Label Button | shared | `label-button.vue` | [Label Button](../../src/frontend/shared/label-button.story.vue) |
+| Language List Item | settings | `language-list-item.vue` | [Language List Item](../../src/frontend/settings/languages/components/language-list-item.story.vue) |
+| Language Table | settings | `language-table.vue` | [Language Table](../../src/frontend/settings/languages/components/language-table.story.vue) |
+| List Switcher | shared | `list-switcher.vue` | [List Switcher](../../src/frontend/shared/list-switcher.story.vue) |
+| Message | shared | `message-centre.vue` | [Message](../../src/frontend/shared/message-centre.story.vue) |
+| Meta Box | shared | `meta-box.vue` | [Meta Box](../../src/frontend/shared/meta-box.story.vue) |
+| Meta Meta Box | stories | `meta-meta-box.vue` | [Meta Meta Box](../../src/frontend/stories/components/meta-meta-box.story.vue) |
+| Nav rail panel | shared | `nav-rail-panel.vue` | [Nav rail panel](../../src/frontend/shared/nav-rail-panel.story.vue) |
+| Navigation pane | shared | `navigation-pane.vue` | [Navigation pane](../../src/frontend/shared/navigation-pane.story.vue) |
+| Page Index Item | pages | `page-index-item.vue` | [Page Index Item](../../src/frontend/pages/page-index-item.story.vue) |
+| Pages Edit | pages | `pages-edit.vue` | [Pages Edit](../../src/frontend/pages/pages-edit.story.vue) |
+| Remove Language Modal | settings | `remove-language-modal.vue` | [Remove Language Modal](../../src/frontend/settings/languages/components/remove-language-modal.story.vue) |
+| Request App Update Modal | settings | `request-app-update-modal.vue` | [Request App Update Modal](../../src/frontend/settings/languages/components/request-app-update-modal.story.vue) |
+| Resource Attached Item | resources | `resource-attached-item.vue` | [Resource Attached Item](../../src/frontend/stories/components/resource-attached-item.story.vue) |
+| Resource Attached List | resources | `resource-attached-list.vue` | [Resource Attached List](../../src/frontend/stories/components/resource-attached-list.story.vue) |
+| Resource Index Item | resources | `resource-index-item.vue` | [Resource Index Item](../../src/frontend/resources/resource-index-item.story.vue) |
+| Resource Label Group | resources | `resource-label-group.vue` | [Resource Label Group](../../src/frontend/stories/components/resource-label-group.story.vue) |
+| Resource not found | resources | `resource-not-found.vue` | [Resource not found](../../src/frontend/resources/resource-not-found.story.vue) |
+| Resource Thumbnail | resources | `resource-thumbnail.vue` | [Resource Thumbnail](../../src/frontend/stories/components/resource-thumbnail.story.vue) |
+| Resource Type Badge | resources | `resource-type-badge.vue` | [Resource Type Badge](../../src/frontend/stories/components/resource-type-badge.story.vue) |
+| Resource Used In | resources | `resource-used-in.vue` | [Resource Used In](../../src/frontend/resources/resource-used-in.story.vue) |
+| Resources index page | resources | `resources-index.vue` | [Resources index page](../../src/frontend/resources/resources-index.story.vue) |
+| Rich Listbox | shared | `rich-listbox.vue` | [Rich Listbox](../../src/frontend/shared/rich-listbox.story.vue) |
+| Status Tag | shared | `status-tag.vue` | [Status Tag](../../src/frontend/shared/status-tag.story.vue) |
+| Story Edit Details | stories | `story-edit-details.vue` | [Story Edit Details](../../src/frontend/stories/components/story-edit-details.story.vue) |
+| Story Edit Resources | resources | `story-edit-resources.vue` | [Story Edit Resources](../../src/frontend/stories/components/story-edit-resources.story.vue) |
+| Story Edit Sections | stories | `story-edit-sections.vue` | [Story Edit Sections](../../src/frontend/stories/components/story-edit-sections.story.vue) |
+| Story Gallery | stories | `story-gallery.vue` | [Story Gallery](../../src/frontend/stories/story-gallery.story.vue) |
+| Story Index | stories | `story-index.vue` | [Story Index](../../src/frontend/stories/story-index.story.vue) |
+| Story Item | stories | `story-item.vue` | [Story Item](../../src/frontend/stories/components/story-item.story.vue) |
+| Tab navigation | shared | `tab-navigation.vue` | [Tab navigation](../../src/frontend/shared/tab-navigation.story.vue) |
+| Toggle Button | shared | `toggle-button.vue` | [Toggle Button](../../src/frontend/shared/toggle-button.story.vue) |
+| Translation Page | stories | `translation-index.vue` | [Translation Page](../../src/frontend/stories/translation-index.story.vue) |
+
+## No dedicated story — test indirectly
+
+| Component | Notes |
+|-----------|-------|
+| `src/frontend/dashboard/ring-block.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/dashboard/stat-tile.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/fields/list/foldable-list.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/settings/languages/components/language-table-row.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/app-footer.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/app-layout.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/icon.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/index-tab-button.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/team/components/user-form-modal.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/team/components/user-row.vue` | Find a parent page story or add a co-located `.story.vue` |
diff --git a/package.json b/package.json
index b9574006..f7fa086d 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "histoire dev",
     "colors:usage": "node scripts/generate-color-usage.mjs",
+    "changelog:qa": "node scripts/generate-qa-changelog.mjs",
     "todo-lint": "eslint .",
     "clean": "del-cli dist",
     "types:build": "tsc -p tsconfig.types.json",
diff --git a/scripts/generate-qa-changelog.mjs b/scripts/generate-qa-changelog.mjs
new file mode 100644
index 00000000..2f4d0e84
--- /dev/null
+++ b/scripts/generate-qa-changelog.mjs
@@ -0,0 +1,298 @@
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'node:fs';
+import { dirname, join, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { execSync } from 'node:child_process';
+import { kebabCase } from 'change-case';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = join(__dirname, '..');
+const defaultOutDir = join(root, 'docs', 'qa');
+
+function parseArgs(argv) {
+  const options = {
+    base: 'main',
+    port: 6006,
+    out: null,
+    host: 'http://localhost',
+    format: 'github',
+  };
+
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg === '--base') options.base = argv[++i];
+    else if (arg === '--port') options.port = Number(argv[++i]);
+    else if (arg === '--out') options.out = argv[++i];
+    else if (arg === '--host') options.host = argv[++i].replace(/\/$/, '');
+    else if (arg === '--format') {
+      const value = argv[++i];
+      options.format = value === 'historie' ? 'histoire' : value;
+    }
+  }
+
+  return options;
+}
+
+function git(command) {
+  return execSync(command, { cwd: root, encoding: 'utf8' }).trim();
+}
+
+function storyLink(storyPath, options, outPath) {
+  if (options.format === 'histoire') {
+    const rel = relative(dirname(outPath), join(root, storyPath)).replace(/\\/g, '/');
+    return rel.startsWith('.') ? rel : `./${rel}`;
+  }
+
+  const id = kebabCase(storyPath.toLowerCase());
+  return `${options.host}:${options.port}/story/${id}`;
+}
+
+function siblingStoryPath(vuePath) {
+  if (vuePath.endsWith('.story.vue')) return vuePath;
+  const slash = vuePath.lastIndexOf('/');
+  const dir = vuePath.substring(0, slash);
+  const base = vuePath.substring(slash + 1).replace(/\.vue$/, '');
+  return `${dir}/${base}.story.vue`;
+}
+
+function componentFileName(storyPath) {
+  return storyPath.replace(/\.story\.vue$/, '.vue').split('/').pop();
+}
+
+function parseStoryMeta(storyPath) {
+  const content = readFileSync(storyPath, 'utf8');
+  const title = content.match(/<Story[^>]*\stitle="([^"]+)"/)?.[1] ?? storyPath;
+  const group = content.match(/<Story[^>]*\sgroup="([^"]+)"/)?.[1] ?? '';
+  return { title, group };
+}
+
+function collectChangedVueFiles(mergeBase) {
+  return git(`git diff --name-only ${mergeBase}..HEAD -- '*.vue'`)
+    .split('\n')
+    .filter(Boolean);
+}
+
+function collectStories(changedVueFiles) {
+  const stories = new Map();
+
+  for (const file of changedVueFiles) {
+    const storyPath = siblingStoryPath(file);
+    if (!existsSync(storyPath)) continue;
+    if (stories.has(storyPath)) continue;
+
+    const { title, group } = parseStoryMeta(storyPath);
+    stories.set(storyPath, { title, group, sourceFiles: [file] });
+  }
+
+  for (const file of changedVueFiles) {
+    if (file.endsWith('.story.vue') && existsSync(file) && !stories.has(file)) {
+      const { title, group } = parseStoryMeta(file);
+      stories.set(file, { title, group, sourceFiles: [file] });
+    }
+  }
+
+  return stories;
+}
+
+function collectUnchangedStories(changedVueFiles, changedStories) {
+  const changed = new Set(changedVueFiles);
+  const changedStoryPaths = new Set(changedStories.keys());
+  const dirs = [...new Set(changedVueFiles.map((f) => f.replace(/\/[^/]+$/, '')))];
+  const stories = new Map();
+
+  for (const dir of dirs.sort()) {
+    const files = git(`git ls-files '${dir}/*.vue'`).split('\n').filter(Boolean);
+    for (const file of files) {
+      if (changed.has(file)) continue;
+      if (file.endsWith('.story.vue')) continue;
+
+      const storyPath = siblingStoryPath(file);
+      if (!existsSync(storyPath)) continue;
+      if (changedStoryPaths.has(storyPath)) continue;
+      if (stories.has(storyPath)) continue;
+
+      const { title, group } = parseStoryMeta(storyPath);
+      stories.set(storyPath, { title, group, sourceFile: file });
+    }
+  }
+
+  return stories;
+}
+
+function collectNoStoryFiles(changedVueFiles, stories) {
+  const covered = new Set();
+  for (const storyPath of stories.keys()) {
+    covered.add(storyPath);
+    covered.add(storyPath.replace(/\.story\.vue$/, '.vue'));
+  }
+
+  return changedVueFiles.filter((file) => {
+    if (file.endsWith('.story.vue')) return false;
+    if (covered.has(file)) return false;
+    return !existsSync(siblingStoryPath(file));
+  });
+}
+
+function appendStoryTable(lines, stories, options, outPath) {
+  for (const [storyPath, meta] of [...stories.entries()].sort((a, b) =>
+    a[1].title.localeCompare(b[1].title),
+  )) {
+    const url = storyLink(storyPath, options, outPath);
+    lines.push(
+      `| ${meta.title} | ${meta.group} | \`${componentFileName(storyPath)}\` | [${meta.title}](${url}) |`,
+    );
+  }
+}
+
+function buildGithubMarkdown({
+  branch,
+  mergeBase,
+  options,
+  stories,
+  unchangedStories,
+  noStoryFiles,
+  outPath,
+}) {
+  const baseUrl = `${options.host}:${options.port}`;
+  const lines = [
+    `# QA: ${branch}`,
+    '',
+    `**Base:** ${options.base} @ \`${mergeBase.slice(0, 7)}\`  `,
+    `**Histoire (local):** \`npm run dev\` → ${baseUrl}  `,
+    '**Histoire (preview):** After opening a PR, use the Cloudflare Pages deployment URL from the PR checks (project: `kit`). Replace the localhost base URL below.',
+    '',
+    '_Generated by `npm run changelog:qa`. Edit the Summary section below._',
+    '',
+    '## Summary',
+    '',
+    '- _Describe the main themes of this branch for QA_',
+    '',
+    '## Visual checks — changed (Histoire)',
+    '',
+    '| Area | Group | Component | Open in Histoire |',
+    '|------|-------|-----------|------------------|',
+  ];
+
+  appendStoryTable(lines, stories, options, outPath);
+
+  lines.push(
+    '',
+    '## Unchanged — regression check',
+    '',
+    '_Unchanged `.vue` files with co-located stories in folders where something changed. Confirm these still look correct._',
+    '',
+    '| Area | Group | Component | Open in Histoire |',
+    '|------|-------|-----------|------------------|',
+  );
+
+  appendStoryTable(lines, unchangedStories, options, outPath);
+
+  lines.push('', '## No dedicated story — test indirectly', '', '| Component | Notes |', '|-----------|-------|');
+
+  if (noStoryFiles.length === 0) {
+    lines.push('| _None_ | All changed `.vue` files have co-located stories or are covered above |');
+  } else {
+    for (const file of noStoryFiles.sort()) {
+      lines.push(`| \`${file}\` | Find a parent page story or add a co-located \`.story.vue\` |`);
+    }
+  }
+
+  lines.push('');
+
+  return lines.join('\n');
+}
+
+function buildHistoireMarkdown({
+  branch,
+  mergeBase,
+  options,
+  stories,
+  unchangedStories,
+  noStoryFiles,
+  outPath,
+}) {
+  const lines = [
+    '---',
+    `title: QA ${branch.split('-')[0] ?? branch}`,
+    'group: top',
+    'icon: carbon:checklist',
+    '---',
+    '',
+    `# QA: ${branch}`,
+    '',
+    `**Base:** ${options.base} @ \`${mergeBase.slice(0, 7)}\`  `,
+    '**Histoire:** `npm run dev` — open this page from the sidebar under the top group, or use relative links below.',
+    '',
+    '_Generated by `npm run changelog:qa -- --format histoire`. Edit the Summary section below._',
+    '',
+    '## Summary',
+    '',
+    '- _Describe the main themes of this branch for QA_',
+    '',
+    '## Visual checks — changed (Histoire)',
+    '',
+    '| Area | Group | Component | Open in Histoire |',
+    '|------|-------|-----------|------------------|',
+  ];
+
+  appendStoryTable(lines, stories, options, outPath);
+
+  lines.push(
+    '',
+    '## Unchanged — regression check',
+    '',
+    '_Unchanged `.vue` files with co-located stories in folders where something changed. Confirm these still look correct._',
+    '',
+    '| Area | Group | Component | Open in Histoire |',
+    '|------|-------|-----------|------------------|',
+  );
+
+  appendStoryTable(lines, unchangedStories, options, outPath);
+
+  lines.push('', '## No dedicated story — test indirectly', '', '| Component | Notes |', '|-----------|-------|');
+
+  if (noStoryFiles.length === 0) {
+    lines.push('| _None_ | All changed `.vue` files have co-located stories or are covered above |');
+  } else {
+    for (const file of noStoryFiles.sort()) {
+      lines.push(`| \`${file}\` | Find a parent page story or add a co-located \`.story.vue\` |`);
+    }
+  }
+
+  lines.push('');
+
+  return lines.join('\n');
+}
+
+function main() {
+  const options = parseArgs(process.argv.slice(2));
+  const branch = git('git branch --show-current');
+  const mergeBase = git(`git merge-base HEAD ${options.base}`);
+  const changedVueFiles = collectChangedVueFiles(mergeBase);
+  const stories = collectStories(changedVueFiles);
+  const unchangedStories = collectUnchangedStories(changedVueFiles, stories);
+  const noStoryFiles = collectNoStoryFiles(changedVueFiles, stories);
+
+  const extension = options.format === 'histoire' ? '.story.md' : '.md';
+  const outPath = options.out ?? join(defaultOutDir, `changelog-qa${extension}`);
+
+  const build = options.format === 'histoire' ? buildHistoireMarkdown : buildGithubMarkdown;
+  const markdown = build({
+    branch,
+    mergeBase,
+    options,
+    stories,
+    unchangedStories,
+    noStoryFiles,
+    outPath,
+  });
+
+  mkdirSync(dirname(outPath), { recursive: true });
+  writeFileSync(outPath, markdown);
+
+  console.log(`Wrote ${outPath} (${options.format} format)`);
+  console.log(`  ${stories.size} changed Histoire stories`);
+  console.log(`  ${unchangedStories.size} unchanged Histoire stories`);
+  console.log(`  ${noStoryFiles.length} changed files without stories`);
+}
+
+main();
diff --git a/src/frontend/streams/stream-index.vue b/src/frontend/streams/stream-index.vue
index 9626b441..5c0aa853 100644
--- a/src/frontend/streams/stream-index.vue
+++ b/src/frontend/streams/stream-index.vue
@@ -13,14 +13,18 @@
       >
         <div class="flex gap-x-4">
           <IndexFilter :tabs="tabs" :current-tab="currentTab" @change="onFilter" />
-          <ToggleButton
-            icon-on="sort"
-            icon-off="sort-asc"
+          <TabButton
             label="Release Date"
-            :is-on="sortDescending"
             :is-active="true"
-            @toggle="sortDescending = !sortDescending"
-          />
+            @click="sortDescending = !sortDescending"
+          >
+            <ArrowDownWideNarrow
+              v-if="sortDescending"
+              class="size-4"
+              aria-hidden="true"
+            />
+            <ArrowUpWideNarrow v-else class="size-4" aria-hidden="true" />
+          </TabButton>
         </div>
 
         <div class="grid grid-cols-1">
@@ -67,7 +71,8 @@
 import { SharedPageProps } from '../../types';
 
 import IndexFilter from '../shared/index-filter.vue';
-import ToggleButton from '../shared/toggle-button.vue';
+import TabButton from '../shared/tab-button.vue';
+import { ArrowDownWideNarrow, ArrowUpWideNarrow } from '@lucide/vue';
 
 import AppLayout from '../shared/app-layout.vue';
 import Icon from '../shared/icon.vue';

From a2208a4496d46e6671c6c2f19bce70fd419f0394 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 30 Jul 2026 07:42:06 +0300
Subject: [PATCH 20/39] refactor: remove ToggleButton component and its
 associated story

---
 docs/qa/changelog-qa.story.md               |  7 ++-
 src/frontend/index.ts                       |  2 -
 src/frontend/shared/colors.palette.ts       |  1 -
 src/frontend/shared/colors.usage.ts         | 49 ++++++++++++---------
 src/frontend/shared/toggle-button.story.vue | 31 -------------
 src/frontend/shared/toggle-button.vue       | 35 ---------------
 6 files changed, 33 insertions(+), 92 deletions(-)
 delete mode 100644 src/frontend/shared/toggle-button.story.vue
 delete mode 100644 src/frontend/shared/toggle-button.vue

diff --git a/docs/qa/changelog-qa.story.md b/docs/qa/changelog-qa.story.md
index a1ffef86..f0600d1d 100644
--- a/docs/qa/changelog-qa.story.md
+++ b/docs/qa/changelog-qa.story.md
@@ -41,6 +41,7 @@ _Generated by `npm run changelog:qa -- --format histoire`. Edit the Summary sect
 | Stat tiles | dashboard | `stat-tiles.vue` | [Stat tiles](../../src/frontend/dashboard/stat-tiles.story.vue) |
 | Story Create | stories | `story-create.vue` | [Story Create](../../src/frontend/stories/story-create.story.vue) |
 | Story Edit | stories | `story-edit.vue` | [Story Edit](../../src/frontend/stories/story-edit.story.vue) |
+| Stream Index | streams | `stream-index.vue` | [Stream Index](../../src/frontend/streams/stream-index.story.vue) |
 | Studio Button | shared | `studio-button.vue` | [Studio Button](../../src/frontend/shared/studio-button.story.vue) |
 | Tab Button | shared | `tab-button.vue` | [Tab Button](../../src/frontend/shared/tab-button.story.vue) |
 | Workflow Buttons | stories | `workflow-actions.vue` | [Workflow Buttons](../../src/frontend/stories/components/workflow-actions.story.vue) |
@@ -59,6 +60,9 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 | Context Menu | shared | `context-menu.vue` | [Context Menu](../../src/frontend/shared/context-menu.story.vue) |
 | Draft Page | stories | `draft-index.vue` | [Draft Page](../../src/frontend/stories/draft-index.story.vue) |
 | Drop Down | shared | `drop-down.vue` | [Drop Down](../../src/frontend/shared/drop-down.story.vue) |
+| Drop Edit | streams | `drop-edit.vue` | [Drop Edit](../../src/frontend/streams/drop-edit.story.vue) |
+| Drop Item | streams | `drop-item.vue` | [Drop Item](../../src/frontend/streams/components/drop-item.story.vue) |
+| Drop Meta Box | streams | `drop-meta-box.vue` | [Drop Meta Box](../../src/frontend/streams/components/drop-meta-box.story.vue) |
 | Expandable Search | shared | `expandable-search.vue` | [Expandable Search](../../src/frontend/shared/expandable-search.story.vue) |
 | Gallery Grid | shared | `gallery-grid.vue` | [Gallery Grid](../../src/frontend/shared/gallery-grid.story.vue) |
 | Glass Button | shared | `glass-button.vue` | [Glass Button](../../src/frontend/shared/glass-button.story.vue) |
@@ -95,8 +99,9 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 | Story Gallery | stories | `story-gallery.vue` | [Story Gallery](../../src/frontend/stories/story-gallery.story.vue) |
 | Story Index | stories | `story-index.vue` | [Story Index](../../src/frontend/stories/story-index.story.vue) |
 | Story Item | stories | `story-item.vue` | [Story Item](../../src/frontend/stories/components/story-item.story.vue) |
+| Stream Gallery | streams | `stream-gallery.vue` | [Stream Gallery](../../src/frontend/streams/stream-gallery.story.vue) |
+| Stream Item | streams | `stream-item.vue` | [Stream Item](../../src/frontend/streams/components/stream-item.story.vue) |
 | Tab navigation | shared | `tab-navigation.vue` | [Tab navigation](../../src/frontend/shared/tab-navigation.story.vue) |
-| Toggle Button | shared | `toggle-button.vue` | [Toggle Button](../../src/frontend/shared/toggle-button.story.vue) |
 | Translation Page | stories | `translation-index.vue` | [Translation Page](../../src/frontend/stories/translation-index.story.vue) |
 
 ## No dedicated story — test indirectly
diff --git a/src/frontend/index.ts b/src/frontend/index.ts
index 93385277..c2d902b4 100644
--- a/src/frontend/index.ts
+++ b/src/frontend/index.ts
@@ -58,7 +58,6 @@ import StreamGallery from './streams/stream-gallery.vue';
 import StreamIndex from './streams/stream-index.vue';
 import StringField from './fields/string-field.vue';
 import TagField from './fields/tag-field.vue';
-import ToggleButton from './shared/toggle-button.vue';
 import TranslationIndex from './stories/translation-index.vue';
 import UiPage from './ui/ui-page.vue';
 import UsersIndex from './team/users-index.vue';
@@ -132,7 +131,6 @@ export {
   StreamIndex,
   StringField,
   TagField,
-  ToggleButton,
   TranslationIndex,
   UiPage,
   UsersIndex,
diff --git a/src/frontend/shared/colors.palette.ts b/src/frontend/shared/colors.palette.ts
index b662544c..e66f0f62 100644
--- a/src/frontend/shared/colors.palette.ts
+++ b/src/frontend/shared/colors.palette.ts
@@ -118,7 +118,6 @@ export const colorSections: ColorSection[] = [
   {
     title: 'Indigo',
     colors: [
-      { name: 'indigo-100', class: 'bg-indigo-100' },
       { name: 'indigo-200', class: 'bg-indigo-200' },
       { name: 'indigo-50', class: 'bg-indigo-50' },
       { name: 'indigo-500', class: 'bg-indigo-500' },
diff --git a/src/frontend/shared/colors.usage.ts b/src/frontend/shared/colors.usage.ts
index 0380e077..028a162d 100644
--- a/src/frontend/shared/colors.usage.ts
+++ b/src/frontend/shared/colors.usage.ts
@@ -71,7 +71,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'index.css',
       'shared/pill-button.vue',
     ] },
-  'blue-50': { count: 66, files: [
+  'blue-50': { count: 65, files: [
       'audience/audience-index.vue',
       'fields/select-field.vue',
       'index.css',
@@ -89,7 +89,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/draft-actions.vue',
       'shared/expandable-search.vue',
       'shared/glass-button.vue',
-      'shared/index-filter.vue',
       'shared/label-hint.vue',
       'shared/message-centre.vue',
       'shared/pill-button.vue',
@@ -141,11 +140,10 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'blue-700': { count: 9, files: [
+  'blue-700': { count: 8, files: [
       'invitation/invitation-index-item.vue',
       'resources/resource-index-item.vue',
       'settings/languages/components/request-app-update-modal.vue',
-      'shared/index-filter.vue',
       'stories/components/resource-utils.ts',
       'team/components/user-row.vue',
     ] },
@@ -200,7 +198,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'dashboard/stat-tile.vue',
       'fields/list/foldable-list.vue',
     ] },
-  'gray-100': { count: 71, files: [
+  'gray-100': { count: 73, files: [
       'fields/list/flat-list.vue',
       'fields/region-field.vue',
       'fields/scripture-field.vue',
@@ -221,6 +219,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/drop-down.vue',
       'shared/drop-up.vue',
       'shared/gallery-grid.story.vue',
+      'shared/index-filter.vue',
       'shared/index-tab-button.vue',
       'shared/label-hint-popup.vue',
       'shared/language-selector.vue',
@@ -228,6 +227,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/meta-box.vue',
       'shared/nav-rail-panel.vue',
       'shared/nav-rail-toolbar.vue',
+      'shared/tab-button.story.vue',
       'stories/components/index-card.vue',
       'stories/components/panel-list.vue',
       'stories/components/resource-attached-item.vue',
@@ -240,7 +240,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'streams/components/stream-item.vue',
       'team/components/user-row.vue',
     ] },
-  'gray-200': { count: 96, files: [
+  'gray-200': { count: 97, files: [
       'audience/audience-index.vue',
       'dashboard/stat-tile.vue',
       'fields/attachments/file-upload.vue',
@@ -274,6 +274,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/pill-button.vue',
       'shared/rich-listbox.vue',
       'shared/studio-button.vue',
+      'shared/tab-button.vue',
       'stories/components/index-card.story.vue',
       'stories/components/index-card.vue',
       'stories/components/panel-list.vue',
@@ -287,7 +288,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'ui/components/ui-card.vue',
       'ui/components/ui-string-item.vue',
     ] },
-  'gray-300': { count: 61, files: [
+  'gray-300': { count: 60, files: [
       'audience/audience-index.vue',
       'auth/create-account.vue',
       'auth/login-index.vue',
@@ -316,7 +317,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/pagination.vue',
       'shared/rich-listbox.vue',
       'shared/studio-button.vue',
-      'shared/toggle-button.vue',
       'stories/components/resource-picker.vue',
       'streams/stream-index.vue',
       'ui/components/ui-card.vue',
@@ -358,7 +358,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-50': { count: 229, files: [
+  'gray-50': { count: 231, files: [
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
@@ -404,6 +404,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/gallery-grid.story.vue',
       'shared/gallery-item.vue',
       'shared/glass-button.story.vue',
+      'shared/index-filter.vue',
       'shared/index-tab-button.vue',
       'shared/list-switcher.vue',
       'shared/meta-box.vue',
@@ -411,6 +412,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/pagination.vue',
       'shared/public-layout.vue',
       'shared/rich-listbox.vue',
+      'shared/tab-button.story.vue',
       'stories/components/index-card.story.vue',
       'stories/components/index-card.vue',
       'stories/components/resource-attached-item.vue',
@@ -426,7 +428,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/users-index.vue',
       'ui/ui-page.vue',
     ] },
-  'gray-500': { count: 159, files: [
+  'gray-500': { count: 161, files: [
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
@@ -467,10 +469,12 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/expandable-search.vue',
       'shared/gallery-grid.story.vue',
       'shared/gallery-item.vue',
+      'shared/index-filter.vue',
       'shared/index-tab-button.vue',
       'shared/list-switcher.vue',
       'shared/meta-box.vue',
       'shared/rich-listbox.vue',
+      'shared/tab-button.story.vue',
       'stories/components/index-card.story.vue',
       'stories/components/index-card.vue',
       'stories/components/resource-attached-item.vue',
@@ -528,7 +532,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-700': { count: 46, files: [
+  'gray-700': { count: 45, files: [
       'fields/attachments/video-meta.vue',
       'fields/list/foldable-list.vue',
       'fields/panel-field.vue',
@@ -547,7 +551,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/pagination.vue',
       'shared/pill-button.vue',
       'shared/studio-button.vue',
-      'shared/toggle-button.vue',
       'stories/components/resource-attached-item.vue',
       'stories/components/resource-picker.vue',
       'stories/components/resource-utils.ts',
@@ -654,9 +657,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'stories/components/story-item.vue',
       'streams/components/stream-item.vue',
     ] },
-  'indigo-100': { count: 1, files: [
-      'shared/toggle-button.vue',
-    ] },
   'indigo-200': { count: 2, files: [
       'settings/languages/components/request-app-update-modal.vue',
     ] },
@@ -688,12 +688,11 @@ export const colorUsage: Record<string, ColorUsage> = {
       'ui/components/ui-card.vue',
       'ui/ui-page.vue',
     ] },
-  'indigo-700': { count: 7, files: [
+  'indigo-700': { count: 5, files: [
       'fields/attachments/file-upload.vue',
       'fields/section-panel-field.vue',
       'shared/add-item-button.vue',
       'shared/navigation-pane.vue',
-      'shared/toggle-button.vue',
     ] },
   'orange-100': { count: 1, files: [
       'stories/components/resource-utils.ts',
@@ -765,25 +764,31 @@ export const colorUsage: Record<string, ColorUsage> = {
       'streams/components/stream-item.vue',
     ] },
   'studio-dark': { count: 0, files: [] },
-  'studio-forest': { count: 9, files: [
+  'studio-forest': { count: 17, files: [
       'dashboard/language-block.vue',
       'dashboard/ring.vue',
       'shared/app-footer.vue',
+      'shared/index-filter.vue',
       'shared/index-tab-button.vue',
       'shared/studio-button.vue',
+      'shared/tab-button.story.vue',
+      'shared/tab-button.vue',
     ] },
-  'studio-green': { count: 12, files: [
+  'studio-green': { count: 11, files: [
+      'shared/index-filter.vue',
       'shared/studio-button.vue',
+      'shared/tab-button.story.vue',
       'stories/components/panel-list.vue',
       'stories/components/resource-empty-state.vue',
       'stories/components/resource-picker.vue',
     ] },
-  'studio-lime': { count: 6, files: [
+  'studio-lime': { count: 7, files: [
       'dashboard/language-block.vue',
       'dashboard/ring.vue',
       'dashboard/stat-tile.vue',
       'shared/index-tab-button.vue',
       'shared/studio-button.vue',
+      'shared/tab-button.vue',
     ] },
   'studio-yellow': { count: 1, files: [
       'dashboard/action-card.vue',
@@ -816,7 +821,7 @@ export const colorUsage: Record<string, ColorUsage> = {
   'violet-700': { count: 1, files: [
       'stories/components/resource-utils.ts',
     ] },
-  'white': { count: 168, files: [
+  'white': { count: 175, files: [
       'audience/audience-index.vue',
       'dashboard/action-card.vue',
       'dashboard/language-block.vue',
@@ -877,8 +882,8 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/pill-button.vue',
       'shared/rich-listbox.vue',
       'shared/studio-button.vue',
+      'shared/tab-button.story.vue',
       'shared/tab-button.vue',
-      'shared/toggle-button.vue',
       'stories/components/index-card.story.vue',
       'stories/components/index-card.vue',
       'stories/components/panel-list.vue',
diff --git a/src/frontend/shared/toggle-button.story.vue b/src/frontend/shared/toggle-button.story.vue
deleted file mode 100644
index 4416d488..00000000
--- a/src/frontend/shared/toggle-button.story.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <Story title="Toggle Button" group="shared" :layout="{ type: 'grid', width: 300 }">
-    <Variant title="Default">
-      <ToggleButton
-        icon-on="sort-asc"
-        icon-off="sort"
-        label="Toggle"
-        :is-on="one"
-        :is-active="false"
-        @toggle="one = !one"
-      />
-    </Variant>
-    <Variant title="Active">
-      <ToggleButton
-        icon-on="sort-asc"
-        icon-off="sort"
-        label="Toggle"
-        :is-on="two"
-        :is-active="true"
-        @toggle="two = !two"
-      />
-    </Variant>
-  </Story>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import ToggleButton from './toggle-button.vue';
-const one = ref(false);
-const two = ref(false);
-</script>
diff --git a/src/frontend/shared/toggle-button.vue b/src/frontend/shared/toggle-button.vue
deleted file mode 100644
index 507ca8a9..00000000
--- a/src/frontend/shared/toggle-button.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <button
-    type="button"
-    class="inline-flex items-center gap-x-2 rounded-full px-3.5 py-1.5 text-sm font-medium shadow-sm ring-1 ring-inset"
-    :class="{
-      'bg-indigo-100 text-indigo-700 ring-indigo-700': isActive,
-      'bg-white text-gray-700 ring-gray-300': !isActive,
-    }"
-    @click="$emit('toggle')"
-  >
-    <Icon :name="icon" />
-    {{ label }}
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import Icon from './icon.vue';
-
-const props = defineProps<{
-  iconOn: string;
-  iconOff: string;
-  label: string;
-  isOn: boolean;
-  isActive: boolean;
-}>();
-
-defineEmits<{
-  (e: 'toggle'): void;
-}>();
-
-const icon = computed(() => {
-  return props.isOn ? props.iconOn : props.iconOff;
-});
-</script>

From ad5c98b66d502997d2a1b11adb3b5923c776c1db Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 30 Jul 2026 07:53:18 +0300
Subject: [PATCH 21/39] style: update ListSwitcher button styles and replace
 icon with Grid3X3

---
 docs/qa/changelog-qa.story.md         |  1 +
 src/frontend/shared/list-switcher.vue | 12 ++++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/qa/changelog-qa.story.md b/docs/qa/changelog-qa.story.md
index f0600d1d..a6e27fb6 100644
--- a/docs/qa/changelog-qa.story.md
+++ b/docs/qa/changelog-qa.story.md
@@ -116,5 +116,6 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 | `src/frontend/shared/app-layout.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/shared/icon.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/shared/index-tab-button.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/toggle-button.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/team/components/user-form-modal.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/team/components/user-row.vue` | Find a parent page story or add a co-located `.story.vue` |
diff --git a/src/frontend/shared/list-switcher.vue b/src/frontend/shared/list-switcher.vue
index f86f30b6..c0df6664 100644
--- a/src/frontend/shared/list-switcher.vue
+++ b/src/frontend/shared/list-switcher.vue
@@ -6,18 +6,18 @@
   >
     <button
       type="button"
-      class="rounded-xl p-2 transition-colors"
-      :class="isList ? 'text-gray-500 hover:text-gray-700' : 'bg-gray-100 text-gray-900'"
+      class="rounded-[4px] p-2 transition-colors"
+      :class="isList ? 'text-gray-500 hover:text-gray-700' : 'bg-gray-200 text-gray-900'"
       aria-label="Grid view"
       :aria-pressed="!isList"
       @click="selectGrid"
     >
-      <LayoutGrid class="size-4" aria-hidden="true" />
+      <Grid3X3 class="size-4" aria-hidden="true" />
     </button>
     <button
       type="button"
-      class="rounded-xl p-2 transition-colors"
-      :class="isList ? 'bg-gray-100 text-gray-900' : 'text-gray-500 hover:text-gray-700'"
+      class="rounded-[4px] p-2 transition-colors"
+      :class="isList ? 'bg-gray-200 text-gray-900' : 'text-gray-500 hover:text-gray-700'"
       aria-label="List view"
       :aria-pressed="isList"
       @click="selectList"
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { LayoutGrid, List } from '@lucide/vue';
+import { Grid3X3, List } from '@lucide/vue';
 
 const props = defineProps<{
   isList: boolean;

From 3b723b9d2a60b569622067e479adc406ee389f69 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 30 Jul 2026 08:02:16 +0300
Subject: [PATCH 22/39] style: update story gallery buttons

---
 docs/qa/changelog-qa.story.md          | 2 +-
 src/frontend/shared/list-switcher.vue  | 2 +-
 src/frontend/stories/story-gallery.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/qa/changelog-qa.story.md b/docs/qa/changelog-qa.story.md
index a6e27fb6..5da2fb97 100644
--- a/docs/qa/changelog-qa.story.md
+++ b/docs/qa/changelog-qa.story.md
@@ -31,6 +31,7 @@ _Generated by `npm run changelog:qa -- --format histoire`. Edit the Summary sect
 | Language block | dashboard | `language-block.vue` | [Language block](../../src/frontend/dashboard/language-block.story.vue) |
 | Language List | settings | `language-list.vue` | [Language List](../../src/frontend/settings/languages/language-list.story.vue) |
 | Languages Edit | settings | `languages-edit.vue` | [Languages Edit](../../src/frontend/settings/languages/languages-edit.story.vue) |
+| List Switcher | shared | `list-switcher.vue` | [List Switcher](../../src/frontend/shared/list-switcher.story.vue) |
 | Panel List | stories | `panel-list.vue` | [Panel List](../../src/frontend/stories/components/panel-list.story.vue) |
 | Preview | stories | `chapter-preview.vue` | [Preview](../../src/frontend/stories/chapter-preview.story.vue) |
 | Request Feedback Modal | settings | `request-feedback-modal.vue` | [Request Feedback Modal](../../src/frontend/settings/languages/components/request-feedback-modal.story.vue) |
@@ -72,7 +73,6 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 | Label Button | shared | `label-button.vue` | [Label Button](../../src/frontend/shared/label-button.story.vue) |
 | Language List Item | settings | `language-list-item.vue` | [Language List Item](../../src/frontend/settings/languages/components/language-list-item.story.vue) |
 | Language Table | settings | `language-table.vue` | [Language Table](../../src/frontend/settings/languages/components/language-table.story.vue) |
-| List Switcher | shared | `list-switcher.vue` | [List Switcher](../../src/frontend/shared/list-switcher.story.vue) |
 | Message | shared | `message-centre.vue` | [Message](../../src/frontend/shared/message-centre.story.vue) |
 | Meta Box | shared | `meta-box.vue` | [Meta Box](../../src/frontend/shared/meta-box.story.vue) |
 | Meta Meta Box | stories | `meta-meta-box.vue` | [Meta Meta Box](../../src/frontend/stories/components/meta-meta-box.story.vue) |
diff --git a/src/frontend/shared/list-switcher.vue b/src/frontend/shared/list-switcher.vue
index c0df6664..3861efb2 100644
--- a/src/frontend/shared/list-switcher.vue
+++ b/src/frontend/shared/list-switcher.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center rounded-xl border border-gray-300 bg-white p-1"
+    class="flex items-center rounded-xl border border-gray-300 bg-gray-100 p-1"
     role="group"
     aria-label="View mode"
   >
diff --git a/src/frontend/stories/story-gallery.vue b/src/frontend/stories/story-gallery.vue
index d9c618f9..020f0479 100644
--- a/src/frontend/stories/story-gallery.vue
+++ b/src/frontend/stories/story-gallery.vue
@@ -5,7 +5,7 @@
         <StudioButton
           v-if="canAddStories"
           label="Add story"
-          variant="secondary"
+          variant="primary"
           @click="addStory"
         >
           <Plus class="size-4" aria-hidden="true" />

From bc306c202adde106ddae032d57d221e2caf69729 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 30 Jul 2026 08:56:51 +0300
Subject: [PATCH 23/39] increment: add ResourceVisibilityBadge component and
 update visibility handling in resource-related components

---
 docs/qa/changelog-qa.story.md                 |   3 +-
 .../resources/resource-index-item.story.vue   | 116 ++++++++
 .../resources/resource-index-item.vue         |  20 +-
 src/frontend/resources/resources-edit.vue     | 266 +++++++++---------
 src/frontend/shared/colors.palette.ts         |   8 -
 src/frontend/shared/colors.usage.ts           |  57 ++--
 src/frontend/shared/studio-button.vue         |   2 +-
 .../resource-attached-item.story.vue          |   9 +-
 .../components/resource-attached-item.vue     |   8 +-
 .../components/resource-type-badge.vue        |   5 +-
 .../stories/components/resource-utils.ts      |  18 +-
 .../resource-visibility-badge.story.vue       |  19 ++
 .../components/resource-visibility-badge.vue  |  15 +
 13 files changed, 335 insertions(+), 211 deletions(-)
 create mode 100644 src/frontend/stories/components/resource-visibility-badge.story.vue
 create mode 100644 src/frontend/stories/components/resource-visibility-badge.vue

diff --git a/docs/qa/changelog-qa.story.md b/docs/qa/changelog-qa.story.md
index 5da2fb97..0acd39b2 100644
--- a/docs/qa/changelog-qa.story.md
+++ b/docs/qa/changelog-qa.story.md
@@ -42,6 +42,7 @@ _Generated by `npm run changelog:qa -- --format histoire`. Edit the Summary sect
 | Stat tiles | dashboard | `stat-tiles.vue` | [Stat tiles](../../src/frontend/dashboard/stat-tiles.story.vue) |
 | Story Create | stories | `story-create.vue` | [Story Create](../../src/frontend/stories/story-create.story.vue) |
 | Story Edit | stories | `story-edit.vue` | [Story Edit](../../src/frontend/stories/story-edit.story.vue) |
+| Story Gallery | stories | `story-gallery.vue` | [Story Gallery](../../src/frontend/stories/story-gallery.story.vue) |
 | Stream Index | streams | `stream-index.vue` | [Stream Index](../../src/frontend/streams/stream-index.story.vue) |
 | Studio Button | shared | `studio-button.vue` | [Studio Button](../../src/frontend/shared/studio-button.story.vue) |
 | Tab Button | shared | `tab-button.vue` | [Tab Button](../../src/frontend/shared/tab-button.story.vue) |
@@ -90,13 +91,13 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 | Resource Thumbnail | resources | `resource-thumbnail.vue` | [Resource Thumbnail](../../src/frontend/stories/components/resource-thumbnail.story.vue) |
 | Resource Type Badge | resources | `resource-type-badge.vue` | [Resource Type Badge](../../src/frontend/stories/components/resource-type-badge.story.vue) |
 | Resource Used In | resources | `resource-used-in.vue` | [Resource Used In](../../src/frontend/resources/resource-used-in.story.vue) |
+| Resource Visibility Badge | resources | `resource-visibility-badge.vue` | [Resource Visibility Badge](../../src/frontend/stories/components/resource-visibility-badge.story.vue) |
 | Resources index page | resources | `resources-index.vue` | [Resources index page](../../src/frontend/resources/resources-index.story.vue) |
 | Rich Listbox | shared | `rich-listbox.vue` | [Rich Listbox](../../src/frontend/shared/rich-listbox.story.vue) |
 | Status Tag | shared | `status-tag.vue` | [Status Tag](../../src/frontend/shared/status-tag.story.vue) |
 | Story Edit Details | stories | `story-edit-details.vue` | [Story Edit Details](../../src/frontend/stories/components/story-edit-details.story.vue) |
 | Story Edit Resources | resources | `story-edit-resources.vue` | [Story Edit Resources](../../src/frontend/stories/components/story-edit-resources.story.vue) |
 | Story Edit Sections | stories | `story-edit-sections.vue` | [Story Edit Sections](../../src/frontend/stories/components/story-edit-sections.story.vue) |
-| Story Gallery | stories | `story-gallery.vue` | [Story Gallery](../../src/frontend/stories/story-gallery.story.vue) |
 | Story Index | stories | `story-index.vue` | [Story Index](../../src/frontend/stories/story-index.story.vue) |
 | Story Item | stories | `story-item.vue` | [Story Item](../../src/frontend/stories/components/story-item.story.vue) |
 | Stream Gallery | streams | `stream-gallery.vue` | [Stream Gallery](../../src/frontend/streams/stream-gallery.story.vue) |
diff --git a/src/frontend/resources/resource-index-item.story.vue b/src/frontend/resources/resource-index-item.story.vue
index 8d92e263..6fd62bd2 100644
--- a/src/frontend/resources/resource-index-item.story.vue
+++ b/src/frontend/resources/resource-index-item.story.vue
@@ -58,6 +58,24 @@
       />
     </Variant>
 
+    <Variant title="Grid / Public visibility">
+      <ResourceIndexItem
+        :resource="resource('r1')"
+        view-mode="grid"
+        @edit="onEdit"
+        @delete="onDelete"
+      />
+    </Variant>
+
+    <Variant title="Grid / Guest visibility">
+      <ResourceIndexItem
+        :resource="resource('r14')"
+        view-mode="grid"
+        @edit="onEdit"
+        @delete="onDelete"
+      />
+    </Variant>
+
     <Variant title="Grid / No description">
       <ResourceIndexItem
         :resource="withoutDescription"
@@ -174,6 +192,104 @@
       </div>
     </Variant>
 
+    <Variant title="List / Public visibility">
+      <div class="overflow-x-auto rounded-xl border border-gray-200 bg-white">
+        <table class="w-full min-w-[720px] table-auto">
+          <thead class="border-b border-gray-200 bg-gray-50">
+            <tr>
+              <th
+                class="max-w-[400px] px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
+              >
+                Resource
+              </th>
+              <th
+                class="whitespace-nowrap px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
+              >
+                Label
+              </th>
+              <th
+                class="whitespace-nowrap px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
+              >
+                Type
+              </th>
+              <th
+                class="whitespace-nowrap px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
+              >
+                Visibility
+              </th>
+              <th
+                class="whitespace-nowrap px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
+              >
+                Updated
+              </th>
+              <th
+                class="whitespace-nowrap px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <ResourceIndexItem
+              :resource="resource('r1')"
+              view-mode="list"
+              @edit="onEdit"
+              @delete="onDelete"
+            />
+          </tbody>
+        </table>
+      </div>
+    </Variant>
+
+    <Variant title="List / Guest visibility">
+      <div class="overflow-x-auto rounded-xl border border-gray-200 bg-white">
+        <table class="w-full min-w-[720px] table-auto">
+          <thead class="border-b border-gray-200 bg-gray-50">
+            <tr>
+              <th
+                class="max-w-[400px] px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
+              >
+                Resource
+              </th>
+              <th
+                class="whitespace-nowrap px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
+              >
+                Label
+              </th>
+              <th
+                class="whitespace-nowrap px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
+              >
+                Type
+              </th>
+              <th
+                class="whitespace-nowrap px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
+              >
+                Visibility
+              </th>
+              <th
+                class="whitespace-nowrap px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
+              >
+                Updated
+              </th>
+              <th
+                class="whitespace-nowrap px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <ResourceIndexItem
+              :resource="resource('r14')"
+              view-mode="list"
+              @edit="onEdit"
+              @delete="onDelete"
+            />
+          </tbody>
+        </table>
+      </div>
+    </Variant>
+
     <Variant title="List / Leader visibility">
       <div class="overflow-x-auto rounded-xl border border-gray-200 bg-white">
         <table class="w-full min-w-[720px] table-auto">
diff --git a/src/frontend/resources/resource-index-item.vue b/src/frontend/resources/resource-index-item.vue
index 5d3596b5..5f45e872 100644
--- a/src/frontend/resources/resource-index-item.vue
+++ b/src/frontend/resources/resource-index-item.vue
@@ -68,12 +68,7 @@
             {{ resource.usedInCount }}
           </span>
           <ResourceTypeBadge :type="resource.type" />
-          <span
-            class="rounded-xl px-2 py-0.5 text-xs font-medium capitalize"
-            :class="visibilityBadgeClasses(resource.visibility)"
-          >
-            {{ resource.visibility }}
-          </span>
+          <ResourceVisibilityBadge :visibility="resource.visibility" />
           <Menu as="div" class="relative">
             <MenuButton
               class="rounded-xl p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
@@ -161,12 +156,7 @@
       <ResourceTypeBadge :type="resource.type" />
     </td>
     <td class="whitespace-nowrap px-6 py-4">
-      <span
-        class="rounded-xl px-2 py-1 text-xs font-medium capitalize"
-        :class="visibilityBadgeClasses(resource.visibility)"
-      >
-        {{ resource.visibility }}
-      </span>
+      <ResourceVisibilityBadge :visibility="resource.visibility" />
     </td>
     <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
       {{ formatListDate(resource.updatedAt) }}
@@ -206,9 +196,10 @@ import {
 } from '@lucide/vue';
 import { DateTime } from 'luxon';
 import type { Component } from 'vue';
-import type { ResourceIndexItem, ResourceType, VisibilityType } from '../../types';
+import type { ResourceIndexItem, ResourceType } from '../../types';
 import ResourceThumbnail from '../stories/components/resource-thumbnail.vue';
 import ResourceTypeBadge from '../stories/components/resource-type-badge.vue';
+import ResourceVisibilityBadge from '../stories/components/resource-visibility-badge.vue';
 
 defineProps<{
   resource: ResourceIndexItem;
@@ -228,9 +219,6 @@ const formatListDate = (value: string): string => {
   return parsed.isValid ? parsed.toFormat('dd/MM/yyyy') : value;
 };
 
-const visibilityBadgeClasses = (visibility: VisibilityType): string =>
-  visibility === 'public' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700';
-
 const iconFor = (type: ResourceType): Component => {
   switch (type) {
     case 'video':
diff --git a/src/frontend/resources/resources-edit.vue b/src/frontend/resources/resources-edit.vue
index b25107ca..767e8b96 100644
--- a/src/frontend/resources/resources-edit.vue
+++ b/src/frontend/resources/resources-edit.vue
@@ -1,152 +1,152 @@
 <template>
   <AppLayout :title="headerTitle" :subtitle="headerSubtitle">
     <template #actions>
-          <StudioButton label="Cancel" variant="outline" @click="cancel" />
-          <StudioButton
-            v-if="!resource.id"
-            label="Create Resource"
-            :disabled="isSaving || !canCreate"
-            variant="primary"
-            @click="save"
-          />
-          <StudioButton
-            v-else
-            label="Save Changes"
-            :disabled="isSaving"
-            variant="secondary"
-            @click="save"
-          />
-        </template>
+      <StudioButton label="Cancel" variant="outline" @click="cancel" />
+      <StudioButton
+        v-if="!resource.id"
+        label="Create Resource"
+        :disabled="isSaving || !canCreate"
+        variant="primary"
+        @click="save"
+      />
+      <StudioButton
+        v-else
+        label="Save Changes"
+        :disabled="isSaving"
+        variant="primary"
+        @click="save"
+      />
+    </template>
 
     <template #main>
-    <div class="relative space-y-6">
-      <form :dir="shared.isRtl ? 'rtl' : 'ltr'" class="form-panel">
-        <StringField
-          :field="{
-            name: 'title',
-            label: 'Title',
-            widget: 'string',
-            placeholderText: 'Enter resource title',
-          }"
-          :is-nested="true"
-        />
-
-        <MarkdownField
-          :field="{
-            name: 'description',
-            label: 'Description',
-            widget: 'markdown',
-            noMarkup: true,
-            minimal: true,
-            placeholderText: 'Brief description of this resource...',
-          }"
-          :is-nested="true"
-        />
-
-        <div>
-          <RichListbox
-            v-model="selectedType"
-            label="Resource Type"
-            :options="resourceTypes"
-            @update:model-value="setType"
+      <div class="relative space-y-6">
+        <form :dir="shared.isRtl ? 'rtl' : 'ltr'" class="form-panel">
+          <StringField
+            :field="{
+              name: 'title',
+              label: 'Title',
+              widget: 'string',
+              placeholderText: 'Enter resource title',
+            }"
+            :is-nested="true"
           />
-        </div>
-
-        <StringField
-          v-if="selectedType === 'url'"
-          :field="{
-            name: 'url',
-            label: 'URL',
-            widget: 'string',
-            placeholderText: 'https://...',
-          }"
-          :is-nested="true"
-        />
-
-        <VideoField
-          v-if="selectedType === 'video'"
-          :field="{
-            label: 'Video',
-            name: 'video',
-            widget: 'video',
-            description: 'MP4 and MOV files up to 500MB',
-            extensions: ['.mp4', '.mov'],
-            collectionId: config.videoCollectionId,
-            maxSize: 500662310,
-          }"
-          :is-nested="true"
-        />
 
-        <MarkdownField
-          v-if="selectedType === 'text'"
-          :field="{
-            name: 'content',
-            label: 'Article Content',
-            widget: 'markdown',
-            placeholderText: 'Write your article content here...',
-            toolbar: [
-              'heading-1',
-              'heading-2',
-              'bold',
-              'italic',
-              'underline',
-              'strikethrough',
-              'unordered-list',
-              'ordered-list',
-              'quote',
-              'horizontal-rule',
-              'link',
-              '|',
-              'undo',
-              'redo',
-            ],
-          }"
-          :is-nested="true"
-        />
+          <MarkdownField
+            :field="{
+              name: 'description',
+              label: 'Description',
+              widget: 'markdown',
+              noMarkup: true,
+              minimal: true,
+              placeholderText: 'Brief description of this resource...',
+            }"
+            :is-nested="true"
+          />
 
-        <ImageField
-          :field="{
-            label: 'Thumbnail Image (Optional)',
-            name: 'imageUrl',
-            widget: 'image',
-            uploadPreset: 'resources',
-            description: 'PNG, JPG, GIF up to 10MB',
-            extensions: ['.jpg', '.jpeg', '.png', '.gif', '.webp'],
-            maxSize: 10_000_000,
-          }"
-          :is-nested="true"
-        />
+          <div>
+            <RichListbox
+              v-model="selectedType"
+              label="Resource Type"
+              :options="resourceTypes"
+              @update:model-value="setType"
+            />
+          </div>
 
-        <div>
           <StringField
+            v-if="selectedType === 'url'"
             :field="{
-              name: 'label',
-              label: 'Label (Optional)',
+              name: 'url',
+              label: 'URL',
               widget: 'string',
-              placeholderText: 'e.g., Supplementary Reading',
+              placeholderText: 'https://...',
             }"
             :is-nested="true"
           />
-          <p class="mt-1 text-sm text-gray-500">
-            Organise resources on the Story listing. Resources without a label appear
-            together in one block.
-          </p>
-        </div>
-
-        <RichListbox
-          v-model="visibility"
-          label="Visibility"
-          :options="visibilityOptions"
-          @update:model-value="setVisibility"
-        />
-      </form>
 
-      <ResourceUsedIn
-        v-if="resource.id"
-        :stories="usedInStories"
-        :locale="shared.locale"
-      />
-    </div>
+          <VideoField
+            v-if="selectedType === 'video'"
+            :field="{
+              label: 'Video',
+              name: 'video',
+              widget: 'video',
+              description: 'MP4 and MOV files up to 500MB',
+              extensions: ['.mp4', '.mov'],
+              collectionId: config.videoCollectionId,
+              maxSize: 500662310,
+            }"
+            :is-nested="true"
+          />
+
+          <MarkdownField
+            v-if="selectedType === 'text'"
+            :field="{
+              name: 'content',
+              label: 'Article Content',
+              widget: 'markdown',
+              placeholderText: 'Write your article content here...',
+              toolbar: [
+                'heading-1',
+                'heading-2',
+                'bold',
+                'italic',
+                'underline',
+                'strikethrough',
+                'unordered-list',
+                'ordered-list',
+                'quote',
+                'horizontal-rule',
+                'link',
+                '|',
+                'undo',
+                'redo',
+              ],
+            }"
+            :is-nested="true"
+          />
+
+          <ImageField
+            :field="{
+              label: 'Thumbnail Image (Optional)',
+              name: 'imageUrl',
+              widget: 'image',
+              uploadPreset: 'resources',
+              description: 'PNG, JPG, GIF up to 10MB',
+              extensions: ['.jpg', '.jpeg', '.png', '.gif', '.webp'],
+              maxSize: 10_000_000,
+            }"
+            :is-nested="true"
+          />
+
+          <div>
+            <StringField
+              :field="{
+                name: 'label',
+                label: 'Label (Optional)',
+                widget: 'string',
+                placeholderText: 'e.g., Supplementary Reading',
+              }"
+              :is-nested="true"
+            />
+            <p class="mt-1 text-sm text-gray-500">
+              Organise resources on the Story listing. Resources without a label appear
+              together in one block.
+            </p>
+          </div>
+
+          <RichListbox
+            v-model="visibility"
+            label="Visibility"
+            :options="visibilityOptions"
+            @update:model-value="setVisibility"
+          />
+        </form>
+
+        <ResourceUsedIn
+          v-if="resource.id"
+          :stories="usedInStories"
+          :locale="shared.locale"
+        />
+      </div>
     </template>
   </AppLayout>
 </template>
diff --git a/src/frontend/shared/colors.palette.ts b/src/frontend/shared/colors.palette.ts
index e66f0f62..2cc331c7 100644
--- a/src/frontend/shared/colors.palette.ts
+++ b/src/frontend/shared/colors.palette.ts
@@ -138,20 +138,12 @@ export const colorSections: ColorSection[] = [
       { name: 'emerald-500', class: 'bg-emerald-500' },
     ],
   },
-  {
-    title: 'Orange',
-    colors: [
-      { name: 'orange-100', class: 'bg-orange-100' },
-      { name: 'orange-700', class: 'bg-orange-700' },
-    ],
-  },
   {
     title: 'Violet',
     colors: [
       { name: 'violet-100', class: 'bg-violet-100' },
       { name: 'violet-50', class: 'bg-violet-50' },
       { name: 'violet-600', class: 'bg-violet-600' },
-      { name: 'violet-700', class: 'bg-violet-700' },
     ],
   },
 ];
diff --git a/src/frontend/shared/colors.usage.ts b/src/frontend/shared/colors.usage.ts
index 028a162d..fdf88603 100644
--- a/src/frontend/shared/colors.usage.ts
+++ b/src/frontend/shared/colors.usage.ts
@@ -47,7 +47,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/language-selector.vue',
       'ui/components/ui-string-item.vue',
     ] },
-  'blue-100': { count: 10, files: [
+  'blue-100': { count: 9, files: [
       'invitation/invitation-index-item.vue',
       'settings/languages/components/language-list-controls.vue',
       'shared/icon-button.story.vue',
@@ -57,7 +57,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/nav-rail-toolbar.vue',
       'shared/status-tag.vue',
       'stories/components/resource-picker.vue',
-      'stories/components/resource-utils.ts',
     ] },
   'blue-200': { count: 5, files: [
       'invitation/invitations-index.vue',
@@ -140,11 +139,10 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'blue-700': { count: 8, files: [
+  'blue-700': { count: 7, files: [
       'invitation/invitation-index-item.vue',
       'resources/resource-index-item.vue',
       'settings/languages/components/request-app-update-modal.vue',
-      'stories/components/resource-utils.ts',
       'team/components/user-row.vue',
     ] },
   'blue-800': { count: 7, files: [
@@ -198,7 +196,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'dashboard/stat-tile.vue',
       'fields/list/foldable-list.vue',
     ] },
-  'gray-100': { count: 73, files: [
+  'gray-100': { count: 71, files: [
       'fields/list/flat-list.vue',
       'fields/region-field.vue',
       'fields/scripture-field.vue',
@@ -230,17 +228,17 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/tab-button.story.vue',
       'stories/components/index-card.vue',
       'stories/components/panel-list.vue',
-      'stories/components/resource-attached-item.vue',
       'stories/components/resource-label-group.vue',
       'stories/components/resource-picker.vue',
       'stories/components/resource-thumbnail.vue',
+      'stories/components/resource-type-badge.vue',
       'stories/components/resource-utils.ts',
       'stories/components/story-item.vue',
       'streams/components/drop-item.vue',
       'streams/components/stream-item.vue',
       'team/components/user-row.vue',
     ] },
-  'gray-200': { count: 97, files: [
+  'gray-200': { count: 105, files: [
       'audience/audience-index.vue',
       'dashboard/stat-tile.vue',
       'fields/attachments/file-upload.vue',
@@ -268,6 +266,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'resources/resources-index.vue',
       'settings/languages/components/language-table.vue',
       'settings/languages/components/request-app-update-modal.vue',
+      'shared/list-switcher.vue',
       'shared/nav-rail-panel.vue',
       'shared/navigation-pane.vue',
       'shared/pagination.vue',
@@ -288,7 +287,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'ui/components/ui-card.vue',
       'ui/components/ui-string-item.vue',
     ] },
-  'gray-300': { count: 60, files: [
+  'gray-300': { count: 61, files: [
       'audience/audience-index.vue',
       'auth/create-account.vue',
       'auth/login-index.vue',
@@ -358,7 +357,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-50': { count: 231, files: [
+  'gray-50': { count: 245, files: [
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
@@ -428,7 +427,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/users-index.vue',
       'ui/ui-page.vue',
     ] },
-  'gray-500': { count: 161, files: [
+  'gray-500': { count: 173, files: [
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
@@ -532,7 +531,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-700': { count: 45, files: [
+  'gray-700': { count: 44, files: [
       'fields/attachments/video-meta.vue',
       'fields/list/foldable-list.vue',
       'fields/panel-field.vue',
@@ -551,8 +550,8 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/pagination.vue',
       'shared/pill-button.vue',
       'shared/studio-button.vue',
-      'stories/components/resource-attached-item.vue',
       'stories/components/resource-picker.vue',
+      'stories/components/resource-type-badge.vue',
       'stories/components/resource-utils.ts',
       'stories/components/story-item.vue',
       'team/components/user-row.vue',
@@ -617,10 +616,9 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'green-100': { count: 6, files: [
+  'green-100': { count: 5, files: [
       'invitation/invitation-index-item.vue',
       'pages/page-index-item.vue',
-      'resources/resource-index-item.vue',
       'stories/components/story-item.vue',
       'streams/components/stream-item.vue',
     ] },
@@ -645,10 +643,9 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/icon-button.story.vue',
       'shared/label-button.story.vue',
     ] },
-  'green-700': { count: 4, files: [
+  'green-700': { count: 3, files: [
       'invitation/invitation-index-item.vue',
       'pages/page-index-item.vue',
-      'resources/resource-index-item.vue',
       'stories/components/story-item.vue',
     ] },
   'green-800': { count: 4, files: [
@@ -694,12 +691,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/add-item-button.vue',
       'shared/navigation-pane.vue',
     ] },
-  'orange-100': { count: 1, files: [
-      'stories/components/resource-utils.ts',
-    ] },
-  'orange-700': { count: 1, files: [
-      'stories/components/resource-utils.ts',
-    ] },
   'red-100': { count: 2, files: [
       'settings/languages/components/language-modal.vue',
       'streams/components/stream-item.vue',
@@ -764,7 +755,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'streams/components/stream-item.vue',
     ] },
   'studio-dark': { count: 0, files: [] },
-  'studio-forest': { count: 17, files: [
+  'studio-forest': { count: 22, files: [
       'dashboard/language-block.vue',
       'dashboard/ring.vue',
       'shared/app-footer.vue',
@@ -773,25 +764,29 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/studio-button.vue',
       'shared/tab-button.story.vue',
       'shared/tab-button.vue',
+      'stories/components/resource-utils.ts',
     ] },
-  'studio-green': { count: 11, files: [
+  'studio-green': { count: 9, files: [
       'shared/index-filter.vue',
       'shared/studio-button.vue',
       'shared/tab-button.story.vue',
       'stories/components/panel-list.vue',
       'stories/components/resource-empty-state.vue',
       'stories/components/resource-picker.vue',
+      'stories/components/resource-utils.ts',
     ] },
-  'studio-lime': { count: 7, files: [
+  'studio-lime': { count: 8, files: [
       'dashboard/language-block.vue',
       'dashboard/ring.vue',
       'dashboard/stat-tile.vue',
       'shared/index-tab-button.vue',
       'shared/studio-button.vue',
       'shared/tab-button.vue',
+      'stories/components/resource-utils.ts',
     ] },
-  'studio-yellow': { count: 1, files: [
+  'studio-yellow': { count: 2, files: [
       'dashboard/action-card.vue',
+      'stories/components/resource-utils.ts',
     ] },
   'transparent': { count: 23, files: [
       'dashboard/ring.vue',
@@ -808,9 +803,8 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/tab-button.vue',
       'stories/components/resource-picker.vue',
     ] },
-  'violet-100': { count: 2, files: [
+  'violet-100': { count: 1, files: [
       'resources/resource-used-in.vue',
-      'stories/components/resource-utils.ts',
     ] },
   'violet-50': { count: 1, files: [
       'resources/resource-used-in.vue',
@@ -818,10 +812,7 @@ export const colorUsage: Record<string, ColorUsage> = {
   'violet-600': { count: 1, files: [
       'resources/resource-used-in.vue',
     ] },
-  'violet-700': { count: 1, files: [
-      'stories/components/resource-utils.ts',
-    ] },
-  'white': { count: 175, files: [
+  'white': { count: 177, files: [
       'audience/audience-index.vue',
       'dashboard/action-card.vue',
       'dashboard/language-block.vue',
@@ -875,7 +866,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/index-tabs.story.vue',
       'shared/label-hint-popup.vue',
       'shared/language-selector.vue',
-      'shared/list-switcher.vue',
       'shared/message-centre.story.vue',
       'shared/meta-box.vue',
       'shared/pagination.vue',
@@ -889,6 +879,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'stories/components/panel-list.vue',
       'stories/components/resource-label-group.vue',
       'stories/components/resource-picker.vue',
+      'stories/components/resource-visibility-badge.story.vue',
       'stories/components/story-item.story.vue',
       'stories/components/story-item.vue',
       'stories/journa-story-edit.vue',
diff --git a/src/frontend/shared/studio-button.vue b/src/frontend/shared/studio-button.vue
index e39cc079..7c6fbcaf 100644
--- a/src/frontend/shared/studio-button.vue
+++ b/src/frontend/shared/studio-button.vue
@@ -90,7 +90,7 @@ const variantClassMap: Record<StudioButtonVariant, string> = {
   primary:
     'bg-studio-forest text-studio-lime enabled:hover:bg-studio-green enabled:hover:text-studio-forest',
   outline:
-    'border border-studio-green bg-transparent text-studio-green enabled:hover:bg-studio-green/5',
+    'border border-studio-forest bg-transparent text-studio-forest enabled:hover:bg-gray-300',
   secondary:
     'min-w-32 bg-gray-200 text-gray-700 enabled:hover:bg-gray-800 enabled:hover:text-white',
   green: 'bg-green-500 text-white enabled:hover:bg-green-400',
diff --git a/src/frontend/stories/components/resource-attached-item.story.vue b/src/frontend/stories/components/resource-attached-item.story.vue
index 944c99a3..7c59eced 100644
--- a/src/frontend/stories/components/resource-attached-item.story.vue
+++ b/src/frontend/stories/components/resource-attached-item.story.vue
@@ -1,12 +1,19 @@
 <template>
   <Story title="Resource Attached Item" group="resources" :layout="{ type: 'grid', width: 800 }">
-    <Variant title="Default">
+    <Variant title="Public visibility">
       <ResourceAttachedItem
         :item="availableResources[0]"
         @remove="onRemove"
       />
     </Variant>
 
+    <Variant title="Guest visibility">
+      <ResourceAttachedItem
+        :item="availableResources[13]"
+        @remove="onRemove"
+      />
+    </Variant>
+
     <Variant title="Leader visibility">
       <ResourceAttachedItem
         :item="availableResources[6]"
diff --git a/src/frontend/stories/components/resource-attached-item.vue b/src/frontend/stories/components/resource-attached-item.vue
index 687bf6a1..cdff830b 100644
--- a/src/frontend/stories/components/resource-attached-item.vue
+++ b/src/frontend/stories/components/resource-attached-item.vue
@@ -20,12 +20,7 @@
           {{ item.title }}
         </h4>
         <ResourceTypeBadge :type="item.type" />
-        <span
-          v-if="item.visibility !== 'public'"
-          class="shrink-0 rounded-xl bg-gray-100 px-2 py-0.5 text-xs font-medium capitalize text-gray-700"
-        >
-          {{ item.visibility }}
-        </span>
+        <ResourceVisibilityBadge :visibility="item.visibility" />
       </div>
       <p
         v-if="item.description"
@@ -61,6 +56,7 @@ import { router } from '@inertiajs/vue3';
 import { GripVertical, SquarePen, X } from '@lucide/vue';
 import ResourceThumbnail from './resource-thumbnail.vue';
 import ResourceTypeBadge from './resource-type-badge.vue';
+import ResourceVisibilityBadge from './resource-visibility-badge.vue';
 import type { ResourceItem } from '../../../types';
 import { useSharedStore } from '../../store';
 
diff --git a/src/frontend/stories/components/resource-type-badge.vue b/src/frontend/stories/components/resource-type-badge.vue
index bcbd24aa..1043f571 100644
--- a/src/frontend/stories/components/resource-type-badge.vue
+++ b/src/frontend/stories/components/resource-type-badge.vue
@@ -1,14 +1,13 @@
 <template>
   <span
-    class="shrink-0 rounded-xl px-2 py-0.5 text-xs font-medium"
-    :class="resourceTypeColor(type)"
+    class="shrink-0 rounded-xl bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700"
   >
     {{ resourceTypeLabel(type) }}
   </span>
 </template>
 
 <script setup lang="ts">
-import { resourceTypeColor, resourceTypeLabel } from './resource-utils';
+import { resourceTypeLabel } from './resource-utils';
 import type { ResourceType } from '../../../types';
 
 defineProps<{
diff --git a/src/frontend/stories/components/resource-utils.ts b/src/frontend/stories/components/resource-utils.ts
index fc101f79..8827abd4 100644
--- a/src/frontend/stories/components/resource-utils.ts
+++ b/src/frontend/stories/components/resource-utils.ts
@@ -1,13 +1,13 @@
-import type { ResourceItem, ResourceType } from '../../../types';
+import type { ResourceItem, ResourceType, VisibilityType } from '../../../types';
 
-export const resourceTypeColor = (type: ResourceType): string => {
-  switch (type) {
-    case 'video':
-      return 'bg-violet-100 text-violet-700';
-    case 'text':
-      return 'bg-blue-100 text-blue-700';
-    case 'url':
-      return 'bg-orange-100 text-orange-700';
+export const visibilityBadgeClasses = (visibility: VisibilityType): string => {
+  switch (visibility) {
+    case 'public':
+      return 'bg-studio-yellow text-studio-forest';
+    case 'leaders':
+      return 'bg-studio-lime text-studio-forest';
+    case 'guests':
+      return 'bg-studio-green text-studio-forest';
     default:
       return 'bg-gray-100 text-gray-700';
   }
diff --git a/src/frontend/stories/components/resource-visibility-badge.story.vue b/src/frontend/stories/components/resource-visibility-badge.story.vue
new file mode 100644
index 00000000..35cc738e
--- /dev/null
+++ b/src/frontend/stories/components/resource-visibility-badge.story.vue
@@ -0,0 +1,19 @@
+<template>
+  <Story
+    title="Resource Visibility Badge"
+    group="resources"
+    :layout="{ type: 'grid', width: 420 }"
+  >
+    <Variant title="All visibility types">
+      <div class="flex flex-wrap gap-2 bg-white p-8">
+        <ResourceVisibilityBadge visibility="public" />
+        <ResourceVisibilityBadge visibility="guests" />
+        <ResourceVisibilityBadge visibility="leaders" />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import ResourceVisibilityBadge from './resource-visibility-badge.vue';
+</script>
diff --git a/src/frontend/stories/components/resource-visibility-badge.vue b/src/frontend/stories/components/resource-visibility-badge.vue
new file mode 100644
index 00000000..b30535ea
--- /dev/null
+++ b/src/frontend/stories/components/resource-visibility-badge.vue
@@ -0,0 +1,15 @@
+<template>
+  <span
+    class="shrink-0 rounded-xl px-2 py-0.5 text-xs font-medium capitalize"
+    :class="visibilityBadgeClasses(visibility)"
+  >
+    {{ visibility }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { visibilityBadgeClasses } from './resource-utils';
+import type { VisibilityType } from '../../../types';
+
+defineProps<{ visibility: VisibilityType }>();
+</script>

From 349ada0e7dfe7441a9c5e6ad55ff3c692caa8f99 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 30 Jul 2026 09:09:17 +0300
Subject: [PATCH 24/39] style: adjustments in rich-listbox

---
 docs/qa/changelog-qa.story.md        | 8 ++++----
 src/frontend/shared/rich-listbox.vue | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/qa/changelog-qa.story.md b/docs/qa/changelog-qa.story.md
index 0acd39b2..d53a0657 100644
--- a/docs/qa/changelog-qa.story.md
+++ b/docs/qa/changelog-qa.story.md
@@ -35,9 +35,13 @@ _Generated by `npm run changelog:qa -- --format histoire`. Edit the Summary sect
 | Panel List | stories | `panel-list.vue` | [Panel List](../../src/frontend/stories/components/panel-list.story.vue) |
 | Preview | stories | `chapter-preview.vue` | [Preview](../../src/frontend/stories/chapter-preview.story.vue) |
 | Request Feedback Modal | settings | `request-feedback-modal.vue` | [Request Feedback Modal](../../src/frontend/settings/languages/components/request-feedback-modal.story.vue) |
+| Resource Attached Item | resources | `resource-attached-item.vue` | [Resource Attached Item](../../src/frontend/stories/components/resource-attached-item.story.vue) |
 | Resource edit | resources | `resources-edit.vue` | [Resource edit](../../src/frontend/resources/resources-edit.story.vue) |
 | Resource Empty State | resources | `resource-empty-state.vue` | [Resource Empty State](../../src/frontend/stories/components/resource-empty-state.story.vue) |
+| Resource Index Item | resources | `resource-index-item.vue` | [Resource Index Item](../../src/frontend/resources/resource-index-item.story.vue) |
 | Resource Picker | resources | `resource-picker.vue` | [Resource Picker](../../src/frontend/stories/components/resource-picker.story.vue) |
+| Resource Type Badge | resources | `resource-type-badge.vue` | [Resource Type Badge](../../src/frontend/stories/components/resource-type-badge.story.vue) |
+| Resource Visibility Badge | resources | `resource-visibility-badge.vue` | [Resource Visibility Badge](../../src/frontend/stories/components/resource-visibility-badge.story.vue) |
 | Ring | dashboard | `ring.vue` | [Ring](../../src/frontend/dashboard/ring.story.vue) |
 | Stat tiles | dashboard | `stat-tiles.vue` | [Stat tiles](../../src/frontend/dashboard/stat-tiles.story.vue) |
 | Story Create | stories | `story-create.vue` | [Story Create](../../src/frontend/stories/story-create.story.vue) |
@@ -83,15 +87,11 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 | Pages Edit | pages | `pages-edit.vue` | [Pages Edit](../../src/frontend/pages/pages-edit.story.vue) |
 | Remove Language Modal | settings | `remove-language-modal.vue` | [Remove Language Modal](../../src/frontend/settings/languages/components/remove-language-modal.story.vue) |
 | Request App Update Modal | settings | `request-app-update-modal.vue` | [Request App Update Modal](../../src/frontend/settings/languages/components/request-app-update-modal.story.vue) |
-| Resource Attached Item | resources | `resource-attached-item.vue` | [Resource Attached Item](../../src/frontend/stories/components/resource-attached-item.story.vue) |
 | Resource Attached List | resources | `resource-attached-list.vue` | [Resource Attached List](../../src/frontend/stories/components/resource-attached-list.story.vue) |
-| Resource Index Item | resources | `resource-index-item.vue` | [Resource Index Item](../../src/frontend/resources/resource-index-item.story.vue) |
 | Resource Label Group | resources | `resource-label-group.vue` | [Resource Label Group](../../src/frontend/stories/components/resource-label-group.story.vue) |
 | Resource not found | resources | `resource-not-found.vue` | [Resource not found](../../src/frontend/resources/resource-not-found.story.vue) |
 | Resource Thumbnail | resources | `resource-thumbnail.vue` | [Resource Thumbnail](../../src/frontend/stories/components/resource-thumbnail.story.vue) |
-| Resource Type Badge | resources | `resource-type-badge.vue` | [Resource Type Badge](../../src/frontend/stories/components/resource-type-badge.story.vue) |
 | Resource Used In | resources | `resource-used-in.vue` | [Resource Used In](../../src/frontend/resources/resource-used-in.story.vue) |
-| Resource Visibility Badge | resources | `resource-visibility-badge.vue` | [Resource Visibility Badge](../../src/frontend/stories/components/resource-visibility-badge.story.vue) |
 | Resources index page | resources | `resources-index.vue` | [Resources index page](../../src/frontend/resources/resources-index.story.vue) |
 | Rich Listbox | shared | `rich-listbox.vue` | [Rich Listbox](../../src/frontend/shared/rich-listbox.story.vue) |
 | Status Tag | shared | `status-tag.vue` | [Status Tag](../../src/frontend/shared/status-tag.story.vue) |
diff --git a/src/frontend/shared/rich-listbox.vue b/src/frontend/shared/rich-listbox.vue
index a1da57e5..16abf089 100644
--- a/src/frontend/shared/rich-listbox.vue
+++ b/src/frontend/shared/rich-listbox.vue
@@ -70,7 +70,7 @@
           >
             <li
               :class="[
-                selected ? 'bg-blue-50' : active ? 'bg-gray-50' : 'bg-white',
+                selected ? 'bg-gray-200' : active ? 'bg-gray-100' : 'bg-white',
                 'relative cursor-default select-none py-3 pl-3 pr-10',
               ]"
             >
@@ -93,7 +93,7 @@
                 v-if="selected"
                 class="absolute inset-y-0 right-0 flex items-center pr-4"
               >
-                <span class="size-2 rounded-full bg-blue-500" aria-hidden="true" />
+                <span class="size-2 rounded-full bg-gray-800" aria-hidden="true" />
               </span>
             </li>
           </ListboxOption>

From 4b79ee7cc90de47897ecf4c76dadeabd3a346e6a Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 30 Jul 2026 13:12:51 +0300
Subject: [PATCH 25/39] refactor: replace DropUp component with
 NavRailLanguageSelector and update language selection handling in nav rail
 components

---
 docs/qa/changelog-qa.story.md                 |  98 ++++++-------
 scripts/generate-qa-changelog.mjs             |  73 ++++++++-
 src/frontend/shared/colors.usage.ts           |  69 ++++-----
 src/frontend/shared/draft-actions.vue         |   8 +-
 src/frontend/shared/drop-up.vue               | 100 -------------
 .../shared/language-option-label.story.vue    |  44 ++++++
 src/frontend/shared/language-option-label.vue |  31 ++++
 src/frontend/shared/language-selector.vue     |  69 ---------
 .../nav-rail-language-selector.story.vue      |  50 +++++++
 .../shared/nav-rail-language-selector.vue     | 138 ++++++++++++++++++
 src/frontend/shared/nav-rail-panel.vue        |  10 +-
 src/frontend/shared/nav-rail-toolbar.vue      |  34 ++---
 12 files changed, 433 insertions(+), 291 deletions(-)
 delete mode 100644 src/frontend/shared/drop-up.vue
 create mode 100644 src/frontend/shared/language-option-label.story.vue
 create mode 100644 src/frontend/shared/language-option-label.vue
 delete mode 100644 src/frontend/shared/language-selector.vue
 create mode 100644 src/frontend/shared/nav-rail-language-selector.story.vue
 create mode 100644 src/frontend/shared/nav-rail-language-selector.vue

diff --git a/docs/qa/changelog-qa.story.md b/docs/qa/changelog-qa.story.md
index d53a0657..859ee89f 100644
--- a/docs/qa/changelog-qa.story.md
+++ b/docs/qa/changelog-qa.story.md
@@ -9,7 +9,7 @@ icon: carbon:checklist
 **Base:** main @ `e214281`  
 **Histoire:** `npm run dev` — open this page from the sidebar under the top group, or use relative links below.
 
-_Generated by `npm run changelog:qa -- --format histoire`. Edit the Summary section below._
+_Generated by `npm run changelog:qa -- --format histoire`. Edit Summary, Checked, and DQA questions below; those persist across `npm run changelog:qa`._
 
 ## Summary
 
@@ -42,6 +42,7 @@ _Generated by `npm run changelog:qa -- --format histoire`. Edit the Summary sect
 | Resource Picker | resources | `resource-picker.vue` | [Resource Picker](../../src/frontend/stories/components/resource-picker.story.vue) |
 | Resource Type Badge | resources | `resource-type-badge.vue` | [Resource Type Badge](../../src/frontend/stories/components/resource-type-badge.story.vue) |
 | Resource Visibility Badge | resources | `resource-visibility-badge.vue` | [Resource Visibility Badge](../../src/frontend/stories/components/resource-visibility-badge.story.vue) |
+| Rich Listbox | shared | `rich-listbox.vue` | [Rich Listbox](../../src/frontend/shared/rich-listbox.story.vue) |
 | Ring | dashboard | `ring.vue` | [Ring](../../src/frontend/dashboard/ring.story.vue) |
 | Stat tiles | dashboard | `stat-tiles.vue` | [Stat tiles](../../src/frontend/dashboard/stat-tiles.story.vue) |
 | Story Create | stories | `story-create.vue` | [Story Create](../../src/frontend/stories/story-create.story.vue) |
@@ -56,54 +57,53 @@ _Generated by `npm run changelog:qa -- --format histoire`. Edit the Summary sect
 
 _Unchanged `.vue` files with co-located stories in folders where something changed. Confirm these still look correct._
 
-| Area | Group | Component | Open in Histoire |
-|------|-------|-----------|------------------|
-| Action Button | shared | `action-button.vue` | [Action Button](../../src/frontend/shared/action-button.story.vue) |
-| Add Item Button | shared | `add-item-button.vue` | [Add Item Button](../../src/frontend/shared/add-item-button.story.vue) |
-| App Layout Header | shared | `app-layout-header.vue` | [App Layout Header](../../src/frontend/shared/app-layout-header.story.vue) |
-| Bible Translations Modal | settings | `bible-translations-modal.vue` | [Bible Translations Modal](../../src/frontend/settings/languages/components/bible-translations-modal.story.vue) |
-| Bookmark Action | shared | `bookmark-action.vue` | [Bookmark Action](../../src/frontend/shared/bookmark-action.story.vue) |
-| Context Menu | shared | `context-menu.vue` | [Context Menu](../../src/frontend/shared/context-menu.story.vue) |
-| Draft Page | stories | `draft-index.vue` | [Draft Page](../../src/frontend/stories/draft-index.story.vue) |
-| Drop Down | shared | `drop-down.vue` | [Drop Down](../../src/frontend/shared/drop-down.story.vue) |
-| Drop Edit | streams | `drop-edit.vue` | [Drop Edit](../../src/frontend/streams/drop-edit.story.vue) |
-| Drop Item | streams | `drop-item.vue` | [Drop Item](../../src/frontend/streams/components/drop-item.story.vue) |
-| Drop Meta Box | streams | `drop-meta-box.vue` | [Drop Meta Box](../../src/frontend/streams/components/drop-meta-box.story.vue) |
-| Expandable Search | shared | `expandable-search.vue` | [Expandable Search](../../src/frontend/shared/expandable-search.story.vue) |
-| Gallery Grid | shared | `gallery-grid.vue` | [Gallery Grid](../../src/frontend/shared/gallery-grid.story.vue) |
-| Glass Button | shared | `glass-button.vue` | [Glass Button](../../src/frontend/shared/glass-button.story.vue) |
-| Icon Button | shared | `icon-button.vue` | [Icon Button](../../src/frontend/shared/icon-button.story.vue) |
-| Index Card | stories | `index-card.vue` | [Index Card](../../src/frontend/stories/components/index-card.story.vue) |
-| Invitation index item | invitation | `invitation-index-item.vue` | [Invitation index item](../../src/frontend/invitation/invitation-index-item.story.vue) |
-| Label Button | shared | `label-button.vue` | [Label Button](../../src/frontend/shared/label-button.story.vue) |
-| Language List Item | settings | `language-list-item.vue` | [Language List Item](../../src/frontend/settings/languages/components/language-list-item.story.vue) |
-| Language Table | settings | `language-table.vue` | [Language Table](../../src/frontend/settings/languages/components/language-table.story.vue) |
-| Message | shared | `message-centre.vue` | [Message](../../src/frontend/shared/message-centre.story.vue) |
-| Meta Box | shared | `meta-box.vue` | [Meta Box](../../src/frontend/shared/meta-box.story.vue) |
-| Meta Meta Box | stories | `meta-meta-box.vue` | [Meta Meta Box](../../src/frontend/stories/components/meta-meta-box.story.vue) |
-| Nav rail panel | shared | `nav-rail-panel.vue` | [Nav rail panel](../../src/frontend/shared/nav-rail-panel.story.vue) |
-| Navigation pane | shared | `navigation-pane.vue` | [Navigation pane](../../src/frontend/shared/navigation-pane.story.vue) |
-| Page Index Item | pages | `page-index-item.vue` | [Page Index Item](../../src/frontend/pages/page-index-item.story.vue) |
-| Pages Edit | pages | `pages-edit.vue` | [Pages Edit](../../src/frontend/pages/pages-edit.story.vue) |
-| Remove Language Modal | settings | `remove-language-modal.vue` | [Remove Language Modal](../../src/frontend/settings/languages/components/remove-language-modal.story.vue) |
-| Request App Update Modal | settings | `request-app-update-modal.vue` | [Request App Update Modal](../../src/frontend/settings/languages/components/request-app-update-modal.story.vue) |
-| Resource Attached List | resources | `resource-attached-list.vue` | [Resource Attached List](../../src/frontend/stories/components/resource-attached-list.story.vue) |
-| Resource Label Group | resources | `resource-label-group.vue` | [Resource Label Group](../../src/frontend/stories/components/resource-label-group.story.vue) |
-| Resource not found | resources | `resource-not-found.vue` | [Resource not found](../../src/frontend/resources/resource-not-found.story.vue) |
-| Resource Thumbnail | resources | `resource-thumbnail.vue` | [Resource Thumbnail](../../src/frontend/stories/components/resource-thumbnail.story.vue) |
-| Resource Used In | resources | `resource-used-in.vue` | [Resource Used In](../../src/frontend/resources/resource-used-in.story.vue) |
-| Resources index page | resources | `resources-index.vue` | [Resources index page](../../src/frontend/resources/resources-index.story.vue) |
-| Rich Listbox | shared | `rich-listbox.vue` | [Rich Listbox](../../src/frontend/shared/rich-listbox.story.vue) |
-| Status Tag | shared | `status-tag.vue` | [Status Tag](../../src/frontend/shared/status-tag.story.vue) |
-| Story Edit Details | stories | `story-edit-details.vue` | [Story Edit Details](../../src/frontend/stories/components/story-edit-details.story.vue) |
-| Story Edit Resources | resources | `story-edit-resources.vue` | [Story Edit Resources](../../src/frontend/stories/components/story-edit-resources.story.vue) |
-| Story Edit Sections | stories | `story-edit-sections.vue` | [Story Edit Sections](../../src/frontend/stories/components/story-edit-sections.story.vue) |
-| Story Index | stories | `story-index.vue` | [Story Index](../../src/frontend/stories/story-index.story.vue) |
-| Story Item | stories | `story-item.vue` | [Story Item](../../src/frontend/stories/components/story-item.story.vue) |
-| Stream Gallery | streams | `stream-gallery.vue` | [Stream Gallery](../../src/frontend/streams/stream-gallery.story.vue) |
-| Stream Item | streams | `stream-item.vue` | [Stream Item](../../src/frontend/streams/components/stream-item.story.vue) |
-| Tab navigation | shared | `tab-navigation.vue` | [Tab navigation](../../src/frontend/shared/tab-navigation.story.vue) |
-| Translation Page | stories | `translation-index.vue` | [Translation Page](../../src/frontend/stories/translation-index.story.vue) |
+| Checked | Area | Group | Component | Open in Histoire | DQA questions |
+|---------|------|-------|-----------|------------------|---------------|
+| [ ] | Action Button | shared | `action-button.vue` | [Action Button](../../src/frontend/shared/action-button.story.vue) |  |
+| [ ] | Add Item Button | shared | `add-item-button.vue` | [Add Item Button](../../src/frontend/shared/add-item-button.story.vue) |  |
+| [ ] | App Layout Header | shared | `app-layout-header.vue` | [App Layout Header](../../src/frontend/shared/app-layout-header.story.vue) |  |
+| [ ] | Bible Translations Modal | settings | `bible-translations-modal.vue` | [Bible Translations Modal](../../src/frontend/settings/languages/components/bible-translations-modal.story.vue) |  |
+| [ ] | Bookmark Action | shared | `bookmark-action.vue` | [Bookmark Action](../../src/frontend/shared/bookmark-action.story.vue) |  |
+| [ ] | Context Menu | shared | `context-menu.vue` | [Context Menu](../../src/frontend/shared/context-menu.story.vue) |  |
+| [ ] | Draft Page | stories | `draft-index.vue` | [Draft Page](../../src/frontend/stories/draft-index.story.vue) |  |
+| [ ] | Drop Down | shared | `drop-down.vue` | [Drop Down](../../src/frontend/shared/drop-down.story.vue) |  |
+| [ ] | Drop Edit | streams | `drop-edit.vue` | [Drop Edit](../../src/frontend/streams/drop-edit.story.vue) |  |
+| [ ] | Drop Item | streams | `drop-item.vue` | [Drop Item](../../src/frontend/streams/components/drop-item.story.vue) |  |
+| [ ] | Drop Meta Box | streams | `drop-meta-box.vue` | [Drop Meta Box](../../src/frontend/streams/components/drop-meta-box.story.vue) |  |
+| [ ] | Expandable Search | shared | `expandable-search.vue` | [Expandable Search](../../src/frontend/shared/expandable-search.story.vue) |  |
+| [ ] | Gallery Grid | shared | `gallery-grid.vue` | [Gallery Grid](../../src/frontend/shared/gallery-grid.story.vue) |  |
+| [ ] | Glass Button | shared | `glass-button.vue` | [Glass Button](../../src/frontend/shared/glass-button.story.vue) |  |
+| [ ] | Icon Button | shared | `icon-button.vue` | [Icon Button](../../src/frontend/shared/icon-button.story.vue) |  |
+| [ ] | Index Card | stories | `index-card.vue` | [Index Card](../../src/frontend/stories/components/index-card.story.vue) |  |
+| [ ] | Invitation index item | invitation | `invitation-index-item.vue` | [Invitation index item](../../src/frontend/invitation/invitation-index-item.story.vue) |  |
+| [ ] | Label Button | shared | `label-button.vue` | [Label Button](../../src/frontend/shared/label-button.story.vue) |  |
+| [ ] | Language List Item | settings | `language-list-item.vue` | [Language List Item](../../src/frontend/settings/languages/components/language-list-item.story.vue) |  |
+| [ ] | Language Table | settings | `language-table.vue` | [Language Table](../../src/frontend/settings/languages/components/language-table.story.vue) |  |
+| [ ] | Message | shared | `message-centre.vue` | [Message](../../src/frontend/shared/message-centre.story.vue) |  |
+| [ ] | Meta Box | shared | `meta-box.vue` | [Meta Box](../../src/frontend/shared/meta-box.story.vue) |  |
+| [ ] | Meta Meta Box | stories | `meta-meta-box.vue` | [Meta Meta Box](../../src/frontend/stories/components/meta-meta-box.story.vue) |  |
+| [ ] | Nav rail panel | shared | `nav-rail-panel.vue` | [Nav rail panel](../../src/frontend/shared/nav-rail-panel.story.vue) |  |
+| [ ] | Navigation pane | shared | `navigation-pane.vue` | [Navigation pane](../../src/frontend/shared/navigation-pane.story.vue) |  |
+| [ ] | Page Index Item | pages | `page-index-item.vue` | [Page Index Item](../../src/frontend/pages/page-index-item.story.vue) |  |
+| [ ] | Pages Edit | pages | `pages-edit.vue` | [Pages Edit](../../src/frontend/pages/pages-edit.story.vue) |  |
+| [ ] | Remove Language Modal | settings | `remove-language-modal.vue` | [Remove Language Modal](../../src/frontend/settings/languages/components/remove-language-modal.story.vue) |  |
+| [ ] | Request App Update Modal | settings | `request-app-update-modal.vue` | [Request App Update Modal](../../src/frontend/settings/languages/components/request-app-update-modal.story.vue) |  |
+| [ ] | Resource Attached List | resources | `resource-attached-list.vue` | [Resource Attached List](../../src/frontend/stories/components/resource-attached-list.story.vue) |  |
+| [ ] | Resource Label Group | resources | `resource-label-group.vue` | [Resource Label Group](../../src/frontend/stories/components/resource-label-group.story.vue) |  |
+| [ ] | Resource not found | resources | `resource-not-found.vue` | [Resource not found](../../src/frontend/resources/resource-not-found.story.vue) |  |
+| [ ] | Resource Thumbnail | resources | `resource-thumbnail.vue` | [Resource Thumbnail](../../src/frontend/stories/components/resource-thumbnail.story.vue) |  |
+| [ ] | Resource Used In | resources | `resource-used-in.vue` | [Resource Used In](../../src/frontend/resources/resource-used-in.story.vue) |  |
+| [ ] | Resources index page | resources | `resources-index.vue` | [Resources index page](../../src/frontend/resources/resources-index.story.vue) |  |
+| [ ] | Status Tag | shared | `status-tag.vue` | [Status Tag](../../src/frontend/shared/status-tag.story.vue) |  |
+| [ ] | Story Edit Details | stories | `story-edit-details.vue` | [Story Edit Details](../../src/frontend/stories/components/story-edit-details.story.vue) |  |
+| [ ] | Story Edit Resources | resources | `story-edit-resources.vue` | [Story Edit Resources](../../src/frontend/stories/components/story-edit-resources.story.vue) |  |
+| [ ] | Story Edit Sections | stories | `story-edit-sections.vue` | [Story Edit Sections](../../src/frontend/stories/components/story-edit-sections.story.vue) |  |
+| [ ] | Story Index | stories | `story-index.vue` | [Story Index](../../src/frontend/stories/story-index.story.vue) |  |
+| [ ] | Story Item | stories | `story-item.vue` | [Story Item](../../src/frontend/stories/components/story-item.story.vue) |  |
+| [ ] | Stream Gallery | streams | `stream-gallery.vue` | [Stream Gallery](../../src/frontend/streams/stream-gallery.story.vue) |  |
+| [ ] | Stream Item | streams | `stream-item.vue` | [Stream Item](../../src/frontend/streams/components/stream-item.story.vue) |  |
+| [ ] | Tab navigation | shared | `tab-navigation.vue` | [Tab navigation](../../src/frontend/shared/tab-navigation.story.vue) |  |
+| [ ] | Translation Page | stories | `translation-index.vue` | [Translation Page](../../src/frontend/stories/translation-index.story.vue) |  |
 
 ## No dedicated story — test indirectly
 
diff --git a/scripts/generate-qa-changelog.mjs b/scripts/generate-qa-changelog.mjs
index 2f4d0e84..717ec08c 100644
--- a/scripts/generate-qa-changelog.mjs
+++ b/scripts/generate-qa-changelog.mjs
@@ -143,6 +143,60 @@ function appendStoryTable(lines, stories, options, outPath) {
   }
 }
 
+function parseTableCells(line) {
+  return line.split('|').map((cell) => cell.trim());
+}
+
+function parsePreservedUnchangedRows(content) {
+  const sectionMatch = content.match(
+    /## Unchanged — regression check[\s\S]*?(?=\n## |\n*$)/,
+  );
+  if (!sectionMatch) return new Map();
+
+  const preserved = new Map();
+
+  for (const line of sectionMatch[0].split('\n')) {
+    if (!line.startsWith('|') || line.includes('---')) continue;
+
+    const cells = parseTableCells(line);
+    if (cells.length < 8) continue;
+
+    const checkedCell = cells[1];
+    const componentCell = cells[4];
+    const dqaCell = cells[6];
+
+    const componentMatch = componentCell.match(/`([^`]+\.vue)`/);
+    if (!componentMatch) continue;
+
+    preserved.set(componentMatch[1], {
+      checked: /\[x\]/i.test(checkedCell),
+      dqaQuestions: dqaCell,
+    });
+  }
+
+  return preserved;
+}
+
+function appendUnchangedStoryTable(lines, stories, options, outPath, preserved) {
+  lines.push(
+    '| Checked | Area | Group | Component | Open in Histoire | DQA questions |',
+    '|---------|------|-------|-----------|------------------|---------------|',
+  );
+
+  for (const [storyPath, meta] of [...stories.entries()].sort((a, b) =>
+    a[1].title.localeCompare(b[1].title),
+  )) {
+    const component = componentFileName(storyPath);
+    const prev = preserved.get(component);
+    const checked = prev?.checked ? '[x]' : '[ ]';
+    const dqa = prev?.dqaQuestions ?? '';
+    const url = storyLink(storyPath, options, outPath);
+    lines.push(
+      `| ${checked} | ${meta.title} | ${meta.group} | \`${component}\` | [${meta.title}](${url}) | ${dqa} |`,
+    );
+  }
+}
+
 function buildGithubMarkdown({
   branch,
   mergeBase,
@@ -151,6 +205,7 @@ function buildGithubMarkdown({
   unchangedStories,
   noStoryFiles,
   outPath,
+  preserved,
 }) {
   const baseUrl = `${options.host}:${options.port}`;
   const lines = [
@@ -160,7 +215,7 @@ function buildGithubMarkdown({
     `**Histoire (local):** \`npm run dev\` → ${baseUrl}  `,
     '**Histoire (preview):** After opening a PR, use the Cloudflare Pages deployment URL from the PR checks (project: `kit`). Replace the localhost base URL below.',
     '',
-    '_Generated by `npm run changelog:qa`. Edit the Summary section below._',
+    '_Generated by `npm run changelog:qa`. Edit Summary, Checked, and DQA questions below; those persist across `npm run changelog:qa`._',
     '',
     '## Summary',
     '',
@@ -180,11 +235,9 @@ function buildGithubMarkdown({
     '',
     '_Unchanged `.vue` files with co-located stories in folders where something changed. Confirm these still look correct._',
     '',
-    '| Area | Group | Component | Open in Histoire |',
-    '|------|-------|-----------|------------------|',
   );
 
-  appendStoryTable(lines, unchangedStories, options, outPath);
+  appendUnchangedStoryTable(lines, unchangedStories, options, outPath, preserved);
 
   lines.push('', '## No dedicated story — test indirectly', '', '| Component | Notes |', '|-----------|-------|');
 
@@ -209,6 +262,7 @@ function buildHistoireMarkdown({
   unchangedStories,
   noStoryFiles,
   outPath,
+  preserved,
 }) {
   const lines = [
     '---',
@@ -222,7 +276,7 @@ function buildHistoireMarkdown({
     `**Base:** ${options.base} @ \`${mergeBase.slice(0, 7)}\`  `,
     '**Histoire:** `npm run dev` — open this page from the sidebar under the top group, or use relative links below.',
     '',
-    '_Generated by `npm run changelog:qa -- --format histoire`. Edit the Summary section below._',
+    '_Generated by `npm run changelog:qa -- --format histoire`. Edit Summary, Checked, and DQA questions below; those persist across `npm run changelog:qa`._',
     '',
     '## Summary',
     '',
@@ -242,11 +296,9 @@ function buildHistoireMarkdown({
     '',
     '_Unchanged `.vue` files with co-located stories in folders where something changed. Confirm these still look correct._',
     '',
-    '| Area | Group | Component | Open in Histoire |',
-    '|------|-------|-----------|------------------|',
   );
 
-  appendStoryTable(lines, unchangedStories, options, outPath);
+  appendUnchangedStoryTable(lines, unchangedStories, options, outPath, preserved);
 
   lines.push('', '## No dedicated story — test indirectly', '', '| Component | Notes |', '|-----------|-------|');
 
@@ -275,6 +327,10 @@ function main() {
   const extension = options.format === 'histoire' ? '.story.md' : '.md';
   const outPath = options.out ?? join(defaultOutDir, `changelog-qa${extension}`);
 
+  const preserved = existsSync(outPath)
+    ? parsePreservedUnchangedRows(readFileSync(outPath, 'utf8'))
+    : new Map();
+
   const build = options.format === 'histoire' ? buildHistoireMarkdown : buildGithubMarkdown;
   const markdown = build({
     branch,
@@ -284,6 +340,7 @@ function main() {
     unchangedStories,
     noStoryFiles,
     outPath,
+    preserved,
   });
 
   mkdirSync(dirname(outPath), { recursive: true });
diff --git a/src/frontend/shared/colors.usage.ts b/src/frontend/shared/colors.usage.ts
index fdf88603..34cd542e 100644
--- a/src/frontend/shared/colors.usage.ts
+++ b/src/frontend/shared/colors.usage.ts
@@ -22,7 +22,7 @@ export const colorUsage: Record<string, ColorUsage> = {
   'amber-700': { count: 1, files: [
       'invitation/invitation-index-item.vue',
     ] },
-  'black': { count: 30, files: [
+  'black': { count: 29, files: [
       'audience/audience-index.vue',
       'auth/create-account.vue',
       'auth/forgot-password.vue',
@@ -42,19 +42,17 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/app-layout-header.story.vue',
       'shared/context-menu.vue',
       'shared/drop-down.vue',
-      'shared/drop-up.vue',
       'shared/label-hint-popup.vue',
-      'shared/language-selector.vue',
+      'shared/nav-rail-language-selector.vue',
       'ui/components/ui-string-item.vue',
     ] },
-  'blue-100': { count: 9, files: [
+  'blue-100': { count: 8, files: [
       'invitation/invitation-index-item.vue',
       'settings/languages/components/language-list-controls.vue',
       'shared/icon-button.story.vue',
       'shared/icon-button.vue',
       'shared/label-button.vue',
-      'shared/language-selector.vue',
-      'shared/nav-rail-toolbar.vue',
+      'shared/nav-rail-language-selector.vue',
       'shared/status-tag.vue',
       'stories/components/resource-picker.vue',
     ] },
@@ -70,7 +68,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'index.css',
       'shared/pill-button.vue',
     ] },
-  'blue-50': { count: 65, files: [
+  'blue-50': { count: 59, files: [
       'audience/audience-index.vue',
       'fields/select-field.vue',
       'index.css',
@@ -85,7 +83,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'settings/languages/components/remove-language-modal.story.vue',
       'settings/languages/components/request-feedback-modal.story.vue',
       'settings/settings-index.vue',
-      'shared/draft-actions.vue',
       'shared/expandable-search.vue',
       'shared/glass-button.vue',
       'shared/label-hint.vue',
@@ -101,7 +98,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'ui/components/ui-string-item.vue',
       'ui/ui-page.vue',
     ] },
-  'blue-500': { count: 37, files: [
+  'blue-500': { count: 36, files: [
       'audience/audience-index.vue',
       'fields/select-field.vue',
       'index.css',
@@ -122,7 +119,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'ui/components/ui-card.vue',
       'ui/components/ui-string-item.vue',
     ] },
-  'blue-600': { count: 21, files: [
+  'blue-600': { count: 17, files: [
       'invitation/invitation-index-item.vue',
       'invitation/invitations-index.vue',
       'resources/resource-index-item.vue',
@@ -130,7 +127,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'settings/languages/components/bible-translations-modal.vue',
       'settings/languages/components/language-table-row.vue',
       'settings/settings-index.vue',
-      'shared/draft-actions.vue',
       'stories/components/index-card.vue',
       'stories/components/resource-attached-item.vue',
       'stories/components/resource-label-group.vue',
@@ -145,13 +141,12 @@ export const colorUsage: Record<string, ColorUsage> = {
       'settings/languages/components/request-app-update-modal.vue',
       'team/components/user-row.vue',
     ] },
-  'blue-800': { count: 7, files: [
+  'blue-800': { count: 6, files: [
       'fields/pill/pill-field.vue',
       'shared/icon-button.story.vue',
       'shared/icon-button.vue',
       'shared/label-button.vue',
-      'shared/language-selector.vue',
-      'shared/nav-rail-toolbar.vue',
+      'shared/nav-rail-language-selector.vue',
       'shared/status-tag.vue',
     ] },
   'blue-900': { count: 2, files: [
@@ -215,16 +210,16 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/action-button.vue',
       'shared/context-menu.vue',
       'shared/drop-down.vue',
-      'shared/drop-up.vue',
       'shared/gallery-grid.story.vue',
       'shared/index-filter.vue',
       'shared/index-tab-button.vue',
       'shared/label-hint-popup.vue',
-      'shared/language-selector.vue',
       'shared/list-switcher.vue',
       'shared/meta-box.vue',
+      'shared/nav-rail-language-selector.vue',
       'shared/nav-rail-panel.vue',
       'shared/nav-rail-toolbar.vue',
+      'shared/rich-listbox.vue',
       'shared/tab-button.story.vue',
       'stories/components/index-card.vue',
       'stories/components/panel-list.vue',
@@ -238,7 +233,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'streams/components/stream-item.vue',
       'team/components/user-row.vue',
     ] },
-  'gray-200': { count: 105, files: [
+  'gray-200': { count: 112, files: [
       'audience/audience-index.vue',
       'dashboard/stat-tile.vue',
       'fields/attachments/file-upload.vue',
@@ -266,7 +261,9 @@ export const colorUsage: Record<string, ColorUsage> = {
       'resources/resources-index.vue',
       'settings/languages/components/language-table.vue',
       'settings/languages/components/request-app-update-modal.vue',
+      'shared/language-option-label.story.vue',
       'shared/list-switcher.vue',
+      'shared/nav-rail-language-selector.story.vue',
       'shared/nav-rail-panel.vue',
       'shared/navigation-pane.vue',
       'shared/pagination.vue',
@@ -357,7 +354,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-50': { count: 245, files: [
+  'gray-50': { count: 252, files: [
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
@@ -398,6 +395,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/app-layout-header.story.vue',
       'shared/app-layout.vue',
       'shared/context-menu.vue',
+      'shared/draft-actions.vue',
       'shared/expandable-search.story.vue',
       'shared/expandable-search.vue',
       'shared/gallery-grid.story.vue',
@@ -405,8 +403,10 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/glass-button.story.vue',
       'shared/index-filter.vue',
       'shared/index-tab-button.vue',
+      'shared/language-option-label.vue',
       'shared/list-switcher.vue',
       'shared/meta-box.vue',
+      'shared/nav-rail-language-selector.story.vue',
       'shared/nav-rail-panel.story.vue',
       'shared/pagination.vue',
       'shared/public-layout.vue',
@@ -427,7 +427,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/users-index.vue',
       'ui/ui-page.vue',
     ] },
-  'gray-500': { count: 173, files: [
+  'gray-500': { count: 174, files: [
       'audience/audience-index.vue',
       'audience/components/audience-row.vue',
       'dashboard/language-block.vue',
@@ -470,6 +470,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/gallery-item.vue',
       'shared/index-filter.vue',
       'shared/index-tab-button.vue',
+      'shared/language-option-label.vue',
       'shared/list-switcher.vue',
       'shared/meta-box.vue',
       'shared/rich-listbox.vue',
@@ -489,7 +490,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/users-index.vue',
       'ui/ui-page.vue',
     ] },
-  'gray-600': { count: 57, files: [
+  'gray-600': { count: 61, files: [
       'auth/login-index.vue',
       'fields/attachments/attachment-field.vue',
       'fields/attachments/file-upload.vue',
@@ -509,6 +510,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'settings/languages/components/bible-translations-modal.vue',
       'settings/languages/components/language-modal.vue',
       'shared/action-button.story.vue',
+      'shared/draft-actions.vue',
       'shared/expandable-search.story.vue',
       'shared/expandable-search.vue',
       'shared/glass-button.story.vue',
@@ -531,7 +533,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-700': { count: 44, files: [
+  'gray-700': { count: 41, files: [
       'fields/attachments/video-meta.vue',
       'fields/list/foldable-list.vue',
       'fields/panel-field.vue',
@@ -543,10 +545,9 @@ export const colorUsage: Record<string, ColorUsage> = {
       'settings/languages/components/bible-translations-modal.vue',
       'shared/context-menu.vue',
       'shared/drop-down.vue',
-      'shared/drop-up.vue',
       'shared/expandable-search.vue',
-      'shared/language-selector.vue',
       'shared/list-switcher.vue',
+      'shared/nav-rail-language-selector.vue',
       'shared/pagination.vue',
       'shared/pill-button.vue',
       'shared/studio-button.vue',
@@ -557,7 +558,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'team/components/user-row.vue',
       'ui/components/ui-card.vue',
     ] },
-  'gray-800': { count: 26, files: [
+  'gray-800': { count: 27, files: [
       'dashboard/action-card.vue',
       'dashboard/dashboard-index.vue',
       'dashboard/ring.vue',
@@ -569,6 +570,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'settings/settings-index.vue',
       'shared/gallery-grid.story.vue',
       'shared/gallery-item.vue',
+      'shared/rich-listbox.vue',
       'shared/studio-button.vue',
       'stories/components/panel-list.vue',
       'streams/components/drop-item.vue',
@@ -599,10 +601,10 @@ export const colorUsage: Record<string, ColorUsage> = {
       'settings/languages/components/request-app-update-modal.vue',
       'shared/context-menu.vue',
       'shared/drop-down.vue',
-      'shared/drop-up.vue',
       'shared/expandable-search.vue',
-      'shared/language-selector.vue',
+      'shared/language-option-label.vue',
       'shared/list-switcher.vue',
+      'shared/nav-rail-language-selector.vue',
       'shared/navigation-pane.vue',
       'shared/pagination.vue',
       'shared/rich-listbox.vue',
@@ -703,7 +705,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/pill-button.vue',
       'shared/studio-button.vue',
     ] },
-  'red-50': { count: 25, files: [
+  'red-50': { count: 24, files: [
       'auth/create-account.vue',
       'dashboard/stat-tiles.vue',
       'fields/date-field.vue',
@@ -716,7 +718,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'settings/languages/components/request-feedback-modal.story.vue',
       'shared/draft-actions.vue',
       'shared/drop-down.vue',
-      'shared/drop-up.vue',
       'shared/message-centre.vue',
       'shared/pill-button.vue',
       'shared/status-tag.vue',
@@ -725,7 +726,7 @@ export const colorUsage: Record<string, ColorUsage> = {
       'stories/components/resource-attached-item.vue',
       'team/components/user-row.vue',
     ] },
-  'red-500': { count: 17, files: [
+  'red-500': { count: 16, files: [
       'auth/create-account.vue',
       'dashboard/stat-tiles.vue',
       'fields/date-field.vue',
@@ -734,7 +735,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'index.css',
       'settings/languages/components/request-feedback-modal.story.vue',
       'shared/drop-down.vue',
-      'shared/drop-up.vue',
       'shared/message-centre.vue',
       'shared/pill-button.vue',
       'shared/status-tag.vue',
@@ -775,11 +775,12 @@ export const colorUsage: Record<string, ColorUsage> = {
       'stories/components/resource-picker.vue',
       'stories/components/resource-utils.ts',
     ] },
-  'studio-lime': { count: 8, files: [
+  'studio-lime': { count: 9, files: [
       'dashboard/language-block.vue',
       'dashboard/ring.vue',
       'dashboard/stat-tile.vue',
       'shared/index-tab-button.vue',
+      'shared/nav-rail-language-selector.vue',
       'shared/studio-button.vue',
       'shared/tab-button.vue',
       'stories/components/resource-utils.ts',
@@ -812,7 +813,7 @@ export const colorUsage: Record<string, ColorUsage> = {
   'violet-600': { count: 1, files: [
       'resources/resource-used-in.vue',
     ] },
-  'white': { count: 177, files: [
+  'white': { count: 178, files: [
       'audience/audience-index.vue',
       'dashboard/action-card.vue',
       'dashboard/language-block.vue',
@@ -857,7 +858,6 @@ export const colorUsage: Record<string, ColorUsage> = {
       'settings/languages/components/request-feedback-modal.story.vue',
       'shared/context-menu.vue',
       'shared/drop-down.vue',
-      'shared/drop-up.vue',
       'shared/expandable-search.vue',
       'shared/gallery-item.vue',
       'shared/glass-button.vue',
@@ -865,9 +865,10 @@ export const colorUsage: Record<string, ColorUsage> = {
       'shared/index-tab-button.vue',
       'shared/index-tabs.story.vue',
       'shared/label-hint-popup.vue',
-      'shared/language-selector.vue',
+      'shared/language-option-label.story.vue',
       'shared/message-centre.story.vue',
       'shared/meta-box.vue',
+      'shared/nav-rail-language-selector.vue',
       'shared/pagination.vue',
       'shared/pill-button.vue',
       'shared/rich-listbox.vue',
diff --git a/src/frontend/shared/draft-actions.vue b/src/frontend/shared/draft-actions.vue
index 1c3e640f..45f8966b 100644
--- a/src/frontend/shared/draft-actions.vue
+++ b/src/frontend/shared/draft-actions.vue
@@ -5,8 +5,8 @@
       :class="[
         'rounded-xl p-1.5 transition-colors',
         shared.showMetaBox
-          ? 'bg-blue-50 text-blue-600'
-          : 'text-gray-400 hover:bg-blue-50 hover:text-blue-600',
+          ? 'bg-gray-50 text-gray-600'
+          : 'text-gray-400 hover:bg-gray-50 hover:text-gray-600',
       ]"
       :aria-pressed="shared.showMetaBox"
       aria-label="Toggle meta box"
@@ -20,8 +20,8 @@
       :class="[
         'rounded-xl p-1.5 transition-colors',
         shared.showAppPreview
-          ? 'bg-blue-50 text-blue-600'
-          : 'text-gray-400 hover:bg-blue-50 hover:text-blue-600',
+          ? 'bg-gray-50 text-gray-600'
+          : 'text-gray-400 hover:bg-gray-50 hover:text-gray-600',
       ]"
       :aria-pressed="shared.showAppPreview"
       aria-label="Toggle app preview"
diff --git a/src/frontend/shared/drop-up.vue b/src/frontend/shared/drop-up.vue
deleted file mode 100644
index 06c6b3c0..00000000
--- a/src/frontend/shared/drop-up.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <Listbox v-model="model" as="div">
-    <div class="relative">
-      <ListboxButton
-        :disabled="isReadOnly"
-        class="relative w-full cursor-default text-nowrap rounded-xl py-2 pl-3 pr-10 text-left text-sm font-semibold leading-5 text-gray-700 focus:outline-none focus:ring-1"
-        :class="{ 'bg-gray-100': isReadOnly, 'glass-surface': !isReadOnly }"
-      >
-        <div class="flex items-center gap-2">
-          <Icon name="translate" class="size-6" />
-          <span class="block w-32 truncate">{{ model }}</span>
-        </div>
-        <span
-          class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
-        >
-          <Icon
-            v-if="!isReadOnly"
-            class="size-6 text-gray-700"
-            aria-hidden="true"
-            name="chevron-down"
-          />
-        </span>
-      </ListboxButton>
-
-      <transition
-        leave-active-class="transition duration-100 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-      >
-        <ListboxOptions
-          class="absolute bottom-full z-10 mb-1 max-h-[calc(100vh-10rem)] min-w-[18rem] overflow-auto rounded-xl bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-        >
-          <ListboxOption
-            v-for="option in options"
-            :key="option"
-            v-slot="{ active, value }"
-            as="template"
-            :value="option"
-            @click="emit('change', option)"
-          >
-            <li
-              :class="[
-                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                'relative cursor-default select-none py-2 pl-3 pr-9',
-              ]"
-            >
-              <span
-                :class="[
-                  value ? 'font-semibold' : 'font-normal',
-                  'grid grid-cols-[auto_auto] gap-x-2 truncate',
-                ]"
-              >
-                <span> {{ option }} </span>
-
-                <Icon v-if="model === option" name="check" />
-              </span>
-
-              <span
-                v-if="value"
-                :class="[
-                  active ? 'text-white' : 'text-red-500/60',
-                  'absolute inset-y-0 right-0 flex items-center pr-4',
-                ]"
-              >
-                <Icon class="size-6" aria-hidden="true" name="check-simple" />
-              </span>
-            </li>
-          </ListboxOption>
-        </ListboxOptions>
-      </transition>
-    </div>
-  </Listbox>
-</template>
-
-<script setup lang="ts">
-import { toRef } from 'vue';
-import type { PropType } from 'vue';
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue';
-import Icon from './icon.vue';
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  options: {
-    type: Array as PropType<string[]>,
-    required: true,
-  },
-  isReadOnly: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-});
-
-const model = toRef(props, 'modelValue');
-
-const emit = defineEmits(['change']);
-</script>
diff --git a/src/frontend/shared/language-option-label.story.vue b/src/frontend/shared/language-option-label.story.vue
new file mode 100644
index 00000000..3c4112a9
--- /dev/null
+++ b/src/frontend/shared/language-option-label.story.vue
@@ -0,0 +1,44 @@
+<template>
+  <Story title="Language option label" group="shared" :layout="{ type: 'grid', width: 280 }">
+    <Variant title="English">
+      <div class="rounded-xl border border-gray-200 bg-white p-3">
+        <LanguageOptionLabel :spec="english" />
+      </div>
+    </Variant>
+
+    <Variant title="Spanish">
+      <div class="rounded-xl border border-gray-200 bg-white p-3">
+        <LanguageOptionLabel :spec="spanish" />
+      </div>
+    </Variant>
+
+    <Variant title="Chinese (Simplified)">
+      <div class="rounded-xl border border-gray-200 bg-white p-3">
+        <LanguageOptionLabel :spec="chineseSimplified" />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import LanguageOptionLabel from './language-option-label.vue';
+import type { LanguageSpecification } from '../../types';
+
+const english: LanguageSpecification = {
+  language: 'English',
+  locale: 'en',
+  languageDirection: 'ltr',
+};
+
+const spanish: LanguageSpecification = {
+  language: 'Spanish | Español',
+  locale: 'es',
+  languageDirection: 'ltr',
+};
+
+const chineseSimplified: LanguageSpecification = {
+  language: 'Chinese (Simplified) | 简体中文',
+  locale: 'zh-Hans',
+  languageDirection: 'ltr',
+};
+</script>
diff --git a/src/frontend/shared/language-option-label.vue b/src/frontend/shared/language-option-label.vue
new file mode 100644
index 00000000..a8dd8901
--- /dev/null
+++ b/src/frontend/shared/language-option-label.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="min-w-0">
+    <p
+      class="truncate text-sm text-gray-900"
+      :class="{ 'font-semibold': emphasis, 'font-normal': !emphasis }"
+    >
+      {{ displayName }}
+    </p>
+    <p class="truncate text-sm text-gray-500">{{ subtitle }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { LanguageSpecification } from '../../types';
+import { languageDisplayName } from './helpers';
+
+const props = withDefaults(
+  defineProps<{
+    spec: LanguageSpecification;
+    emphasis?: boolean;
+  }>(),
+  {
+    emphasis: true,
+  },
+);
+
+const displayName = computed(() => languageDisplayName(props.spec.language));
+
+const subtitle = computed(() => `${displayName.value} (${props.spec.locale})`);
+</script>
diff --git a/src/frontend/shared/language-selector.vue b/src/frontend/shared/language-selector.vue
deleted file mode 100644
index aadbbe1d..00000000
--- a/src/frontend/shared/language-selector.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <Menu as="div" class="relative inline-block text-left">
-    <div>
-      <MenuButton
-        :disabled="isReadOnly"
-        class="relative flex size-14 items-center justify-center rounded-full transition-all duration-75 hover:bg-gray-100"
-      >
-        <span
-          class="absolute right-2 top-4 rounded-xl bg-blue-100 px-1 py-[2px] text-[8px] font-medium uppercase leading-[9.36px] text-blue-800"
-        >
-          {{ currentLocale }}
-        </span>
-        <Languages class="size-6" aria-hidden="true" />
-      </MenuButton>
-    </div>
-
-    <transition
-      enter-active-class="transition duration-100 ease-out"
-      enter-from-class="opacity-0 transform scale-95"
-      enter-to-class="opacity-100 transform scale-100"
-      leave-active-class="transition duration-75 ease-in"
-      leave-from-class="opacity-100 transform scale-100"
-      leave-to-class="opacity-0 transform scale-95"
-    >
-      <MenuItems
-        class="absolute left-0 z-10 max-h-[calc(100vh-240px)] w-56 origin-top-right overflow-y-auto rounded-xl bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
-      >
-        <div v-for="language in languages" :key="language.locale" class="py-1">
-          <MenuItem v-slot="{ active }">
-            <button
-              :class="[
-                active ? 'bg-gray-100 text-gray-900 outline-none' : 'text-gray-700',
-                'grid w-full grid-cols-2 items-center gap-x-2 px-4 py-2 text-left text-sm',
-              ]"
-              @click="onLanguage(language.language)"
-            >
-              <span> {{ language.language }}</span>
-              <Check
-                v-if="language.language === currentLanguage"
-                class="size-4 justify-self-end"
-                aria-hidden="true"
-              />
-            </button>
-          </MenuItem>
-        </div>
-      </MenuItems>
-    </transition>
-  </Menu>
-</template>
-
-<script setup lang="ts">
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { Check, Languages } from '@lucide/vue';
-import type { LanguageSpecification } from '../../types';
-
-defineProps<{
-  currentLocale: string;
-  currentLanguage: string;
-  languages: LanguageSpecification[];
-  isReadOnly: boolean;
-}>();
-const emit = defineEmits<{
-  (e: 'languageChange', language: string): void;
-}>();
-
-const onLanguage = (language: string) => {
-  emit('languageChange', language);
-};
-</script>
diff --git a/src/frontend/shared/nav-rail-language-selector.story.vue b/src/frontend/shared/nav-rail-language-selector.story.vue
new file mode 100644
index 00000000..f9377061
--- /dev/null
+++ b/src/frontend/shared/nav-rail-language-selector.story.vue
@@ -0,0 +1,50 @@
+<template>
+  <Story title="Nav rail language selector" group="shared" :layout="{ type: 'grid', width: 360 }">
+    <Variant title="Panel">
+      <div class="rounded-xl border border-gray-200 bg-gray-50 p-4">
+        <NavRailLanguageSelector
+          v-model="selectedLanguage"
+          variant="panel"
+          current-locale="en"
+          :languages="languages"
+          :is-read-only="false"
+          @change="selectedLanguage = $event"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Pill">
+      <div class="inline-block rounded-full border border-gray-200 bg-gray-50 p-2">
+        <NavRailLanguageSelector
+          v-model="selectedLanguage"
+          variant="pill"
+          current-locale="en"
+          :languages="languages"
+          :is-read-only="false"
+          @change="selectedLanguage = $event"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Read only">
+      <div class="rounded-xl border border-gray-200 bg-gray-50 p-4">
+        <NavRailLanguageSelector
+          v-model="selectedLanguage"
+          variant="panel"
+          current-locale="en"
+          :languages="languages"
+          :is-read-only="true"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import NavRailLanguageSelector from './nav-rail-language-selector.vue';
+import { english, german, spanish, ukrainian } from '../test/mocks';
+
+const languages = [english, spanish, german, ukrainian];
+const selectedLanguage = ref(english.language);
+</script>
diff --git a/src/frontend/shared/nav-rail-language-selector.vue b/src/frontend/shared/nav-rail-language-selector.vue
new file mode 100644
index 00000000..f773a7ed
--- /dev/null
+++ b/src/frontend/shared/nav-rail-language-selector.vue
@@ -0,0 +1,138 @@
+<template>
+  <Listbox v-model="model" as="div" :class="variant === 'pill' ? 'relative inline-block' : 'relative'">
+    <ListboxButton
+      :disabled="isReadOnly"
+      :class="triggerClasses"
+    >
+      <template v-if="variant === 'panel'">
+        <div class="flex items-center gap-2">
+          <Icon name="translate" class="size-6 shrink-0" />
+          <LanguageOptionLabel v-if="selectedLanguage" :spec="selectedLanguage" />
+        </div>
+        <span
+          class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+        >
+          <Icon
+            v-if="!isReadOnly"
+            class="size-6 text-gray-700"
+            aria-hidden="true"
+            name="chevron-down"
+          />
+        </span>
+      </template>
+      <template v-else>
+        <span
+          class="absolute right-2 top-4 rounded-xl bg-blue-100 px-1 py-[2px] text-[8px] font-medium uppercase leading-[9.36px] text-blue-800"
+        >
+          {{ currentLocale }}
+        </span>
+        <Languages class="size-6" aria-hidden="true" />
+      </template>
+    </ListboxButton>
+
+    <transition
+      :leave-active-class="variant === 'pill' ? 'transition duration-75 ease-in' : 'transition duration-100 ease-in'"
+      leave-from-class="opacity-100"
+      :leave-to-class="variant === 'pill' ? 'opacity-0 transform scale-95' : 'opacity-0'"
+    >
+      <ListboxOptions :class="optionsClasses">
+        <ListboxOption
+          v-for="language in languages"
+          :key="language.locale"
+          v-slot="{ active, selected }"
+          as="template"
+          :value="language.language"
+          @click="emit('change', language.language)"
+        >
+          <li :class="rowClasses(active, selected)">
+            <LanguageOptionLabel :spec="language" />
+            <span
+              v-if="selected"
+              class="absolute inset-y-0 right-0 flex items-center pr-3"
+            >
+              <Check class="size-4 text-gray-900" aria-hidden="true" />
+            </span>
+          </li>
+        </ListboxOption>
+      </ListboxOptions>
+    </transition>
+  </Listbox>
+</template>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue';
+import type { PropType } from 'vue';
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue';
+import { Check, Languages } from '@lucide/vue';
+import type { LanguageSpecification } from '../../types';
+import Icon from './icon.vue';
+import LanguageOptionLabel from './language-option-label.vue';
+
+const props = defineProps({
+  variant: {
+    type: String as PropType<'panel' | 'pill'>,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  currentLocale: {
+    type: String,
+    default: '',
+  },
+  languages: {
+    type: Array as PropType<LanguageSpecification[]>,
+    required: true,
+  },
+  isReadOnly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const model = toRef(props, 'modelValue');
+
+const selectedLanguage = computed(() =>
+  props.languages.find((language) => language.language === model.value),
+);
+
+const triggerClasses = computed(() => {
+  if (props.variant === 'panel') {
+    return [
+      'relative w-full cursor-default rounded-xl py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-1',
+      props.isReadOnly ? 'bg-gray-100' : 'glass-surface',
+    ];
+  }
+
+  return [
+    'relative flex size-14 items-center justify-center rounded-full transition-all duration-75 hover:bg-gray-100 focus:outline-none',
+  ];
+});
+
+const optionsClasses = computed(() => {
+  const shared =
+    'absolute z-10 overflow-auto rounded-xl bg-white p-1 shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm';
+
+  if (props.variant === 'panel') {
+    return [
+      shared,
+      'bottom-full mb-1 max-h-[calc(100vh-10rem)] min-w-[18rem] text-base ring-opacity-5',
+    ];
+  }
+
+  return [
+    shared,
+    'left-0 top-full mt-1 max-h-[calc(100vh-240px)] w-56 origin-top-right',
+  ];
+});
+
+const rowClasses = (active: boolean, selected: boolean) => [
+  selected ? 'bg-studio-lime' : active ? 'bg-gray-100' : '',
+  'relative cursor-default select-none rounded-lg px-3 py-3 pr-10',
+];
+
+const emit = defineEmits<{
+  (e: 'change', language: string): void;
+}>();
+</script>
diff --git a/src/frontend/shared/nav-rail-panel.vue b/src/frontend/shared/nav-rail-panel.vue
index 0d6a9ff5..5c563165 100644
--- a/src/frontend/shared/nav-rail-panel.vue
+++ b/src/frontend/shared/nav-rail-panel.vue
@@ -113,10 +113,12 @@
         </div>
       </div>
       <div class="px-4 pb-4">
-        <DropUp
+        <NavRailLanguageSelector
           v-model="shared.language.language"
+          variant="panel"
+          :current-locale="locale"
+          :languages="sidebarLanguages"
           :is-read-only="!shared.user.isManager"
-          :options="languageOptions"
           @change="onLanguage"
         />
       </div>
@@ -126,7 +128,7 @@
 
 <script setup lang="ts">
 import { CircleHelp, LogOut, Settings, Star, Users } from '@lucide/vue';
-import DropUp from './drop-up.vue';
+import NavRailLanguageSelector from './nav-rail-language-selector.vue';
 import NavRailToolbar from './nav-rail-toolbar.vue';
 import { useSidebarNav } from './use-sidebar-nav';
 
@@ -134,7 +136,7 @@ const {
   shared,
   locale,
   isAdmin,
-  languageOptions,
+  sidebarLanguages,
   subscribed,
   classList,
   extractLocaleFromLink,
diff --git a/src/frontend/shared/nav-rail-toolbar.vue b/src/frontend/shared/nav-rail-toolbar.vue
index c1504fed..9913ca2b 100644
--- a/src/frontend/shared/nav-rail-toolbar.vue
+++ b/src/frontend/shared/nav-rail-toolbar.vue
@@ -11,27 +11,15 @@
     <button class="nav-icon" @click="goBack">
       <Reply class="size-6" aria-hidden="true" />
     </button>
-    <div v-if="subscribed('language')">
-      <button
-        v-if="variant === 'panel'"
-        class="relative flex size-14 items-center justify-center rounded-full transition-all duration-75"
-      >
-        <span
-          class="absolute right-2 top-4 rounded-xl bg-blue-100 px-1 py-[2px] text-[8px] font-medium uppercase leading-[9.36px] text-blue-800"
-        >
-          {{ locale }}
-        </span>
-        <Languages class="size-6" aria-hidden="true" />
-      </button>
-      <LanguageSelector
-        v-else
-        :current-locale="locale"
-        :current-language="shared.language.language"
-        :languages="sidebarLanguages"
-        :is-read-only="!shared.user.isManager"
-        @language-change="onLanguage"
-      />
-    </div>
+    <NavRailLanguageSelector
+      v-if="variant === 'pill' && subscribed('language')"
+      v-model="shared.language.language"
+      variant="pill"
+      :current-locale="locale"
+      :languages="sidebarLanguages"
+      :is-read-only="!shared.user.isManager"
+      @change="onLanguage"
+    />
     <button class="nav-icon" @click="toggleMenu">
       <ChevronsRight v-if="variant === 'pill'" class="size-6" aria-hidden="true" />
       <ChevronsLeft v-else class="size-6" aria-hidden="true" />
@@ -40,8 +28,8 @@
 </template>
 
 <script setup lang="ts">
-import { ChevronsLeft, ChevronsRight, Home, Languages, Reply } from '@lucide/vue';
-import LanguageSelector from './language-selector.vue';
+import { ChevronsLeft, ChevronsRight, Home, Reply } from '@lucide/vue';
+import NavRailLanguageSelector from './nav-rail-language-selector.vue';
 import { useSidebarNav } from './use-sidebar-nav';
 
 defineProps<{

From 542edbaf10a6da92597522119038f6abf41ccf3f Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 30 Jul 2026 15:15:53 +0300
Subject: [PATCH 26/39] refactor: enhance ActionCard and ActionGrid components
 by adding label prop and updating item structure

---
 src/frontend/dashboard/action-card.vue     | 13 ++++-------
 src/frontend/dashboard/action-grid.vue     |  5 +++-
 src/frontend/dashboard/dashboard-index.vue | 27 +++++++++++-----------
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/frontend/dashboard/action-card.vue b/src/frontend/dashboard/action-card.vue
index 0ed6c3f3..52f6055a 100644
--- a/src/frontend/dashboard/action-card.vue
+++ b/src/frontend/dashboard/action-card.vue
@@ -9,11 +9,11 @@
       <h2 class="text-gray-800">{{ title }}</h2>
     </div>
 
-    <p>{{ description }}</p>
+    <p class="flex-1">{{ description }}</p>
 
     <div class="flex justify-end">
       <StudioButton
-        label="Go"
+        :label="label"
         variant="secondary"
         :disabled="disabled"
         @click="emit('action')"
@@ -23,15 +23,10 @@
 </template>
 
 <script setup lang="ts">
-import type { Component } from 'vue';
+import type { ActionGridItem } from './action-grid.vue';
 import StudioButton from '../shared/studio-button.vue';
 
-defineProps<{
-  icon: Component;
-  title: string;
-  description: string;
-  disabled?: boolean;
-}>();
+defineProps<ActionGridItem>();
 
 const emit = defineEmits<{
   (e: 'action'): void;
diff --git a/src/frontend/dashboard/action-grid.vue b/src/frontend/dashboard/action-grid.vue
index deddfa3e..fab690b8 100644
--- a/src/frontend/dashboard/action-grid.vue
+++ b/src/frontend/dashboard/action-grid.vue
@@ -4,11 +4,13 @@
     <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
       <ActionCard
         v-for="item in items"
-        :key="item.url"
+        :key="item.label"
+        :url="item.url"
         :icon="item.icon"
         :title="item.title"
         :description="item.description"
         :disabled="item.disabled"
+        :label="item.label"
         @action="emit('action', item.url)"
       />
     </div>
@@ -24,6 +26,7 @@ export interface ActionGridItem {
   icon: Component;
   title: string;
   description: string;
+  label: string;
   disabled?: boolean;
 }
 
diff --git a/src/frontend/dashboard/dashboard-index.vue b/src/frontend/dashboard/dashboard-index.vue
index b38e7df1..ef873a19 100644
--- a/src/frontend/dashboard/dashboard-index.vue
+++ b/src/frontend/dashboard/dashboard-index.vue
@@ -90,29 +90,30 @@ const actionItems = computed<ActionGridItem[]>(() => {
   const disabled = !shared.user.isAdmin;
 
   return [
-    {
-      url: `/${shared.locale}/settings/languages/edit`,
-      icon: Languages,
-      title: 'New Language',
-      description:
-        'Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day. ',
-      disabled,
-    },
     {
       url: `/${shared.locale}/story/create`,
       icon: BookOpen,
-      title: 'New Story',
-      description:
-        'Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day. ',
+      title: 'Create a story',
+      description: 'Build a devotional, course, or other structured content series.',
       disabled,
+      label: 'Create story',
     },
     {
       url: `/${shared.locale}/page/create`,
       icon: FileText,
-      title: 'New Page',
+      title: 'Create a page',
       description:
-        'Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day. ',
+        'Share links, acknowledgements, and information about your organisation.',
+      disabled,
+      label: 'Create page',
+    },
+    {
+      url: `/${shared.locale}/settings/languages/edit`,
+      icon: Languages,
+      title: 'Add a user',
+      description: 'Invite teammates to create, edit, and manage content.',
       disabled,
+      label: 'Add user',
     },
   ];
 });

From f56f41b515f59d547083752e41f3f30587f13838 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 30 Jul 2026 15:26:28 +0300
Subject: [PATCH 27/39] style: update visibility titles in resource stories to
 indicate absence of badges

---
 src/frontend/resources/resource-index-item.story.vue          | 4 ++--
 .../stories/components/resource-attached-item.story.vue       | 2 +-
 src/frontend/stories/components/resource-visibility-badge.vue | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/frontend/resources/resource-index-item.story.vue b/src/frontend/resources/resource-index-item.story.vue
index 6fd62bd2..54eb78ce 100644
--- a/src/frontend/resources/resource-index-item.story.vue
+++ b/src/frontend/resources/resource-index-item.story.vue
@@ -58,7 +58,7 @@
       />
     </Variant>
 
-    <Variant title="Grid / Public visibility">
+    <Variant title="Grid / Public visibility (no badge)">
       <ResourceIndexItem
         :resource="resource('r1')"
         view-mode="grid"
@@ -192,7 +192,7 @@
       </div>
     </Variant>
 
-    <Variant title="List / Public visibility">
+    <Variant title="List / Public visibility (no badge)">
       <div class="overflow-x-auto rounded-xl border border-gray-200 bg-white">
         <table class="w-full min-w-[720px] table-auto">
           <thead class="border-b border-gray-200 bg-gray-50">
diff --git a/src/frontend/stories/components/resource-attached-item.story.vue b/src/frontend/stories/components/resource-attached-item.story.vue
index 7c59eced..84edb69c 100644
--- a/src/frontend/stories/components/resource-attached-item.story.vue
+++ b/src/frontend/stories/components/resource-attached-item.story.vue
@@ -1,6 +1,6 @@
 <template>
   <Story title="Resource Attached Item" group="resources" :layout="{ type: 'grid', width: 800 }">
-    <Variant title="Public visibility">
+    <Variant title="Public visibility (no badge)">
       <ResourceAttachedItem
         :item="availableResources[0]"
         @remove="onRemove"
diff --git a/src/frontend/stories/components/resource-visibility-badge.vue b/src/frontend/stories/components/resource-visibility-badge.vue
index b30535ea..d4a4d6a0 100644
--- a/src/frontend/stories/components/resource-visibility-badge.vue
+++ b/src/frontend/stories/components/resource-visibility-badge.vue
@@ -1,5 +1,6 @@
 <template>
   <span
+    v-if="visibility !== 'public'"
     class="shrink-0 rounded-xl px-2 py-0.5 text-xs font-medium capitalize"
     :class="visibilityBadgeClasses(visibility)"
   >

From 41fd208422be30f3b4142e2c1b5e70099e892a4b Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Mon, 10 Aug 2026 15:16:53 +0300
Subject: [PATCH 28/39] ops: add changelog for QA refinement of studio colors
 and update button variants across components

---
 docs/qa/changelog-qa.md                       | 123 ++++++++++++++++++
 docs/qa/changelog-qa.story.md                 |   8 +-
 src/frontend/pages/pages-edit.vue             |   2 +-
 .../resources/remove-resource-modal.vue       |   4 +-
 src/frontend/resources/resources-edit.vue     |   2 +-
 .../components/bible-translations-modal.vue   |   4 +-
 .../components/language-list-controls.vue     |  12 +-
 .../components/language-list-item.vue         |  47 ++-----
 .../components/remove-language-modal.vue      |   4 +-
 .../components/request-app-update-modal.vue   |   2 +-
 .../components/request-deletion-modal.vue     |   4 +-
 src/frontend/settings/settings-index.vue      |   4 +-
 .../shared/app-layout-header.story.vue        |  10 +-
 src/frontend/shared/message-centre.vue        |   6 +-
 src/frontend/shared/rich-listbox.vue          |  37 +++++-
 src/frontend/shared/studio-button.story.vue   |  45 ++++---
 src/frontend/shared/studio-button.vue         |  10 +-
 .../stories/components/workflow-actions.vue   |   2 +-
 src/frontend/stories/story-edit.vue           |   2 +-
 src/frontend/stories/story-index.vue          |   6 +-
 .../team/components/user-form-modal.vue       |   2 +-
 src/frontend/ui/components/ui-card.vue        |   4 +-
 22 files changed, 236 insertions(+), 104 deletions(-)
 create mode 100644 docs/qa/changelog-qa.md

diff --git a/docs/qa/changelog-qa.md b/docs/qa/changelog-qa.md
new file mode 100644
index 00000000..5c77057a
--- /dev/null
+++ b/docs/qa/changelog-qa.md
@@ -0,0 +1,123 @@
+# QA: sco-2751-refine-studio-colours-brand
+
+**Base:** main @ `e214281`  
+**Histoire (local):** `npm run dev` → http://localhost:6006  
+**Histoire (preview):** After opening a PR, use the Cloudflare Pages deployment URL from the PR checks (project: `kit`). Replace the localhost base URL below.
+
+_Generated by `npm run changelog:qa`. Edit Summary, Checked, and DQA questions below; those persist across `npm run changelog:qa`._
+
+## Summary
+
+- _Describe the main themes of this branch for QA_
+
+## Visual checks — changed (Histoire)
+
+| Area | Group | Component | Open in Histoire |
+|------|-------|-----------|------------------|
+| Action card | dashboard | `action-card.vue` | [Action card](http://localhost:6006/story/src-frontend-dashboard-action-card-story-vue) |
+| Action grid | dashboard | `action-grid.vue` | [Action grid](http://localhost:6006/story/src-frontend-dashboard-action-grid-story-vue) |
+| Colors | shared | `colors.vue` | [Colors](http://localhost:6006/story/src-frontend-shared-colors-story-vue) |
+| Dashboard Index | dashboard | `dashboard-index.vue` | [Dashboard Index](http://localhost:6006/story/src-frontend-dashboard-dashboard-index-story-vue) |
+| Index Filter | shared | `index-filter.vue` | [Index Filter](http://localhost:6006/story/src-frontend-shared-index-filter-story-vue) |
+| Index Page | pages | `pages-index.vue` | [Index Page](http://localhost:6006/story/src-frontend-pages-pages-index-story-vue) |
+| Index Tabs | shared | `index-tabs.vue` | [Index Tabs](http://localhost:6006/story/src-frontend-shared-index-tabs-story-vue) |
+| Invitation edit | invitation | `invitations-edit.vue` | [Invitation edit](http://localhost:6006/story/src-frontend-invitation-invitations-edit-story-vue) |
+| Invitations index page | invitation | `invitations-index.vue` | [Invitations index page](http://localhost:6006/story/src-frontend-invitation-invitations-index-story-vue) |
+| Language block | dashboard | `language-block.vue` | [Language block](http://localhost:6006/story/src-frontend-dashboard-language-block-story-vue) |
+| Language List | settings | `language-list.vue` | [Language List](http://localhost:6006/story/src-frontend-settings-languages-language-list-story-vue) |
+| Language option label | shared | `language-option-label.vue` | [Language option label](http://localhost:6006/story/src-frontend-shared-language-option-label-story-vue) |
+| Languages Edit | settings | `languages-edit.vue` | [Languages Edit](http://localhost:6006/story/src-frontend-settings-languages-languages-edit-story-vue) |
+| List Switcher | shared | `list-switcher.vue` | [List Switcher](http://localhost:6006/story/src-frontend-shared-list-switcher-story-vue) |
+| Nav rail language selector | shared | `nav-rail-language-selector.vue` | [Nav rail language selector](http://localhost:6006/story/src-frontend-shared-nav-rail-language-selector-story-vue) |
+| Nav rail panel | shared | `nav-rail-panel.vue` | [Nav rail panel](http://localhost:6006/story/src-frontend-shared-nav-rail-panel-story-vue) |
+| Panel List | stories | `panel-list.vue` | [Panel List](http://localhost:6006/story/src-frontend-stories-components-panel-list-story-vue) |
+| Preview | stories | `chapter-preview.vue` | [Preview](http://localhost:6006/story/src-frontend-stories-chapter-preview-story-vue) |
+| Request Feedback Modal | settings | `request-feedback-modal.vue` | [Request Feedback Modal](http://localhost:6006/story/src-frontend-settings-languages-components-request-feedback-modal-story-vue) |
+| Resource Attached Item | resources | `resource-attached-item.vue` | [Resource Attached Item](http://localhost:6006/story/src-frontend-stories-components-resource-attached-item-story-vue) |
+| Resource edit | resources | `resources-edit.vue` | [Resource edit](http://localhost:6006/story/src-frontend-resources-resources-edit-story-vue) |
+| Resource Empty State | resources | `resource-empty-state.vue` | [Resource Empty State](http://localhost:6006/story/src-frontend-stories-components-resource-empty-state-story-vue) |
+| Resource Index Item | resources | `resource-index-item.vue` | [Resource Index Item](http://localhost:6006/story/src-frontend-resources-resource-index-item-story-vue) |
+| Resource Picker | resources | `resource-picker.vue` | [Resource Picker](http://localhost:6006/story/src-frontend-stories-components-resource-picker-story-vue) |
+| Resource Type Badge | resources | `resource-type-badge.vue` | [Resource Type Badge](http://localhost:6006/story/src-frontend-stories-components-resource-type-badge-story-vue) |
+| Resource Visibility Badge | resources | `resource-visibility-badge.vue` | [Resource Visibility Badge](http://localhost:6006/story/src-frontend-stories-components-resource-visibility-badge-story-vue) |
+| Rich Listbox | shared | `rich-listbox.vue` | [Rich Listbox](http://localhost:6006/story/src-frontend-shared-rich-listbox-story-vue) |
+| Ring | dashboard | `ring.vue` | [Ring](http://localhost:6006/story/src-frontend-dashboard-ring-story-vue) |
+| Stat tiles | dashboard | `stat-tiles.vue` | [Stat tiles](http://localhost:6006/story/src-frontend-dashboard-stat-tiles-story-vue) |
+| Story Create | stories | `story-create.vue` | [Story Create](http://localhost:6006/story/src-frontend-stories-story-create-story-vue) |
+| Story Edit | stories | `story-edit.vue` | [Story Edit](http://localhost:6006/story/src-frontend-stories-story-edit-story-vue) |
+| Story Gallery | stories | `story-gallery.vue` | [Story Gallery](http://localhost:6006/story/src-frontend-stories-story-gallery-story-vue) |
+| Stream Index | streams | `stream-index.vue` | [Stream Index](http://localhost:6006/story/src-frontend-streams-stream-index-story-vue) |
+| Studio Button | shared | `studio-button.vue` | [Studio Button](http://localhost:6006/story/src-frontend-shared-studio-button-story-vue) |
+| Tab Button | shared | `tab-button.vue` | [Tab Button](http://localhost:6006/story/src-frontend-shared-tab-button-story-vue) |
+| Workflow Buttons | stories | `workflow-actions.vue` | [Workflow Buttons](http://localhost:6006/story/src-frontend-stories-components-workflow-actions-story-vue) |
+
+## Unchanged — regression check
+
+_Unchanged `.vue` files with co-located stories in folders where something changed. Confirm these still look correct._
+
+| Checked | Area | Group | Component | Open in Histoire | DQA questions |
+|---------|------|-------|-----------|------------------|---------------|
+| [ ] | Action Button | shared | `action-button.vue` | [Action Button](http://localhost:6006/story/src-frontend-shared-action-button-story-vue) |  |
+| [ ] | Add Item Button | shared | `add-item-button.vue` | [Add Item Button](http://localhost:6006/story/src-frontend-shared-add-item-button-story-vue) |  |
+| [ ] | App Layout Header | shared | `app-layout-header.vue` | [App Layout Header](http://localhost:6006/story/src-frontend-shared-app-layout-header-story-vue) |  |
+| [ ] | Bible Translations Modal | settings | `bible-translations-modal.vue` | [Bible Translations Modal](http://localhost:6006/story/src-frontend-settings-languages-components-bible-translations-modal-story-vue) |  |
+| [ ] | Bookmark Action | shared | `bookmark-action.vue` | [Bookmark Action](http://localhost:6006/story/src-frontend-shared-bookmark-action-story-vue) |  |
+| [ ] | Context Menu | shared | `context-menu.vue` | [Context Menu](http://localhost:6006/story/src-frontend-shared-context-menu-story-vue) |  |
+| [ ] | Draft Page | stories | `draft-index.vue` | [Draft Page](http://localhost:6006/story/src-frontend-stories-draft-index-story-vue) |  |
+| [ ] | Drop Down | shared | `drop-down.vue` | [Drop Down](http://localhost:6006/story/src-frontend-shared-drop-down-story-vue) |  |
+| [ ] | Drop Edit | streams | `drop-edit.vue` | [Drop Edit](http://localhost:6006/story/src-frontend-streams-drop-edit-story-vue) |  |
+| [ ] | Drop Item | streams | `drop-item.vue` | [Drop Item](http://localhost:6006/story/src-frontend-streams-components-drop-item-story-vue) |  |
+| [ ] | Drop Meta Box | streams | `drop-meta-box.vue` | [Drop Meta Box](http://localhost:6006/story/src-frontend-streams-components-drop-meta-box-story-vue) |  |
+| [ ] | Expandable Search | shared | `expandable-search.vue` | [Expandable Search](http://localhost:6006/story/src-frontend-shared-expandable-search-story-vue) |  |
+| [ ] | Gallery Grid | shared | `gallery-grid.vue` | [Gallery Grid](http://localhost:6006/story/src-frontend-shared-gallery-grid-story-vue) |  |
+| [ ] | Glass Button | shared | `glass-button.vue` | [Glass Button](http://localhost:6006/story/src-frontend-shared-glass-button-story-vue) |  |
+| [ ] | Icon Button | shared | `icon-button.vue` | [Icon Button](http://localhost:6006/story/src-frontend-shared-icon-button-story-vue) |  |
+| [ ] | Index Card | stories | `index-card.vue` | [Index Card](http://localhost:6006/story/src-frontend-stories-components-index-card-story-vue) |  |
+| [ ] | Invitation index item | invitation | `invitation-index-item.vue` | [Invitation index item](http://localhost:6006/story/src-frontend-invitation-invitation-index-item-story-vue) |  |
+| [ ] | Label Button | shared | `label-button.vue` | [Label Button](http://localhost:6006/story/src-frontend-shared-label-button-story-vue) |  |
+| [ ] | Language List Item | settings | `language-list-item.vue` | [Language List Item](http://localhost:6006/story/src-frontend-settings-languages-components-language-list-item-story-vue) |  |
+| [ ] | Language Table | settings | `language-table.vue` | [Language Table](http://localhost:6006/story/src-frontend-settings-languages-components-language-table-story-vue) |  |
+| [ ] | Message | shared | `message-centre.vue` | [Message](http://localhost:6006/story/src-frontend-shared-message-centre-story-vue) |  |
+| [ ] | Meta Box | shared | `meta-box.vue` | [Meta Box](http://localhost:6006/story/src-frontend-shared-meta-box-story-vue) |  |
+| [ ] | Meta Meta Box | stories | `meta-meta-box.vue` | [Meta Meta Box](http://localhost:6006/story/src-frontend-stories-components-meta-meta-box-story-vue) |  |
+| [ ] | Navigation pane | shared | `navigation-pane.vue` | [Navigation pane](http://localhost:6006/story/src-frontend-shared-navigation-pane-story-vue) |  |
+| [ ] | Page Index Item | pages | `page-index-item.vue` | [Page Index Item](http://localhost:6006/story/src-frontend-pages-page-index-item-story-vue) |  |
+| [ ] | Pages Edit | pages | `pages-edit.vue` | [Pages Edit](http://localhost:6006/story/src-frontend-pages-pages-edit-story-vue) |  |
+| [ ] | Remove Language Modal | settings | `remove-language-modal.vue` | [Remove Language Modal](http://localhost:6006/story/src-frontend-settings-languages-components-remove-language-modal-story-vue) |  |
+| [ ] | Request App Update Modal | settings | `request-app-update-modal.vue` | [Request App Update Modal](http://localhost:6006/story/src-frontend-settings-languages-components-request-app-update-modal-story-vue) |  |
+| [ ] | Resource Attached List | resources | `resource-attached-list.vue` | [Resource Attached List](http://localhost:6006/story/src-frontend-stories-components-resource-attached-list-story-vue) |  |
+| [ ] | Resource Label Group | resources | `resource-label-group.vue` | [Resource Label Group](http://localhost:6006/story/src-frontend-stories-components-resource-label-group-story-vue) |  |
+| [ ] | Resource not found | resources | `resource-not-found.vue` | [Resource not found](http://localhost:6006/story/src-frontend-resources-resource-not-found-story-vue) |  |
+| [ ] | Resource Thumbnail | resources | `resource-thumbnail.vue` | [Resource Thumbnail](http://localhost:6006/story/src-frontend-stories-components-resource-thumbnail-story-vue) |  |
+| [ ] | Resource Used In | resources | `resource-used-in.vue` | [Resource Used In](http://localhost:6006/story/src-frontend-resources-resource-used-in-story-vue) |  |
+| [ ] | Resources index page | resources | `resources-index.vue` | [Resources index page](http://localhost:6006/story/src-frontend-resources-resources-index-story-vue) |  |
+| [ ] | Status Tag | shared | `status-tag.vue` | [Status Tag](http://localhost:6006/story/src-frontend-shared-status-tag-story-vue) |  |
+| [ ] | Story Edit Details | stories | `story-edit-details.vue` | [Story Edit Details](http://localhost:6006/story/src-frontend-stories-components-story-edit-details-story-vue) |  |
+| [ ] | Story Edit Resources | resources | `story-edit-resources.vue` | [Story Edit Resources](http://localhost:6006/story/src-frontend-stories-components-story-edit-resources-story-vue) |  |
+| [ ] | Story Edit Sections | stories | `story-edit-sections.vue` | [Story Edit Sections](http://localhost:6006/story/src-frontend-stories-components-story-edit-sections-story-vue) |  |
+| [ ] | Story Index | stories | `story-index.vue` | [Story Index](http://localhost:6006/story/src-frontend-stories-story-index-story-vue) |  |
+| [ ] | Story Item | stories | `story-item.vue` | [Story Item](http://localhost:6006/story/src-frontend-stories-components-story-item-story-vue) |  |
+| [ ] | Stream Gallery | streams | `stream-gallery.vue` | [Stream Gallery](http://localhost:6006/story/src-frontend-streams-stream-gallery-story-vue) |  |
+| [ ] | Stream Item | streams | `stream-item.vue` | [Stream Item](http://localhost:6006/story/src-frontend-streams-components-stream-item-story-vue) |  |
+| [ ] | Tab navigation | shared | `tab-navigation.vue` | [Tab navigation](http://localhost:6006/story/src-frontend-shared-tab-navigation-story-vue) |  |
+| [ ] | Translation Page | stories | `translation-index.vue` | [Translation Page](http://localhost:6006/story/src-frontend-stories-translation-index-story-vue) |  |
+
+## No dedicated story — test indirectly
+
+| Component | Notes |
+|-----------|-------|
+| `src/frontend/dashboard/ring-block.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/dashboard/stat-tile.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/fields/list/foldable-list.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/settings/languages/components/language-table-row.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/app-footer.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/app-layout.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/draft-actions.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/drop-up.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/icon.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/index-tab-button.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/language-selector.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/nav-rail-toolbar.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/toggle-button.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/team/components/user-form-modal.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/team/components/user-row.vue` | Find a parent page story or add a co-located `.story.vue` |
diff --git a/docs/qa/changelog-qa.story.md b/docs/qa/changelog-qa.story.md
index 859ee89f..99ac5601 100644
--- a/docs/qa/changelog-qa.story.md
+++ b/docs/qa/changelog-qa.story.md
@@ -30,8 +30,11 @@ _Generated by `npm run changelog:qa -- --format histoire`. Edit Summary, Checked
 | Invitations index page | invitation | `invitations-index.vue` | [Invitations index page](../../src/frontend/invitation/invitations-index.story.vue) |
 | Language block | dashboard | `language-block.vue` | [Language block](../../src/frontend/dashboard/language-block.story.vue) |
 | Language List | settings | `language-list.vue` | [Language List](../../src/frontend/settings/languages/language-list.story.vue) |
+| Language option label | shared | `language-option-label.vue` | [Language option label](../../src/frontend/shared/language-option-label.story.vue) |
 | Languages Edit | settings | `languages-edit.vue` | [Languages Edit](../../src/frontend/settings/languages/languages-edit.story.vue) |
 | List Switcher | shared | `list-switcher.vue` | [List Switcher](../../src/frontend/shared/list-switcher.story.vue) |
+| Nav rail language selector | shared | `nav-rail-language-selector.vue` | [Nav rail language selector](../../src/frontend/shared/nav-rail-language-selector.story.vue) |
+| Nav rail panel | shared | `nav-rail-panel.vue` | [Nav rail panel](../../src/frontend/shared/nav-rail-panel.story.vue) |
 | Panel List | stories | `panel-list.vue` | [Panel List](../../src/frontend/stories/components/panel-list.story.vue) |
 | Preview | stories | `chapter-preview.vue` | [Preview](../../src/frontend/stories/chapter-preview.story.vue) |
 | Request Feedback Modal | settings | `request-feedback-modal.vue` | [Request Feedback Modal](../../src/frontend/settings/languages/components/request-feedback-modal.story.vue) |
@@ -82,7 +85,6 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 | [ ] | Message | shared | `message-centre.vue` | [Message](../../src/frontend/shared/message-centre.story.vue) |  |
 | [ ] | Meta Box | shared | `meta-box.vue` | [Meta Box](../../src/frontend/shared/meta-box.story.vue) |  |
 | [ ] | Meta Meta Box | stories | `meta-meta-box.vue` | [Meta Meta Box](../../src/frontend/stories/components/meta-meta-box.story.vue) |  |
-| [ ] | Nav rail panel | shared | `nav-rail-panel.vue` | [Nav rail panel](../../src/frontend/shared/nav-rail-panel.story.vue) |  |
 | [ ] | Navigation pane | shared | `navigation-pane.vue` | [Navigation pane](../../src/frontend/shared/navigation-pane.story.vue) |  |
 | [ ] | Page Index Item | pages | `page-index-item.vue` | [Page Index Item](../../src/frontend/pages/page-index-item.story.vue) |  |
 | [ ] | Pages Edit | pages | `pages-edit.vue` | [Pages Edit](../../src/frontend/pages/pages-edit.story.vue) |  |
@@ -115,8 +117,12 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 | `src/frontend/settings/languages/components/language-table-row.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/shared/app-footer.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/shared/app-layout.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/draft-actions.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/drop-up.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/shared/icon.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/shared/index-tab-button.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/language-selector.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/shared/nav-rail-toolbar.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/shared/toggle-button.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/team/components/user-form-modal.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/team/components/user-row.vue` | Find a parent page story or add a co-located `.story.vue` |
diff --git a/src/frontend/pages/pages-edit.vue b/src/frontend/pages/pages-edit.vue
index a01483e6..04bab4a9 100644
--- a/src/frontend/pages/pages-edit.vue
+++ b/src/frontend/pages/pages-edit.vue
@@ -8,7 +8,7 @@
           label: 'Published',
           widget: 'boolean',
           default: false,
-          tintColor: 'green-400',
+          tintColor: 'studio-forest',
           labelOrder: 'start',
         }"
         :is-nested="true"
diff --git a/src/frontend/resources/remove-resource-modal.vue b/src/frontend/resources/remove-resource-modal.vue
index bfc4a44e..0949d0fd 100644
--- a/src/frontend/resources/remove-resource-modal.vue
+++ b/src/frontend/resources/remove-resource-modal.vue
@@ -7,8 +7,8 @@
   >
     <template #actions>
       <div class="mt-9 flex w-full justify-end gap-x-4">
-        <StudioButton label="Delete" variant="red" @click="emit('confirm')" />
-        <StudioButton label="Cancel" variant="gray" @click="emit('close')" />
+        <StudioButton label="Delete" variant="destructive" @click="emit('confirm')" />
+        <StudioButton label="Cancel" variant="secondary" @click="emit('close')" />
       </div>
     </template>
   </LanguageModal>
diff --git a/src/frontend/resources/resources-edit.vue b/src/frontend/resources/resources-edit.vue
index 767e8b96..794f912e 100644
--- a/src/frontend/resources/resources-edit.vue
+++ b/src/frontend/resources/resources-edit.vue
@@ -1,7 +1,7 @@
 <template>
   <AppLayout :title="headerTitle" :subtitle="headerSubtitle">
     <template #actions>
-      <StudioButton label="Cancel" variant="outline" @click="cancel" />
+      <StudioButton label="Cancel" variant="tertiary" @click="cancel" />
       <StudioButton
         v-if="!resource.id"
         label="Create Resource"
diff --git a/src/frontend/settings/languages/components/bible-translations-modal.vue b/src/frontend/settings/languages/components/bible-translations-modal.vue
index 16b89798..e0f5286a 100644
--- a/src/frontend/settings/languages/components/bible-translations-modal.vue
+++ b/src/frontend/settings/languages/components/bible-translations-modal.vue
@@ -105,10 +105,10 @@
 
     <template #actions>
       <div class="flex w-full justify-end gap-x-4">
-        <StudioButton label="Cancel" variant="gray" @click="handleClose" />
+        <StudioButton label="Cancel" variant="secondary" @click="handleClose" />
         <StudioButton
           label="Confirm selection"
-          variant="green"
+          variant="primary"
           :disabled="isLoading || hasError || currentBibleTranslations.length === 0"
           @click="handleConfirm"
         />
diff --git a/src/frontend/settings/languages/components/language-list-controls.vue b/src/frontend/settings/languages/components/language-list-controls.vue
index 85cd1bf3..11021ba6 100644
--- a/src/frontend/settings/languages/components/language-list-controls.vue
+++ b/src/frontend/settings/languages/components/language-list-controls.vue
@@ -8,7 +8,7 @@
           <li
             v-for="language in selectedLanguages"
             :key="language.locale"
-            class="inline-flex items-center gap-2 rounded-full bg-gray-100 py-1.5 pl-3 pr-2 text-xs font-medium leading-4 text-gray-900"
+            class="inline-flex items-center gap-2 rounded-full bg-studio-yellow py-1.5 pl-3 pr-2 text-xs font-medium leading-4 text-gray-900"
           >
             {{ language.language }}
             <button
@@ -26,17 +26,13 @@
 
     <ul class="flex flex-row flex-wrap items-center gap-[10px] py-[9px] pl-2">
       <li>
-        <ExpandableSearch
-          v-model="searchFilter"
-          placeholder="Search"
-          clear-on-collapse
-        />
+        <ExpandableSearch v-model="searchFilter" placeholder="Search" clear-on-collapse />
       </li>
       <li v-for="letter in letters" :key="letter">
         <button
           type="button"
-          class="font-dmsans flex size-7 shrink-0 items-center justify-center rounded-full p-0 text-center text-[17px] font-medium leading-5 text-gray-500"
-          :class="{ 'bg-blue-100': letterFilter === letter }"
+          class="flex size-7 shrink-0 items-center justify-center rounded-full p-0 text-center font-dmsans text-[17px] font-medium leading-5 text-gray-500"
+          :class="{ 'bg-studio-yellow': letterFilter === letter }"
           @click="handleLetterFilter(letter)"
         >
           {{ letter }}
diff --git a/src/frontend/settings/languages/components/language-list-item.vue b/src/frontend/settings/languages/components/language-list-item.vue
index 106a939b..6b66a2d9 100644
--- a/src/frontend/settings/languages/components/language-list-item.vue
+++ b/src/frontend/settings/languages/components/language-list-item.vue
@@ -6,7 +6,7 @@
     :class="{
       'cursor-not-allowed bg-gray-100': isReadOnly,
       'cursor-pointer': !isReadOnly,
-      'bg-[#EFF6FF]': isSelected && !isReadOnly,
+      'bg-gray-300': isSelected && !isReadOnly,
       'hover:bg-gray-100': isAvailable,
     }"
   >
@@ -19,52 +19,31 @@
           :checked="isSelected"
           name="language"
           aria-describedby="language-description"
-          class="col-start-1 row-start-1 appearance-none rounded-xl border border-gray-300 bg-white checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+          class="col-start-1 row-start-1 appearance-none rounded-[4px] border border-gray-300 bg-white text-gray-800 checked:!border-gray-800 checked:!bg-gray-800 checked:[background-image:none] checked:hover:!border-gray-800 checked:hover:!bg-gray-800 checked:focus:!border-gray-800 checked:focus:!bg-gray-800 indeterminate:!border-gray-800 indeterminate:!bg-gray-800 focus:ring-0 focus:ring-offset-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-800 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
           @change="handleUpdate"
         />
 
-        <svg
-          viewBox="0 0 14 14"
-          fill="none"
-          class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
-        >
-          <path
-            d="M3 8L6 11L11 3.5"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="opacity-0 group-has-[:checked]:opacity-100"
-          />
-          <path
-            d="M3 7H11"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="opacity-0 group-has-[:indeterminate]:opacity-100"
-          />
-        </svg>
+        <Check
+          class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center text-white opacity-0 group-has-[:checked]:opacity-100 group-has-[:disabled]:text-gray-950/25"
+          aria-hidden="true"
+          :stroke-width="1.5"
+        />
       </template>
 
       <template v-else>
-        <svg
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          class="pointer-events-none col-start-1 row-start-1 size-6 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+        <div
+          class="pointer-events-none col-start-1 row-start-1 grid size-4 place-items-center rounded-[4px] border border-gray-300 bg-gray-100"
+          aria-hidden="true"
         >
-          <path
-            d="M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12ZM14.293 9.29297C14.6835 8.90244 15.3165 8.90244 15.707 9.29297C16.0976 9.68349 16.0976 10.3165 15.707 10.707L11.707 14.707C11.3165 15.0976 10.6835 15.0976 10.293 14.707L8.29297 12.707L8.22461 12.6309C7.90426 12.2381 7.92685 11.6591 8.29297 11.293C8.65908 10.9269 9.23809 10.9043 9.63086 11.2246L9.70703 11.293L11 12.5859L14.293 9.29297ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
-            fill="#9CA3AF"
-          />
-        </svg>
+          <Check class="size-3.5 text-gray-400" aria-hidden="true" :stroke-width="1.5" />
+        </div>
       </template>
     </div>
   </component>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
+import { Check } from '@lucide/vue';
 import type { LanguageListItemProps } from '../../../../types';
 import LanguageStrip from './language-strip.vue';
 const props = defineProps<LanguageListItemProps>();
diff --git a/src/frontend/settings/languages/components/remove-language-modal.vue b/src/frontend/settings/languages/components/remove-language-modal.vue
index 9c695903..c9281892 100644
--- a/src/frontend/settings/languages/components/remove-language-modal.vue
+++ b/src/frontend/settings/languages/components/remove-language-modal.vue
@@ -7,8 +7,8 @@
   >
     <template #actions>
       <div class="mt-9 flex w-full justify-end gap-x-4">
-        <StudioButton label="Remove" variant="red" @click="emit('confirm')" />
-        <StudioButton label="Cancel" variant="gray" @click="emit('close')" />
+        <StudioButton label="Remove" variant="destructive" @click="emit('confirm')" />
+        <StudioButton label="Cancel" variant="secondary" @click="emit('close')" />
       </div>
     </template>
   </LanguageModal>
diff --git a/src/frontend/settings/languages/components/request-app-update-modal.vue b/src/frontend/settings/languages/components/request-app-update-modal.vue
index 08cf653e..85e99c13 100644
--- a/src/frontend/settings/languages/components/request-app-update-modal.vue
+++ b/src/frontend/settings/languages/components/request-app-update-modal.vue
@@ -154,7 +154,7 @@
       <div class="flex w-full justify-end">
         <StudioButton
           label="Confirm"
-          variant="green"
+          variant="primary"
           :disabled="selectedReasons.length === 0"
           @click="confirm"
         />
diff --git a/src/frontend/settings/languages/components/request-deletion-modal.vue b/src/frontend/settings/languages/components/request-deletion-modal.vue
index 29a3f141..c320dc33 100644
--- a/src/frontend/settings/languages/components/request-deletion-modal.vue
+++ b/src/frontend/settings/languages/components/request-deletion-modal.vue
@@ -7,8 +7,8 @@
   >
     <template #actions>
       <div class="mt-9 flex w-full justify-end gap-x-4">
-        <StudioButton label="Remove" variant="red" @click="emit('confirm')" />
-        <StudioButton label="Cancel" variant="gray" @click="emit('close')" />
+        <StudioButton label="Remove" variant="destructive" @click="emit('confirm')" />
+        <StudioButton label="Cancel" variant="secondary" @click="emit('close')" />
       </div>
     </template>
   </LanguageModal>
diff --git a/src/frontend/settings/settings-index.vue b/src/frontend/settings/settings-index.vue
index 1f030e4f..218196ef 100644
--- a/src/frontend/settings/settings-index.vue
+++ b/src/frontend/settings/settings-index.vue
@@ -3,7 +3,7 @@
     <template #actions>
       <StudioButton
         label="Request App Update"
-        variant="green"
+        variant="primary"
         :disabled="!props.requireAppUpdate"
         @click="showRequestAppUpdateModal = true"
       />
@@ -18,7 +18,7 @@
         </div>
         <button
           type="button"
-          class="rounded-xl p-1.5 text-blue-500 transition-colors hover:bg-blue-50 hover:text-blue-600"
+          class="rounded-xl p-1.5 text-gray-500 transition-colors hover:bg-gray-50 hover:text-gray-600"
           aria-label="Add language"
           @click="router.visit(`/${shared.locale}/settings/languages/edit`)"
         >
diff --git a/src/frontend/shared/app-layout-header.story.vue b/src/frontend/shared/app-layout-header.story.vue
index 4b0b00bc..f405d506 100644
--- a/src/frontend/shared/app-layout-header.story.vue
+++ b/src/frontend/shared/app-layout-header.story.vue
@@ -4,7 +4,7 @@
       <div class="bg-gray-50 p-6">
         <AppLayoutHeader title="Glass Header" subtitle="This is a subtitle">
           <template #actions>
-            <StudioButton label="Cancel" variant="outline" />
+            <StudioButton label="Cancel" variant="tertiary" />
             <StudioButton label="Request content update">
               <Plus class="size-6" />
             </StudioButton>
@@ -70,14 +70,14 @@
         <AppLayoutHeader title="Sticky Header">
           <template #actions>
             <div class="flex gap-2">
-              <StudioButton label="Confirm" variant="outline" @click.prevent="onConfirm" />
+              <StudioButton label="Confirm" variant="tertiary" @click.prevent="onConfirm" />
               <StudioButton
                 label="Accomplish"
-                variant="outline"
+                variant="tertiary"
                 @click.prevent="onAccomplish"
               />
-              <StudioButton label="Fail" variant="outline" @click.prevent="onFail" />
-              <StudioButton label="Neutral" variant="outline" @click.prevent="onNeutral" />
+              <StudioButton label="Fail" variant="tertiary" @click.prevent="onFail" />
+              <StudioButton label="Neutral" variant="tertiary" @click.prevent="onNeutral" />
             </div>
           </template>
         </AppLayoutHeader>
diff --git a/src/frontend/shared/message-centre.vue b/src/frontend/shared/message-centre.vue
index 2e91ebee..fb754f92 100644
--- a/src/frontend/shared/message-centre.vue
+++ b/src/frontend/shared/message-centre.vue
@@ -20,13 +20,15 @@
             :class="responseConfig.iconClass"
             aria-hidden="true"
           />
-          <p class="max-w-full text-center font-dmsans text-xl font-semibold leading-4">
+          <p
+            class="max-w-full text-center font-dmsans text-xl font-semibold leading-4 text-studio-forest"
+          >
             {{ message }}
           </p>
         </div>
         <p
           v-if="description"
-          class="mt-4 text-center font-dmsans text-sm font-normal leading-5"
+          class="mt-4 text-center font-dmsans text-sm font-normal leading-5 text-studio-forest"
         >
           {{ description }}
         </p>
diff --git a/src/frontend/shared/rich-listbox.vue b/src/frontend/shared/rich-listbox.vue
index 16abf089..50566a65 100644
--- a/src/frontend/shared/rich-listbox.vue
+++ b/src/frontend/shared/rich-listbox.vue
@@ -70,7 +70,13 @@
           >
             <li
               :class="[
-                selected ? 'bg-gray-200' : active ? 'bg-gray-100' : 'bg-white',
+                selected && isInitialSelection
+                  ? 'bg-studio-green'
+                  : selected
+                    ? 'bg-gray-200'
+                    : active
+                      ? 'bg-gray-100'
+                      : 'bg-white',
                 'relative cursor-default select-none py-3 pl-3 pr-10',
               ]"
             >
@@ -81,10 +87,23 @@
                   aria-hidden="true"
                 />
                 <div class="min-w-0">
-                  <p class="font-medium text-gray-900">
+                  <p
+                    class="font-medium"
+                    :class="
+                      selected && isInitialSelection ? 'text-studio-forest' : 'text-gray-900'
+                    "
+                  >
                     {{ option.label }}
                   </p>
-                  <p v-if="option.description" class="text-sm text-gray-500">
+                  <p
+                    v-if="option.description"
+                    class="text-sm"
+                    :class="
+                      selected && isInitialSelection
+                        ? 'text-studio-forest/70'
+                        : 'text-gray-500'
+                    "
+                  >
                     {{ option.description }}
                   </p>
                 </div>
@@ -93,7 +112,11 @@
                 v-if="selected"
                 class="absolute inset-y-0 right-0 flex items-center pr-4"
               >
-                <span class="size-2 rounded-full bg-gray-800" aria-hidden="true" />
+                <span
+                  class="size-2 rounded-full"
+                  :class="isInitialSelection ? 'bg-studio-forest' : 'bg-gray-800'"
+                  aria-hidden="true"
+                />
               </span>
             </li>
           </ListboxOption>
@@ -171,6 +194,12 @@ const emit = defineEmits<{
 const listboxRef = ref<HTMLElement | null>(null);
 const openUpward = ref(false);
 
+const initialModelValue = props.modelValue;
+
+const isInitialSelection = computed(
+  () => Boolean(initialModelValue) && props.modelValue === initialModelValue,
+);
+
 const selectedOption = computed(() =>
   props.options.find((option) => option.value === props.modelValue),
 );
diff --git a/src/frontend/shared/studio-button.story.vue b/src/frontend/shared/studio-button.story.vue
index 539e4ba7..95ceacd8 100644
--- a/src/frontend/shared/studio-button.story.vue
+++ b/src/frontend/shared/studio-button.story.vue
@@ -10,32 +10,24 @@
       </StudioButton>
     </Variant>
 
-    <Variant title="Outline">
-      <StudioButton label="Cancel" variant="outline" @click="handleClick" />
-    </Variant>
-
     <Variant title="Secondary">
       <StudioButton label="Save Changes" variant="secondary" @click="handleClick" />
     </Variant>
 
-    <Variant title="Green">
-      <StudioButton label="Confirm" variant="green" @click="handleClick" />
+    <Variant title="Tertiary">
+      <StudioButton label="Cancel" variant="tertiary" @click="handleClick" />
+    </Variant>
+
+    <Variant title="Destructive">
+      <StudioButton label="Remove" variant="destructive" @click="handleClick" />
     </Variant>
 
     <Variant title="Icon only">
-      <StudioButton aria-label="Save" variant="green" @click="handleClick">
+      <StudioButton aria-label="Save" variant="primary" @click="handleClick">
         <Check class="size-4" aria-hidden="true" />
       </StudioButton>
     </Variant>
 
-    <Variant title="Gray">
-      <StudioButton label="Cancel" variant="gray" @click="handleClick" />
-    </Variant>
-
-    <Variant title="Red">
-      <StudioButton label="Remove" variant="red" @click="handleClick" />
-    </Variant>
-
     <Variant title="CTA shape">
       <StudioButton label="Get started" shape="cta" @click="handleClick" />
     </Variant>
@@ -46,23 +38,23 @@
       </StudioButton>
     </Variant>
 
-    <Variant title="CTA shape outline">
-      <StudioButton label="Learn more" variant="outline" shape="cta" @click="handleClick" />
+    <Variant title="CTA shape tertiary">
+      <StudioButton label="Learn more" variant="tertiary" shape="cta" @click="handleClick" />
     </Variant>
 
     <Variant title="Disabled">
       <div class="flex flex-col gap-2">
         <StudioButton label="Request content update" disabled />
-        <StudioButton label="Cancel" variant="outline" disabled />
-        <StudioButton label="Cancel" variant="gray" disabled />
-        <StudioButton label="Remove" variant="red" disabled />
+        <StudioButton label="Save Changes" variant="secondary" disabled />
+        <StudioButton label="Cancel" variant="tertiary" disabled />
+        <StudioButton label="Remove" variant="destructive" disabled />
       </div>
     </Variant>
 
     <Variant title="With tooltip">
       <StudioButton
         label="Publish"
-        variant="green"
+        variant="primary"
         tooltip="You need to make ready 2 more Days to your Edition."
         @click="handleClick"
       />
@@ -71,7 +63,7 @@
     <Variant title="Disabled with tooltip">
       <StudioButton
         label="Publish"
-        variant="green"
+        variant="primary"
         disabled
         tooltip="You need to make ready 2 more Days to your Edition."
       />
@@ -81,7 +73,7 @@
       <div class="flex justify-end">
         <StudioButton
           label="Publish"
-          variant="green"
+          variant="primary"
           disabled
           tooltip="You need to make ready 2 more Days to your Edition."
         />
@@ -106,6 +98,13 @@ Shared action button for app headers and forms.
 
 ## Variants
 
+- **primary** — main call-to-action (forest/lime)
+- **secondary** — secondary actions (gray fill)
+- **tertiary** — low-emphasis actions (outlined)
+- **destructive** — dangerous actions (red)
+
+## Tooltip
+
 - **With tooltip** — optional `tooltip` prop shows a hover label on enabled buttons
 - **Disabled with tooltip** — disabled buttons still show the tooltip on hover (used for blocked Publish actions)
 
diff --git a/src/frontend/shared/studio-button.vue b/src/frontend/shared/studio-button.vue
index 7c6fbcaf..8935e431 100644
--- a/src/frontend/shared/studio-button.vue
+++ b/src/frontend/shared/studio-button.vue
@@ -40,7 +40,7 @@
 import { computed, useSlots } from 'vue';
 
 export type StudioButtonVariant =
-  'primary' | 'outline' | 'secondary' | 'green' | 'gray' | 'red';
+  'primary' | 'secondary' | 'tertiary' | 'destructive';
 
 export type StudioButtonShape = 'default' | 'cta';
 
@@ -89,13 +89,11 @@ const shapeClasses = computed(() =>
 const variantClassMap: Record<StudioButtonVariant, string> = {
   primary:
     'bg-studio-forest text-studio-lime enabled:hover:bg-studio-green enabled:hover:text-studio-forest',
-  outline:
-    'border border-studio-forest bg-transparent text-studio-forest enabled:hover:bg-gray-300',
   secondary:
     'min-w-32 bg-gray-200 text-gray-700 enabled:hover:bg-gray-800 enabled:hover:text-white',
-  green: 'bg-green-500 text-white enabled:hover:bg-green-400',
-  gray: 'bg-gray-200 text-gray-700 enabled:hover:bg-gray-300',
-  red: 'bg-red-500 text-white enabled:hover:bg-red-400',
+  tertiary:
+    'border border-studio-forest bg-transparent text-studio-forest enabled:hover:bg-gray-300',
+  destructive: 'bg-red-500 text-white enabled:hover:bg-red-400',
 };
 
 const variantClasses = computed(() => variantClassMap[props.variant]);
diff --git a/src/frontend/stories/components/workflow-actions.vue b/src/frontend/stories/components/workflow-actions.vue
index 445b4619..6b930405 100644
--- a/src/frontend/stories/components/workflow-actions.vue
+++ b/src/frontend/stories/components/workflow-actions.vue
@@ -2,7 +2,7 @@
   <StudioButton
     v-if="showRequestChangeButton"
     label="Request Change"
-    variant="red"
+    variant="destructive"
     @click="emit('request-change')"
   />
   <StudioButton
diff --git a/src/frontend/stories/story-edit.vue b/src/frontend/stories/story-edit.vue
index 3a022cd2..2cf09a6e 100644
--- a/src/frontend/stories/story-edit.vue
+++ b/src/frontend/stories/story-edit.vue
@@ -4,7 +4,7 @@
       <StudioButton
         v-if="props.hasNoContent"
         label="Delete"
-        variant="red"
+        variant="destructive"
         :disabled="isSaving"
         @click="deleteStory"
       >
diff --git a/src/frontend/stories/story-index.vue b/src/frontend/stories/story-index.vue
index ed5523be..fb0b61e0 100644
--- a/src/frontend/stories/story-index.vue
+++ b/src/frontend/stories/story-index.vue
@@ -4,13 +4,13 @@
       <StudioButton
         v-if="canEditStory"
         label="Edit"
-        variant="outline"
+        variant="tertiary"
         @click="editMeta"
       />
       <StudioButton
         v-if="canEditStory && !story.isPublished"
         label="Publish"
-        variant="green"
+        variant="primary"
         :tooltip="publishBlockedReason ?? undefined"
         :disabled="isPublishing || !canPublishStoryReadyState"
         @click="publishStory"
@@ -24,7 +24,7 @@
           <StudioButton
             v-if="addStatus == AddStatus.Add"
             :label="story.chapterType"
-            variant="outline"
+            variant="tertiary"
             shape="cta"
             @click="addDraft"
           >
diff --git a/src/frontend/team/components/user-form-modal.vue b/src/frontend/team/components/user-form-modal.vue
index 20578ff5..f850d08d 100644
--- a/src/frontend/team/components/user-form-modal.vue
+++ b/src/frontend/team/components/user-form-modal.vue
@@ -73,7 +73,7 @@
     <template #actions>
       <div class="mt-9 flex w-full justify-end gap-x-4">
         <StudioButton :label="submitLabel" variant="primary" @click="emit('submit')" />
-        <StudioButton label="Cancel" variant="gray" @click="emit('cancel')" />
+        <StudioButton label="Cancel" variant="secondary" @click="emit('cancel')" />
       </div>
     </template>
   </LanguageModal>
diff --git a/src/frontend/ui/components/ui-card.vue b/src/frontend/ui/components/ui-card.vue
index 1b0a2d2a..28e8ab51 100644
--- a/src/frontend/ui/components/ui-card.vue
+++ b/src/frontend/ui/components/ui-card.vue
@@ -82,7 +82,7 @@
             </button>
             <StudioButton
               aria-label="Save translation"
-              variant="green"
+              variant="primary"
               :disabled="!model"
               @click="saveTranslation"
             >
@@ -119,7 +119,7 @@
             </div>
           </div>
           <div v-show="suggestion.length > 0" class="flex gap-x-6">
-            <StudioButton label="Discard" variant="outline" @click="discardSuggestion" />
+            <StudioButton label="Discard" variant="tertiary" @click="discardSuggestion" />
             <StudioButton
               label="Apply Suggestion"
               variant="secondary"

From 3d1d6013cafffa125929ce0109cf9d4378e41373 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Mon, 10 Aug 2026 15:17:31 +0300
Subject: [PATCH 29/39] style: change button variant from secondary to primary

---
 src/frontend/team/users-index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/team/users-index.vue b/src/frontend/team/users-index.vue
index 63a398bd..9ac8c70c 100644
--- a/src/frontend/team/users-index.vue
+++ b/src/frontend/team/users-index.vue
@@ -2,7 +2,7 @@
   <AppLayout title="Team" subtitle="User Management">
     <template #actions>
       <div class="flex items-center gap-x-6">
-        <StudioButton label="Add user" variant="secondary" @click="onAdd">
+        <StudioButton label="Add user" variant="primary" @click="onAdd">
           <Plus class="size-4" aria-hidden="true" />
         </StudioButton>
       </div>

From 19198803d8046ca44c01a695287baf6898f3f02f Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Mon, 10 Aug 2026 15:25:27 +0300
Subject: [PATCH 30/39] ops: update changelog with new components and button
 variant fixes

---
 docs/qa/changelog-qa.md                    | 24 ++++++++++++-------
 docs/qa/changelog-qa.story.md              | 28 ++++++++++++++++++----
 src/frontend/resources/resources-index.vue |  2 +-
 3 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/docs/qa/changelog-qa.md b/docs/qa/changelog-qa.md
index 5c77057a..de86310d 100644
--- a/docs/qa/changelog-qa.md
+++ b/docs/qa/changelog-qa.md
@@ -16,6 +16,8 @@ _Generated by `npm run changelog:qa`. Edit Summary, Checked, and DQA questions b
 |------|-------|-----------|------------------|
 | Action card | dashboard | `action-card.vue` | [Action card](http://localhost:6006/story/src-frontend-dashboard-action-card-story-vue) |
 | Action grid | dashboard | `action-grid.vue` | [Action grid](http://localhost:6006/story/src-frontend-dashboard-action-grid-story-vue) |
+| App Layout Header | shared | `app-layout-header.vue` | [App Layout Header](http://localhost:6006/story/src-frontend-shared-app-layout-header-story-vue) |
+| Bible Translations Modal | settings | `bible-translations-modal.vue` | [Bible Translations Modal](http://localhost:6006/story/src-frontend-settings-languages-components-bible-translations-modal-story-vue) |
 | Colors | shared | `colors.vue` | [Colors](http://localhost:6006/story/src-frontend-shared-colors-story-vue) |
 | Dashboard Index | dashboard | `dashboard-index.vue` | [Dashboard Index](http://localhost:6006/story/src-frontend-dashboard-dashboard-index-story-vue) |
 | Index Filter | shared | `index-filter.vue` | [Index Filter](http://localhost:6006/story/src-frontend-shared-index-filter-story-vue) |
@@ -25,13 +27,18 @@ _Generated by `npm run changelog:qa`. Edit Summary, Checked, and DQA questions b
 | Invitations index page | invitation | `invitations-index.vue` | [Invitations index page](http://localhost:6006/story/src-frontend-invitation-invitations-index-story-vue) |
 | Language block | dashboard | `language-block.vue` | [Language block](http://localhost:6006/story/src-frontend-dashboard-language-block-story-vue) |
 | Language List | settings | `language-list.vue` | [Language List](http://localhost:6006/story/src-frontend-settings-languages-language-list-story-vue) |
+| Language List Item | settings | `language-list-item.vue` | [Language List Item](http://localhost:6006/story/src-frontend-settings-languages-components-language-list-item-story-vue) |
 | Language option label | shared | `language-option-label.vue` | [Language option label](http://localhost:6006/story/src-frontend-shared-language-option-label-story-vue) |
 | Languages Edit | settings | `languages-edit.vue` | [Languages Edit](http://localhost:6006/story/src-frontend-settings-languages-languages-edit-story-vue) |
 | List Switcher | shared | `list-switcher.vue` | [List Switcher](http://localhost:6006/story/src-frontend-shared-list-switcher-story-vue) |
+| Message | shared | `message-centre.vue` | [Message](http://localhost:6006/story/src-frontend-shared-message-centre-story-vue) |
 | Nav rail language selector | shared | `nav-rail-language-selector.vue` | [Nav rail language selector](http://localhost:6006/story/src-frontend-shared-nav-rail-language-selector-story-vue) |
 | Nav rail panel | shared | `nav-rail-panel.vue` | [Nav rail panel](http://localhost:6006/story/src-frontend-shared-nav-rail-panel-story-vue) |
+| Pages Edit | pages | `pages-edit.vue` | [Pages Edit](http://localhost:6006/story/src-frontend-pages-pages-edit-story-vue) |
 | Panel List | stories | `panel-list.vue` | [Panel List](http://localhost:6006/story/src-frontend-stories-components-panel-list-story-vue) |
 | Preview | stories | `chapter-preview.vue` | [Preview](http://localhost:6006/story/src-frontend-stories-chapter-preview-story-vue) |
+| Remove Language Modal | settings | `remove-language-modal.vue` | [Remove Language Modal](http://localhost:6006/story/src-frontend-settings-languages-components-remove-language-modal-story-vue) |
+| Request App Update Modal | settings | `request-app-update-modal.vue` | [Request App Update Modal](http://localhost:6006/story/src-frontend-settings-languages-components-request-app-update-modal-story-vue) |
 | Request Feedback Modal | settings | `request-feedback-modal.vue` | [Request Feedback Modal](http://localhost:6006/story/src-frontend-settings-languages-components-request-feedback-modal-story-vue) |
 | Resource Attached Item | resources | `resource-attached-item.vue` | [Resource Attached Item](http://localhost:6006/story/src-frontend-stories-components-resource-attached-item-story-vue) |
 | Resource edit | resources | `resources-edit.vue` | [Resource edit](http://localhost:6006/story/src-frontend-resources-resources-edit-story-vue) |
@@ -42,13 +49,16 @@ _Generated by `npm run changelog:qa`. Edit Summary, Checked, and DQA questions b
 | Resource Visibility Badge | resources | `resource-visibility-badge.vue` | [Resource Visibility Badge](http://localhost:6006/story/src-frontend-stories-components-resource-visibility-badge-story-vue) |
 | Rich Listbox | shared | `rich-listbox.vue` | [Rich Listbox](http://localhost:6006/story/src-frontend-shared-rich-listbox-story-vue) |
 | Ring | dashboard | `ring.vue` | [Ring](http://localhost:6006/story/src-frontend-dashboard-ring-story-vue) |
+| Settings Index | settings | `settings-index.vue` | [Settings Index](http://localhost:6006/story/src-frontend-settings-settings-index-story-vue) |
 | Stat tiles | dashboard | `stat-tiles.vue` | [Stat tiles](http://localhost:6006/story/src-frontend-dashboard-stat-tiles-story-vue) |
 | Story Create | stories | `story-create.vue` | [Story Create](http://localhost:6006/story/src-frontend-stories-story-create-story-vue) |
 | Story Edit | stories | `story-edit.vue` | [Story Edit](http://localhost:6006/story/src-frontend-stories-story-edit-story-vue) |
 | Story Gallery | stories | `story-gallery.vue` | [Story Gallery](http://localhost:6006/story/src-frontend-stories-story-gallery-story-vue) |
+| Story Index | stories | `story-index.vue` | [Story Index](http://localhost:6006/story/src-frontend-stories-story-index-story-vue) |
 | Stream Index | streams | `stream-index.vue` | [Stream Index](http://localhost:6006/story/src-frontend-streams-stream-index-story-vue) |
 | Studio Button | shared | `studio-button.vue` | [Studio Button](http://localhost:6006/story/src-frontend-shared-studio-button-story-vue) |
 | Tab Button | shared | `tab-button.vue` | [Tab Button](http://localhost:6006/story/src-frontend-shared-tab-button-story-vue) |
+| Users Page | team | `users-index.vue` | [Users Page](http://localhost:6006/story/src-frontend-team-users-index-story-vue) |
 | Workflow Buttons | stories | `workflow-actions.vue` | [Workflow Buttons](http://localhost:6006/story/src-frontend-stories-components-workflow-actions-story-vue) |
 
 ## Unchanged — regression check
@@ -59,8 +69,6 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 |---------|------|-------|-----------|------------------|---------------|
 | [ ] | Action Button | shared | `action-button.vue` | [Action Button](http://localhost:6006/story/src-frontend-shared-action-button-story-vue) |  |
 | [ ] | Add Item Button | shared | `add-item-button.vue` | [Add Item Button](http://localhost:6006/story/src-frontend-shared-add-item-button-story-vue) |  |
-| [ ] | App Layout Header | shared | `app-layout-header.vue` | [App Layout Header](http://localhost:6006/story/src-frontend-shared-app-layout-header-story-vue) |  |
-| [ ] | Bible Translations Modal | settings | `bible-translations-modal.vue` | [Bible Translations Modal](http://localhost:6006/story/src-frontend-settings-languages-components-bible-translations-modal-story-vue) |  |
 | [ ] | Bookmark Action | shared | `bookmark-action.vue` | [Bookmark Action](http://localhost:6006/story/src-frontend-shared-bookmark-action-story-vue) |  |
 | [ ] | Context Menu | shared | `context-menu.vue` | [Context Menu](http://localhost:6006/story/src-frontend-shared-context-menu-story-vue) |  |
 | [ ] | Draft Page | stories | `draft-index.vue` | [Draft Page](http://localhost:6006/story/src-frontend-stories-draft-index-story-vue) |  |
@@ -75,27 +83,21 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 | [ ] | Index Card | stories | `index-card.vue` | [Index Card](http://localhost:6006/story/src-frontend-stories-components-index-card-story-vue) |  |
 | [ ] | Invitation index item | invitation | `invitation-index-item.vue` | [Invitation index item](http://localhost:6006/story/src-frontend-invitation-invitation-index-item-story-vue) |  |
 | [ ] | Label Button | shared | `label-button.vue` | [Label Button](http://localhost:6006/story/src-frontend-shared-label-button-story-vue) |  |
-| [ ] | Language List Item | settings | `language-list-item.vue` | [Language List Item](http://localhost:6006/story/src-frontend-settings-languages-components-language-list-item-story-vue) |  |
 | [ ] | Language Table | settings | `language-table.vue` | [Language Table](http://localhost:6006/story/src-frontend-settings-languages-components-language-table-story-vue) |  |
-| [ ] | Message | shared | `message-centre.vue` | [Message](http://localhost:6006/story/src-frontend-shared-message-centre-story-vue) |  |
 | [ ] | Meta Box | shared | `meta-box.vue` | [Meta Box](http://localhost:6006/story/src-frontend-shared-meta-box-story-vue) |  |
 | [ ] | Meta Meta Box | stories | `meta-meta-box.vue` | [Meta Meta Box](http://localhost:6006/story/src-frontend-stories-components-meta-meta-box-story-vue) |  |
 | [ ] | Navigation pane | shared | `navigation-pane.vue` | [Navigation pane](http://localhost:6006/story/src-frontend-shared-navigation-pane-story-vue) |  |
 | [ ] | Page Index Item | pages | `page-index-item.vue` | [Page Index Item](http://localhost:6006/story/src-frontend-pages-page-index-item-story-vue) |  |
-| [ ] | Pages Edit | pages | `pages-edit.vue` | [Pages Edit](http://localhost:6006/story/src-frontend-pages-pages-edit-story-vue) |  |
-| [ ] | Remove Language Modal | settings | `remove-language-modal.vue` | [Remove Language Modal](http://localhost:6006/story/src-frontend-settings-languages-components-remove-language-modal-story-vue) |  |
-| [ ] | Request App Update Modal | settings | `request-app-update-modal.vue` | [Request App Update Modal](http://localhost:6006/story/src-frontend-settings-languages-components-request-app-update-modal-story-vue) |  |
 | [ ] | Resource Attached List | resources | `resource-attached-list.vue` | [Resource Attached List](http://localhost:6006/story/src-frontend-stories-components-resource-attached-list-story-vue) |  |
 | [ ] | Resource Label Group | resources | `resource-label-group.vue` | [Resource Label Group](http://localhost:6006/story/src-frontend-stories-components-resource-label-group-story-vue) |  |
 | [ ] | Resource not found | resources | `resource-not-found.vue` | [Resource not found](http://localhost:6006/story/src-frontend-resources-resource-not-found-story-vue) |  |
 | [ ] | Resource Thumbnail | resources | `resource-thumbnail.vue` | [Resource Thumbnail](http://localhost:6006/story/src-frontend-stories-components-resource-thumbnail-story-vue) |  |
 | [ ] | Resource Used In | resources | `resource-used-in.vue` | [Resource Used In](http://localhost:6006/story/src-frontend-resources-resource-used-in-story-vue) |  |
-| [ ] | Resources index page | resources | `resources-index.vue` | [Resources index page](http://localhost:6006/story/src-frontend-resources-resources-index-story-vue) |  |
+| [ ] | Resources index page | resources | `resources-index.vue` | [Resources index page](http://localhost:6006/story/src-frontend-resources-resources-index-story-vue) | Header Create Resource: is it primary (not secondary)? |
 | [ ] | Status Tag | shared | `status-tag.vue` | [Status Tag](http://localhost:6006/story/src-frontend-shared-status-tag-story-vue) |  |
 | [ ] | Story Edit Details | stories | `story-edit-details.vue` | [Story Edit Details](http://localhost:6006/story/src-frontend-stories-components-story-edit-details-story-vue) |  |
 | [ ] | Story Edit Resources | resources | `story-edit-resources.vue` | [Story Edit Resources](http://localhost:6006/story/src-frontend-stories-components-story-edit-resources-story-vue) |  |
 | [ ] | Story Edit Sections | stories | `story-edit-sections.vue` | [Story Edit Sections](http://localhost:6006/story/src-frontend-stories-components-story-edit-sections-story-vue) |  |
-| [ ] | Story Index | stories | `story-index.vue` | [Story Index](http://localhost:6006/story/src-frontend-stories-story-index-story-vue) |  |
 | [ ] | Story Item | stories | `story-item.vue` | [Story Item](http://localhost:6006/story/src-frontend-stories-components-story-item-story-vue) |  |
 | [ ] | Stream Gallery | streams | `stream-gallery.vue` | [Stream Gallery](http://localhost:6006/story/src-frontend-streams-stream-gallery-story-vue) |  |
 | [ ] | Stream Item | streams | `stream-item.vue` | [Stream Item](http://localhost:6006/story/src-frontend-streams-components-stream-item-story-vue) |  |
@@ -109,7 +111,10 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 | `src/frontend/dashboard/ring-block.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/dashboard/stat-tile.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/fields/list/foldable-list.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/resources/remove-resource-modal.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/settings/languages/components/language-list-controls.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/settings/languages/components/language-table-row.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/settings/languages/components/request-deletion-modal.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/shared/app-footer.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/shared/app-layout.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/shared/draft-actions.vue` | Find a parent page story or add a co-located `.story.vue` |
@@ -121,3 +126,4 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 | `src/frontend/shared/toggle-button.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/team/components/user-form-modal.vue` | Find a parent page story or add a co-located `.story.vue` |
 | `src/frontend/team/components/user-row.vue` | Find a parent page story or add a co-located `.story.vue` |
+| `src/frontend/ui/components/ui-card.vue` | Find a parent page story or add a co-located `.story.vue` |
diff --git a/docs/qa/changelog-qa.story.md b/docs/qa/changelog-qa.story.md
index 99ac5601..10f30aac 100644
--- a/docs/qa/changelog-qa.story.md
+++ b/docs/qa/changelog-qa.story.md
@@ -13,7 +13,27 @@ _Generated by `npm run changelog:qa -- --format histoire`. Edit Summary, Checked
 
 ## Summary
 
-- _Describe the main themes of this branch for QA_
+- Header action buttons (`AppLayout` `#actions`) should use `primary` or `secondary` only; a lone button must be `primary`. Destructive is allowed.
+- **Violations to fix before merge** (see checklist below):
+  - `resources-index.vue` — lone Create Resource button is `secondary` (should be `primary`)
+  - `resources-edit.vue` — Cancel is `tertiary` beside primary Save/Create (should be `secondary`)
+  - `story-index.vue` — Edit is `tertiary` (should be `primary` when alone, `secondary` when Publish is visible)
+  - `app-layout-header.story.vue` — Glass header Cancel is `tertiary`; Draft page lone Save is `secondary`
+
+## Header action button rule — violations to fix
+
+Rule: `StudioButton` in `AppLayout` `#actions` must be `primary` or `secondary`. Single button → `primary`. Destructive OK.
+
+| Fixed | Component | Histoire | Issue | Expected |
+|-------|-----------|----------|-------|----------|
+| [ ] | `resources-index.vue` | [Resources index page](../../src/frontend/resources/resources-index.story.vue) | Create Resource uses `secondary` | Lone CTA → `primary` |
+| [ ] | `resources-edit.vue` | [Resource edit](../../src/frontend/resources/resources-edit.story.vue) | Cancel uses `tertiary` | Paired with primary → `secondary` |
+| [ ] | `story-index.vue` | [Story Index](../../src/frontend/stories/story-index.story.vue) | Edit uses `tertiary` | `primary` when published (Edit only); `secondary` when Edit + Publish |
+| [ ] | `app-layout-header.story.vue` | [App Layout Header](../../src/frontend/shared/app-layout-header.story.vue) | Story examples contradict rule | Glass header: Cancel → `secondary`; Draft page: Save → `primary` |
+
+**Already correct (spot-check):** `users-index.vue`, `invitations-index.vue`, `settings-index.vue`, `languages-edit.vue`, `story-create.vue`, `story-gallery.vue`, `story-edit.vue`, `chapter-preview.vue`.
+
+**Out of scope:** modal footers, in-page buttons, legacy `IconButton`/`LabelButton` headers (`stream-index.vue`, `audience-index.vue`, `journa-story-edit.vue`).
 
 ## Visual checks — changed (Histoire)
 
@@ -64,7 +84,7 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 |---------|------|-------|-----------|------------------|---------------|
 | [ ] | Action Button | shared | `action-button.vue` | [Action Button](../../src/frontend/shared/action-button.story.vue) |  |
 | [ ] | Add Item Button | shared | `add-item-button.vue` | [Add Item Button](../../src/frontend/shared/add-item-button.story.vue) |  |
-| [ ] | App Layout Header | shared | `app-layout-header.vue` | [App Layout Header](../../src/frontend/shared/app-layout-header.story.vue) |  |
+| [ ] | App Layout Header | shared | `app-layout-header.vue` | [App Layout Header](../../src/frontend/shared/app-layout-header.story.vue) | Glass header / Draft page story variants follow the rule? |
 | [ ] | Bible Translations Modal | settings | `bible-translations-modal.vue` | [Bible Translations Modal](../../src/frontend/settings/languages/components/bible-translations-modal.story.vue) |  |
 | [ ] | Bookmark Action | shared | `bookmark-action.vue` | [Bookmark Action](../../src/frontend/shared/bookmark-action.story.vue) |  |
 | [ ] | Context Menu | shared | `context-menu.vue` | [Context Menu](../../src/frontend/shared/context-menu.story.vue) |  |
@@ -95,12 +115,12 @@ _Unchanged `.vue` files with co-located stories in folders where something chang
 | [ ] | Resource not found | resources | `resource-not-found.vue` | [Resource not found](../../src/frontend/resources/resource-not-found.story.vue) |  |
 | [ ] | Resource Thumbnail | resources | `resource-thumbnail.vue` | [Resource Thumbnail](../../src/frontend/stories/components/resource-thumbnail.story.vue) |  |
 | [ ] | Resource Used In | resources | `resource-used-in.vue` | [Resource Used In](../../src/frontend/resources/resource-used-in.story.vue) |  |
-| [ ] | Resources index page | resources | `resources-index.vue` | [Resources index page](../../src/frontend/resources/resources-index.story.vue) |  |
+| [ ] | Resources index page | resources | `resources-index.vue` | [Resources index page](../../src/frontend/resources/resources-index.story.vue) | Header Create Resource: is it primary (not secondary)? |
 | [ ] | Status Tag | shared | `status-tag.vue` | [Status Tag](../../src/frontend/shared/status-tag.story.vue) |  |
 | [ ] | Story Edit Details | stories | `story-edit-details.vue` | [Story Edit Details](../../src/frontend/stories/components/story-edit-details.story.vue) |  |
 | [ ] | Story Edit Resources | resources | `story-edit-resources.vue` | [Story Edit Resources](../../src/frontend/stories/components/story-edit-resources.story.vue) |  |
 | [ ] | Story Edit Sections | stories | `story-edit-sections.vue` | [Story Edit Sections](../../src/frontend/stories/components/story-edit-sections.story.vue) |  |
-| [ ] | Story Index | stories | `story-index.vue` | [Story Index](../../src/frontend/stories/story-index.story.vue) |  |
+| [ ] | Story Index | stories | `story-index.vue` | [Story Index](../../src/frontend/stories/story-index.story.vue) | Published: Edit primary only? Unpublished: Edit secondary + Publish primary? |
 | [ ] | Story Item | stories | `story-item.vue` | [Story Item](../../src/frontend/stories/components/story-item.story.vue) |  |
 | [ ] | Stream Gallery | streams | `stream-gallery.vue` | [Stream Gallery](../../src/frontend/streams/stream-gallery.story.vue) |  |
 | [ ] | Stream Item | streams | `stream-item.vue` | [Stream Item](../../src/frontend/streams/components/stream-item.story.vue) |  |
diff --git a/src/frontend/resources/resources-index.vue b/src/frontend/resources/resources-index.vue
index 28563244..c1641dd4 100644
--- a/src/frontend/resources/resources-index.vue
+++ b/src/frontend/resources/resources-index.vue
@@ -1,7 +1,7 @@
 <template>
   <AppLayout title="Resource Library" subtitle="Manage Resources">
     <template #actions>
-      <StudioButton label="Create Resource" variant="secondary" @click="createResource">
+      <StudioButton label="Create Resource" variant="primary" @click="createResource">
         <Plus class="size-4" aria-hidden="true" />
       </StudioButton>
     </template>

From b1f2a9f42d392914dbc9e84e1c98df14926caae4 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Mon, 10 Aug 2026 15:38:52 +0300
Subject: [PATCH 31/39] style: update text color in resource empty state
 component

---
 src/frontend/stories/components/resource-empty-state.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/stories/components/resource-empty-state.vue b/src/frontend/stories/components/resource-empty-state.vue
index 76f1968b..fdcb5ebe 100644
--- a/src/frontend/stories/components/resource-empty-state.vue
+++ b/src/frontend/stories/components/resource-empty-state.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="py-11">
-    <p class="text-studio-green text-center font-dmsans text-base font-normal leading-7">
+    <p class="text-center font-dmsans text-base font-normal leading-7 text-studio-forest">
       There are no resources attached to this story. <br />
       Search for resources above or create new ones to attach to this story
     </p>

From 47d7e56ac87496bb02b11b6f0146c9881a75ae36 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 12 Aug 2026 10:09:21 +0300
Subject: [PATCH 32/39] refactor: use gray colour

---
 src/frontend/shared/rich-listbox.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/frontend/shared/rich-listbox.vue b/src/frontend/shared/rich-listbox.vue
index 50566a65..6857b986 100644
--- a/src/frontend/shared/rich-listbox.vue
+++ b/src/frontend/shared/rich-listbox.vue
@@ -71,7 +71,7 @@
             <li
               :class="[
                 selected && isInitialSelection
-                  ? 'bg-studio-green'
+                  ? 'bg-blue-100'
                   : selected
                     ? 'bg-gray-200'
                     : active
@@ -90,7 +90,9 @@
                   <p
                     class="font-medium"
                     :class="
-                      selected && isInitialSelection ? 'text-studio-forest' : 'text-gray-900'
+                      selected && isInitialSelection
+                        ? 'text-studio-forest'
+                        : 'text-gray-900'
                     "
                   >
                     {{ option.label }}

From d8c961b58c7a1b6161dda3611461062160be7a66 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 12 Aug 2026 10:12:59 +0300
Subject: [PATCH 33/39] style: update color scheme for language selector
 component

---
 .../shared/nav-rail-language-selector.vue     | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/frontend/shared/nav-rail-language-selector.vue b/src/frontend/shared/nav-rail-language-selector.vue
index f773a7ed..ef683ee1 100644
--- a/src/frontend/shared/nav-rail-language-selector.vue
+++ b/src/frontend/shared/nav-rail-language-selector.vue
@@ -1,9 +1,10 @@
 <template>
-  <Listbox v-model="model" as="div" :class="variant === 'pill' ? 'relative inline-block' : 'relative'">
-    <ListboxButton
-      :disabled="isReadOnly"
-      :class="triggerClasses"
-    >
+  <Listbox
+    v-model="model"
+    as="div"
+    :class="variant === 'pill' ? 'relative inline-block' : 'relative'"
+  >
+    <ListboxButton :disabled="isReadOnly" :class="triggerClasses">
       <template v-if="variant === 'panel'">
         <div class="flex items-center gap-2">
           <Icon name="translate" class="size-6 shrink-0" />
@@ -22,7 +23,7 @@
       </template>
       <template v-else>
         <span
-          class="absolute right-2 top-4 rounded-xl bg-blue-100 px-1 py-[2px] text-[8px] font-medium uppercase leading-[9.36px] text-blue-800"
+          class="absolute right-2 top-4 rounded-xl bg-studio-lime px-1 py-[2px] text-[8px] font-medium uppercase leading-[9.36px] text-studio-forest"
         >
           {{ currentLocale }}
         </span>
@@ -31,7 +32,11 @@
     </ListboxButton>
 
     <transition
-      :leave-active-class="variant === 'pill' ? 'transition duration-75 ease-in' : 'transition duration-100 ease-in'"
+      :leave-active-class="
+        variant === 'pill'
+          ? 'transition duration-75 ease-in'
+          : 'transition duration-100 ease-in'
+      "
       leave-from-class="opacity-100"
       :leave-to-class="variant === 'pill' ? 'opacity-0 transform scale-95' : 'opacity-0'"
     >
@@ -121,10 +126,7 @@ const optionsClasses = computed(() => {
     ];
   }
 
-  return [
-    shared,
-    'left-0 top-full mt-1 max-h-[calc(100vh-240px)] w-56 origin-top-right',
-  ];
+  return [shared, 'left-0 top-full mt-1 max-h-[calc(100vh-240px)] w-56 origin-top-right'];
 });
 
 const rowClasses = (active: boolean, selected: boolean) => [

From a81e1af4c21b773f69ed612882ace362e3e31c7c Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 12 Aug 2026 10:51:42 +0300
Subject: [PATCH 34/39] increment: add NavRailLanguageIndicator component and
 integrate it into the toolbar and language selector stories

---
 .../shared/nav-rail-language-indicator.vue    | 21 +++++++++++++++++++
 .../nav-rail-language-selector.story.vue      |  7 +++++++
 src/frontend/shared/nav-rail-toolbar.vue      |  5 +++++
 src/frontend/shared/studio-button.story.vue   | 12 +++++++++--
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/shared/nav-rail-language-indicator.vue

diff --git a/src/frontend/shared/nav-rail-language-indicator.vue b/src/frontend/shared/nav-rail-language-indicator.vue
new file mode 100644
index 00000000..36980ada
--- /dev/null
+++ b/src/frontend/shared/nav-rail-language-indicator.vue
@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="relative flex size-14 items-center justify-center rounded-full"
+    aria-hidden="true"
+  >
+    <span
+      class="absolute right-2 top-4 rounded-xl bg-studio-lime px-1 py-[2px] text-[8px] font-medium uppercase leading-[9.36px] text-studio-forest"
+    >
+      {{ currentLocale }}
+    </span>
+    <Languages class="size-6" aria-hidden="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Languages } from '@lucide/vue';
+
+defineProps<{
+  currentLocale: string;
+}>();
+</script>
diff --git a/src/frontend/shared/nav-rail-language-selector.story.vue b/src/frontend/shared/nav-rail-language-selector.story.vue
index f9377061..c02bd147 100644
--- a/src/frontend/shared/nav-rail-language-selector.story.vue
+++ b/src/frontend/shared/nav-rail-language-selector.story.vue
@@ -26,6 +26,12 @@
       </div>
     </Variant>
 
+    <Variant title="Indicator">
+      <div class="inline-block rounded-full border border-gray-200 bg-gray-50 p-2">
+        <NavRailLanguageIndicator current-locale="en" />
+      </div>
+    </Variant>
+
     <Variant title="Read only">
       <div class="rounded-xl border border-gray-200 bg-gray-50 p-4">
         <NavRailLanguageSelector
@@ -42,6 +48,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import NavRailLanguageIndicator from './nav-rail-language-indicator.vue';
 import NavRailLanguageSelector from './nav-rail-language-selector.vue';
 import { english, german, spanish, ukrainian } from '../test/mocks';
 
diff --git a/src/frontend/shared/nav-rail-toolbar.vue b/src/frontend/shared/nav-rail-toolbar.vue
index 9913ca2b..9384b463 100644
--- a/src/frontend/shared/nav-rail-toolbar.vue
+++ b/src/frontend/shared/nav-rail-toolbar.vue
@@ -20,6 +20,10 @@
       :is-read-only="!shared.user.isManager"
       @change="onLanguage"
     />
+    <NavRailLanguageIndicator
+      v-if="variant === 'panel' && subscribed('language')"
+      :current-locale="locale"
+    />
     <button class="nav-icon" @click="toggleMenu">
       <ChevronsRight v-if="variant === 'pill'" class="size-6" aria-hidden="true" />
       <ChevronsLeft v-else class="size-6" aria-hidden="true" />
@@ -29,6 +33,7 @@
 
 <script setup lang="ts">
 import { ChevronsLeft, ChevronsRight, Home, Reply } from '@lucide/vue';
+import NavRailLanguageIndicator from './nav-rail-language-indicator.vue';
 import NavRailLanguageSelector from './nav-rail-language-selector.vue';
 import { useSidebarNav } from './use-sidebar-nav';
 
diff --git a/src/frontend/shared/studio-button.story.vue b/src/frontend/shared/studio-button.story.vue
index 95ceacd8..4b0b3886 100644
--- a/src/frontend/shared/studio-button.story.vue
+++ b/src/frontend/shared/studio-button.story.vue
@@ -11,7 +11,10 @@
     </Variant>
 
     <Variant title="Secondary">
-      <StudioButton label="Save Changes" variant="secondary" @click="handleClick" />
+      <div class="flex flex-col gap-2">
+        <StudioButton label="Save Changes" variant="secondary" @click="handleClick" />
+        <StudioButton label="Save Changes" variant="secondary" disabled />
+      </div>
     </Variant>
 
     <Variant title="Tertiary">
@@ -39,7 +42,12 @@
     </Variant>
 
     <Variant title="CTA shape tertiary">
-      <StudioButton label="Learn more" variant="tertiary" shape="cta" @click="handleClick" />
+      <StudioButton
+        label="Learn more"
+        variant="tertiary"
+        shape="cta"
+        @click="handleClick"
+      />
     </Variant>
 
     <Variant title="Disabled">

From 413bc69fd0add6b5f877f946a46443a9b9717fff Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 12 Aug 2026 13:29:15 +0300
Subject: [PATCH 35/39] style: update color scheme for invitation and user row
 components, and replace IconButton with StudioButton in stream index

---
 src/frontend/invitation/invitation-index-item.vue  | 8 +++++---
 src/frontend/shared/nav-rail-language-selector.vue | 2 +-
 src/frontend/streams/stream-index.vue              | 8 +++++---
 src/frontend/team/components/user-row.vue          | 4 +++-
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/frontend/invitation/invitation-index-item.vue b/src/frontend/invitation/invitation-index-item.vue
index 3425632e..7d0faf6d 100644
--- a/src/frontend/invitation/invitation-index-item.vue
+++ b/src/frontend/invitation/invitation-index-item.vue
@@ -41,7 +41,7 @@
           <div class="flex min-w-0 flex-wrap items-center gap-1.5 overflow-hidden">
             <span
               v-if="isForAllRegions"
-              class="inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700"
+              class="inline-flex items-center rounded-full bg-studio-lime px-2 py-0.5 text-xs font-medium text-green-800"
             >
               All Regions
             </span>
@@ -49,7 +49,7 @@
               <span
                 v-for="region in parsedRegions?.slice(0, 3)"
                 :key="region"
-                class="inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700"
+                class="inline-flex items-center rounded-full bg-studio-lime px-2 py-0.5 text-xs font-medium text-green-800"
               >
                 {{ region }}
               </span>
@@ -73,7 +73,9 @@
         class="group/edit text-left"
         @click="emit('edit', invitation.id)"
       >
-        <span class="text-sm font-medium text-gray-900 transition-opacity group-hover/edit:opacity-70">
+        <span
+          class="text-sm font-medium text-gray-900 transition-opacity group-hover/edit:opacity-70"
+        >
           {{ invitationName }}
         </span>
       </button>
diff --git a/src/frontend/shared/nav-rail-language-selector.vue b/src/frontend/shared/nav-rail-language-selector.vue
index ef683ee1..e84d03e8 100644
--- a/src/frontend/shared/nav-rail-language-selector.vue
+++ b/src/frontend/shared/nav-rail-language-selector.vue
@@ -130,7 +130,7 @@ const optionsClasses = computed(() => {
 });
 
 const rowClasses = (active: boolean, selected: boolean) => [
-  selected ? 'bg-studio-lime' : active ? 'bg-gray-100' : '',
+  selected ? 'bg-blue-100' : active ? 'bg-gray-100' : '',
   'relative cursor-default select-none rounded-lg px-3 py-3 pr-10',
 ];
 
diff --git a/src/frontend/streams/stream-index.vue b/src/frontend/streams/stream-index.vue
index 5c0aa853..490975b6 100644
--- a/src/frontend/streams/stream-index.vue
+++ b/src/frontend/streams/stream-index.vue
@@ -4,7 +4,9 @@
       <div class="flex items-center justify-center gap-x-6">
         <ListSwitcher :is-list="isList" @toggle="isList = !isList" />
 
-        <IconButton icon="plus" @tap="addDrop" />
+        <StudioButton label="Add Drop" @click="addDrop">
+          <Plus class="size-4" aria-hidden="true" />
+        </StudioButton>
       </div>
     </template>
     <template #controls>
@@ -72,7 +74,7 @@ import { SharedPageProps } from '../../types';
 
 import IndexFilter from '../shared/index-filter.vue';
 import TabButton from '../shared/tab-button.vue';
-import { ArrowDownWideNarrow, ArrowUpWideNarrow } from '@lucide/vue';
+import { ArrowDownWideNarrow, ArrowUpWideNarrow, Plus } from '@lucide/vue';
 
 import AppLayout from '../shared/app-layout.vue';
 import Icon from '../shared/icon.vue';
@@ -80,9 +82,9 @@ import { computed, ref } from 'vue';
 import type { DropIndexItem, StreamIndexProps } from '../../types';
 import DropItem from './components/drop-item.vue';
 import ListSwitcher from '../shared/list-switcher.vue';
-import IconButton from '../shared/icon-button.vue';
 import { router } from '@inertiajs/vue3';
 import { useSharedStore } from '../store';
+import StudioButton from '../shared/studio-button.vue';
 
 const props = defineProps<StreamIndexProps & SharedPageProps>();
 const shared = useSharedStore();
diff --git a/src/frontend/team/components/user-row.vue b/src/frontend/team/components/user-row.vue
index 37fd8814..127cfe6a 100644
--- a/src/frontend/team/components/user-row.vue
+++ b/src/frontend/team/components/user-row.vue
@@ -36,7 +36,9 @@
       </span>
     </td>
     <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-600">
-      <span class="rounded-xl bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700">
+      <span
+        class="rounded-xl bg-studio-lime px-2 py-1 text-xs font-medium text-green-800"
+      >
         {{ language }}
       </span>
     </td>

From dd0813b6122f8c6bd964ce4b2ef94172ac04ec45 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Mon, 17 Aug 2026 14:43:56 +0300
Subject: [PATCH 36/39] style: update background colors in nav rail components
 for improved consistency

---
 src/frontend/shared/nav-rail-language-selector.vue | 2 +-
 src/frontend/shared/nav-rail-panel.vue             | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/shared/nav-rail-language-selector.vue b/src/frontend/shared/nav-rail-language-selector.vue
index e84d03e8..e90918b8 100644
--- a/src/frontend/shared/nav-rail-language-selector.vue
+++ b/src/frontend/shared/nav-rail-language-selector.vue
@@ -130,7 +130,7 @@ const optionsClasses = computed(() => {
 });
 
 const rowClasses = (active: boolean, selected: boolean) => [
-  selected ? 'bg-blue-100' : active ? 'bg-gray-100' : '',
+  selected ? 'bg-slate-50' : active ? 'bg-slate-100' : '',
   'relative cursor-default select-none rounded-lg px-3 py-3 pr-10',
 ];
 
diff --git a/src/frontend/shared/nav-rail-panel.vue b/src/frontend/shared/nav-rail-panel.vue
index 5c563165..07504a39 100644
--- a/src/frontend/shared/nav-rail-panel.vue
+++ b/src/frontend/shared/nav-rail-panel.vue
@@ -1,6 +1,6 @@
 <template>
   <aside
-    class="glass-surface fixed inset-y-0 z-20 left-0 top-0 max-h-screen w-[320px] rounded-r-[20px] transition-all duration-75"
+    class="glass-surface fixed inset-y-0 left-0 top-0 z-20 max-h-screen w-[320px] rounded-r-[20px] transition-all duration-75"
   >
     <nav class="flex h-full flex-col">
       <div class="flex-1 overflow-y-auto">
@@ -146,6 +146,6 @@ const {
 
 <style lang="postcss" scoped>
 .nav-link {
-  @apply w-full rounded-full px-6 py-[18px] text-left text-sm font-semibold leading-5 transition-all duration-200 ease-in-out hover:bg-gray-100;
+  @apply w-full rounded-full px-6 py-[18px] text-left text-sm font-semibold leading-5 transition-all duration-200 ease-in-out hover:bg-slate-100;
 }
 </style>

From 087698763b23bf6497647a8eb428cd7316a7ce35 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Mon, 17 Aug 2026 15:35:29 +0300
Subject: [PATCH 37/39] style: update background colors in nav rail components
 and adjust hover states for consistency

---
 src/frontend/index.css                        |  2 +-
 .../shared/nav-rail-language-selector.vue     |  2 +-
 src/frontend/shared/nav-rail-panel.story.vue  | 42 +++++++++++++++++++
 src/frontend/shared/nav-rail-panel.vue        |  2 +-
 4 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/frontend/index.css b/src/frontend/index.css
index d283482b..5b2781e0 100644
--- a/src/frontend/index.css
+++ b/src/frontend/index.css
@@ -113,7 +113,7 @@
     @apply [&>*]:border-2 [&>*]:border-red-500; /* debug class will be removed on production build */
   }
   .active {
-    @apply bg-blue-50 transition-all duration-200 ease-in-out;
+    @apply bg-slate-100 transition-all duration-200 ease-in-out;
   }
 
   .auth-input-field {
diff --git a/src/frontend/shared/nav-rail-language-selector.vue b/src/frontend/shared/nav-rail-language-selector.vue
index e90918b8..d3d7b38f 100644
--- a/src/frontend/shared/nav-rail-language-selector.vue
+++ b/src/frontend/shared/nav-rail-language-selector.vue
@@ -130,7 +130,7 @@ const optionsClasses = computed(() => {
 });
 
 const rowClasses = (active: boolean, selected: boolean) => [
-  selected ? 'bg-slate-50' : active ? 'bg-slate-100' : '',
+  selected ? 'bg-gray-100' : active ? 'bg-slate-100' : '',
   'relative cursor-default select-none rounded-lg px-3 py-3 pr-10',
 ];
 
diff --git a/src/frontend/shared/nav-rail-panel.story.vue b/src/frontend/shared/nav-rail-panel.story.vue
index 9fe099d2..67fce523 100644
--- a/src/frontend/shared/nav-rail-panel.story.vue
+++ b/src/frontend/shared/nav-rail-panel.story.vue
@@ -11,6 +11,30 @@
         <Sidebar />
       </div>
     </Variant>
+
+    <Variant title="Active: Stories" :setup-app="loadActiveStories">
+      <div class="min-h-screen bg-gray-50">
+        <Sidebar />
+      </div>
+    </Variant>
+
+    <Variant title="Active: Pages" :setup-app="loadActivePages">
+      <div class="min-h-screen bg-gray-50">
+        <Sidebar />
+      </div>
+    </Variant>
+
+    <Variant title="Active: Resources" :setup-app="loadActiveResources">
+      <div class="min-h-screen bg-gray-50">
+        <Sidebar />
+      </div>
+    </Variant>
+
+    <Variant title="Active: Audience" :setup-app="loadActiveAudience">
+      <div class="min-h-screen bg-gray-50">
+        <Sidebar />
+      </div>
+    </Variant>
   </Story>
 </template>
 
@@ -29,8 +53,22 @@ const loadNav = (user: AppUserInterface): StoryHandler => {
   };
 };
 
+const loadNavAtPath = (user: AppUserInterface, path: string): StoryHandler => {
+  return (): void => {
+    const shared = useSharedStore();
+    shared.setFromProps({ ...sharedProps, user });
+    shared.setSidebarOpen(true);
+    history.replaceState(null, '', `/en/${path}`);
+  };
+};
+
 const loadAdmin = loadNav(adminUser);
 const loadEditor = loadNav(editorUser);
+
+const loadActiveStories = loadNavAtPath(editorUser, 'story');
+const loadActivePages = loadNavAtPath(editorUser, 'page');
+const loadActiveResources = loadNavAtPath(editorUser, 'resource');
+const loadActiveAudience = loadNavAtPath(editorUser, 'audience');
 </script>
 
 <docs lang="md">
@@ -56,4 +94,8 @@ Requires `isAdmin`:
 - **Team**
 
 Compare the **Admin** and **Editor** variants: editors see content links but not Invitations, Settings, or Team.
+
+## Active state
+
+**Active:** variants simulate the current route with `history.replaceState` (e.g. `/en/story`). The matching nav item receives the `.active` class (`bg-blue-50`).
 </docs>
diff --git a/src/frontend/shared/nav-rail-panel.vue b/src/frontend/shared/nav-rail-panel.vue
index 07504a39..8e15964c 100644
--- a/src/frontend/shared/nav-rail-panel.vue
+++ b/src/frontend/shared/nav-rail-panel.vue
@@ -146,6 +146,6 @@ const {
 
 <style lang="postcss" scoped>
 .nav-link {
-  @apply w-full rounded-full px-6 py-[18px] text-left text-sm font-semibold leading-5 transition-all duration-200 ease-in-out hover:bg-slate-100;
+  @apply w-full rounded-full px-6 py-[18px] text-left text-sm font-semibold leading-5 transition-all duration-200 ease-in-out hover:bg-gray-100;
 }
 </style>

From 549785281a3dd9b8daa586f133f4cc17c1047eeb Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Mon, 17 Aug 2026 15:43:02 +0300
Subject: [PATCH 38/39] style: refine background colors in nav rail language
 selector for improved visual consistency

---
 src/frontend/shared/nav-rail-language-selector.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/shared/nav-rail-language-selector.vue b/src/frontend/shared/nav-rail-language-selector.vue
index d3d7b38f..fd754116 100644
--- a/src/frontend/shared/nav-rail-language-selector.vue
+++ b/src/frontend/shared/nav-rail-language-selector.vue
@@ -106,7 +106,7 @@ const triggerClasses = computed(() => {
   if (props.variant === 'panel') {
     return [
       'relative w-full cursor-default rounded-xl py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-1',
-      props.isReadOnly ? 'bg-gray-100' : 'glass-surface',
+      props.isReadOnly ? 'bg-gray-100' : 'bg-slate-100',
     ];
   }
 
@@ -130,7 +130,7 @@ const optionsClasses = computed(() => {
 });
 
 const rowClasses = (active: boolean, selected: boolean) => [
-  selected ? 'bg-gray-100' : active ? 'bg-slate-100' : '',
+  selected ? 'bg-slate-100' : active ? 'bg-gray-50' : '',
   'relative cursor-default select-none rounded-lg px-3 py-3 pr-10',
 ];
 

From 9c107da5ad29f08e7960b1d382acdf2944a07fa0 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Mon, 17 Aug 2026 15:47:49 +0300
Subject: [PATCH 39/39] style: change background color of release date display
 to studio lime

---
 src/frontend/streams/components/drop-item.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/streams/components/drop-item.vue b/src/frontend/streams/components/drop-item.vue
index 1bbd3d06..529da9c1 100644
--- a/src/frontend/streams/components/drop-item.vue
+++ b/src/frontend/streams/components/drop-item.vue
@@ -22,7 +22,7 @@
         </p>
         <p
           v-if="formattedReleaseAt"
-          class="max-w-max rounded-xl bg-gray-100 px-2 py-1 text-xs font-medium leading-4 text-gray-800"
+          class="max-w-max rounded-xl bg-studio-lime px-2 py-1 text-xs font-medium leading-4 text-gray-800"
         >
           {{ formattedReleaseAt }}
         </p>