upd

frontend/app/app.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="layout">
     <header class="app-header">
-      <h1>TMC Items Manager</h1>
+      <div class="header-inner">
+        <div class="header-brand">
+          <span class="brand-mark" />
+          <h1 class="brand-title">TMC <em>Items Manager</em></h1>
+        </div>
+        <span class="header-label">Manage &amp; organize</span>
+      </div>
     </header>
     <main class="panels">
       <LeftPanel
@@ -78,22 +84,60 @@ async function handleAdd(id: number) {
   display: flex;
   flex-direction: column;
   height: 100vh;
+  background: var(--canvas);
 }
 
 .app-header {
-  padding: 12px 24px;
-  border-bottom: 1px solid #e5e7eb;
-  background: #fff;
   flex-shrink: 0;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
 
-  h1 {
-    margin: 0;
-    font-size: 1.2rem;
-    font-weight: 700;
-    color: #1f2937;
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 28px;
+  height: 52px;
+}
+
+.header-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.brand-mark {
+  width: 6px;
+  height: 6px;
+  background: var(--text-primary);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.brand-title {
+  margin: 0;
+  font-family: var(--font-serif);
+  font-size: 1.05rem;
+  font-weight: 400;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+  line-height: 1;
+
+  em {
+    font-style: italic;
+    font-weight: 300;
   }
 }
 
+.header-label {
+  font-size: 0.72rem;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
 .panels {
   display: flex;
   flex: 1;