diff --git a/app/assets/css/base.css b/app/assets/css/base.css
new file mode 100644
index 0000000..1f1da85
--- /dev/null
+++ b/app/assets/css/base.css
@@ -0,0 +1,102 @@
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body {
+  overflow-x: clip;
+}
+
+html {
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 100%;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  margin: 0;
+  font-weight: 400;
+}
+
+h1, h2, h3, h4 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+a:hover {
+  color: var(--color-ink);
+}
+
+code, pre, kbd {
+  font-family: var(--font-mono);
+  font-variant-ligatures: none;
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.skip-link {
+  position: absolute;
+  left: var(--space-md);
+  top: var(--space-md);
+  z-index: var(--z-toast);
+  padding: 0.5rem 0.9rem;
+  background: var(--color-paper-3);
+  border: var(--rule-hair) solid var(--color-accent);
+  border-radius: var(--radius-sm);
+  color: var(--color-ink);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  text-decoration: none;
+  transform: translateY(-150%);
+}
+
+.skip-link:focus {
+  transform: none;
+}
+
+button {
+  font: inherit;
+}
+
+::selection {
+  background: var(--color-accent);
+  color: var(--color-paper);
+}
+
+.reveal {
+  opacity: 0;
+  transform: translateY(8px);
+  animation: reveal var(--dur-long) var(--ease-out) forwards;
+  animation-delay: calc(var(--i, 0) * 60ms);
+}
+
+@keyframes reveal {
+  to { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 150ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 150ms !important;
+  }
+  .reveal {
+    animation: reveal-reduced 150ms linear forwards;
+  }
+  @keyframes reveal-reduced {
+    to { opacity: 1; transform: none; }
+  }
+}
diff --git a/app/assets/css/tokens.css b/app/assets/css/tokens.css
new file mode 100644
index 0000000..ed1d83a
--- /dev/null
+++ b/app/assets/css/tokens.css
@@ -0,0 +1,61 @@
+:root {
+  --color-paper: oklch(15% 0.012 250);
+  --color-paper-2: oklch(18% 0.014 250);
+  --color-paper-3: oklch(22% 0.016 250);
+  --color-rule: oklch(30% 0.012 250);
+  --color-rule-interactive: oklch(52% 0.014 250);
+  --color-neutral: oklch(64% 0.010 250);
+  --color-muted: oklch(72% 0.008 250);
+  --color-ink: oklch(94% 0.006 145);
+
+  --color-accent: oklch(82% 0.19 145);
+  --color-accent-dim: oklch(62% 0.14 145);
+  --color-focus: oklch(82% 0.19 145);
+
+  --color-ok: oklch(82% 0.18 145);
+  --color-warn: oklch(82% 0.15 85);
+  --color-error: oklch(72% 0.17 25);
+  --color-info: oklch(78% 0.12 240);
+
+  --font-display: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
+  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
+  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.85rem;
+  --text-base: 1rem;
+  --text-md: 1.2rem;
+  --text-lg: 1.5rem;
+  --text-xl: 1.95rem;
+  --text-2xl: 2.45rem;
+  --text-display: clamp(2.5rem, 6vw + 1rem, 4.75rem);
+  --text-display-s: clamp(1.9rem, 4vw + 1rem, 3rem);
+
+  --space-2xs: 0.25rem;
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2.5rem;
+  --space-2xl: 4rem;
+  --space-3xl: 6rem;
+
+  --page-gutter: clamp(1rem, 4vw, 1.5rem);
+  --measure: 60ch;
+
+  --rule-hair: 1px;
+  --radius-sm: 3px;
+  --radius-md: 5px;
+
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --dur-micro: 120ms;
+  --dur-short: 220ms;
+  --dur-long: 420ms;
+
+  --z-base: 1;
+  --z-sticky: 10;
+  --z-overlay: 100;
+  --z-toast: 1000;
+}
diff --git a/app/components/SynchubMark.vue b/app/components/SynchubMark.vue
new file mode 100644
index 0000000..328968f
--- /dev/null
+++ b/app/components/SynchubMark.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  wordmark?: boolean
+  size?: number
+}>(), {
+  wordmark: true,
+  size: 22,
+})
+</script>
+
+<template>
+  <span class="mark" :class="{ 'mark--icon-only': !wordmark }">
+    <svg
+      class="mark__glyph"
+      :width="size"
+      :height="size"
+      viewBox="0 0 32 32"
+      fill="none"
+      role="img"
+      aria-label="synchub"
+    >
+      <!-- source node -->
+      <circle cx="7" cy="7" r="3.5" stroke="currentColor" stroke-width="2" />
+      <!-- mirror node -->
+      <circle cx="25" cy="25" r="3.5" stroke="currentColor" stroke-width="2" />
+      <!-- directional tie: a git-ref path from source to mirror -->
+      <path
+        d="M7 11.5 V20 a4 4 0 0 0 4 4 H20.5"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+      />
+      <!-- arrowhead into the mirror node -->
+      <path
+        d="M17 20.5 L21 24.5 L17 28.5"
+        stroke="var(--mark-accent, currentColor)"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span v-if="wordmark" class="mark__word">synchub<span class="mark__tld">.to</span></span>
+  </span>
+</template>
+
+<style scoped>
+.mark {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5ch;
+  color: var(--color-ink);
+}
+
+.mark__glyph {
+  flex: none;
+  --mark-accent: var(--color-accent);
+}
+
+.mark__word {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.05rem;
+  letter-spacing: -0.03em;
+  white-space: nowrap;
+}
+
+.mark__tld {
+  color: var(--color-accent);
+}
+
+.mark--icon-only {
+  gap: 0;
+}
+</style>
diff --git a/app/pages/dashboard.vue b/app/pages/dashboard.vue
index 03c9848..1885f70 100644
--- a/app/pages/dashboard.vue
+++ b/app/pages/dashboard.vue
@@ -14,8 +14,15 @@ useSeoMeta({
 const { data, refresh, error } = await useFetch<DashboardPayload>('/api/me/dashboard')
 
 const flash = ref<string | null>(null)
+const flashIsError = computed(() => flash.value?.startsWith('Error:') ?? false)
 const pendingAction = ref<string | null>(null)
 
+const heading = useTemplateRef('heading')
+const router = useRouter()
+router.afterEach(() => {
+  nextTick(() => heading.value?.focus({ focusVisible: false }))
+})
+
 function actionKey(scope: string, id: number | string) {
   return `${scope}:${id}`
 }
@@ -93,6 +100,18 @@ function rotateKey() {
   )
 }
 
+async function logout() {
+  pendingAction.value = 'logout'
+  try {
+    await postAction('/api/me/logout')
+    await navigateTo('/')
+  }
+  catch {
+    pendingAction.value = null
+    flash.value = 'Error: could not sign out.'
+  }
+}
+
 function summariseRefs(refs: Record<string, string>): string {
   const entries = Object.entries(refs)
   if (entries.length === 0) return '—'
@@ -116,20 +135,25 @@ function fmtDate(iso: string | null): string {
 
 <template>
   <div class="page">
-    <header>
-      <h1>synchub.to</h1>
+    <a class="skip-link" href="#main">skip to main content</a>
+    <header class="nav-term">
+      <nav class="nav-term__line" aria-label="primary"><span class="prompt" aria-hidden="true">&gt;</span> <a class="nav-term__mark" href="/dashboard" aria-label="synchub.to dashboard"><SynchubMark :wordmark="true" :size="18" /></a> <button type="button" class="nav-term__logout" :disabled="pendingAction !== null" :aria-busy="pendingAction === 'logout'" @click="logout">{{ pendingAction === 'logout' ? 'logging out…' : '--logout' }}</button></nav>
+    </header>
+
+    <div id="main" class="intro">
+      <h1 ref="heading" tabindex="-1" class="heading-target">mirror status</h1>
       <p class="muted">
-        Mirror status for your connected GitHub installation.
+        everything synchub is syncing for your connected GitHub installation.
       </p>
-    </header>
+    </div>
 
-    <div v-if="error" class="card error">
-      Failed to load dashboard: {{ error.message }}
+    <div v-if="error" class="card error" role="alert">
+      <span aria-hidden="true">⚠</span> failed to load dashboard: {{ error.message }}
     </div>
 
     <div v-else-if="data">
       <section class="card">
-        <h2>Identity</h2>
+        <h2>identity</h2>
         <dl>
           <dt>tangled DID</dt>
           <dd><code>{{ data.did }}</code></dd>
@@ -153,8 +177,8 @@ function fmtDate(iso: string | null): string {
           </template>
         </dl>
         <p class="muted small">
-          Connected to <strong>{{ data.installation?.accountLogin ?? 'this account' }}</strong>.
-          <a href="https://github.com/apps/synchub-to/installations/new">Connect a different installation?</a>
+          connected to <strong>{{ data.installation?.accountLogin ?? 'this account' }}</strong>.
+          <a href="https://github.com/apps/synchub-to/installations/new">connect a different installation?</a>
         </p>
       </section>
 
@@ -162,16 +186,17 @@ function fmtDate(iso: string | null): string {
         <h2>SSH key</h2>
         <template v-if="data.sshKey">
           <p class="small muted">
-            Created {{ fmtDate(data.sshKey.createdAt) }}<span v-if="data.sshKey.rotatedAt">, last rotated {{ fmtDate(data.sshKey.rotatedAt) }}</span>.
+            created {{ fmtDate(data.sshKey.createdAt) }}<span v-if="data.sshKey.rotatedAt">, last rotated {{ fmtDate(data.sshKey.rotatedAt) }}</span>.
           </p>
           <pre class="pubkey">{{ data.sshKey.publicKey }}</pre>
         </template>
         <p v-else class="muted">
-          No key on file yet. It's created automatically on first sign-in.
+          no key on file yet. it's created automatically on first sign-in.
         </p>
         <button
           type="button"
           :disabled="pendingAction !== null"
+          :aria-busy="pendingAction === 'rotate-key'"
           @click="rotateKey"
         >
           {{ pendingAction === 'rotate-key' ? 'Rotating…' : 'Rotate SSH key' }}
@@ -179,226 +204,385 @@ function fmtDate(iso: string | null): string {
       </section>
 
       <section class="card">
-        <h2>Repositories ({{ data.repos.length }})</h2>
+        <h2>repositories ({{ data.repos.length }})</h2>
         <p v-if="data.repos.length === 0" class="muted">
-          No repositories enrolled yet. New installs are backfilled in the background; refresh in a minute.
+          no repositories enrolled yet. new installs are backfilled in the background; refresh in a minute.
         </p>
-        <table v-else>
-          <thead>
-            <tr>
-              <th>GitHub</th>
-              <th>Tangled</th>
-              <th>Status</th>
-              <th>Last synced</th>
-              <th>Refs</th>
-              <th>Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="repo in data.repos" :key="repo.id">
-              <td>
-                <a :href="`https://github.com/${repo.githubFullName}`" rel="noopener">{{ repo.githubFullName }}</a>
-              </td>
-              <td>
-                <span v-if="repo.tangledFullName" class="small">{{ repo.tangledFullName }}</span>
-                <span v-else class="muted small">—</span>
-              </td>
-              <td>
+        <ul v-else class="repos">
+          <li v-for="repo in data.repos" :key="repo.id" class="repo">
+            <div class="repo__main">
+              <div class="repo__head">
+                <a class="repo__name" :href="`https://github.com/${repo.githubFullName}`" rel="noopener noreferrer">{{ repo.githubFullName }}</a>
                 <span class="badge" :class="`badge-${repo.status}`">{{ repo.status }}</span>
                 <span v-if="repo.disabledAt" class="badge badge-disabled">disabled</span>
-                <div v-if="repo.lastError" class="muted small">
-                  {{ repo.lastError }}
+              </div>
+              <dl class="repo__meta">
+                <div class="repo__meta-item">
+                  <dt>tangled</dt>
+                  <dd v-if="repo.tangledFullName" class="repo__did">{{ repo.tangledFullName }}</dd>
+                  <dd v-else class="muted">not yet enrolled</dd>
+                </div>
+                <div class="repo__meta-item">
+                  <dt>last synced</dt>
+                  <dd>{{ fmtDate(repo.lastSyncedAt) }}</dd>
                 </div>
-              </td>
-              <td class="small">
-                {{ fmtDate(repo.lastSyncedAt) }}
-              </td>
-              <td class="small">
-                {{ summariseRefs(repo.lastSyncedRefs) }}
-              </td>
-              <td>
-                <div class="actions">
-                  <button
-                    type="button"
-                    :disabled="pendingAction !== null"
-                    @click="resync(repo)"
-                  >
-                    {{ pendingAction === actionKey('resync', repo.id) ? '…' : 'Resync' }}
-                  </button>
-                  <button
-                    v-if="repo.disabledAt"
-                    type="button"
-                    :disabled="pendingAction !== null"
-                    @click="enable(repo)"
-                  >
-                    {{ pendingAction === actionKey('enable', repo.id) ? '…' : 'Enable' }}
-                  </button>
-                  <button
-                    v-else
-                    type="button"
-                    :disabled="pendingAction !== null"
-                    @click="disable(repo)"
-                  >
-                    {{ pendingAction === actionKey('disable', repo.id) ? '…' : 'Disable' }}
-                  </button>
+                <div class="repo__meta-item">
+                  <dt>refs</dt>
+                  <dd>{{ summariseRefs(repo.lastSyncedRefs) }}</dd>
                 </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+              </dl>
+              <p v-if="repo.lastError" class="repo__error muted small">
+                {{ repo.lastError }}
+              </p>
+            </div>
+            <div class="repo__actions">
+              <button
+                type="button"
+                :disabled="pendingAction !== null"
+                :aria-busy="pendingAction === actionKey('resync', repo.id)"
+                @click="resync(repo)"
+              >
+                {{ pendingAction === actionKey('resync', repo.id) ? 'Resyncing…' : 'Resync' }}
+              </button>
+              <button
+                v-if="repo.disabledAt"
+                type="button"
+                :disabled="pendingAction !== null"
+                :aria-busy="pendingAction === actionKey('enable', repo.id)"
+                @click="enable(repo)"
+              >
+                {{ pendingAction === actionKey('enable', repo.id) ? 'Enabling…' : 'Enable' }}
+              </button>
+              <button
+                v-else
+                type="button"
+                :disabled="pendingAction !== null"
+                :aria-busy="pendingAction === actionKey('disable', repo.id)"
+                @click="disable(repo)"
+              >
+                {{ pendingAction === actionKey('disable', repo.id) ? 'Disabling…' : 'Disable' }}
+              </button>
+            </div>
+          </li>
+        </ul>
       </section>
 
-      <p v-if="flash" class="flash" role="status">
-        {{ flash }}
+      <p
+        v-if="flash"
+        class="flash"
+        :class="{ 'flash--error': flashIsError }"
+        :role="flashIsError ? 'alert' : 'status'"
+      >
+        <span aria-hidden="true">{{ flashIsError ? '⚠' : '✓' }}</span> {{ flash }}
       </p>
     </div>
   </div>
 </template>
 
 <style scoped>
-:root {
-  --bg: #fafafa;
-  --fg: #1a1a1a;
-  --muted: #6b6b6b;
-  --border: #e2e2e2;
-  --accent: #2563eb;
-  --error: #b91c1c;
-  --warn: #b45309;
-  --ok: #15803d;
-}
-
 .page {
   max-width: 64rem;
   margin: 0 auto;
-  padding: 2rem 1rem;
-  font-family: system-ui, sans-serif;
-  color: var(--fg);
+  padding-inline: var(--page-gutter);
+  color: var(--color-ink);
 }
 
-h1 {
-  margin: 0 0 0.25rem;
+.nav-term {
+  padding: var(--space-md) 0;
+  border-bottom: var(--rule-hair) solid var(--color-rule);
 }
 
-h2 {
-  margin: 0 0 1rem;
-  font-size: 1.125rem;
+.nav-term__line {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.6ch;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  margin: 0;
 }
 
-.muted {
-  color: var(--muted);
+.nav-term__line .prompt { color: var(--color-accent); }
+
+.nav-term__mark {
+  display: inline-flex;
+  text-decoration: none;
+  margin-right: 1.2ch;
+}
+
+.nav-term__args {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.9ch;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-term__args a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  color: var(--color-muted);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  white-space: nowrap;
+}
+
+.nav-term__args a:hover { color: var(--color-ink); }
+
+.nav-term__logout {
+  margin-left: auto;
+  padding: 0.2rem 0.7rem;
+  border: var(--rule-hair) solid var(--color-rule-interactive);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
+}
+
+.nav-term__logout:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-ink); }
+.nav-term__logout:disabled { opacity: 0.5; cursor: progress; }
+
+.caret {
+  display: inline-block;
+  width: 1ch;
+  color: var(--color-accent);
+  animation: blink 1.05s steps(2) infinite;
+}
+
+@keyframes blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
+
+.intro {
+  padding-block: var(--space-xl) var(--space-md);
 }
 
-.small {
-  font-size: 0.875rem;
+h1 {
+  font-size: var(--text-xl);
+  margin: 0 0 var(--space-2xs);
 }
 
+.heading-target:focus { outline: none; }
+
+h2 {
+  margin: 0 0 var(--space-md);
+  font-size: var(--text-md);
+}
+
+.muted { color: var(--color-neutral); }
+.small { font-size: var(--text-sm); }
+
 .card {
-  background: #fff;
-  border: 1px solid var(--border);
-  border-radius: 0.5rem;
-  padding: 1.25rem;
-  margin: 1rem 0;
+  background: var(--color-paper-2);
+  border: var(--rule-hair) solid var(--color-rule);
+  border-radius: var(--radius-md);
+  padding: var(--space-lg);
+  margin: var(--space-md) 0;
 }
 
 .error {
-  border-color: var(--error);
-  color: var(--error);
+  border-color: var(--color-error);
+  color: var(--color-error);
 }
 
 dl {
   display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 0.25rem 1rem;
-  margin: 0 0 0.75rem;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--space-2xs) var(--space-md);
+  margin: 0 0 var(--space-sm);
 }
 
 dt {
-  font-weight: 600;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--color-neutral);
 }
 
 dd {
   margin: 0;
+  overflow-wrap: anywhere;
+  min-width: 0;
 }
 
 code {
-  font-family: ui-monospace, monospace;
-  font-size: 0.875rem;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--color-ink);
 }
 
 .pubkey {
-  font-family: ui-monospace, monospace;
-  font-size: 0.75rem;
-  background: #f3f3f3;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  background: var(--color-paper);
+  border: var(--rule-hair) solid var(--color-rule);
+  padding: var(--space-sm);
+  border-radius: var(--radius-sm);
   overflow-x: auto;
   white-space: pre-wrap;
   word-break: break-all;
-  margin: 0.5rem 0 1rem;
+  margin: var(--space-xs) 0 var(--space-md);
+  color: var(--color-muted);
 }
 
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.875rem;
+.repos {
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-th, td {
-  text-align: left;
-  padding: 0.5rem 0.5rem;
-  border-bottom: 1px solid var(--border);
-  vertical-align: top;
+.repo {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--space-lg);
+  padding-block: var(--space-md);
+  border-top: var(--rule-hair) solid var(--color-rule);
 }
 
-th {
-  font-weight: 600;
-  background: #f3f3f3;
+.repo:first-child { border-top: 0; }
+
+.repo__main { min-width: 0; flex: 1; }
+
+.repo__head {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-xs);
 }
 
-.badge {
-  display: inline-block;
-  padding: 0.125rem 0.5rem;
-  border-radius: 999px;
-  font-size: 0.75rem;
-  background: #eee;
-  color: #333;
-  margin-right: 0.25rem;
+.repo__name {
+  font-family: var(--font-mono);
+  font-size: var(--text-base);
+  color: var(--color-ink);
+  text-decoration: none;
+  border-bottom: var(--rule-hair) solid var(--color-rule);
+  overflow-wrap: anywhere;
 }
 
-.badge-active { background: #dcfce7; color: var(--ok); }
-.badge-pending { background: #fef3c7; color: var(--warn); }
-.badge-enrolling { background: #fef3c7; color: var(--warn); }
-.badge-error { background: #fee2e2; color: var(--error); }
-.badge-disabled { background: #e0e7ff; color: var(--accent); }
+.repo__name:hover { color: var(--color-accent); border-color: var(--color-accent); }
 
-.actions {
+.repo__meta {
   display: flex;
-  gap: 0.25rem;
   flex-wrap: wrap;
+  gap: var(--space-xs) var(--space-lg);
+  margin: 0;
+}
+
+.repo__meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.repo__meta dt {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-neutral);
+}
+
+.repo__meta dd {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--color-muted);
+}
+
+.repo__did {
+  font-family: var(--font-mono);
+  word-break: break-all;
+}
+
+.repo__error {
+  margin: var(--space-xs) 0 0;
+  word-break: break-word;
+}
+
+.repo__actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2xs);
+  flex: none;
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.1rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  border: var(--rule-hair) solid var(--color-rule-interactive);
+  color: var(--color-muted);
+  margin-right: var(--space-2xs);
+}
+
+.badge::before {
+  margin-right: 0.4ch;
 }
 
+.badge-active { border-color: var(--color-ok); color: var(--color-ok); }
+.badge-active::before { content: "●"; }
+.badge-pending,
+.badge-enrolling { border-color: var(--color-warn); color: var(--color-warn); }
+.badge-pending::before,
+.badge-enrolling::before { content: "◐"; }
+.badge-error { border-color: var(--color-error); color: var(--color-error); }
+.badge-error::before { content: "⚠"; }
+.badge-disabled { border-color: var(--color-neutral); color: var(--color-neutral); }
+.badge-disabled::before { content: "⏸"; }
+
 button {
-  font: inherit;
-  padding: 0.25rem 0.75rem;
-  border-radius: 0.25rem;
-  border: 1px solid var(--border);
-  background: #fff;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  padding: 0.3rem 0.75rem;
+  border-radius: var(--radius-sm);
+  border: var(--rule-hair) solid var(--color-rule-interactive);
+  background: var(--color-paper-3);
+  color: var(--color-ink);
   cursor: pointer;
+  white-space: nowrap;
+  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
 }
 
+button:hover:not(:disabled) { border-color: var(--color-accent); transform: translateY(-1px); }
+button:active:not(:disabled) { transform: translateY(0); }
+
 button:disabled {
   opacity: 0.5;
   cursor: progress;
 }
 
+@media (max-width: 40rem) {
+  .repo {
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+  .repo__actions {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
 .flash {
   position: fixed;
-  right: 1rem;
-  bottom: 1rem;
-  padding: 0.5rem 0.75rem;
-  background: #111;
-  color: #fff;
-  border-radius: 0.25rem;
-  font-size: 0.875rem;
+  right: var(--space-md);
+  bottom: var(--space-md);
+  z-index: var(--z-toast);
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--color-paper-3);
+  border: var(--rule-hair) solid var(--color-accent);
+  color: var(--color-ink);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
 }
+
+.flash--error { border-color: var(--color-error); }
 </style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index ccc33bc..a68588f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -10,107 +10,313 @@ if (session.value && typeof session.value === 'object' && 'did' in session.value
 }
 
 const installUrl = 'https://github.com/apps/synchub-to/installations/new'
+
+const heading = useTemplateRef('heading')
+const router = useRouter()
+router.afterEach(() => {
+  nextTick(() => heading.value?.focus({ focusVisible: false }))
+})
 </script>
 
 <template>
-  <main>
-    <h1>synchub.to</h1>
-    <p>Mirror your GitHub repos to tangled.org, automatically.</p>
-
-    <section class="signin">
-      <h2>Sign in</h2>
-      <p class="muted">
-        Already installed the GitHub App and connected your tangled
-        identity? Enter your handle to sign in on this device.
-      </p>
-      <form action="/api/atproto/login" method="get">
-        <label>
-          Handle
-          <input
-            type="text"
-            name="handle"
-            required
-            placeholder="alice.bsky.social"
-            autocomplete="username"
-            autocapitalize="none"
-            autocorrect="off"
-            spellcheck="false"
-          >
-        </label>
-        <button type="submit">Sign in</button>
-      </form>
-    </section>
-
-    <section class="install">
-      <h2>New here?</h2>
-      <p class="muted">
-        First install the GitHub App on the repos you'd like to mirror,
-        then come back and sign in with your tangled handle.
-      </p>
-      <a class="button" :href="installUrl">
-        Install the GitHub App
-      </a>
-    </section>
-  </main>
+  <div class="shell">
+    <a class="skip-link" href="#main">skip to main content</a>
+    <header class="nav-term">
+      <nav class="nav-term__line" aria-label="primary"><span class="prompt" aria-hidden="true">&gt;</span> <a class="nav-term__mark" href="/" aria-label="synchub.to home"><SynchubMark :wordmark="true" :size="18" /></a> <ul class="nav-term__args"><li><a href="#start">--start</a></li> <li><a href="#signin">--sign-in</a></li></ul><span class="caret" aria-hidden="true">█</span></nav>
+    </header>
+
+    <main id="main">
+      <section class="hero reveal" style="--i: 0">
+        <h1 ref="heading" tabindex="-1" class="hero__title heading-target">github ⇉ tangled</h1>
+        <p class="hero__lede">
+          synchub mirrors your public repositories to
+          <a href="https://tangled.org">tangled.org</a> on every push.
+          install the github app, connect your tangled identity, and your branches
+          and tags will stay in sync.
+        </p>
+
+        <pre class="session" aria-label="How synchub works"><span class="c"># 1 · install the github app on the repos to mirror</span>
+<span class="p">$</span> gh app install <span class="a">synchub-to</span>
+
+<span class="c"># 2 · connect your tangled identity</span>
+<span class="p">$</span> synchub-to <span class="a">@alice.bsky.social</span>
+
+<span class="c"># 3 · push as usual</span>
+<span class="p">$</span> git push origin main
+<span class="ok">✓</span> mirrored alice/widget → tangled.org <span class="dim">(2 refs)</span><span class="caret" aria-hidden="true">█</span></pre>
+      </section>
+
+      <section id="start" class="panel reveal" style="--i: 1">
+        <h2 class="panel__title">new here?</h2>
+        <p class="panel__body">
+          install the github app on the repositories you'd like to mirror,
+          then come back and sign in with your tangled handle. (only public,
+          non-fork repos are synced.)
+        </p>
+        <a class="btn btn--primary" :href="installUrl">install the github app</a>
+      </section>
+
+      <section id="signin" class="panel reveal" style="--i: 2">
+        <h2 class="panel__title">returning?</h2>
+        <p class="panel__body">
+          already connected on another device? just enter your handle.
+        </p>
+        <form class="signin" action="/api/atproto/login" method="get">
+          <div class="signin__group">
+            <label class="signin__label" for="handle">handle</label>
+            <span class="signin__field">
+              <span class="signin__prompt" aria-hidden="true">@</span>
+              <input
+                id="handle"
+                type="text"
+                name="handle"
+                required
+                placeholder="alice.bsky.social"
+                autocomplete="username"
+                autocapitalize="none"
+                autocorrect="off"
+                spellcheck="false"
+              >
+            </span>
+          </div>
+          <button class="btn" type="submit">sign in</button>
+        </form>
+      </section>
+    </main>
+
+    <footer id="how" class="foot-stmt">
+      <p class="foot-stmt__line">code in sync.</p>
+      <div class="foot-stmt__meta">
+        <SynchubMark :wordmark="true" :size="18" />
+        <span class="muted">© 2026 · MIT · <a href="https://github.com/danielroe/synchub.to">source</a></span>
+      </div>
+    </footer>
+  </div>
 </template>
 
 <style scoped>
-main {
-  max-width: 36rem;
-  margin: 4rem auto;
-  padding: 0 1.5rem;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-  line-height: 1.5;
-}
-h1 {
-  font-size: 2rem;
-  margin-bottom: 0.25rem;
-}
-h2 {
-  font-size: 1.1rem;
-  margin-bottom: 0.5rem;
-}
-.muted {
-  color: #555;
-  margin-bottom: 0.75rem;
-}
-section {
-  margin-top: 2.5rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid #eee;
-}
-form {
+.shell {
+  max-width: 52rem;
+  margin: 0 auto;
+  padding-inline: var(--page-gutter);
+}
+
+.nav-term {
+  padding: var(--space-md) 0;
+  border-bottom: var(--rule-hair) solid var(--color-rule);
+}
+
+.nav-term__line {
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.6ch;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  margin: 0;
+}
+
+.nav-term__line .prompt { color: var(--color-accent); }
+
+.nav-term__mark {
+  display: inline-flex;
+  text-decoration: none;
+  margin-right: 1.2ch;
+}
+
+.nav-term__mark:hover { color: inherit; }
+
+.nav-term__args {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.9ch;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-term__args a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  color: var(--color-muted);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  white-space: nowrap;
+}
+
+.nav-term__args a:hover { color: var(--color-ink); }
+
+.caret {
+  display: inline-block;
+  width: 1ch;
+  color: var(--color-accent);
+  animation: blink 1.05s steps(2) infinite;
+}
+
+@keyframes blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
+
+.hero {
+  padding-block: var(--space-2xl) var(--space-xl);
+}
+
+.heading-target:focus { outline: none; }
+
+.hero__title {
+  font-size: var(--text-display);
+  line-height: 1.04;
+  margin: 0 0 var(--space-lg);
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+
+.hero__lede {
+  max-width: var(--measure);
+  color: var(--color-muted);
+  font-size: var(--text-md);
+  margin: 0 0 var(--space-xl);
+}
+
+.session {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  line-height: 1.7;
+  background: var(--color-paper-2);
+  border: var(--rule-hair) solid var(--color-rule);
+  border-radius: var(--radius-md);
+  padding: var(--space-lg);
+  margin: 0;
+  overflow-x: auto;
+  color: var(--color-ink);
 }
-label {
+
+.session .c { color: var(--color-neutral); }
+.session .p { color: var(--color-accent); }
+.session .a { color: var(--color-info); }
+.session .ok { color: var(--color-ok); }
+.session .dim { color: var(--color-neutral); }
+
+.panel {
+  padding-block: var(--space-xl);
+  border-top: var(--rule-hair) solid var(--color-rule);
+}
+
+.panel__title {
+  font-size: var(--text-lg);
+  margin: 0 0 var(--space-sm);
+}
+
+.panel__body {
+  max-width: var(--measure);
+  color: var(--color-muted);
+  margin: 0 0 var(--space-lg);
+}
+
+.signin {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  gap: var(--space-sm);
+}
+
+.signin__group {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.875rem;
+  gap: var(--space-2xs);
 }
-input {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 1rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+
+.signin__label {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-muted);
 }
-button, .button {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  background: #111;
-  color: #fff;
+
+.signin__field {
+  display: flex;
+  align-items: center;
+  background: var(--color-paper-2);
+  border: var(--rule-hair) solid var(--color-rule-interactive);
+  border-radius: var(--radius-sm);
+}
+
+.signin__field:focus-within {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+  border-color: var(--color-accent);
+}
+
+.signin__prompt {
+  padding-inline: 0.75ch 0;
+  color: var(--color-accent);
+  font-family: var(--font-mono);
+}
+
+.signin input {
+  flex: 1;
+  min-width: 14rem;
+  padding: 0.55rem 0.75rem 0.55rem 0.4ch;
   border: 0;
-  border-radius: 4px;
-  font-size: 1rem;
-  cursor: pointer;
+  background: transparent;
+  color: var(--color-ink);
+  font-family: var(--font-mono);
+  font-size: var(--text-base);
+}
+
+.signin input::placeholder { color: var(--color-neutral); }
+
+.btn {
+  display: inline-block;
+  padding: 0.55rem 1.1rem;
+  border: var(--rule-hair) solid var(--color-rule-interactive);
+  border-radius: var(--radius-sm);
+  background: var(--color-paper-2);
+  color: var(--color-ink);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
   text-decoration: none;
-  text-align: center;
-  width: fit-content;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
+}
+
+.btn:hover { border-color: var(--color-accent); transform: translateY(-1px); color: var(--color-ink); }
+.btn:active { transform: translateY(0); }
+
+.btn--primary {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
 }
-button:hover, .button:hover {
-  background: #333;
+
+.foot-stmt {
+  display: grid;
+  gap: var(--space-lg);
+  padding-block: var(--space-2xl) var(--space-xl);
+  border-top: var(--rule-hair) solid var(--color-rule);
+}
+
+.foot-stmt__line {
+  font-family: var(--font-display);
+  font-size: clamp(1.5rem, 4vw, 2.4rem);
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+  max-width: 22ch;
+  margin: 0;
 }
+
+.foot-stmt__meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  padding-top: var(--space-sm);
+  border-top: var(--rule-hair) solid var(--color-rule);
+  font-size: var(--text-sm);
+}
+
+.muted { color: var(--color-neutral); }
+.muted a { color: var(--color-muted); }
 </style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e1ed929..24762ac 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -12,6 +12,13 @@ export default defineNuxtConfig({
     '@nuxt/test-utils',
   ],
   devtools: { enabled: true },
+  css: ['~/assets/css/tokens.css', '~/assets/css/base.css'],
+  fonts: {
+    families: [
+      { name: 'JetBrains Mono', provider: 'google', weights: [400, 500, 700] },
+      { name: 'IBM Plex Sans', provider: 'google', weights: [300, 400, 600] },
+    ],
+  },
   runtimeConfig: {
     databaseUrl: '',
     githubAppId: '',
@@ -35,6 +42,10 @@ export default defineNuxtConfig({
   app: {
     head: {
       htmlAttrs: { lang: 'en' },
+      link: [
+        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+        { rel: 'alternate icon', href: '/favicon.ico' },
+      ],
     },
   },
   future: {
@@ -43,6 +54,10 @@ export default defineNuxtConfig({
   experimental: {
     typedPages: true,
   },
+  routeRules: {
+    '/': { noScripts: true, prerender: true },
+    '/dashboard': { ssr: false, prerender: true },
+  },
   nitro: {
     vercel: {
       config: {
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..f1849d5
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect width="32" height="32" rx="6" fill="oklch(15% 0.012 250)"/>
+  <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4">
+    <circle cx="9" cy="9" r="3.4" stroke="oklch(94% 0.006 145)"/>
+    <circle cx="23" cy="23" r="3.4" stroke="oklch(94% 0.006 145)"/>
+    <path d="M9 13 V19 a4 4 0 0 0 4 4 H18.5" stroke="oklch(94% 0.006 145)"/>
+    <path d="M16 19.5 L20 23 L16 26.5" stroke="oklch(82% 0.19 145)"/>
+  </g>
+</svg>