design(ui): Awwwards-quality typography, SVG icons, lit-edge diagram tabs

Landing hero:
- Compass 64→88px — scales with viewport without looking lost
- Headline 34→48px Anthropic Serif — makes it a moment, not a label
- "any" wrapped in gradient em — warm sienna accent highlights the key promise
- Onboarding step p: var(--muted)→var(--text-2) — body text on a learning tool
must be readable, not decorative

Diagram mode tabs:
- Unicode ◈⬡◫ replaced with inline SVG TabIcon component — infinitely crisp at
every DPI; unicode glyphs rasterise at screen resolution and look fuzzy at 2×
- "Lit edge" ::before gradient top-line on active card — the same depth signal
used by Linear, Vercel, Raycast; materialises light catching a raised edge
- Padding 8px 14px → 11px 18px, min-width 130→150px — feature cards not form controls
- Icon color transitions on hover/active — guides the eye to the selection
- diagram-type-desc: var(--muted)→var(--text-2) — readable context

Chat suggest state:
- h2: 22→28px — repo selected is an invitation, needs presence

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/App.jsx

@@ -728,7 +728,7 @@ export default function App() {
                   // No repo selected yet (landing), or All repos selected but nothing indexed
                   <div className="onboarding-steps">
                     <div className="onboarding-header">
-                      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" style={{ marginBottom: 16 }}>
+                      <svg width="88" height="88" viewBox="0 0 24 24" fill="none" style={{ marginBottom: 20 }}>
                         {/* N — pulses bright */}
                         <path className="compass-north" d="M12 2 L14.5 7 L12 12 L9.5 7 Z" fill="var(--accent)"/>
                         {/* S — delayed fade */}
@@ -740,7 +740,7 @@ export default function App() {
                         {/* Center */}
                         <circle cx="12" cy="12" r="1.4" fill="var(--accent)"/>
                       </svg>
-                      <div className="onboarding-headline">Map any codebase</div>
+                      <div className="onboarding-headline">Map <em>any</em> codebase</div>
                       <div className="onboarding-sub">Index any public repo and ask questions about the code — architecture, data flow, classes, functions, and more.</div>
                     </div>
                     <div className="onboarding-step active">

ui/src/components/DiagramView.jsx

@@ -22,7 +22,7 @@ import NodeDetailPanel from "./NodeDetailPanel";
 
 // ── Diagram tab definitions ───────────────────────────────────────────────────
 const EXPLORE_TAB = {
-  id: "explore", label: "Explore", desc: "Guided concept tour", icon: "◈",
+  id: "explore", label: "Explore", desc: "Guided concept tour",
 };
 
 // Only AST-verified diagrams — Sequence and Data Flow were removed because
@@ -33,16 +33,54 @@ const DIAGRAM_TABS = [
     id:    "architecture",
     label: "Architecture",
     desc:  "Components & connections",
-    icon:  "⬡",
   },
   {
     id:    "class",
     label: "Class Hierarchy",
     desc:  "Classes & relationships",
-    icon:  "◫",
   },
 ];
 
+// ── Tab icons (SVG) ───────────────────────────────────────────────────────────
+// Inline SVGs render crisp at every DPI — unicode glyphs (◈ ⬡ ◫) are
+// rasterised at screen resolution and look blurry on high-DPI displays.
+function TabIcon({ id }) {
+  if (id === "explore") return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      {/* Compass rose — N point pulses in the landing animation */}
+      <path d="M12 2L14.5 7.5L12 12L9.5 7.5Z" fill="currentColor"/>
+      <path d="M12 22L13.5 16.5L12 12L10.5 16.5Z" fill="currentColor" opacity="0.45"/>
+      <path d="M22 12L16.5 10.5L12 12L16.5 13.5Z" fill="currentColor" opacity="0.45"/>
+      <path d="M2 12L7.5 10.5L12 12L7.5 13.5Z" fill="currentColor" opacity="0.45"/>
+      <circle cx="12" cy="12" r="1.5" fill="currentColor"/>
+    </svg>
+  );
+  if (id === "architecture") return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+      stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" aria-hidden="true">
+      {/* Three nodes connected by edges — represents a dependency/import graph */}
+      <circle cx="5" cy="12" r="2.5"/>
+      <circle cx="19" cy="6.5" r="2.5"/>
+      <circle cx="19" cy="17.5" r="2.5"/>
+      <line x1="7.4" y1="11" x2="16.6" y2="7.5"/>
+      <line x1="7.4" y1="13" x2="16.6" y2="16.5"/>
+    </svg>
+  );
+  if (id === "class") return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+      stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      {/* Parent node + two children — represents inheritance / class tree */}
+      <rect x="8.5" y="2" width="7" height="5" rx="1.5"/>
+      <rect x="1" y="17" width="7" height="5" rx="1.5"/>
+      <rect x="16" y="17" width="7" height="5" rx="1.5"/>
+      <line x1="12" y1="7" x2="12" y2="12"/>
+      <line x1="12" y1="12" x2="4.5" y2="17"/>
+      <line x1="12" y1="12" x2="19.5" y2="17"/>
+    </svg>
+  );
+  return null;
+}
+
 const ALL_TABS = [EXPLORE_TAB, ...DIAGRAM_TABS];
 
 export default function DiagramView({ repo, onAskAbout, focusFiles }) {
@@ -246,7 +284,7 @@ export default function DiagramView({ repo, onAskAbout, focusFiles }) {
                 : "rgba(212,132,90,0.25)",
             }}
           >
-            <span className="diagram-type-icon" style={{ color: "var(--accent-soft)" }}>◈</span>
+            <span className="diagram-type-icon" style={{ color: "var(--accent-soft)" }}><TabIcon id="explore" /></span>
             <span className="diagram-type-label" style={{ color: diagramType === "explore" ? "var(--accent)" : "var(--accent-soft)" }}>Explore</span>
             <span className="diagram-type-desc">Guided concept tour</span>
           </button>
@@ -265,7 +303,7 @@ export default function DiagramView({ repo, onAskAbout, focusFiles }) {
               className={`diagram-type-btn${diagramType === t.id ? " active" : ""}`}
               onClick={() => setType(t.id)}
             >
-              <span className="diagram-type-icon">{t.icon}</span>
+              <span className="diagram-type-icon"><TabIcon id={t.id} /></span>
               <span className="diagram-type-label">{t.label}</span>
               <span className="diagram-type-desc">{t.desc}</span>
             </button>

ui/src/index.css

@@ -1319,15 +1319,26 @@ textarea:focus-visible {
 }
 
 .onboarding-headline {
-  font-size: 34px;
+  /* 48px makes this a moment, not a label — the first thing that lands */
+  font-size: 48px;
   font-weight: 400;
   font-family: "Anthropic Serif", Georgia, serif;
-  letter-spacing: -0.02em;
-  line-height: 1.1;
-  margin-bottom: 12px;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  margin-bottom: 14px;
   color: var(--text);
 }
 
+/* "any" in "Map any codebase" — gradient accent highlights the key idea:
+   that Cartographer works on every repo, not just pre-selected ones */
+.onboarding-headline em {
+  font-style: normal;
+  background: linear-gradient(110deg, var(--accent-soft) 0%, var(--accent) 65%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
 .onboarding-sub {
   font-size: 15px;
   color: var(--text-2);
@@ -1422,7 +1433,8 @@ textarea:focus-visible {
 }
 .onboarding-step p {
   font-size: 13px;
-  color: var(--muted);
+  /* text-2 not muted — this is the body of a learning step, not decoration */
+  color: var(--text-2);
   margin: 3px 0;
   line-height: 1.55;
 }
@@ -1441,7 +1453,8 @@ textarea:focus-visible {
 /* Suggest state */
 .suggest-state { max-width: 540px; width: 100%; text-align: center; }
 .suggest-state h2 {
-  font-size: 22px;
+  /* 28px gives this moment presence — you've chosen a repo, this is the invitation */
+  font-size: 28px;
   font-weight: 400;
   font-family: "Anthropic Serif", Georgia, serif;
   letter-spacing: -0.02em;
@@ -2121,50 +2134,80 @@ textarea:focus-visible {
 .diagram-type-bar {
   display: flex;
   gap: 8px;
-  padding: 12px 24px;
+  padding: 14px 24px;
   border-bottom: 1px solid var(--border-subtle);
   flex-shrink: 0;
-  background: rgba(20, 18, 14, 0.55);
+  background: rgba(20, 18, 14, 0.70);
 }
 
 .diagram-type-btn {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 2px;
-  padding: 8px 14px;
-  border-radius: 8px;
+  gap: 3px;
+  /* More generous padding — these are feature entry points, not list items */
+  padding: 11px 18px;
+  border-radius: var(--radius-md);
   border: 1px solid var(--border);
   background: transparent;
   cursor: pointer;
-  transition: background var(--transition), border-color var(--transition);
-  min-width: 130px;
+  /* position: relative anchors the ::before gradient top-edge line */
+  position: relative;
+  overflow: hidden;
+  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
+  min-width: 150px;
 }
+
+/* "Lit edge" technique — a gradient line materialises at the top of the
+   active card, mimicking light catching a raised edge. Seen on Linear,
+   Vercel, Raycast. Invisible by default; only the active card shows it. */
+.diagram-type-btn::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 12px; right: 12px;
+  height: 2px;
+  border-radius: 0 0 2px 2px;
+  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-soft), transparent);
+  opacity: 0;
+  transition: opacity var(--transition);
+}
+
 .diagram-type-btn:hover {
   background: rgba(237,228,206,0.04);
   border-color: var(--accent-border);
 }
 .diagram-type-btn.active {
-  background: rgba(212,132,90,0.15);
-  border-color: rgba(212,132,90,0.5);
+  background: rgba(212,132,90,0.12);
+  border-color: rgba(212,132,90,0.45);
+  box-shadow: 0 4px 20px rgba(212,132,90,0.08), inset 0 0 0 0 transparent;
 }
+.diagram-type-btn.active::before { opacity: 1; }
 
 .diagram-type-icon {
-  font-size: 16px;
-  line-height: 1;
-  margin-bottom: 2px;
+  /* Block display so the SVG sits on its own line above the label */
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  color: var(--muted);
+  transition: color var(--transition);
 }
+.diagram-type-btn.active .diagram-type-icon,
+.diagram-type-btn:hover .diagram-type-icon { color: var(--accent-soft); }
+
 .diagram-type-label {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--text);
   font-family: var(--mono);
+  letter-spacing: -0.01em;
 }
 .diagram-type-btn.active .diagram-type-label { color: var(--accent); }
 
+/* text-2 not muted — the description is the context, not decoration */
 .diagram-type-desc {
-  font-size: 10px;
-  color: var(--muted);
+  font-size: 11px;
+  color: var(--text-2);
+  letter-spacing: -0.01em;
 }
 
 /* ── Canvas ── */