From 63056f5b429938dc6ceaf3d8fe33259a1a80e71c Mon Sep 17 00:00:00 2001
From: kikimor <kikimor@gmail.com>
Date: Wed, 23 Sep 2026 20:09:39 +0300
Subject: [PATCH] Add typography and spacing design tokens

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/index.css         |  7 ++----
 frontend/src/styles/tokens.css | 42 +++++++++++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index ded8873..c6a74dc 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,9 +2,7 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: var(--bg);
@@ -12,8 +10,7 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: var(--font-mono);
 }
 
 * {
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
index 6ad2324..9f0ddc7 100644
--- a/frontend/src/styles/tokens.css
+++ b/frontend/src/styles/tokens.css
@@ -1,5 +1,6 @@
 /**
- * Design tokens — the single place every colour, radius and shadow is defined.
+ * Design tokens — the single place every colour, radius, shadow, font size
+ * and spacing step is defined.
  *
  * Two themes today: `classic` (the app's original light look) and `cockpit`
  * (dark, derived from the weigh-station reference image). A third theme is one
@@ -152,6 +153,45 @@
   --hazard: repeating-linear-gradient(-45deg, var(--warning) 0 7px, transparent 7px 15px);
 }
 
+/* Type and spacing are shared by every theme, so they live in a plain :root
+   block rather than being repeated per theme. A theme that wants a different
+   value (say a larger --fs-display for cockpit) overrides just that token in
+   its own block, whose attribute selector outranks this one. */
+:root {
+  /* Type */
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'Courier New', Consolas, monospace;
+
+  --fs-xs: 11px;
+  --fs-sm: 12px;
+  --fs-base: 13px;
+  --fs-md: 14px;
+  --fs-lg: 16px;
+  --fs-xl: 18px;
+  --fs-2xl: 22px;
+  --fs-3xl: 28px;
+  --fs-display: 32px; /* big figures: the weight reading etc. */
+
+  --fw-regular: 400;
+  --fw-medium: 500;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+
+  /* Spacing — a 4px grid plus the half-steps (6, 10) this UI leans on too
+     often to snap away. Off-scale values snap to the nearest step. */
+  --space-0-5: 2px;
+  --space-1: 4px;
+  --space-1-5: 6px;
+  --space-2: 8px;
+  --space-2-5: 10px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+}
+
 /* Native form controls and scrollbars follow the theme, so a dark theme does
    not get a white dropdown or a light scrollbar track. */
 :root[data-theme="cockpit"] {