diff --git a/frontend/src/api/designSystems.ts b/frontend/src/api/designSystems.ts
new file mode 100644
index 0000000..af057f4
--- /dev/null
+++ b/frontend/src/api/designSystems.ts
@@ -0,0 +1,116 @@
+/**
+ * Design systems — the stylesheet held as records (milestone #254).
+ *
+ * A design system is a named set of tokens with an optional parent. A system
+ * with no parent is a "family"; one with a parent holds ONLY what it changes,
+ * so "what does this app alter?" is a plain list rather than a diff.
+ */
+import { apiDelete, apiGet, apiPatch, apiPost, apiPut } from "@/api/client";
+
+export interface DesignSystem {
+  id: number;
+  owner_user_id: number;
+  title: string;
+  description: string;
+  parent_id: number | null;
+  created_at: string | null;
+  updated_at: string | null;
+}
+
+/** A token as STORED — one system's own row for it. */
+export interface DesignToken {
+  id: number;
+  design_system_id: number;
+  name: string;
+  /** Values keyed by mode. `base` applies when no mode is more specific. */
+  value_by_mode: Record<string, string>;
+  group_name: string | null;
+  purpose: string | null;
+  order_index: number;
+}
+
+export interface Contribution {
+  system_id: number;
+  value: string;
+}
+
+/**
+ * A token after the cascade.
+ *
+ * `contributions` is every system that offered a value, per mode, DEEPEST
+ * FIRST — entry 0 won and the rest were shadowed. `value_by_mode` and
+ * `origin_by_mode` are the winners, provided so the client never has to derive
+ * them (and so it cannot derive them differently).
+ *
+ * Provenance is per MODE because overriding is: a system can own `base` and
+ * inherit `dark` at the same time.
+ */
+export interface ResolvedToken {
+  name: string;
+  group_name: string | null;
+  purpose: string | null;
+  order_index: number;
+  value_by_mode: Record<string, string>;
+  origin_by_mode: Record<string, number>;
+  contributions: Record<string, Contribution[]>;
+}
+
+export const fetchDesignSystems = () =>
+  apiGet<{ design_systems: DesignSystem[] }>("/api/design-systems");
+
+export const fetchDesignSystem = (id: number) =>
+  apiGet<DesignSystem>(`/api/design-systems/${id}`);
+
+export const createDesignSystem = (body: {
+  title: string;
+  description?: string;
+  parent_id?: number | null;
+}) => apiPost<DesignSystem>("/api/design-systems", body);
+
+/** Omit `parent_id` to leave it alone; send `null` to make the system a family. */
+export const updateDesignSystem = (
+  id: number,
+  body: { title?: string; description?: string; parent_id?: number | null },
+) => apiPatch<DesignSystem>(`/api/design-systems/${id}`, body);
+
+export const deleteDesignSystem = (id: number) =>
+  apiDelete(`/api/design-systems/${id}`);
+
+/** The EFFECTIVE set: everything inherited, with this system's on top. */
+export const fetchResolvedTokens = (id: number) =>
+  apiGet<{ design_system_id: number; tokens: ResolvedToken[] }>(
+    `/api/design-systems/${id}/resolved`,
+  );
+
+/** This system's OWN tokens — its override set. */
+export const fetchDesignTokens = (id: number) =>
+  apiGet<{ tokens: DesignToken[] }>(`/api/design-systems/${id}/tokens`);
+
+export const createDesignToken = (
+  designSystemId: number,
+  body: {
+    name: string;
+    value_by_mode?: Record<string, string>;
+    group_name?: string | null;
+    purpose?: string | null;
+    order_index?: number;
+  },
+) => apiPost<DesignToken>(`/api/design-systems/${designSystemId}/tokens`, body);
+
+export const updateDesignToken = (
+  tokenId: number,
+  body: Partial<Omit<DesignToken, "id" | "design_system_id">>,
+) => apiPatch<DesignToken>(`/api/design-tokens/${tokenId}`, body);
+
+export const deleteDesignToken = (tokenId: number) =>
+  apiDelete(`/api/design-tokens/${tokenId}`);
+
+/** Point a project at a design system. `null` clears it. */
+export const setProjectDesignSystem = (
+  projectId: number,
+  designSystemId: number | null,
+) =>
+  apiPut<{ project_id: number; design_system_id: number | null }>(
+    `/api/projects/${projectId}/design-system`,
+    { design_system_id: designSystemId },
+  );
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 2af5cbc..9afa991 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -106,6 +106,7 @@ router.afterEach(() => {
       <router-link to="/shared" class="nav-link">Shared</router-link>
       <div class="mobile-divider"></div>
       <router-link to="/design" class="nav-link">Design</router-link>
+      <router-link to="/design-systems" class="nav-link">Design systems</router-link>
       <router-link to="/trash" class="nav-link">Trash</router-link>
       <router-link to="/settings" class="nav-link">Settings</router-link>
       <div class="mobile-divider"></div>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index bedd06c..5e9bf81 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -116,6 +116,13 @@ const router = createRouter({
       name: "design",
       component: () => import("@/views/DesignView.vue"),
     },
+    {
+      // The editable half of the same surface: /design is what the browser
+      // renders, /design-systems is the record that ought to decide it.
+      path: "/design-systems",
+      name: "design-systems",
+      component: () => import("@/views/DesignSystemsView.vue"),
+    },
     {
       path: "/tasks",
       redirect: "/",
diff --git a/frontend/src/views/DesignSystemsView.vue b/frontend/src/views/DesignSystemsView.vue
new file mode 100644
index 0000000..0d02177
--- /dev/null
+++ b/frontend/src/views/DesignSystemsView.vue
@@ -0,0 +1,1141 @@
+<script setup lang="ts">
+/**
+ * Design systems — editing the stylesheet Scribe holds (milestone #254 step 5).
+ *
+ * Sibling of /design, which shows the system as the BROWSER has it. This page
+ * shows it as the RECORD has it, which is the half you can change.
+ *
+ * The layout follows the model rather than decorating it. A system with a
+ * parent holds only what it changes, so this page has two lists and they are
+ * deliberately different:
+ *
+ *   Overrides  — this system's own rows. Short by design. Empty is correct for
+ *                an app that hasn't departed from its family yet.
+ *   Effective  — what it resolves to once inheritance is applied, each row
+ *                labelled with where its value came from.
+ *
+ * Provenance is shown PER MODE, not per token, because overriding is per mode:
+ * a system can own `base` and inherit `dark` at the same time. A single badge
+ * per row would have to lie about one of them, so a row whose modes disagree
+ * breaks out into one line each.
+ */
+import { computed, onMounted, ref, watch } from "vue";
+
+import {
+  createDesignSystem,
+  createDesignToken,
+  deleteDesignSystem,
+  deleteDesignToken,
+  fetchDesignSystems,
+  fetchDesignTokens,
+  fetchResolvedTokens,
+  updateDesignSystem,
+  updateDesignToken,
+  type DesignSystem,
+  type DesignToken,
+  type ResolvedToken,
+} from "@/api/designSystems";
+import { ApiError } from "@/api/client";
+import { useToastStore } from "@/stores/toast";
+
+const toast = useToastStore();
+
+const systems = ref<DesignSystem[]>([]);
+const selectedId = ref<number | null>(null);
+const ownTokens = ref<DesignToken[]>([]);
+const resolved = ref<ResolvedToken[]>([]);
+const loading = ref(true);
+const loadError = ref(false);
+const detailLoading = ref(false);
+
+const selected = computed(() => systems.value.find((s) => s.id === selectedId.value) ?? null);
+const byId = computed(() => new Map(systems.value.map((s) => [s.id, s])));
+
+function systemTitle(id: number): string {
+  return byId.value.get(id)?.title ?? `system #${id}`;
+}
+
+/**
+ * The chain from the selected system up to its root, nearest first.
+ *
+ * Defensive visited-set, matching the server's: writes refuse to create a
+ * cycle, but a loop reaching this page must render a truncated chain rather
+ * than freeze the tab.
+ */
+const chain = computed<DesignSystem[]>(() => {
+  const out: DesignSystem[] = [];
+  const seen = new Set<number>();
+  let current = selected.value;
+  while (current && !seen.has(current.id)) {
+    seen.add(current.id);
+    out.push(current);
+    current = current.parent_id ? byId.value.get(current.parent_id) ?? null : null;
+  }
+  return out;
+});
+
+/** Candidates for "inherit from", minus anything that would close a loop.
+ *
+ *  The server refuses these anyway (with a message that says why). Filtering
+ *  them out of the picker means the operator never has to read that message —
+ *  a refusal you can't trigger beats a refusal explained well. */
+const parentOptions = computed(() => {
+  if (!selected.value) return [];
+  const descendants = new Set<number>([selected.value.id]);
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const s of systems.value) {
+      if (s.parent_id !== null && descendants.has(s.parent_id) && !descendants.has(s.id)) {
+        descendants.add(s.id);
+        grew = true;
+      }
+    }
+  }
+  return systems.value.filter((s) => !descendants.has(s.id));
+});
+
+async function loadSystems() {
+  loading.value = true;
+  loadError.value = false;
+  try {
+    const data = await fetchDesignSystems();
+    systems.value = data.design_systems;
+    if (selectedId.value && !systems.value.some((s) => s.id === selectedId.value)) {
+      selectedId.value = null;
+    }
+    if (!selectedId.value && systems.value.length) {
+      selectedId.value = systems.value[0].id;
+    }
+  } catch {
+    loadError.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadDetail(id: number) {
+  detailLoading.value = true;
+  try {
+    const [own, eff] = await Promise.all([fetchDesignTokens(id), fetchResolvedTokens(id)]);
+    ownTokens.value = own.tokens;
+    resolved.value = eff.tokens;
+  } catch {
+    ownTokens.value = [];
+    resolved.value = [];
+    toast.show("Failed to load tokens", "error");
+  } finally {
+    detailLoading.value = false;
+  }
+}
+
+onMounted(loadSystems);
+watch(selectedId, (id) => {
+  ownTokens.value = [];
+  resolved.value = [];
+  if (id !== null) loadDetail(id);
+});
+
+// --- creating a system ------------------------------------------------------
+
+const showCreate = ref(false);
+const newTitle = ref("");
+const newDescription = ref("");
+const newParentId = ref<number | null>(null);
+const creating = ref(false);
+
+async function submitCreate() {
+  const title = newTitle.value.trim();
+  if (!title || creating.value) return;
+  creating.value = true;
+  try {
+    const created = await createDesignSystem({
+      title,
+      description: newDescription.value.trim() || undefined,
+      parent_id: newParentId.value,
+    });
+    newTitle.value = "";
+    newDescription.value = "";
+    newParentId.value = null;
+    showCreate.value = false;
+    await loadSystems();
+    selectedId.value = created.id;
+    toast.show(`Created ${created.title}`);
+  } catch {
+    toast.show("Failed to create design system", "error");
+  } finally {
+    creating.value = false;
+  }
+}
+
+// --- editing the selected system --------------------------------------------
+
+const editTitle = ref("");
+const editDescription = ref("");
+const editParentId = ref<number | null>(null);
+const savingSystem = ref(false);
+
+watch(
+  selected,
+  (system) => {
+    editTitle.value = system?.title ?? "";
+    editDescription.value = system?.description ?? "";
+    editParentId.value = system?.parent_id ?? null;
+  },
+  { immediate: true },
+);
+
+const systemDirty = computed(() => {
+  const system = selected.value;
+  if (!system) return false;
+  return (
+    editTitle.value !== system.title ||
+    editDescription.value !== (system.description ?? "") ||
+    editParentId.value !== system.parent_id
+  );
+});
+
+async function saveSystem() {
+  const system = selected.value;
+  if (!system || savingSystem.value) return;
+  savingSystem.value = true;
+  try {
+    // parent_id is always sent: null is a real value here ("become a family
+    // system"), so omitting it when empty would make that edit impossible.
+    await updateDesignSystem(system.id, {
+      title: editTitle.value.trim(),
+      description: editDescription.value.trim(),
+      parent_id: editParentId.value,
+    });
+    await loadSystems();
+    if (selectedId.value) await loadDetail(selectedId.value);
+    toast.show("Design system saved");
+  } catch (err) {
+    // A cycle comes back as a 400 with a message that names the loop. Show it
+    // rather than a generic failure — it tells the operator what to change.
+    const message =
+      err instanceof ApiError && err.status === 400 ? err.message : "Failed to save";
+    toast.show(message, "error");
+  } finally {
+    savingSystem.value = false;
+  }
+}
+
+const confirmingDelete = ref(false);
+
+async function removeSystem() {
+  const system = selected.value;
+  if (!system) return;
+  try {
+    await deleteDesignSystem(system.id);
+    confirmingDelete.value = false;
+    selectedId.value = null;
+    await loadSystems();
+    toast.show(`Deleted ${system.title}`);
+  } catch {
+    toast.show("Failed to delete", "error");
+  }
+}
+
+// --- tokens -----------------------------------------------------------------
+
+const showAddToken = ref(false);
+const tokenName = ref("");
+const tokenGroup = ref("");
+const tokenPurpose = ref("");
+/** Mode/value pairs, edited as a list so a token can carry any number of modes. */
+const tokenModes = ref<{ mode: string; value: string }[]>([{ mode: "base", value: "" }]);
+const savingToken = ref(false);
+const editingTokenId = ref<number | null>(null);
+
+function resetTokenForm() {
+  tokenName.value = "";
+  tokenGroup.value = "";
+  tokenPurpose.value = "";
+  tokenModes.value = [{ mode: "base", value: "" }];
+  editingTokenId.value = null;
+  showAddToken.value = false;
+}
+
+function startEditToken(token: DesignToken) {
+  editingTokenId.value = token.id;
+  tokenName.value = token.name;
+  tokenGroup.value = token.group_name ?? "";
+  tokenPurpose.value = token.purpose ?? "";
+  const entries = Object.entries(token.value_by_mode);
+  tokenModes.value = entries.length
+    ? entries.map(([mode, value]) => ({ mode, value }))
+    : [{ mode: "base", value: "" }];
+  showAddToken.value = true;
+}
+
+function collectModes(): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const row of tokenModes.value) {
+    const mode = row.mode.trim();
+    if (mode) out[mode] = row.value;
+  }
+  return out;
+}
+
+async function submitToken() {
+  const name = tokenName.value.trim();
+  if (!name || selectedId.value === null || savingToken.value) return;
+  savingToken.value = true;
+  try {
+    const body = {
+      name,
+      value_by_mode: collectModes(),
+      group_name: tokenGroup.value.trim() || null,
+      purpose: tokenPurpose.value.trim() || null,
+    };
+    if (editingTokenId.value !== null) {
+      await updateDesignToken(editingTokenId.value, body);
+    } else {
+      await createDesignToken(selectedId.value, body);
+    }
+    resetTokenForm();
+    await loadDetail(selectedId.value);
+    toast.show("Token saved");
+  } catch {
+    toast.show("Failed to save token", "error");
+  } finally {
+    savingToken.value = false;
+  }
+}
+
+async function removeToken(token: DesignToken) {
+  if (selectedId.value === null) return;
+  try {
+    await deleteDesignToken(token.id);
+    if (editingTokenId.value === token.id) resetTokenForm();
+    await loadDetail(selectedId.value);
+    // Naming the consequence rather than the action: in a system with a parent
+    // this is not a removal, it's a return to the inherited value.
+    toast.show(
+      selected.value?.parent_id
+        ? `${token.name} now inherits again`
+        : `Removed ${token.name}`,
+    );
+  } catch {
+    toast.show("Failed to remove token", "error");
+  }
+}
+
+// --- the effective set ------------------------------------------------------
+
+interface ModeOrigin {
+  mode: string;
+  value: string;
+  systemId: number;
+  shadowed: number;
+}
+
+/** Per-mode provenance for one resolved token, ordered with `base` first. */
+function modeOrigins(token: ResolvedToken): ModeOrigin[] {
+  return Object.keys(token.contributions)
+    .sort((a, b) => (a === "base" ? -1 : b === "base" ? 1 : a.localeCompare(b)))
+    .map((mode) => {
+      const entries = token.contributions[mode];
+      return {
+        mode,
+        value: entries[0]?.value ?? "",
+        systemId: entries[0]?.system_id ?? 0,
+        shadowed: Math.max(entries.length - 1, 0),
+      };
+    });
+}
+
+/** True when every mode of a token came from the same system — the common case,
+ *  and the one where a single badge tells the whole truth. */
+function hasUniformOrigin(token: ResolvedToken): boolean {
+  const origins = new Set(Object.values(token.origin_by_mode));
+  return origins.size <= 1;
+}
+
+function originLabel(systemId: number): string {
+  return systemId === selectedId.value ? "here" : systemTitle(systemId);
+}
+
+const effectiveGroups = computed(() => {
+  const groups = new Map<string, ResolvedToken[]>();
+  for (const token of resolved.value) {
+    const key = token.group_name ?? "ungrouped";
+    const bucket = groups.get(key);
+    if (bucket) bucket.push(token);
+    else groups.set(key, [token]);
+  }
+  return [...groups.entries()];
+});
+
+const overrideCount = computed(
+  () => resolved.value.filter((t) => Object.values(t.origin_by_mode).some((id) => id === selectedId.value)).length,
+);
+
+function isColourish(value: string): boolean {
+  return /^(#|rgba?\(|hsla?\(|color-mix\()/.test(value.trim());
+}
+</script>
+
+<template>
+  <div class="ds-view">
+    <header class="ds-header">
+      <h1>Design systems</h1>
+      <p class="lede">
+        The design system as the record holds it. A system with a parent stores
+        only what it changes, so its own list is the answer to "what does this
+        one alter?" — nothing to compute.
+        <router-link to="/design">The design page</router-link> shows the other
+        side: what the browser is actually rendering right now.
+      </p>
+    </header>
+
+    <p v-if="loading" class="muted">Loading design systems…</p>
+
+    <div v-else-if="loadError" class="notice notice-warn">
+      <strong>Couldn't load design systems.</strong>
+      <p>The request failed. Reload the page to try again.</p>
+    </div>
+
+    <!-- Empty is the ordinary state for most installs, not a broken one. -->
+    <div v-else-if="!systems.length" class="notice">
+      <strong>No design systems yet.</strong>
+      <p>
+        A design system holds your tokens — colours, spacing, radii — as records
+        rather than as prose. Make one for the house style, then one per app that
+        inherits from it and stores only its differences.
+      </p>
+      <button class="btn-primary" @click="showCreate = true">Create the first one</button>
+    </div>
+
+    <div v-else class="ds-body">
+      <!-- Systems list -->
+      <aside class="ds-sidebar">
+        <div class="sidebar-head">
+          <h2 class="panel-heading">Systems</h2>
+          <button class="btn-ghost btn-small" @click="showCreate = !showCreate">
+            {{ showCreate ? "Cancel" : "New" }}
+          </button>
+        </div>
+
+        <ul class="system-list">
+          <li v-for="system in systems" :key="system.id">
+            <button
+              :class="['system-btn', { active: system.id === selectedId }]"
+              @click="selectedId = system.id"
+            >
+              <span class="system-title">{{ system.title }}</span>
+              <span class="system-kind">
+                {{ system.parent_id ? `inherits ${systemTitle(system.parent_id)}` : "family" }}
+              </span>
+            </button>
+          </li>
+        </ul>
+      </aside>
+
+      <div class="ds-main">
+        <!-- Create form -->
+        <section v-if="showCreate" class="ds-section">
+          <h2>New design system</h2>
+          <div class="field">
+            <label class="field-label" for="new-title">Title</label>
+            <input
+              id="new-title" v-model="newTitle" class="input" type="text"
+              placeholder="FabledSword, or Scribe" @keyup.enter="submitCreate"
+            />
+          </div>
+          <div class="field">
+            <label class="field-label" for="new-desc">Description</label>
+            <input
+              id="new-desc" v-model="newDescription" class="input" type="text"
+              placeholder="What it covers"
+            />
+          </div>
+          <div class="field">
+            <label class="field-label" for="new-parent">Inherits from</label>
+            <select id="new-parent" v-model="newParentId" class="input">
+              <option :value="null">Nothing — this is a family system</option>
+              <option v-for="s in systems" :key="s.id" :value="s.id">{{ s.title }}</option>
+            </select>
+            <p class="field-hint">
+              A system with a parent stores only its differences from it.
+            </p>
+          </div>
+          <button class="btn-primary" :disabled="!newTitle.trim() || creating" @click="submitCreate">
+            {{ creating ? "Creating…" : "Create" }}
+          </button>
+        </section>
+
+        <template v-if="selected">
+          <!-- Details -->
+          <section class="ds-section">
+            <h2>{{ selected.title }}</h2>
+
+            <p class="chain">
+              <template v-for="(link, i) in chain" :key="link.id">
+                <span v-if="i" class="chain-arrow" aria-hidden="true">←</span>
+                <span :class="['chain-link', { self: i === 0 }]">{{ link.title }}</span>
+              </template>
+              <span v-if="chain.length === 1" class="chain-note">
+                — a family system, inheriting nothing
+              </span>
+            </p>
+
+            <div class="field">
+              <label class="field-label" for="edit-title">Title</label>
+              <input id="edit-title" v-model="editTitle" class="input" type="text" />
+            </div>
+            <div class="field">
+              <label class="field-label" for="edit-desc">Description</label>
+              <input id="edit-desc" v-model="editDescription" class="input" type="text" />
+            </div>
+            <div class="field">
+              <label class="field-label" for="edit-parent">Inherits from</label>
+              <select id="edit-parent" v-model="editParentId" class="input">
+                <option :value="null">Nothing — this is a family system</option>
+                <option v-for="s in parentOptions" :key="s.id" :value="s.id">{{ s.title }}</option>
+              </select>
+              <p class="field-hint">
+                Systems that inherit from this one are left out — a loop would
+                have nothing to resolve to.
+              </p>
+            </div>
+
+            <div class="row-actions">
+              <button class="btn-primary" :disabled="!systemDirty || savingSystem" @click="saveSystem">
+                {{ savingSystem ? "Saving…" : "Save changes" }}
+              </button>
+              <button v-if="!confirmingDelete" class="btn-ghost" @click="confirmingDelete = true">
+                Delete
+              </button>
+              <template v-else>
+                <span class="confirm-copy">
+                  Delete {{ selected.title }}? Systems inheriting from it keep their
+                  own tokens and become family systems.
+                </span>
+                <button class="btn-danger" @click="removeSystem">Delete</button>
+                <button class="btn-ghost" @click="confirmingDelete = false">Keep</button>
+              </template>
+            </div>
+          </section>
+
+          <!-- Overrides -->
+          <section class="ds-section">
+            <div class="section-head">
+              <h2>{{ selected.parent_id ? "Overrides" : "Tokens" }}</h2>
+              <button class="btn-ghost btn-small" @click="showAddToken ? resetTokenForm() : (showAddToken = true)">
+                {{ showAddToken ? "Cancel" : "Add token" }}
+              </button>
+            </div>
+            <p class="section-note">
+              {{ selected.parent_id
+                ? "What this system changes from " + systemTitle(selected.parent_id) + ". Short is correct."
+                : "Everything this system defines." }}
+            </p>
+
+            <form v-if="showAddToken" class="token-form" @submit.prevent="submitToken">
+              <div class="field">
+                <label class="field-label" for="token-name">Name</label>
+                <input
+                  id="token-name" v-model="tokenName" class="input mono" type="text"
+                  placeholder="--fs-obsidian"
+                />
+              </div>
+              <div class="field-row">
+                <div class="field">
+                  <label class="field-label" for="token-group">Group</label>
+                  <input id="token-group" v-model="tokenGroup" class="input" type="text" placeholder="surface" />
+                </div>
+                <div class="field">
+                  <label class="field-label" for="token-purpose">Purpose</label>
+                  <input
+                    id="token-purpose" v-model="tokenPurpose" class="input" type="text"
+                    placeholder="page bg, deepest surface"
+                  />
+                </div>
+              </div>
+
+              <fieldset class="modes">
+                <legend class="field-label">Values by mode</legend>
+                <p class="field-hint">
+                  <code>base</code> applies when no mode is more specific. A token
+                  that doesn't change between themes needs only that one.
+                  <template v-if="selected.parent_id">
+                    A mode left out here keeps inheriting.
+                  </template>
+                </p>
+                <div v-for="(row, i) in tokenModes" :key="i" class="mode-row">
+                  <input v-model="row.mode" class="input mono mode-key" type="text" placeholder="base" />
+                  <input v-model="row.value" class="input mono" type="text" placeholder="#14171a" />
+                  <span
+                    v-if="isColourish(row.value)" class="swatch"
+                    :style="{ background: row.value }" aria-hidden="true"
+                  />
+                  <button
+                    type="button" class="btn-ghost btn-small"
+                    :disabled="tokenModes.length === 1"
+                    @click="tokenModes.splice(i, 1)"
+                  >
+                    Remove
+                  </button>
+                </div>
+                <button
+                  type="button" class="btn-ghost btn-small"
+                  @click="tokenModes.push({ mode: '', value: '' })"
+                >
+                  Add a mode
+                </button>
+              </fieldset>
+
+              <button class="btn-primary" type="submit" :disabled="!tokenName.trim() || savingToken">
+                {{ savingToken ? "Saving…" : editingTokenId !== null ? "Save token" : "Add token" }}
+              </button>
+            </form>
+
+            <p v-if="detailLoading" class="muted">Loading tokens…</p>
+
+            <p v-else-if="!ownTokens.length" class="muted">
+              {{ selected.parent_id
+                ? "Nothing overridden — this system resolves to " + systemTitle(selected.parent_id) + " entirely."
+                : "No tokens yet." }}
+            </p>
+
+            <ul v-else class="token-list">
+              <li v-for="token in ownTokens" :key="token.id">
+                <code class="token-name">{{ token.name }}</code>
+                <span class="token-values">
+                  <span v-for="(value, mode) in token.value_by_mode" :key="mode" class="mode-chip">
+                    <span
+                      v-if="isColourish(value)" class="swatch"
+                      :style="{ background: value }" aria-hidden="true"
+                    />
+                    <span class="mode-name">{{ mode }}</span>
+                    <code>{{ value }}</code>
+                  </span>
+                </span>
+                <span class="token-meta">{{ token.purpose || token.group_name || "" }}</span>
+                <span class="token-actions">
+                  <button class="btn-ghost btn-small" @click="startEditToken(token)">Edit</button>
+                  <button class="btn-ghost btn-small" @click="removeToken(token)">
+                    {{ selected.parent_id ? "Inherit" : "Remove" }}
+                  </button>
+                </span>
+              </li>
+            </ul>
+          </section>
+
+          <!-- Effective set -->
+          <section class="ds-section">
+            <h2>Effective tokens</h2>
+            <p class="section-note">
+              What {{ selected.title }} resolves to, inheritance applied.
+              {{ resolved.length }} token{{ resolved.length === 1 ? "" : "s" }},
+              {{ overrideCount }} with a value from this system.
+            </p>
+
+            <p v-if="detailLoading" class="muted">Resolving…</p>
+
+            <p v-else-if="!resolved.length" class="muted">
+              Nothing in this chain defines a token yet.
+            </p>
+
+            <template v-else>
+              <div v-for="[group, tokens] in effectiveGroups" :key="group" class="group-block">
+                <h3 class="group-heading">{{ group }}</h3>
+                <ul class="resolved-list">
+                  <li v-for="token in tokens" :key="token.name">
+                    <div class="resolved-head">
+                      <code class="token-name">{{ token.name }}</code>
+                      <span v-if="token.purpose" class="token-meta">{{ token.purpose }}</span>
+                    </div>
+
+                    <!-- One badge only when every mode agrees on its source. -->
+                    <div v-if="hasUniformOrigin(token)" class="resolved-modes">
+                      <span v-for="origin in modeOrigins(token)" :key="origin.mode" class="mode-chip">
+                        <span
+                          v-if="isColourish(origin.value)" class="swatch"
+                          :style="{ background: origin.value }" aria-hidden="true"
+                        />
+                        <span class="mode-name">{{ origin.mode }}</span>
+                        <code>{{ origin.value }}</code>
+                      </span>
+                      <span
+                        class="origin-badge"
+                        :class="{ own: modeOrigins(token)[0]?.systemId === selectedId }"
+                      >
+                        {{ modeOrigins(token)[0]?.systemId === selectedId
+                          ? (modeOrigins(token)[0]?.shadowed ? "overridden here" : "defined here")
+                          : `from ${originLabel(modeOrigins(token)[0]?.systemId ?? 0)}` }}
+                      </span>
+                    </div>
+
+                    <!-- Modes disagree: break out per mode rather than pick one. -->
+                    <div v-else class="resolved-modes split">
+                      <div v-for="origin in modeOrigins(token)" :key="origin.mode" class="mode-line">
+                        <span class="mode-chip">
+                          <span
+                            v-if="isColourish(origin.value)" class="swatch"
+                            :style="{ background: origin.value }" aria-hidden="true"
+                          />
+                          <span class="mode-name">{{ origin.mode }}</span>
+                          <code>{{ origin.value }}</code>
+                        </span>
+                        <span class="origin-badge" :class="{ own: origin.systemId === selectedId }">
+                          {{ origin.systemId === selectedId
+                            ? (origin.shadowed ? "overridden here" : "defined here")
+                            : `from ${originLabel(origin.systemId)}` }}
+                        </span>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </section>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ds-view {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 1.5rem 1rem 4rem;
+}
+
+.ds-header h1 {
+  margin: 0 0 0.5rem;
+  font-size: 1.75rem;
+  font-weight: 500;
+}
+
+.lede {
+  color: var(--color-text-secondary);
+  max-width: 70ch;
+  line-height: 1.6;
+  margin: 0 0 1.5rem;
+}
+
+.ds-body {
+  display: grid;
+  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
+  gap: 1.5rem;
+  align-items: start;
+}
+
+@media (max-width: 800px) {
+  .ds-body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* Sidebar ---------------------------------------------------------------- */
+
+.ds-sidebar {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+}
+
+.sidebar-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.panel-heading {
+  margin: 0;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+}
+
+.system-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.system-btn {
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  padding: 0.5rem 0.6rem;
+  cursor: pointer;
+  color: var(--color-text);
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.system-btn:hover {
+  background: var(--color-bg-secondary);
+}
+
+.system-btn.active {
+  border-color: var(--color-primary);
+  background: var(--color-bg-secondary);
+}
+
+
+.system-title {
+  font-weight: 500;
+}
+
+.system-kind {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+/* Sections --------------------------------------------------------------- */
+
+.ds-main {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  min-width: 0;
+}
+
+.ds-section {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 1.25rem;
+}
+
+.ds-section h2 {
+  margin: 0 0 0.35rem;
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.section-note,
+.muted {
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  margin: 0 0 1rem;
+}
+
+.chain {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0 0 1rem;
+  font-size: 0.85rem;
+}
+
+.chain-link {
+  color: var(--color-text-secondary);
+}
+
+.chain-link.self {
+  color: var(--color-text);
+  font-weight: 500;
+}
+
+.chain-arrow,
+.chain-note {
+  color: var(--color-text-muted);
+}
+
+/* Fields ----------------------------------------------------------------- */
+
+.field {
+  margin-bottom: 0.85rem;
+  min-width: 0;
+}
+
+.field-row {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.field-row .field {
+  flex: 1 1 12rem;
+}
+
+.field-label {
+  display: block;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+  margin-bottom: 0.3rem;
+}
+
+.field-hint {
+  margin: 0.3rem 0 0;
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+}
+
+.input {
+  width: 100%;
+  padding: 0.45rem 0.6rem;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  font: inherit;
+}
+
+
+.mono {
+  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
+}
+
+/* Buttons ---------------------------------------------------------------- */
+
+.btn-primary,
+.btn-ghost,
+.btn-danger {
+  border-radius: var(--radius-sm);
+  padding: 0.45rem 0.9rem;
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+/* Background matches the house convention (--color-action-primary, as in
+   ProjectListView and four others). The text colour deliberately does NOT:
+   every existing copy uses `color: #fff`, which is 67 live violations of the
+   rule that pure white is never text (#2275). Parchment is what the rulebook
+   actually specifies. */
+.btn-primary {
+  background: var(--color-action-primary);
+  color: #E8E4D8;
+}
+
+.btn-primary:not(:disabled):hover {
+  background: var(--color-action-primary-hover);
+}
+
+.btn-ghost {
+  background: none;
+  border-color: var(--color-border);
+  color: var(--color-text-secondary);
+}
+
+.btn-danger {
+  background: var(--color-action-destructive);
+  color: #E8E4D8;
+}
+
+.btn-small {
+  padding: 0.25rem 0.55rem;
+  font-size: 0.75rem;
+}
+
+.btn-primary:disabled,
+.btn-ghost:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+
+.row-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.confirm-copy {
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  max-width: 40ch;
+}
+
+/* Tokens ----------------------------------------------------------------- */
+
+.token-form {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.modes {
+  border: none;
+  padding: 0;
+  margin: 0 0 0.85rem;
+}
+
+.mode-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+
+.mode-key {
+  max-width: 8rem;
+}
+
+.token-list,
+.resolved-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.token-list li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.token-name {
+  font-size: 0.85rem;
+  min-width: 11rem;
+}
+
+.token-values {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.token-meta {
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.token-actions {
+  display: flex;
+  gap: 0.35rem;
+}
+
+.mode-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8rem;
+}
+
+.mode-name {
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.06em;
+}
+
+.swatch {
+  display: inline-block;
+  width: 0.9rem;
+  height: 0.9rem;
+  border-radius: 3px;
+  border: 1px solid var(--color-border);
+  flex: none;
+}
+
+/* Effective set ---------------------------------------------------------- */
+
+.group-block {
+  margin-bottom: 1.25rem;
+}
+
+.group-heading {
+  margin: 0 0 0.4rem;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+}
+
+.resolved-list li {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.resolved-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.6rem;
+}
+
+.resolved-modes {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem;
+  margin-top: 0.25rem;
+}
+
+.resolved-modes.split {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+}
+
+.mode-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.origin-badge {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0.1rem 0.45rem;
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-muted);
+}
+
+.origin-badge.own {
+  background: var(--color-primary-tint);
+  color: var(--color-primary);
+}
+
+/* Notices ---------------------------------------------------------------- */
+
+.notice {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 1.25rem;
+  max-width: 60ch;
+}
+
+.notice-warn {
+  border-left: 3px solid var(--color-warning);
+}
+
+.notice p {
+  margin: 0.5rem 0 1rem;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+</style>
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 4e2d9ea..14aeca2 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -9,6 +9,11 @@ import { renderMarkdown } from "@/utils/markdown";
 import ShareDialog from "@/components/ShareDialog.vue";
 import ProjectRulesTab from "@/components/rules/ProjectRulesTab.vue";
 import SystemsSection from "@/components/SystemsSection.vue";
+import {
+  fetchDesignSystems,
+  setProjectDesignSystem,
+  type DesignSystem,
+} from "@/api/designSystems";
 import {
   LayoutGrid,
   Clock,
@@ -41,6 +46,7 @@ interface Project {
   goal: string | null;
   status: "active" | "paused" | "completed" | "archived";
   color: string | null;
+  design_system_id: number | null;
   permission?: string;
   created_at: string;
   updated_at: string;
@@ -69,6 +75,12 @@ const toast = useToastStore();
 const tasksStore = useTasksStore();
 
 const project = ref<Project | null>(null);
+
+// Design system the project is styled from. Loaded separately because an
+// install with none is the ordinary case (rule #115) and the picker simply
+// doesn't render — a failed fetch must not take the project page with it.
+const designSystems = ref<DesignSystem[]>([]);
+const editDesignSystemId = ref<number | null>(null);
 const loading = ref(false);
 
 const showStartPlanning = ref(false);
@@ -175,6 +187,7 @@ async function loadProject() {
     editDescription.value = data.description ?? "";
     editGoal.value = data.goal ?? "";
     editStatus.value = data.status;
+    editDesignSystemId.value = data.design_system_id ?? null;
     editDirty.value = false;
     milestones.value = data.summary?.milestone_summary ?? [];
     autoCollapseCompleted(milestones.value);
@@ -336,8 +349,20 @@ onMounted(async () => {
   await loadProject();
   loadTasks();
   loadNotes();
+  loadDesignSystems();
 });
 
+/** Populate the design-system picker. Swallows failure on purpose: with no
+ *  design systems the picker doesn't render at all, which is the ordinary state
+ *  for most installs — so this must never be able to break the project page. */
+async function loadDesignSystems() {
+  try {
+    designSystems.value = (await fetchDesignSystems()).design_systems;
+  } catch {
+    designSystems.value = [];
+  }
+}
+
 watch(projectId, async () => {
   await loadProject();
   loadTasks();
@@ -345,28 +370,39 @@ watch(projectId, async () => {
 });
 
 watch(
-  () => [editTitle.value, editDescription.value, editGoal.value, editStatus.value],
+  () => [editTitle.value, editDescription.value, editGoal.value, editStatus.value, editDesignSystemId.value],
   () => {
     if (!project.value) return;
     editDirty.value =
       editTitle.value !== project.value.title ||
       editDescription.value !== (project.value.description ?? "") ||
       editGoal.value !== (project.value.goal ?? "") ||
-      editStatus.value !== project.value.status;
+      editStatus.value !== project.value.status ||
+      editDesignSystemId.value !== (project.value.design_system_id ?? null);
   }
 );
 
 async function saveProject() {
-  if (!project.value || saving.value) return;
+  // Bound once rather than re-read: the checks below straddle two awaits, and
+  // `project.value` is a ref whose narrowing doesn't survive them.
+  const current = project.value;
+  if (!current || saving.value) return;
   saving.value = true;
   try {
-    const updated = await apiPatch<Project>(`/api/projects/${project.value.id}`, {
+    const updated = await apiPatch<Project>(`/api/projects/${current.id}`, {
       title: editTitle.value.trim(),
       description: editDescription.value.trim() || null,
       goal: editGoal.value.trim() || null,
       status: editStatus.value,
     });
-    project.value = { ...project.value, ...updated };
+    // The design-system pointer is its own endpoint (PUT, because clearing it
+    // is a real outcome rather than an omission), so it saves separately —
+    // only when it actually changed, to keep the common save at one request.
+    if (editDesignSystemId.value !== (current.design_system_id ?? null)) {
+      await setProjectDesignSystem(current.id, editDesignSystemId.value);
+      updated.design_system_id = editDesignSystemId.value;
+    }
+    project.value = { ...current, ...updated };
     editDirty.value = false;
     toast.show("Project saved");
   } catch {
@@ -505,6 +541,13 @@ async function confirmDelete() {
               <option value="archived">Archived</option>
             </select>
           </div>
+          <div v-if="designSystems.length" class="edit-field">
+            <label class="edit-label" for="project-design-system">Design system</label>
+            <select id="project-design-system" v-model="editDesignSystemId" class="edit-select">
+              <option :value="null">None</option>
+              <option v-for="ds in designSystems" :key="ds.id" :value="ds.id">{{ ds.title }}</option>
+            </select>
+          </div>
           <button class="btn-save-panel" @click="saveProject" :disabled="!editDirty || saving">
             {{ saving ? "Saving..." : "Save Changes" }}
           </button>