diff --git a/index.html b/index.html
index eebb634..bc5d389 100644
--- a/index.html
+++ b/index.html
@@ -5,12 +5,18 @@
     <link rel="icon" href="/favicon.ico">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <meta name="theme-color" content="#0a0e1a">
+    <meta name="theme-color" content="#12161d">
     <meta name="color-scheme" content="dark">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="dttmr">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@500;600;700&family=Special+Elite&display=swap"
+      rel="stylesheet"
+    >
     <title>dttmr</title>
   </head>
   <body>
diff --git a/src/assets/base.css b/src/assets/base.css
index 1e8b264..4b31d91 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,33 +1,40 @@
-/* dttmr color palette - dark, modern, blueish */
+/* dttmr palette - field-ledger / stamped ink, cool slate ground, blue ink accent */
 :root {
-  --c-bg: #0a0e1a;
-  --c-bg-soft: #101627;
-  --c-bg-mute: #161d33;
-  --c-bg-elevated: #1a2338;
+  --c-bg: #12161d;
+  --c-bg-soft: #181e27;
+  --c-bg-mute: #202632;
+  --c-bg-elevated: #262e3c;
 
-  --c-border: rgba(120, 150, 220, 0.16);
-  --c-border-hover: rgba(120, 150, 220, 0.32);
+  --c-border: rgba(74, 130, 196, 0.16);
+  --c-border-hover: rgba(74, 130, 196, 0.36);
 
-  --c-text: #c7d0e6;
-  --c-text-soft: #8892b0;
-  --c-heading: #f1f4fc;
+  --c-text: #aab2c0;
+  --c-text-soft: #707a8c;
+  --c-heading: #eef1f6;
 
-  --c-accent: #4f7dfa;
-  --c-accent-soft: #3a5fd9;
-  --c-accent-strong: #6c93ff;
-  --c-accent-bg: rgba(79, 125, 250, 0.14);
+  --c-accent: #3d72b4;
+  --c-accent-soft: #2f5c92;
+  --c-accent-strong: #62a0e0;
+  --c-accent-bg: rgba(61, 114, 180, 0.16);
 
-  --c-success: #34d399;
-  --c-danger: #f87171;
-  --c-danger-bg: rgba(248, 113, 113, 0.12);
-  --c-warning: #fbbf24;
+  --c-success: #6ba178;
+  --c-success-bg: rgba(107, 161, 120, 0.14);
+  --c-danger: #c1614a;
+  --c-danger-bg: rgba(193, 97, 74, 0.14);
+  --c-warning: #cf9d3f;
 
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 18px;
+  --font-body:
+    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
+  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-stamp: 'Special Elite', var(--font-mono), monospace;
 
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
-  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
+  --radius-sm: 3px;
+  --radius-md: 5px;
+  --radius-lg: 8px;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
+  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);
 
   --nav-height: 60px;
   --safe-bottom: env(safe-area-inset-bottom, 0px);
@@ -56,21 +63,18 @@ html {
 body {
   min-height: 100vh;
   color: var(--c-text);
-  background: radial-gradient(circle at top, #101a33 0%, var(--c-bg) 55%);
+  background-color: var(--c-bg);
+  background-image:
+    repeating-linear-gradient(
+      to bottom,
+      rgba(74, 130, 196, 0.06) 0,
+      rgba(74, 130, 196, 0.06) 1px,
+      transparent 1px,
+      transparent 28px
+    ),
+    radial-gradient(circle at 50% -10%, rgba(74, 130, 196, 0.08), transparent 55%);
   line-height: 1.55;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
+  font-family: var(--font-body);
   font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -85,6 +89,12 @@ h4 {
   font-weight: 600;
 }
 
+h1 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
 a {
   color: var(--c-accent-strong);
   text-decoration: none;
diff --git a/src/assets/main.css b/src/assets/main.css
index 445b0b2..bd7fa66 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -29,13 +29,14 @@
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-soft) 100%);
-  color: #ffffff;
+  background-color: var(--c-accent);
+  color: var(--c-bg);
+  font-weight: 600;
   box-shadow: var(--shadow-sm);
 }
 
 .btn-primary:hover:not(:disabled) {
-  background: linear-gradient(135deg, var(--c-accent-strong) 0%, var(--c-accent) 100%);
+  background-color: var(--c-accent-strong);
 }
 
 .btn-secondary {
@@ -52,7 +53,7 @@
 .btn-danger {
   background-color: transparent;
   color: var(--c-danger);
-  border-color: rgba(248, 113, 113, 0.35);
+  border-color: rgba(193, 97, 74, 0.4);
 }
 
 .btn-danger:hover:not(:disabled) {
@@ -113,10 +114,21 @@
 
 .banner-error {
   background-color: var(--c-danger-bg);
-  border: 1px solid rgba(248, 113, 113, 0.4);
+  border: 1px solid rgba(193, 97, 74, 0.4);
   color: var(--c-danger);
 }
 
+.banner-success {
+  background-color: var(--c-success-bg);
+  border: 1px solid rgba(127, 174, 120, 0.4);
+  color: var(--c-success);
+}
+
+.mono-num {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
 .page {
   min-height: 100vh;
   padding: 1rem 1rem calc(var(--nav-height) + var(--safe-bottom) + 1.5rem);
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 6bc720b..23a57f5 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useListsStore } from '@/stores/lists'
@@ -11,25 +12,49 @@ async function handleLogout() {
   await authStore.logout()
   router.push('/login')
 }
+
+const stampLabel = computed(() => {
+  if (!authStore.isAuthenticated) return 'offline'
+  if (listsStore.isSyncing) return 'syncing'
+  if (listsStore.pendingCount > 0) return `${listsStore.pendingCount} pending`
+  return 'synced'
+})
+
+const stampClass = computed(() => {
+  if (!authStore.isAuthenticated) return ''
+  if (listsStore.pendingCount > 0 || listsStore.isSyncing) return 'stamp-pending'
+  return 'stamp-synced'
+})
+
+const stampTitle = computed(() => {
+  if (!authStore.isAuthenticated) return 'Not signed in'
+  if (listsStore.isSyncing) return 'Syncing…'
+  if (listsStore.pendingCount > 0) return `${listsStore.pendingCount} change(s) waiting to sync`
+  return 'Up to date'
+})
 </script>
 
 <template>
   <header class="app-header">
     <div class="brand">
-      <span class="brand-dot"></span>
+      <span class="brand-seal"></span>
       <span class="brand-name">dttmr</span>
     </div>
 
     <div class="status">
       <span
-        class="sync-dot"
-        :class="{ offline: !authStore.isAuthenticated }"
-        :title="listsStore.isSyncing ? 'Syncing…' : 'Up to date'"
-      ></span>
-      <span v-if="listsStore.pendingCount > 0" class="pending">
-        {{ listsStore.pendingCount }} pending
-      </span>
-      <span v-if="listsStore.error" class="sync-error" :title="listsStore.error">⚠ sync error</span>
+        v-if="listsStore.error"
+        class="stamp stamp-danger"
+        :title="listsStore.error"
+        >sync error</span
+      >
+      <span
+        v-else
+        class="stamp"
+        :class="stampClass"
+        :title="stampTitle"
+        >{{ stampLabel }}</span
+      >
       <button v-if="authStore.isAuthenticated" type="button" class="logout" @click="handleLogout">
         Log out
       </button>
@@ -46,7 +71,7 @@ async function handleLogout() {
   align-items: center;
   justify-content: space-between;
   padding: calc(0.75rem + var(--safe-top)) 1rem 0.75rem;
-  background: linear-gradient(180deg, rgba(10, 14, 26, 0.92) 60%, rgba(10, 14, 26, 0));
+  background: linear-gradient(180deg, rgba(20, 24, 26, 0.92) 60%, rgba(20, 24, 26, 0));
   backdrop-filter: blur(8px);
 }
 
@@ -54,17 +79,22 @@ async function handleLogout() {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-weight: 600;
   color: var(--c-heading);
-  letter-spacing: 0.02em;
 }
 
-.brand-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--c-accent-strong), var(--c-accent-soft));
-  box-shadow: 0 0 12px var(--c-accent);
+.brand-name {
+  font-family: var(--font-stamp);
+  font-size: 0.95rem;
+  letter-spacing: 0.04em;
+}
+
+.brand-seal {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  background: var(--c-accent);
+  transform: rotate(-8deg);
+  box-shadow: 0 0 0 2px var(--c-bg) inset;
 }
 
 .status {
@@ -75,18 +105,23 @@ async function handleLogout() {
   color: var(--c-text-soft);
 }
 
-.sync-dot {
+.stamp {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: var(--c-text-soft);
+}
+
+.stamp::before {
+  content: '';
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: var(--c-success);
+  background-color: currentColor;
+  flex-shrink: 0;
 }
 
-.sync-dot.offline {
-  background-color: var(--c-text-soft);
-}
-
-.sync-error {
+.stamp-danger {
   color: var(--c-danger);
   cursor: help;
 }
diff --git a/src/components/BottomNav.vue b/src/components/BottomNav.vue
index 3288b16..16049a1 100644
--- a/src/components/BottomNav.vue
+++ b/src/components/BottomNav.vue
@@ -10,14 +10,23 @@ const listsStore = useListsStore()
 <template>
   <nav v-if="authStore.isAuthenticated" class="bottom-nav">
     <RouterLink to="/" class="nav-item" active-class="is-active">
-      <span class="nav-icon">☰</span>
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M4 6h1.5M4 12h1.5M4 18h1.5" stroke-linecap="round" />
+        <path d="M9 6h11M9 12h11M9 18h11" stroke-linecap="round" />
+      </svg>
       <span class="nav-label">Lists</span>
-      <span v-if="listsStore.pendingCount > 0" class="nav-badge">{{
+      <span v-if="listsStore.pendingCount > 0" class="nav-badge mono-num">{{
         listsStore.pendingCount
       }}</span>
     </RouterLink>
     <RouterLink to="/account" class="nav-item" active-class="is-active">
-      <span class="nav-icon">⚙</span>
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="3.2" />
+        <path
+          d="M12 3.5v2M12 18.5v2M20.5 12h-2M5.5 12h-2M17.7 6.3l-1.4 1.4M7.7 16.3l-1.4 1.4M17.7 17.7l-1.4-1.4M7.7 7.7 6.3 6.3"
+          stroke-linecap="round"
+        />
+      </svg>
       <span class="nav-label">Account</span>
     </RouterLink>
   </nav>
@@ -45,14 +54,19 @@ const listsStore = useListsStore()
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.15rem;
+  gap: 0.2rem;
   color: var(--c-text-soft);
-  font-size: 0.7rem;
+  font-size: 0.68rem;
+  transition: color 0.15s ease-in-out;
+}
+
+.nav-item.is-active {
+  color: var(--c-accent-strong);
 }
 
 .nav-icon {
-  font-size: 1.25rem;
-  line-height: 1;
+  width: 21px;
+  height: 21px;
 }
 
 .nav-badge {
@@ -64,8 +78,9 @@ const listsStore = useListsStore()
   padding: 0 4px;
   border-radius: 999px;
   background-color: var(--c-accent);
-  color: #fff;
+  color: var(--c-bg);
   font-size: 0.6rem;
+  font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/ChangePasswordModal.vue b/src/components/ChangePasswordModal.vue
index 358dda5..56a9a77 100644
--- a/src/components/ChangePasswordModal.vue
+++ b/src/components/ChangePasswordModal.vue
@@ -126,9 +126,6 @@ async function handleSubmit() {
 }
 
 .banner-success {
-  background-color: rgba(52, 211, 153, 0.12);
-  border: 1px solid rgba(52, 211, 153, 0.4);
-  color: var(--c-success);
   margin-top: 0.75rem;
 }
 
diff --git a/src/components/InvitesPanel.vue b/src/components/InvitesPanel.vue
index 2121f7c..ecbb030 100644
--- a/src/components/InvitesPanel.vue
+++ b/src/components/InvitesPanel.vue
@@ -218,7 +218,7 @@ function inviteDetail(invite: Invite): string {
           :class="`is-${inviteStatus(invite)}`"
         >
           <div class="invite-ticket-main">
-            <code class="invite-code">{{ invite.code }}</code>
+            <code class="invite-code" :title="invite.code">{{ invite.code }}</code>
             <span class="invite-status-pill" :class="`pill-${inviteStatus(invite)}`">{{
               statusLabel(invite)
             }}</span>
@@ -368,13 +368,19 @@ function inviteDetail(invite: Invite): string {
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
 .invite-code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.95rem;
   letter-spacing: 0.06em;
   color: var(--c-heading);
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .invite-status-pill {
@@ -388,7 +394,7 @@ function inviteDetail(invite: Invite): string {
 }
 
 .pill-active {
-  background-color: rgba(52, 211, 153, 0.14);
+  background-color: var(--c-success-bg);
   color: var(--c-success);
 }
 
@@ -406,7 +412,8 @@ function inviteDetail(invite: Invite): string {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
+  gap: 0.4rem 0.5rem;
+  flex-wrap: wrap;
   border-top: 1px dashed var(--c-border);
   margin-top: 0.55rem;
   padding-top: 0.5rem;
@@ -415,12 +422,14 @@ function inviteDetail(invite: Invite): string {
 .invite-detail {
   font-size: 0.75rem;
   color: var(--c-text-soft);
+  min-width: 0;
 }
 
 .invite-actions {
   display: flex;
   align-items: center;
   gap: 0.4rem;
+  margin-left: auto;
 }
 
 .confirm-label {
@@ -450,7 +459,7 @@ function inviteDetail(invite: Invite): string {
 
 .ticket-btn-danger {
   color: var(--c-danger);
-  border-color: rgba(248, 113, 113, 0.35);
+  border-color: rgba(193, 97, 74, 0.4);
 }
 
 .ticket-btn-danger:hover:not(:disabled) {
diff --git a/src/components/ListCard.vue b/src/components/ListCard.vue
index 4d02237..1c72cfb 100644
--- a/src/components/ListCard.vue
+++ b/src/components/ListCard.vue
@@ -54,7 +54,7 @@ function handleDelete(event: Event) {
       <div class="list-card-main">
         <h3>{{ list.name }}</h3>
         <p class="meta">
-          {{ completedCount }}/{{ totalCount }} done
+          <span class="mono-num">{{ completedCount }}/{{ totalCount }}</span> done
           <span v-if="list.pendingSync" class="pending-tag">syncing…</span>
         </p>
       </div>
diff --git a/src/components/ListItemRow.vue b/src/components/ListItemRow.vue
index 947183a..78eca80 100644
--- a/src/components/ListItemRow.vue
+++ b/src/components/ListItemRow.vue
@@ -134,22 +134,23 @@ function handleDelete(event: Event) {
 
 .checkbox {
   flex-shrink: 0;
-  width: 22px;
-  height: 22px;
-  border-radius: 6px;
-  border: 1px solid var(--c-border-hover);
+  width: 21px;
+  height: 21px;
+  border-radius: var(--radius-sm);
+  border: 1.5px solid var(--c-border-hover);
   background: transparent;
-  color: #fff;
+  color: var(--c-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 700;
 }
 
 .item-row.completed .checkbox {
-  background: linear-gradient(135deg, var(--c-accent-strong), var(--c-accent-soft));
-  border-color: transparent;
+  background: var(--c-accent);
+  border-color: var(--c-accent);
 }
 
 .title {
diff --git a/src/components/ShareListModal.vue b/src/components/ShareListModal.vue
index e3e208f..fcafdda 100644
--- a/src/components/ShareListModal.vue
+++ b/src/components/ShareListModal.vue
@@ -110,9 +110,6 @@ async function handleAddUser() {
 }
 
 .banner-success {
-  background-color: rgba(52, 211, 153, 0.12);
-  border: 1px solid rgba(52, 211, 153, 0.4);
-  color: var(--c-success);
   margin-top: 0.75rem;
 }
 
diff --git a/src/views/AccountView.vue b/src/views/AccountView.vue
index e4d7bb9..ac13f91 100644
--- a/src/views/AccountView.vue
+++ b/src/views/AccountView.vue
@@ -43,7 +43,7 @@ onMounted(() => {
       <h4>Sync status</h4>
       <p class="row">
         <span>Pending changes</span>
-        <strong>{{ listsStore.pendingCount }}</strong>
+        <strong class="mono-num">{{ listsStore.pendingCount }}</strong>
       </p>
       <p class="row">
         <span>Syncing</span>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index ae86a6c..d28323a 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -46,7 +46,8 @@ async function handleSubmit() {
   <div class="login-container">
     <div class="login-card card">
       <div class="brand-mark">
-        <span class="brand-dot"></span>
+        <span class="brand-seal"></span>
+        <span class="brand-word">dttmr</span>
       </div>
       <h2>Login</h2>
       <p class="subtitle">Enter your credentials to access your account</p>
@@ -119,16 +120,26 @@ async function handleSubmit() {
 
 .brand-mark {
   display: flex;
+  align-items: center;
   justify-content: center;
-  margin-bottom: 1rem;
+  gap: 0.55rem;
+  margin-bottom: 1.5rem;
 }
 
-.brand-dot {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, var(--c-accent-strong), var(--c-accent-soft));
-  box-shadow: 0 0 24px var(--c-accent-bg);
+.brand-seal {
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  background: var(--c-accent);
+  transform: rotate(-8deg);
+  box-shadow: 0 0 0 3px var(--c-bg-soft) inset;
+}
+
+.brand-word {
+  font-family: var(--font-stamp);
+  font-size: 1.3rem;
+  letter-spacing: 0.04em;
+  color: var(--c-heading);
 }
 
 h2 {
diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
index 42aa5d3..a356c98 100644
--- a/src/views/RegisterView.vue
+++ b/src/views/RegisterView.vue
@@ -58,7 +58,8 @@ async function handleSubmit() {
   <div class="register-container">
     <div class="register-card card">
       <div class="brand-mark">
-        <span class="brand-dot"></span>
+        <span class="brand-seal"></span>
+        <span class="brand-word">dttmr</span>
       </div>
       <h2>Create your account</h2>
 
@@ -160,16 +161,26 @@ async function handleSubmit() {
 
 .brand-mark {
   display: flex;
+  align-items: center;
   justify-content: center;
-  margin-bottom: 1rem;
+  gap: 0.55rem;
+  margin-bottom: 1.5rem;
 }
 
-.brand-dot {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, var(--c-accent-strong), var(--c-accent-soft));
-  box-shadow: 0 0 24px var(--c-accent-bg);
+.brand-seal {
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  background: var(--c-accent);
+  transform: rotate(-8deg);
+  box-shadow: 0 0 0 3px var(--c-bg-soft) inset;
+}
+
+.brand-word {
+  font-family: var(--font-stamp);
+  font-size: 1.3rem;
+  letter-spacing: 0.04em;
+  color: var(--c-heading);
 }
 
 h2 {
diff --git a/vite.config.ts b/vite.config.ts
index 69e21b0..90103b5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -23,8 +23,8 @@ export default defineConfig({
         description: 'dittmar.dev frontend app',
         start_url: '/',
         scope: '/',
-        theme_color: '#0a0e1a',
-        background_color: '#0a0e1a',
+        theme_color: '#12161d',
+        background_color: '#12161d',
         display: 'standalone',
         icons: [
           {
