Improve cockpit typography for readability across all pages.

Raise base font to 16px, enlarge sidebar, buttons, tables and headings, add Inter font and global typography layer.

cockpit/static/css/app-sidebar-neo.css

@@ -25,13 +25,13 @@
   border-bottom: 1px solid rgba(148, 163, 184, 0.08);
 }
 .app-sidebar-brand .brand-title {
-  font-size: 0.58rem;
-  letter-spacing: 0.14em;
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
   color: #64748b;
   margin: 0;
 }
 .app-sidebar-brand .brand-name {
-  font-size: 0.95rem;
+  font-size: 1.05rem;
   font-weight: 700;
   color: #e2e8f0;
   margin: 0.2rem 0 0;
@@ -50,7 +50,7 @@
   color: #94a3b8;
   border-radius: 8px;
   padding: 0.45rem 0.25rem;
-  font-size: 0.58rem;
+  font-size: 0.8125rem;
   font-weight: 700;
   letter-spacing: 0.03em;
   text-transform: uppercase;
@@ -65,8 +65,8 @@
   margin-bottom: 0.65rem;
 }
 .app-sidebar-label {
-  font-size: 0.56rem;
-  letter-spacing: 0.12em;
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #64748b;
   padding: 0.2rem 0.5rem 0.35rem;
@@ -80,12 +80,12 @@
   gap: 0.5rem;
   width: 100%;
   margin: 0 0 0.2rem;
-  padding: 0.5rem 0.55rem;
+  padding: 0.55rem 0.65rem;
   border-radius: 8px;
   border: 1px solid rgba(148, 163, 184, 0.1);
   background: rgba(15, 23, 42, 0.5);
   color: #cbd5e1 !important;
-  font-size: 0.78rem;
+  font-size: 0.9375rem;
   font-weight: 500;
   text-decoration: none;
   text-align: left;
@@ -121,14 +121,14 @@
 }
 
 .sidebar-nav-icon {
-  width: 26px;
-  height: 26px;
+  width: 28px;
+  height: 28px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  font-size: 0.85rem;
+  font-size: 0.95rem;
   background: rgba(8, 12, 18, 0.9);
   border: 1px solid rgba(148, 163, 184, 0.12);
 }
@@ -169,7 +169,7 @@
 
 .persona-badge {
   display: inline-block;
-  font-size: 0.62rem;
+  font-size: 0.75rem;
   font-weight: 800;
   letter-spacing: 0.08em;
   padding: 0.15rem 0.45rem;

cockpit/static/css/cockpit-typography.css

@@ -0,0 +1,162 @@
+/* Cockpit readability — loads last, harmonizes all modules */
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-size: var(--text-base, 1rem);
+  line-height: var(--leading, 1.55);
+}
+
+/* Headings */
+h1 { font-size: var(--text-3xl, 1.75rem); font-weight: 700; letter-spacing: -0.02em; }
+h2 { font-size: var(--text-xl, 1.25rem); font-weight: 600; }
+h3 { font-size: var(--text-lg, 1.125rem); font-weight: 600; }
+h4 { font-size: var(--text-md, 1.0625rem); font-weight: 600; }
+
+.page-header h1,
+.ei-header h1,
+.herman-shell.hm-neo .herman-hero h1 {
+  font-size: 1.75rem !important;
+}
+
+.page-header .subtitle,
+.ei-subtitle,
+.ei-header .ei-subtitle {
+  font-size: 0.9375rem !important;
+  line-height: 1.5;
+}
+
+.ei-tab-panel-head h2,
+.panel-inner h2,
+.briefing-card h3 {
+  font-size: 1.125rem !important;
+}
+
+/* Body text minimum */
+p, li, td, label, .page-tip {
+  font-size: max(0.9375rem, 1em);
+}
+
+/* Tables */
+.ei-table,
+.data-table,
+.voice-results-table,
+.clients-table,
+.deals-table {
+  font-size: 0.9375rem !important;
+}
+
+.ei-table th,
+.data-table th {
+  font-size: 0.8125rem !important;
+  font-weight: 600;
+}
+
+.ei-table td,
+.data-table td {
+  padding: 0.6rem 0.75rem !important;
+}
+
+/* Buttons & inputs */
+.btn {
+  font-size: 0.9375rem !important;
+  font-weight: 500;
+}
+
+.btn-sm {
+  font-size: 0.875rem !important;
+}
+
+.form-input,
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+  font-size: 0.9375rem !important;
+}
+
+/* Sidebar nav */
+.app-sidebar a.nav-pill {
+  font-size: 0.9375rem !important;
+}
+
+.app-sidebar-label {
+  font-size: 0.75rem !important;
+  font-weight: 600;
+}
+
+.app-topbar,
+.app-clock {
+  font-size: 0.875rem !important;
+}
+
+/* KPI cards */
+.ei-neo-kpi-label,
+.hm-neo-kpi-label,
+.briefing-stat-label,
+.stat-label {
+  font-size: 0.8125rem !important;
+}
+
+.ei-neo-kpi-value,
+.hm-neo-kpi-value,
+.briefing-stat-value {
+  font-size: 1.65rem !important;
+}
+
+/* Tabs & filters */
+.vtab-btn,
+.vtab-btn-rich,
+.ei-filter-label,
+.ei-type-chip {
+  font-size: 0.9375rem !important;
+}
+
+.ei-filter-group input,
+.ei-filter-group select {
+  font-size: 0.9375rem !important;
+}
+
+/* Badges & pills — readable but compact */
+.ei-type-pill,
+.ei-halal-pill,
+.badge,
+.ei-crm-badge,
+.live-badge {
+  font-size: 0.8125rem !important;
+}
+
+/* Herman dashboard micro-labels */
+.hm-neo-kpi-label,
+.hm-section-label,
+.herman-shell.hm-neo .hm-card-label {
+  font-size: 0.8125rem !important;
+  letter-spacing: 0.06em !important;
+}
+
+/* Export intel */
+.ei-sync-msg,
+.ei-selection-hint,
+.ei-map-truncated {
+  font-size: 0.875rem !important;
+}
+
+.ei-drawer-title {
+  font-size: 1.35rem !important;
+}
+
+.ei-drawer-kv,
+.ei-popup-row {
+  font-size: 0.875rem !important;
+}
+
+/* Mobile — never shrink below readable */
+@media (max-width: 768px) {
+  html { font-size: 16px; }
+  .app-sidebar a.nav-pill { font-size: 0.9375rem !important; }
+  .page-header h1 { font-size: 1.5rem !important; }
+}

cockpit/static/css/palantir-theme.css

@@ -12,8 +12,9 @@ body {
   background: var(--bg-root);
   color: var(--text-primary);
   font-family: var(--font-sans);
-  font-size: 14px;
-  line-height: 1.5;
+  font-size: 16px;
+  line-height: 1.55;
+  letter-spacing: 0.01em;
 }
 
 a {
@@ -155,7 +156,7 @@ html {
 
 .panel h2 {
   margin: 0 0 1rem;
-  font-size: 0.8rem;
+  font-size: 1.0625rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--text-muted);
@@ -395,7 +396,7 @@ html {
 .data-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 0.8125rem;
+  font-size: 0.9375rem;
 }
 
 .data-table th,
@@ -408,7 +409,7 @@ html {
 .data-table th {
   color: var(--text-muted);
   font-weight: 600;
-  font-size: 0.7rem;
+  font-size: 0.8125rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -484,7 +485,7 @@ html {
 .drawer.open { transform: translateX(0); }
 .drawer-close { float: right; background: transparent; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; }
 .btn-group { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
-.btn-sm { padding: .25rem .55rem; font-size: 12px; }
+.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.875rem; min-height: 2rem; }
 .clickable-row { cursor: pointer; transition: background .15s; }
 .clickable-row:hover { background: var(--bg-hover); }
 .clickable-kpi { text-decoration: none; color: inherit; display: block; transition: transform .15s, box-shadow .15s; }
@@ -511,7 +512,7 @@ html {
 .chat-msg.user { background: rgba(0,200,255,.08); }
 .chat-msg.agent { background: var(--bg-root); border: 1px solid var(--border-subtle); }
 .chat-input { display: flex; gap: .5rem; }
-.page-tip { color: var(--text-muted); font-size: 13px; }
+.page-tip { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }
 .ai-output { white-space: pre-wrap; background: var(--bg-root); padding: 1rem; border-radius: var(--radius-md); min-height: 80px; }
 .log-list { list-style: none; padding: 0; max-height: 240px; overflow: auto; }
 body.drawer-open { overflow: hidden; }
@@ -674,7 +675,7 @@ body.drawer-open { overflow: hidden; }
 }
 @media (max-width: 600px) { .settings-form-grid { grid-template-columns: 1fr; } }
 
-.form-label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.75rem; }
+.form-label { display: block; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.75rem; }
 .form-label .form-input { margin-top: 0.25rem; }
 .form-check { display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0; font-size: 0.9rem; }
 

cockpit/static/css/tokens.css

@@ -24,6 +24,18 @@
   --radius-md: 8px;
   --radius-lg: 12px;
   --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
+  
+  /* Typography scale (16px root) */
+  --text-xs: 0.8125rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-md: 1.0625rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.75rem;
+  --leading: 1.55;
+  --leading-tight: 1.35;
   --font-mono: "JetBrains Mono", "Fira Code", monospace;
   --sidebar-width: 240px;
 }

cockpit/static/css/vertical-tabs.css

@@ -75,7 +75,7 @@
   border-radius: 8px;
   background: transparent;
   color: #94a3b8;
-  font-size: 0.8rem;
+  font-size: 0.9375rem;
   font-weight: 500;
   text-align: left;
   cursor: pointer;
@@ -158,7 +158,7 @@
 }
 .ei-vtab-sub {
   display: block;
-  font-size: 0.62rem;
+  font-size: 0.75rem;
   color: #64748b;
   margin-top: 0.1rem;
 }
@@ -169,7 +169,7 @@
   gap: 0.15rem;
 }
 .ei-vtab-key {
-  font-size: 0.55rem;
+  font-size: 0.6875rem;
   color: #475569;
   font-family: ui-monospace, monospace;
 }
@@ -203,7 +203,7 @@
 .vt-tab-panel-head p,
 .ei-tab-panel-head p {
   margin: 0.1rem 0 0;
-  font-size: 0.72rem;
+  font-size: 0.8125rem;
   color: #64748b;
 }
 .vt-tab-panel-body,

cockpit/templates/base.html

@@ -9,19 +9,23 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <meta name="apple-mobile-web-app-title" content="Foodlinkk" />
   <title>{% block title %}{{ page_title }} · Cucina{% endblock %}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" />
   <link rel="manifest" href="/static/manifest.json?v=2" />
   <link rel="icon" href="/static/icons/app-icon.svg" type="image/svg+xml" />
   <link rel="apple-touch-icon" href="/static/icons/app-icon.svg" />
-  <link rel="stylesheet" href="/static/css/palantir-theme.css?v=3" />
+  <link rel="stylesheet" href="/static/css/palantir-theme.css?v=4" />
   <link rel="stylesheet" href="/static/css/pulse-theme.css?v=2" />
   <link rel="stylesheet" href="/static/css/topnav-neo.css?v=6" />
-  <link rel="stylesheet" href="/static/css/vertical-tabs.css?v=8" />
+  <link rel="stylesheet" href="/static/css/vertical-tabs.css?v=9" />
   <link rel="stylesheet" href="/static/css/mobile.css?v=5" />
   <link rel="stylesheet" href="/static/css/herman-dashboard.css?v=22" />
   <script defer src="/static/js/alpine.min.js?v=2"></script>
   <script defer src="/static/js/htmx.min.js?v=2"></script>
   {% block extra_head %}{% endblock %}
-  <link rel="stylesheet" href="/static/css/app-sidebar-neo.css?v=7" />
+  <link rel="stylesheet" href="/static/css/app-sidebar-neo.css?v=8" />
+  <link rel="stylesheet" href="/static/css/cockpit-typography.css?v=1" />
   <link rel="stylesheet" href="/static/css/herman-assistant.css?v=1" />
 </head>
 <body x-data="appShell()" x-init="initApp()" :class="{ 'nav-open': navOpen, 'drawer-open': drawerOpen, 'brand-cucina': brand === 'cucina', 'brand-foodlinkk': brand === 'foodlinkk' }">