feat(blogs): markdown content pipeline, token fixes, and a redesign

apps/blogs/.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "blogs",
+      "runtimeExecutable": "npx",
+      "runtimeArgs": ["--no-install", "next", "dev", "--port", "7655"],
+      "port": 7655
+    }
+  ]
+}

apps/blogs/app/globals.css

@@ -10,13 +10,18 @@
   --font-data: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
   --font-serif: var(--font-instrument-serif), ui-serif, Georgia, serif;
 
-  --color-bg-base: #ffffff;
+  /* Canvas — near-white, never pure. DESIGN.md is explicit about this:
+     "Canvas base (near-white, never pure) #FCFCFD". Pure white was in
+     here by mistake and is the one value that flattens the whole
+     whitepaper feel. */
+  --color-bg-base: #fcfcfd;
   --color-bg-dark: #0a0a0a;
   --color-bg-deep: #050505;
 
   --color-text-base: #0a0a0a;
   --color-text-dark: #0a0a0a;
-  --color-text-secondary: #3f3f36;
+  /* was #3f3f36 — a typo. DESIGN.md secondary text is #3F3F46. */
+  --color-text-secondary: #3f3f46;
   --color-text-muted: #71717a;
 
   --color-brand-blue: #1456f0;
@@ -26,6 +31,15 @@
 
   --color-border-light: #f2f3f5;
   --color-border-gray: #e5e7eb;
+  /* Hairline and grid, named so components stop hardcoding them. */
+  --color-hairline: #e5e7eb;
+  --color-grid-line: rgba(20, 86, 240, 0.06);
+
+  /* Type scale. Display sizes carry -0.03em tracking per DESIGN.md;
+     mono eyebrows carry 0.16em. Encoded here so no component invents
+     its own. */
+  --tracking-display: -0.03em;
+  --tracking-eyebrow: 0.16em;
 
   /* shadcn/ui color mappings for Tailwind v4 */
   --color-background: hsl(var(--background));
@@ -80,17 +94,23 @@
 
 @layer base {
   html, body {
-    background-color: #ffffff !important;
-    color: #0a0a0a;
+    background-color: var(--color-bg-base);
+    color: var(--color-text-base);
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100%;
+    -webkit-font-smoothing: antialiased;
   }
 
   * {
     border-color: hsl(var(--border));
   }
+
+  /* Geist at 300 for body, per DESIGN.md's "extreme weight contrast". */
+  body {
+    font-weight: 300;
+  }
 }
 
 @layer utilities {
@@ -104,12 +124,41 @@
 
   .grid-paper {
     background-image:
-      linear-gradient(to right, rgba(20, 86, 240, 0.05) 1px, transparent 1px),
-      linear-gradient(to bottom, rgba(20, 86, 240, 0.05) 1px, transparent 1px);
+      linear-gradient(to right, var(--color-grid-line) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--color-grid-line) 1px, transparent 1px);
     background-size: 56px 56px;
   }
 
   .text-balance {
     text-wrap: balance;
   }
+
+  /* The single signal gradient. DESIGN.md permits it on exactly ONE line
+     per view, so this is a named utility rather than an inline gradient —
+     if it shows up twice on a screen, that is now visible in review. */
+  .signal-gradient {
+    background-image: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-pink));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  /* Geist Mono uppercase eyebrow. */
+  .eyebrow {
+    font-family: var(--font-data);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-eyebrow);
+    font-size: 0.6875rem;
+    color: var(--color-text-muted);
+  }
+
+  .tracking-display {
+    letter-spacing: var(--tracking-display);
+  }
+
+  /* tabular-nums on stats, per DESIGN.md. */
+  .stat {
+    font-family: var(--font-data);
+    font-variant-numeric: tabular-nums;
+  }
 }