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/docs/qa/changelog-qa.md b/docs/qa/changelog-qa.md
new file mode 100644
index 00000000..de86310d
--- /dev/null
+++ b/docs/qa/changelog-qa.md
@@ -0,0 +1,129 @@
+# 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) |
+| 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) |
+| 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 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) |
+| 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) |
+| 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
+
+_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) |  |
+| [ ] | 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 Table | settings | `language-table.vue` | [Language Table](http://localhost:6006/story/src-frontend-settings-languages-components-language-table-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) |  |
+| [ ] | 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) | 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 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/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` |
+| `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` |
+| `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
new file mode 100644
index 00000000..10f30aac
--- /dev/null
+++ b/docs/qa/changelog-qa.story.md
@@ -0,0 +1,148 @@
+---
+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 Summary, Checked, and DQA questions below; those persist across `npm run changelog:qa`._
+
+## Summary
+
+- 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)
+
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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._
+
+| 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) | 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) |  |
+| [ ] | 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) |  |
+| [ ] | 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) | 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) | 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) |  |
+| [ ] | 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
+
+| 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/package.json b/package.json
index aa435cee..f7fa086d 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
   "type": "module",
   "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-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/scripts/generate-qa-changelog.mjs b/scripts/generate-qa-changelog.mjs
new file mode 100644
index 00000000..717ec08c
--- /dev/null
+++ b/scripts/generate-qa-changelog.mjs
@@ -0,0 +1,355 @@
+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 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,
+  options,
+  stories,
+  unchangedStories,
+  noStoryFiles,
+  outPath,
+  preserved,
+}) {
+  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 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 |',
+    '|------|-------|-----------|------------------|',
+  ];
+
+  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._',
+    '',
+  );
+
+  appendUnchangedStoryTable(lines, unchangedStories, options, outPath, preserved);
+
+  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,
+  preserved,
+}) {
+  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 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 |',
+    '|------|-------|-----------|------------------|',
+  ];
+
+  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._',
+    '',
+  );
+
+  appendUnchangedStoryTable(lines, unchangedStories, options, outPath, preserved);
+
+  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 preserved = existsSync(outPath)
+    ? parsePreservedUnchangedRows(readFileSync(outPath, 'utf8'))
+    : new Map();
+
+  const build = options.format === 'histoire' ? buildHistoireMarkdown : buildGithubMarkdown;
+  const markdown = build({
+    branch,
+    mergeBase,
+    options,
+    stories,
+    unchangedStories,
+    noStoryFiles,
+    outPath,
+    preserved,
+  });
+
+  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/dashboard/action-card.story.vue b/src/frontend/dashboard/action-card.story.vue
new file mode 100644
index 00000000..fc01894b
--- /dev/null
+++ b/src/frontend/dashboard/action-card.story.vue
@@ -0,0 +1,48 @@
+<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>
+    <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>
+
+<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
new file mode 100644
index 00000000..52f6055a
--- /dev/null
+++ b/src/frontend/dashboard/action-card.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="flex flex-col gap-8 rounded-xl bg-white p-6 font-dmsans">
+    <div class="flex items-center gap-3">
+      <div
+        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="flex-1">{{ description }}</p>
+
+    <div class="flex justify-end">
+      <StudioButton
+        :label="label"
+        variant="secondary"
+        :disabled="disabled"
+        @click="emit('action')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ActionGridItem } from './action-grid.vue';
+import StudioButton from '../shared/studio-button.vue';
+
+defineProps<ActionGridItem>();
+
+const emit = defineEmits<{
+  (e: 'action'): void;
+}>();
+</script>
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..fab690b8
--- /dev/null
+++ b/src/frontend/dashboard/action-grid.vue
@@ -0,0 +1,40 @@
+<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.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>
+  </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;
+  label: string;
+  disabled?: boolean;
+}
+
+defineProps<{
+  items: ActionGridItem[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'action', url: string): void;
+}>();
+</script>
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/dashboard-index.vue b/src/frontend/dashboard/dashboard-index.vue
index 487ce706..ef873a19 100644
--- a/src/frontend/dashboard/dashboard-index.vue
+++ b/src/frontend/dashboard/dashboard-index.vue
@@ -1,46 +1,16 @@
 <template>
-  <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`"
-          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>
+  <AppLayout title="Dashboard" :subtitle="greeting" show-brand>
     <template #main>
-      <div>
-        <StatTiles :stats="stats" :is-loading="isLoading" :error="error" />
-      </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">
-            <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
@@ -48,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 },
@@ -60,16 +30,16 @@
 
           <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>
-      </div>
+      </section>
       <div
         v-if="isMultiLingual"
         class="grid grid-cols-[repeat(auto-fit,_minmax(207px,_207px))] justify-center gap-x-[34px] gap-y-[27px]"
@@ -92,11 +62,13 @@
 <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';
+import { BookOpen, FileText, Languages } from '@lucide/vue';
 import { ref, computed, onMounted } from 'vue';
-import { Link } from '@inertiajs/vue3';
+import { router } from '@inertiajs/vue3';
 import axios from 'axios';
 
 import { SharedPageProps, DashboardProps, StatMetric } from '../../types';
@@ -114,6 +86,42 @@ const greeting = computed(() => {
   return `Hey ${firstName}!`;
 });
 
+const actionItems = computed<ActionGridItem[]>(() => {
+  const disabled = !shared.user.isAdmin;
+
+  return [
+    {
+      url: `/${shared.locale}/story/create`,
+      icon: BookOpen,
+      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: 'Create a page',
+      description:
+        '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',
+    },
+  ];
+});
+
+const handleActionGrid = (url: string) => {
+  router.visit(url);
+};
+
 const activeFilter = ref<'To do' | 'All'>('To do');
 
 const todoCount = computed(() => {
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..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>
@@ -30,17 +30,14 @@
         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 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>
@@ -48,9 +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 { toRelativeTime } from '../shared/helpers';
 
 const props = defineProps<{ progress: TranslationProgress }>();
 
@@ -63,12 +61,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 +83,6 @@ const lastUpdate = computed(() => {
 
   if (!timestamp) return '';
 
-  const date = new Date(timestamp);
-  return date.toISOString().split('T')[0];
+  return toRelativeTime(timestamp);
 });
 </script>
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 580109c7..e80ddbc7 100644
--- a/src/frontend/dashboard/ring.story.vue
+++ b/src/frontend/dashboard/ring.story.vue
@@ -1,61 +1,153 @@
 <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"
-      />
+  <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"
+          :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" />
+    <Variant title="Card: not started">
+      <div class="bg-white p-8">
+        <Ring
+          size="card"
+          label-position="bottom"
+          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"
-      />
+    <Variant title="Card: done">
+      <div class="bg-white p-8">
+        <Ring
+          size="card"
+          label-position="bottom"
+          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"
-      />
+    <Variant title="Card: done not QAed">
+      <div class="bg-white p-8">
+        <Ring
+          size="card"
+          label-position="bottom"
+          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"
-      />
+    <Variant title="Card: overdone">
+      <div class="bg-white p-8">
+        <Ring
+          size="card"
+          label-position="bottom"
+          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" />
+    <Variant title="Card: total is 0">
+      <div class="bg-white p-8">
+        <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">
-      <Ring
-        name="Deutsch"
-        done="something"
-        :draft="50"
-        :total="0"
-        last-updated="2025-07-16"
-      />
+    <Variant title="Card: garbage data">
+      <div class="bg-white p-8">
+        <Ring
+          size="card"
+          label-position="bottom"
+          name="Deutsch"
+          :done="NaN"
+          :draft="50"
+          :total="0"
+          last-updated="2025-07-16"
+        />
+      </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 302cac66..70554070 100644
--- a/src/frontend/dashboard/ring.vue
+++ b/src/frontend/dashboard/ring.vue
@@ -1,115 +1,226 @@
 <template>
-  <div>
-    <div class="relative flex flex-col items-center justify-center">
-      <svg
-        v-if="label !== ''"
-        class="-rotate-90"
-        :height="circleWidth"
-        :width="circleWidth"
+  <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` }"
       >
-        <!-- 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 -->
-        <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}`"
-        />
-      </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" />
+        <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>
-        <span v-else class="text-sm font-normal leading-none text-gray-800">{{
-          label
-        }}</span>
+        <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="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 { Progress } from '../../types';
+import { Check } from '@lucide/vue';
+import type { Progress } from '../../types';
 
-const props = defineProps<Progress>();
+type RingSize = 'compact' | 'card';
 
-const label = computed(() => {
-  const nr = donePercentage.value + draftPercentage.value;
-  if (isNaN(nr)) {
-    return '';
-  }
+type RingProgressData = {
+  donePercentage: number;
+  draftPercentage: number;
+  label: string;
+  doneSegment: number;
+  draftSegment: number;
+  unfilledSegment: number;
+  isComplete: boolean;
+};
 
-  if (nr > 100) {
-    return '100%';
-  }
+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;
 
-  return `${nr}%`;
-});
+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;
 
-const isOverdone = computed(() => {
-  return props.done + props.draft > props.total;
-});
+  return { circleWidth, strokeWidth, center, circleRadius, circumference };
+}
 
-const workingDone = computed(() => {
-  if (!isOverdone.value) return props.done;
-  return props.done - (props.done + props.draft - props.total);
-});
+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);
 
-const donePercentage = computed(() => {
-  return Math.round((workingDone.value / props.total) * 100);
-});
+  let label = '';
+  const nr = donePercentage + draftPercentage;
+  if (!isNaN(nr)) {
+    label = nr > 100 ? '100%' : `${nr}%`;
+  }
 
-const draftPercentage = computed(() => {
-  return Math.round((props.draft / props.total) * 100);
-});
+  const doneSegment = circumference * (donePercentage / 100);
+  const draftSegment = circumference * (draftPercentage / 100);
+  const unfilledSegment = circumference * (unfilledPercentage / 100);
+  const isComplete = donePercentage === 100 && draftPercentage === 0;
 
-const grayPercentage = computed(() => {
-  return 100 - (donePercentage.value + draftPercentage.value);
-});
+  return {
+    donePercentage,
+    draftPercentage,
+    label,
+    doneSegment,
+    draftSegment,
+    unfilledSegment,
+    isComplete,
+  };
+}
 
-const circleWidth = 66;
-const center = circleWidth / 2;
+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,
+  },
+);
 
-// circleRadius = (width / 2) - (strokeWidth)
-const circleRadius = circleWidth / 2 - 6;
+const preset = computed(() => RING_SIZES[props.size]);
+const geometry = computed(() => getRingGeometry(props.size));
 
-const circumference = 2 * Math.PI * circleRadius;
+const isArrayMode = computed(() => props.progress !== undefined);
 
-const greenSegment = computed(() => {
-  return circumference * (donePercentage.value / 100);
+const showAggregateComplete = computed(() => {
+  if (!props.progress?.length) return false;
+  return props.progress.every((stat) => stat.done === stat.total);
 });
 
-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/dashboard/stat-tile.vue b/src/frontend/dashboard/stat-tile.vue
index f24c85ee..82ecd477 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',
           ]"
         >
-          <Icon
-            v-if="changeType === 'increase'"
-            name="arrow-up"
-            class="-ml-1 mr-0.5 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"
-          />
-
           <span class="sr-only">
             {{ changeType === 'increase' ? 'Increased' : 'Decreased' }} by
           </span>
           {{ changePercentage }}
+          <ArrowUp
+            v-if="changeType === 'increase'"
+            class="ml-1 size-3 shrink-0 self-center text-green-500"
+            aria-hidden="true"
+          />
+          <ArrowDown
+            v-else
+            class="ml-1 size-3 shrink-0 self-center text-error"
+            aria-hidden="true"
+          />
         </div>
         <div
           v-else
@@ -61,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;
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/fields/list/foldable-list.vue b/src/frontend/fields/list/foldable-list.vue
index 3a5e6c7f..f6b2c82c 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/index.css b/src/frontend/index.css
index c27dd68a..d283482b 100644
--- a/src/frontend/index.css
+++ b/src/frontend/index.css
@@ -13,6 +13,22 @@
     --primary-color: #39ccfb;
     --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;
+  }
+
+  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;
+  }
 }
 
 @layer components {
diff --git a/src/frontend/index.ts b/src/frontend/index.ts
index b8982710..c2d902b4 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';
@@ -57,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';
@@ -93,6 +93,7 @@ export {
   ImageField,
   IndexCard,
   IndexFilter,
+  IndexTabs,
   InvitationsEdit,
   InvitationsIndex,
   LabelButton,
@@ -130,7 +131,6 @@ export {
   StreamIndex,
   StringField,
   TagField,
-  ToggleButton,
   TranslationIndex,
   UiPage,
   UsersIndex,
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/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/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/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/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/resource-index-item.story.vue b/src/frontend/resources/resource-index-item.story.vue
index 8d92e263..54eb78ce 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 (no badge)">
+      <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 (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">
+            <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 4a3161ca..794f912e 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="secondary"
-            @click="save"
-          />
-          <StudioButton
-            v-else
-            label="Save Changes"
-            :disabled="isSaving"
-            variant="secondary"
-            @click="save"
-          />
-        </template>
+      <StudioButton label="Cancel" variant="tertiary" @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/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>
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/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/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/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/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-footer.vue b/src/frontend/shared/app-footer.vue
new file mode 100644
index 00000000..eefbff54
--- /dev/null
+++ b/src/frontend/shared/app-footer.vue
@@ -0,0 +1,28 @@
+<template>
+  <footer>
+    <div class="mx-auto max-w-7xl pb-10 pt-20">
+      <div class="flex flex-col items-center justify-center">
+        <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
+          >
+        </a>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<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-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/app-layout.vue b/src/frontend/shared/app-layout.vue
index 332bf961..5be78fef 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 :show-brand="showBrand" />
+          </footer>
         </div>
       </div>
     </div>
@@ -55,10 +57,12 @@ 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;
   subtitle?: string;
+  showBrand?: boolean;
 }>();
 
 const shared = useSharedStore();
diff --git a/src/frontend/shared/colors.palette.ts b/src/frontend/shared/colors.palette.ts
new file mode 100644
index 00000000..2cc331c7
--- /dev/null
+++ b/src/frontend/shared/colors.palette.ts
@@ -0,0 +1,149 @@
+// 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-forest', class: 'bg-studio-forest', hex: '#102F35' },
+      { name: 'studio-green', class: 'bg-studio-green', hex: '#B9E86C' },
+      { name: 'studio-lime', class: 'bg-studio-lime', 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-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: 'Violet',
+    colors: [
+      { name: 'violet-100', class: 'bg-violet-100' },
+      { name: 'violet-50', class: 'bg-violet-50' },
+      { name: 'violet-600', class: 'bg-violet-600' },
+    ],
+  },
+];
diff --git a/src/frontend/shared/colors.story.vue b/src/frontend/shared/colors.story.vue
new file mode 100644
index 00000000..a7f2fba9
--- /dev/null
+++ b/src/frontend/shared/colors.story.vue
@@ -0,0 +1,45 @@
+<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 w-80 flex-col gap-2"
+            >
+              <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>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { colorSections } from './colors.palette';
+import { colorUsage } from './colors.usage';
+
+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..34cd542e
--- /dev/null
+++ b/src/frontend/shared/colors.usage.ts
@@ -0,0 +1,920 @@
+// 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: 29, 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',
+      '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/label-hint-popup.vue',
+      'shared/nav-rail-language-selector.vue',
+      'ui/components/ui-string-item.vue',
+    ] },
+  '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/nav-rail-language-selector.vue',
+      'shared/status-tag.vue',
+      'stories/components/resource-picker.vue',
+    ] },
+  '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: 3, files: [
+      'audience/audience-index.vue',
+      'index.css',
+      'shared/pill-button.vue',
+    ] },
+  'blue-50': { count: 59, files: [
+      'audience/audience-index.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/expandable-search.vue',
+      'shared/glass-button.vue',
+      'shared/label-hint.vue',
+      'shared/message-centre.vue',
+      'shared/pill-button.vue',
+      'shared/rich-listbox.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: 36, files: [
+      'audience/audience-index.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',
+      'ui/components/ui-card.vue',
+      'ui/components/ui-string-item.vue',
+    ] },
+  'blue-600': { count: 17, 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',
+      '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: 7, files: [
+      'invitation/invitation-index-item.vue',
+      'resources/resource-index-item.vue',
+      'settings/languages/components/request-app-update-modal.vue',
+      'team/components/user-row.vue',
+    ] },
+  'blue-800': { count: 6, files: [
+      'fields/pill/pill-field.vue',
+      'shared/icon-button.story.vue',
+      'shared/icon-button.vue',
+      'shared/label-button.vue',
+      'shared/nav-rail-language-selector.vue',
+      'shared/status-tag.vue',
+    ] },
+  'blue-900': { count: 2, files: [
+      'settings/languages/components/request-app-update-modal.vue',
+    ] },
+  'current': { count: 6, files: [
+      'shared/bookmark-action.vue',
+      'shared/index-filter.vue',
+      'shared/index-tabs.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: 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',
+      '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: 2, files: [
+      'dashboard/stat-tile.vue',
+      'fields/list/foldable-list.vue',
+    ] },
+  'gray-100': { count: 71, 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/gallery-grid.story.vue',
+      'shared/index-filter.vue',
+      'shared/index-tab-button.vue',
+      'shared/label-hint-popup.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',
+      '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: 112, files: [
+      'audience/audience-index.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/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',
+      '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',
+      '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: 61, 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/index-tabs.vue',
+      'shared/list-switcher.vue',
+      'shared/navigation-pane.vue',
+      'shared/pagination.vue',
+      'shared/rich-listbox.vue',
+      'shared/studio-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/ring.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: 252, files: [
+      'audience/audience-index.vue',
+      'audience/components/audience-row.vue',
+      'dashboard/language-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',
+      'index.css',
+      '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/draft-actions.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/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',
+      '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',
+      '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: 174, files: [
+      'audience/audience-index.vue',
+      'audience/components/audience-row.vue',
+      'dashboard/language-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',
+      'index.css',
+      '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/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',
+      'shared/tab-button.story.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: 61, 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/draft-actions.vue',
+      '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',
+      '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: 41, 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/expandable-search.vue',
+      'shared/list-switcher.vue',
+      'shared/nav-rail-language-selector.vue',
+      'shared/pagination.vue',
+      'shared/pill-button.vue',
+      'shared/studio-button.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',
+      'ui/components/ui-card.vue',
+    ] },
+  'gray-800': { count: 27, files: [
+      'dashboard/action-card.vue',
+      'dashboard/dashboard-index.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',
+      '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',
+      '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/expandable-search.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',
+      '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: 5, files: [
+      'invitation/invitation-index-item.vue',
+      'pages/page-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: 9, files: [
+      'auth/forgot-password.vue',
+      'auth/reset-password.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: 3, files: [
+      'invitation/invitation-index-item.vue',
+      'pages/page-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-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: 5, files: [
+      'fields/attachments/file-upload.vue',
+      'fields/section-panel-field.vue',
+      'shared/add-item-button.vue',
+      'shared/navigation-pane.vue',
+    ] },
+  'red-100': { count: 2, files: [
+      '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: 24, files: [
+      'auth/create-account.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/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: 16, files: [
+      'auth/create-account.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/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: 2, files: [
+      'settings/languages/components/language-modal.vue',
+      'streams/components/stream-item.vue',
+    ] },
+  'studio-dark': { count: 0, files: [] },
+  'studio-forest': { count: 22, 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',
+      'stories/components/resource-utils.ts',
+    ] },
+  '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: 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',
+    ] },
+  'studio-yellow': { count: 2, files: [
+      'dashboard/action-card.vue',
+      'stories/components/resource-utils.ts',
+    ] },
+  'transparent': { count: 23, files: [
+      '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: 1, files: [
+      'resources/resource-used-in.vue',
+    ] },
+  'violet-50': { count: 1, files: [
+      'resources/resource-used-in.vue',
+    ] },
+  'violet-600': { count: 1, files: [
+      'resources/resource-used-in.vue',
+    ] },
+  'white': { count: 178, files: [
+      'audience/audience-index.vue',
+      'dashboard/action-card.vue',
+      'dashboard/language-block.vue',
+      'dashboard/ring.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/expandable-search.vue',
+      '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-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',
+      'shared/studio-button.vue',
+      'shared/tab-button.story.vue',
+      'shared/tab-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/resource-visibility-badge.story.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/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/helpers.ts b/src/frontend/shared/helpers.ts
index f629acb9..e94b5206 100644
--- a/src/frontend/shared/helpers.ts
+++ b/src/frontend/shared/helpers.ts
@@ -62,30 +62,29 @@ export const formatDate = (value: string): string => {
 };
 
 export const toRelativeTime = (value: string, now?: DateTime): string => {
-  const saved = DateTime.fromISO(value);
+  const date = 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');
-
-  const display = saved.toUTC();
-  const hour12 = display.hour % 12 === 0 ? 12 : display.hour % 12;
-  const meridiem = display.hour < 12 ? 'am' : 'pm';
+  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} at ${hour12}:${padZero(
-    display.minute,
-  )}${meridiem}`;
+  return date.toFormat('dd/MM/yyyy');
 };
 
 export const indexCardTags = (scope: string, itemTags: string[]): 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/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/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>
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/list-switcher.vue b/src/frontend/shared/list-switcher.vue
index f86f30b6..3861efb2 100644
--- a/src/frontend/shared/list-switcher.vue
+++ b/src/frontend/shared/list-switcher.vue
@@ -1,23 +1,23 @@
 <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"
   >
     <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;
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/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
new file mode 100644
index 00000000..c02bd147
--- /dev/null
+++ b/src/frontend/shared/nav-rail-language-selector.story.vue
@@ -0,0 +1,57 @@
+<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="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
+          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 NavRailLanguageIndicator from './nav-rail-language-indicator.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..e84d03e8
--- /dev/null
+++ b/src/frontend/shared/nav-rail-language-selector.vue
@@ -0,0 +1,140 @@
+<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-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" />
+      </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-blue-100' : 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..9384b463 100644
--- a/src/frontend/shared/nav-rail-toolbar.vue
+++ b/src/frontend/shared/nav-rail-toolbar.vue
@@ -11,27 +11,19 @@
     <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"
+    />
+    <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" />
@@ -40,8 +32,9 @@
 </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 NavRailLanguageIndicator from './nav-rail-language-indicator.vue';
+import NavRailLanguageSelector from './nav-rail-language-selector.vue';
 import { useSidebarNav } from './use-sidebar-nav';
 
 defineProps<{
diff --git a/src/frontend/shared/rich-listbox.vue b/src/frontend/shared/rich-listbox.vue
index a1da57e5..6857b986 100644
--- a/src/frontend/shared/rich-listbox.vue
+++ b/src/frontend/shared/rich-listbox.vue
@@ -70,7 +70,13 @@
           >
             <li
               :class="[
-                selected ? 'bg-blue-50' : active ? 'bg-gray-50' : 'bg-white',
+                selected && isInitialSelection
+                  ? 'bg-blue-100'
+                  : selected
+                    ? 'bg-gray-200'
+                    : active
+                      ? 'bg-gray-100'
+                      : 'bg-white',
                 'relative cursor-default select-none py-3 pl-3 pr-10',
               ]"
             >
@@ -81,10 +87,25 @@
                   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 +114,11 @@
                 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"
+                  :class="isInitialSelection ? 'bg-studio-forest' : 'bg-gray-800'"
+                  aria-hidden="true"
+                />
               </span>
             </li>
           </ListboxOption>
@@ -171,6 +196,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 b3ef165d..4b0b3886 100644
--- a/src/frontend/shared/studio-button.story.vue
+++ b/src/frontend/shared/studio-button.story.vue
@@ -10,36 +10,27 @@
       </StudioButton>
     </Variant>
 
-    <Variant title="Outline">
-      <StudioButton label="Cancel" variant="outline" @click="handleClick" />
+    <Variant title="Secondary">
+      <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="Secondary">
-      <StudioButton label="Save Changes" variant="secondary" @click="handleClick" />
+    <Variant title="Tertiary">
+      <StudioButton label="Cancel" variant="tertiary" @click="handleClick" />
     </Variant>
 
-    <Variant title="Green">
-      <StudioButton label="Confirm" variant="green" @click="handleClick" />
+    <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="Blue">
-      <StudioButton label="Close" variant="blue" @click="handleClick" />
-    </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>
@@ -50,23 +41,28 @@
       </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"
       />
@@ -75,7 +71,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."
       />
@@ -85,7 +81,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."
         />
@@ -110,6 +106,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 9be6cdde..8935e431 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' | 'secondary' | 'tertiary' | 'destructive';
 
 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,14 +87,13 @@ const shapeClasses = computed(() =>
 );
 
 const variantClassMap: Record<StudioButtonVariant, string> = {
-  primary: 'bg-studio_forest_green text-studio_lime hover:bg-studio_forest_green/90',
-  outline:
-    'border border-studio_forest_green bg-transparent text-studio_forest_green hover:bg-studio_forest_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',
+  primary:
+    'bg-studio-forest text-studio-lime enabled:hover:bg-studio-green enabled:hover:text-studio-forest',
+  secondary:
+    'min-w-32 bg-gray-200 text-gray-700 enabled:hover:bg-gray-800 enabled:hover:text-white',
+  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/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/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>
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-attached-item.story.vue b/src/frontend/stories/components/resource-attached-item.story.vue
index 944c99a3..84edb69c 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 (no badge)">
       <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-empty-state.vue b/src/frontend/stories/components/resource-empty-state.vue
index 3a319c25..fdcb5ebe 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-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>
diff --git a/src/frontend/stories/components/resource-picker.vue b/src/frontend/stories/components/resource-picker.vue
index b4b808d1..cebda0a8 100644
--- a/src/frontend/stories/components/resource-picker.vue
+++ b/src/frontend/stories/components/resource-picker.vue
@@ -11,20 +11,20 @@
           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"
         />
       </div>
-      <button
+      <StudioButton
         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="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/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..d4a4d6a0
--- /dev/null
+++ b/src/frontend/stories/components/resource-visibility-badge.vue
@@ -0,0 +1,16 @@
+<template>
+  <span
+    v-if="visibility !== 'public'"
+    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>
diff --git a/src/frontend/stories/components/workflow-actions.vue b/src/frontend/stories/components/workflow-actions.vue
index 4266e526..6b930405 100644
--- a/src/frontend/stories/components/workflow-actions.vue
+++ b/src/frontend/stories/components/workflow-actions.vue
@@ -2,20 +2,20 @@
   <StudioButton
     v-if="showRequestChangeButton"
     label="Request Change"
-    variant="red"
+    variant="destructive"
     @click="emit('request-change')"
   />
   <StudioButton
     v-if="showSubmitButton"
     label="Submit"
-    variant="blue"
+    variant="primary"
     :disabled="widgets.isDirty"
     @click="emit('submit')"
   />
   <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..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"
       >
@@ -12,7 +12,7 @@
       </StudioButton>
       <StudioButton
         label="Save Changes"
-        variant="secondary"
+        variant="primary"
         :disabled="isSaving"
         @click="saveStory"
       />
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" />
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/streams/stream-index.vue b/src/frontend/streams/stream-index.vue
index 9626b441..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>
@@ -13,14 +15,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 +73,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, Plus } from '@lucide/vue';
 
 import AppLayout from '../shared/app-layout.vue';
 import Icon from '../shared/icon.vue';
@@ -75,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-form-modal.vue b/src/frontend/team/components/user-form-modal.vue
index 8f9c53fc..f850d08d 100644
--- a/src/frontend/team/components/user-form-modal.vue
+++ b/src/frontend/team/components/user-form-modal.vue
@@ -72,8 +72,8 @@
 
     <template #actions>
       <div class="mt-9 flex w-full justify-end gap-x-4">
-        <StudioButton :label="submitLabel" variant="blue" @click="emit('submit')" />
-        <StudioButton label="Cancel" variant="gray" @click="emit('cancel')" />
+        <StudioButton :label="submitLabel" variant="primary" @click="emit('submit')" />
+        <StudioButton label="Cancel" variant="secondary" @click="emit('cancel')" />
       </div>
     </template>
   </LanguageModal>
diff --git a/src/frontend/team/components/user-row.vue b/src/frontend/team/components/user-row.vue
index 30a6768b..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>
@@ -67,10 +69,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 +90,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/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>
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"
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',
       },
     },
   },
diff --git a/tests/unit/toRelativeTime.spec.ts b/tests/unit/toRelativeTime.spec.ts
index 56e003d0..669356f3 100644
--- a/tests/unit/toRelativeTime.spec.ts
+++ b/tests/unit/toRelativeTime.spec.ts
@@ -5,81 +5,36 @@ 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('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');
   });
 });
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"
   },