From e7a6f67ca2de87f9bd20354619a4f93ab0d8b3e3 Mon Sep 17 00:00:00 2001 From: cjimti Date: Mon, 13 Jul 2026 18:09:26 -0700 Subject: [PATCH] docs: graphite re-skin (type, color, chrome) Re-skin txn2.com onto the graphite design system so the org site matches the sibling documentation sites. Type and color: replace the Fraunces display serif with Geist / Geist Mono and move the palette to the graphite grey ground (--ink #1E232A) with a single cyan accent. Remove the warm and lime background glows, soften the vignette, and remap the former orange tints to cyan. Chrome: remove the live UTC clock from the rail and footer and its JS. Non-italic mono display headings. Cap the hero so all three rows clear the right-pinned stamp. Drop the split-word dropcap and the feature-list numbering and caps chips (ul, name + description). Remap the homepage mermaid diagram's hardcoded palette to the graphite tokens. tokens.json and DESIGN.md are updated in lockstep with site.css so the canonical design reference matches the rendered site. --- DESIGN.md | 160 +++++++++++++++---------------- layouts/_default/baseof.html | 11 +-- layouts/index.html | 44 +++------ layouts/partials/footer.html | 3 +- static/css/site.css | 181 ++++++++++++----------------------- static/js/site.js | 15 --- tokens.json | 68 ++++++------- 7 files changed, 193 insertions(+), 289 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 6fc363e..6110438 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -5,35 +5,35 @@ name: txn2 description: Visual identity for txn2.com and reference for any sibling site that wants to adopt the same look. The aesthetic is a dark engineering field-notebook, not a marketing page. colors: - ink: "#0B0B09" - ink-2: "#131310" - ink-3: "#1B1A15" - rule: "#2A2922" - rule-2: "#3A3830" - paper: "#ECE3CE" - paper-dim: "#C9C0AB" - mute: "#968F80" - mute-2: "#5A554B" - signal: "#FF5A1F" - signal-2: "#FF8A4C" - acid: "#E1FF6E" - cool: "#6FE1FF" + ink: "#1E232A" + ink-2: "#262C34" + ink-3: "#2F3640" + rule: "#3A424C" + rule-2: "#47515C" + paper: "#EDF1F5" + paper-dim: "#C4CCD4" + mute: "#8A95A0" + mute-2: "#5C6670" + signal: "#4FC7E6" + signal-2: "#7FD6EC" + acid: "#9BCB86" + cool: "#8FB6D6" typography: serif: - fontFamily: "Fraunces, 'Times New Roman', serif" + fontFamily: "Geist Mono, ui-monospace, 'SF Mono', Menlo, monospace" weights: [300, 400, 700] - italic: true - use: "display, hero, section titles, drop caps, italic emphasis" + italic: false + use: "display, hero, section titles" sans: - fontFamily: "'Instrument Sans', -apple-system, 'Helvetica Neue', sans-serif" + fontFamily: "Geist, -apple-system, 'Helvetica Neue', sans-serif" weights: [400, 700] use: "body, lede, lists, footer text" mono: - fontFamily: "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace" + fontFamily: "Geist Mono, ui-monospace, 'SF Mono', Menlo, monospace" weights: [400, 700] use: "rail, ID stamps, labels, terminal, ticker, footer mono" - google-fonts: "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Instrument+Sans:wght@400..700&family=JetBrains+Mono:wght@400..700&display=swap" + google-fonts: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" spacing: measure: "64ch" @@ -69,17 +69,17 @@ components: border: "1px solid {colors.rule}" rounded: "0" shadow: "none" - accent: "1px signal-orange line on top, animates from 56px to 100% on hover" + accent: "1px signal-cyan line on top, animates from 56px to 100% on hover" --- ## Overview -txn2.com is the canonical visual identity for the txn2 organization's open source components. The aesthetic is dark, technical, editorial: a warm-black canvas with a single signal-orange accent, an italic serif display paired with a refined sans body and a monospace label voice, framed by a low-opacity engineering blueprint grid and corner crosshairs. It should read as an engineering field-notebook, not a marketing site. +txn2.com is the canonical visual identity for the txn2 organization's open source components. The aesthetic is dark, technical, editorial: a graphite canvas with a single signal-cyan accent, a mono display paired with a refined sans body and a monospace label voice, framed by a low-opacity engineering blueprint grid and corner crosshairs. It should read as an engineering field-notebook, not a marketing site. Three commitments shape every decision: -1. Restraint with the accent. Signal orange (`#FF5A1F`) is the only saturated colour. It marks state, focus, primary CTA, and one detail per surface. Never a background, never large fills. -2. Type as the main visual element. Fraunces italic at display sizes carries the page; everything else is quiet so the type can speak. +1. Restraint with the accent. The signal cyan (`#4FC7E6`) is the only saturated colour. It marks state, focus, primary CTA, and one detail per surface. Never a background, never large fills. +2. Type as the main visual element. Geist Mono at display sizes carries the page; everything else is quiet so the type can speak. 3. Information density without clutter. Section indices, ID stamps, monospace metadata, blueprint grid, ticker, and the technical-journal voice carry density without ornament. This file is the canonical source. The W3C DTCG-compliant sidecar is `tokens.json` at the repo root. @@ -90,55 +90,55 @@ The palette is a single warm-dark scale plus one signal accent and two reserve a | Token | Hex | Use | |-------------|------------|-----| -| `ink` | `#0B0B09` | Page canvas. Body background. Selection text. | -| `ink-2` | `#131310` | Card surface, body gradient endpoint. | -| `ink-3` | `#1B1A15` | Mermaid background, schema panels, hover gradients. | -| `rule` | `#2A2922` | Subtle borders, dashed dividers. | -| `rule-2` | `#3A3830` | Stronger borders, button outlines. | -| `paper` | `#ECE3CE` | Body text. Selection background. Outline-stroke colour for the hero. | -| `paper-dim` | `#C9C0AB` | Secondary body text. | -| `mute` | `#968F80` | Muted text, mono labels. WCAG AA on `ink` at small sizes (5.79:1). | -| `mute-2` | `#5A554B` | Crosshair lines, footer base, dot separators. | -| `signal` | `#FF5A1F` | The one accent. Focus ring, primary CTA, links on hover, version stamp, drop cap, terminal prompt `$`. | -| `signal-2` | `#FF8A4C` | Hover state for `signal`. | -| `acid` | `#E1FF6E` | Terminal success ticks only. Never UI chrome. | -| `cool` | `#6FE1FF` | Reserved. Currently unused. | +| `ink` | `#1E232A` | Page canvas. Body background. Selection text. | +| `ink-2` | `#262C34` | Card surface, body gradient endpoint. | +| `ink-3` | `#2F3640` | Mermaid background, schema panels, hover gradients. | +| `rule` | `#3A424C` | Subtle borders, dashed dividers. | +| `rule-2` | `#47515C` | Stronger borders, button outlines. | +| `paper` | `#EDF1F5` | Body text. Selection background. Outline-stroke colour for the hero. | +| `paper-dim` | `#C4CCD4` | Secondary body text. | +| `mute` | `#8A95A0` | Muted text, mono labels. WCAG AA on `ink` at small sizes (5.79:1). | +| `mute-2` | `#5C6670` | Crosshair lines, footer base, dot separators. | +| `signal` | `#4FC7E6` | The one accent. Focus ring, primary CTA, links on hover, version stamp, terminal prompt `$`. | +| `signal-2` | `#7FD6EC` | Hover state for `signal`. | +| `acid` | `#9BCB86` | Terminal success ticks only (muted green). Never UI chrome. | +| `cool` | `#8FB6D6` | Reserved (cool blue-grey). Currently unused. | Rules: - Body copy is `paper` on `ink`. Secondary copy is `paper-dim`. Muted metadata is `mute`. Anything below `mute` reads as decorative; do not put real information there. - Never put `paper-dim` text under 14px. Drop to `mute` instead, which is calibrated for small-text contrast. -- The signal orange is sparing. If a surface has more than one orange element above the fold, drop one. +- The signal cyan is sparing. If a surface has more than one accented element above the fold, drop one. - Selection inverts: `signal` background, `ink` text. ## Typography Three families, no exceptions. -- **Fraunces** (Google Fonts variable, `opsz 9..144`, `wght 300..700`, italic + roman). Display only. Always italic at display sizes; the page identity depends on it. The `SOFT` axis was dropped to cut payload. -- **Instrument Sans** (Google Fonts, weights `400..700`, roman only). Body, leds, lists, footer text. No italic axis loaded. -- **JetBrains Mono** (Google Fonts, weights `400..700`, roman only). Rail, ID stamps, labels, terminal demos, ticker, footer mono. No italic axis loaded. +- **Geist Mono** (Google Fonts, `wght 400..600`, roman). Display only, non-italic; the page identity depends on it. +- **Geist** (Google Fonts, weights `400..700`, roman). Body, ledes, lists, footer text. +- **Geist Mono** (Google Fonts, weights `400..600`, roman). Rail, ID stamps, labels, terminal demos, ticker, footer mono. The single `` request: ``` -https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Instrument+Sans:wght@400..700&family=JetBrains+Mono:wght@400..700&display=swap +https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap ``` Type scale (verified in the live site): | Role | Family | Weight | Size | Notes | |-----------------|----------|--------|-----------------------------------|-------| -| Hero display | Fraunces | 300 | `clamp(60px, 12.5vw, 220px)` | italic, `opsz 144`, `letter-spacing -0.04em`, `line-height 0.92` | -| Section title | Fraunces | 300 | `clamp(36px, 5.5vw, 76px)` | `letter-spacing -0.025em`, `line-height 1.0` | -| Coda statement | Fraunces | 300 | `clamp(28px, 3.6vw, 52px)` | `letter-spacing -0.02em` | -| Card name | Fraunces | 300 | `clamp(48px, 5vw, 80px)` | `line-height 0.95`, `opsz 144` | -| Stack row name | Fraunces | 400 | `clamp(24px, 2.5vw, 34px)` | italic | -| Body | Instrument Sans | 400 | `17px` | `line-height 1.55` | -| Lede | Instrument Sans | 400 | `clamp(15px, 1.1vw, 18px)` | `line-height 1.6` | -| Mono label | JetBrains Mono | 700 | `11px` | `letter-spacing 0.18em`, uppercase | -| Mono body | JetBrains Mono | 400 | `13px` | `letter-spacing 0.04em` | -| Terminal body | JetBrains Mono | 400 | `12.5px` | `line-height 1.7` | +| Hero display | Geist Mono | 500 | `clamp(28px, 4vw, 64px)` | `letter-spacing -0.02em`, `line-height 1.04` | +| Section title | Geist Mono | 600 | `clamp(28px, 3.8vw, 52px)` | `letter-spacing -0.02em`, `line-height 1.08` | +| Coda statement | Geist Mono | 500 | `clamp(14px, 1.05vw, 16px)` | reading size, `line-height 1.6` | +| Card name | Geist Mono | 600 | `clamp(30px, 3.4vw, 48px)` | `line-height 1.0` | +| Stack row name | Geist Mono | 600 | `clamp(22px, 2.2vw, 30px)` | `line-height 1.1` | +| Body | Geist | 400 | `17px` | `line-height 1.55` | +| Lede | Geist | 400 | `clamp(15px, 1.1vw, 18px)` | `line-height 1.6` | +| Mono label | Geist Mono | 700 | `11px` | `letter-spacing 0.18em`, uppercase | +| Mono body | Geist Mono | 400 | `13px` | `letter-spacing 0.04em` | +| Terminal body | Geist Mono | 400 | `12.5px` | `line-height 1.7` | Class anchors (grep `static/css/site.css`): `.hero__display`, `.section__title`, `.coda__big`, `.flagship__name`, `.stack__name`, `.hero__lede`, `.section__index`, `.terminal__body`. @@ -218,16 +218,16 @@ Each entry below names the canonical class, lists its key tokens, and gives one Sticky header. Three-column grid (`brand | meta | nav`), backdrop-blur, monospace, lowercase, 12px. - **Background** `rgba(11,11,9,0.72)` with `backdrop-filter: blur(14px) saturate(140%)`. -- **Brand** `◐` mark (signal orange, slow spin) + Fraunces italic 22px name + middle-dot separator + paper-dim subtitle. +- **Brand** `◐` mark (signal cyan, slow spin) + Geist Mono 22px name + middle-dot separator + paper-dim subtitle. - **Meta** centre slot: release stamp, dot, UTC clock, dot, location. - **Nav** lowercase mono links, ending with a `.rail__cta` solid signal CTA. Do: keep the meta strip ornamental. Hide it below 1080px. Don't: add more than four nav items. The rail is not a sitemap. -### `.hero` (three-row Fraunces display) +### `.hero` (three-row Geist Mono display) -Three rows with hand-tuned indents. Italic outer rows, outline (`-webkit-text-stroke`) middle row. +Three rows with hand-tuned indents. Mono outer rows, outline (`-webkit-text-stroke`) middle row. ```html

@@ -244,7 +244,7 @@ This indent-asymmetry variant is reserved for the txn2.com org landing. Every pr ### `.hero__main` and `.hero__mark` (project symbol + display) -Project sites pair the typographic display with a square geometric symbol mark on its left. `.hero__main` is a flex container; `.hero__mark` holds the inline SVG glyph; `.hero__display` retains the three-row Fraunces stack but drops the asymmetric indents (the symbol takes the role of the visual anchor). +Project sites pair the typographic display with a square geometric symbol mark on its left. `.hero__main` is a flex container; `.hero__mark` holds the inline SVG glyph; `.hero__display` retains the three-row Geist Mono stack but drops the asymmetric indents (the symbol takes the role of the visual anchor). ```html
@@ -294,21 +294,21 @@ Symbol contract: - On `.hero__mark:hover`, `transform: rotate(-8deg) scale(1.03);` over `0.45s ease` and the breath accelerates to `2.2s`. - `prefers-reduced-motion: reduce` cancels the breath. -Do: keep one accent shape per symbol so the single-signal-orange rule holds. +Do: keep one accent shape per symbol so the single-signal-cyan rule holds. Don't: use a typographic logotype in `.hero__mark`. The mark is geometric. Wordmarks live in the rail and in `.hero__display`. The mark file lives at `docs/images/PROJECT-symbol.svg` (mkdocs project sites) or `static/images/PROJECT-symbol.svg` (Hugo). Strip width/height from the file root and rely on viewBox so the mark scales cleanly to any container. ### `.flagship__card` (kubefwd, txeh) -Used for the two utility cards. Top accent line in signal orange grows from 56px to 100% on hover. No shadow. +Used for the two utility cards. Top accent line in signal cyan grows from 56px to 100% on hover. No shadow. - `padding: 36px 36px 28px` - `background: var(--ink-2)` - `border: 1px solid var(--rule)` - `:hover` `border-color: var(--rule-2)` and `transform: translateY(-3px)` -Internal slots: `flagship__head` (mono ID stamp + Fraunces name + tag), `flagship__body` (sans paragraph), `flagship__demo` (terminal block), `flagship__foot` (CTA buttons separated by 12px gap). +Internal slots: `flagship__head` (mono ID stamp + Geist Mono name + tag), `flagship__body` (sans paragraph), `flagship__demo` (terminal block), `flagship__foot` (CTA buttons separated by 12px gap). Do: include a working terminal demo in `flagship__demo`. Real commands. Don't: invent CLI output. If a command has no deterministic output, just show the invocation. @@ -325,15 +325,15 @@ mermaid.initialize({ securityLevel: 'strict', theme: 'base', themeVariables: { - background: '#15140F', - primaryColor: '#15140F', - primaryTextColor: '#ECE3CE', - primaryBorderColor: '#3A3830', - secondaryColor: '#1B1A15', - tertiaryColor: '#15140F', - lineColor: '#968F80', - textColor: '#ECE3CE', - fontFamily: '"JetBrains Mono", ui-monospace, monospace', + background: '#2F3640', + primaryColor: '#2F3640', + primaryTextColor: '#EDF1F5', + primaryBorderColor: '#47515C', + secondaryColor: '#2F3640', + tertiaryColor: '#2F3640', + lineColor: '#8A95A0', + textColor: '#EDF1F5', + fontFamily: '"Geist Mono", ui-monospace, monospace', fontSize: '13px' }, flowchart: { curve: 'basis', padding: 16 } @@ -341,7 +341,7 @@ mermaid.initialize({ await mermaid.run({ querySelector: '.mermaid' }); ``` -Highlight one node per diagram with `classDef accent fill:#15140F,stroke:#FF5A1F,color:#ECE3CE` and a `class XYZ accent` line. +Highlight one node per diagram with `classDef accent fill:#2F3640,stroke:#4FC7E6,color:#EDF1F5` and a `class XYZ accent` line. Do: use Mermaid for any architecture diagram. Don't: use ASCII art in `
` blocks. ASCII does not scale, does not respond, does not survive layout changes.
@@ -357,7 +357,7 @@ The only component that takes elevation.
 
 Inside, the macOS-style traffic-light dots are decorative (`.terminal__bar span` x3, red/yellow/green). The `
` uses three colour classes:
 
-- `.t-prompt`  signal orange (the `$` prompt).
+- `.t-prompt`  signal cyan (the `$` prompt).
 - `.t-ok`      acid lime (success ticks).
 - `.t-mute`    paper-dim grey (info/comments).
 
@@ -366,7 +366,7 @@ Inside, the macOS-style traffic-light dots are decorative (`.terminal__bar span`
 Three variants:
 
 - `.btn` outline. 12px mono, uppercase, `rule-2` border, transparent background. Inverts on hover (paper bg, ink text).
-- `.btn--accent` solid signal-orange fill, ink text. Used for primary CTAs.
+- `.btn--accent` solid signal-cyan fill, ink text. Used for primary CTAs.
 - `.btn--big` paper background, ink text, 18px padding, `font-weight: 700`. Used for the closing GitHub CTA.
 
 Do: use one `.btn--accent` per surface. The accent is loud.
@@ -374,25 +374,25 @@ Don't: replace `.btn` with a custom anchor element. The keyboard focus styles ar
 
 ### `.stack__row` (other components list)
 
-Numbered list rows in a 4-column grid (`80px 1fr 130px 40px`) with a Fraunces italic project name, `mute` description, monospace category tag, and an arrow indicator. Hover slides the content right, brightens the name and arrow to signal orange.
+Numbered list rows in a 4-column grid (`1fr auto`) with a Geist Mono project name, `mute` description, monospace category tag, and an arrow indicator. Hover slides the content right, brightens the name and arrow to signal cyan.
 
 Do: keep entries to one short factual sentence each.
 Don't: editorialise. The stack is a registry, not a brochure.
 
 ### `.coda` and `.footer`
 
-The closing `coda` is a single block of Fraunces 300 italic on a left-border signal accent, followed by buttons for the canonical outbound links. The footer is a five-column grid (`about / txn2 / sponsors / craig / build`) collapsing 5 → 3 → 2 → 1 across the breakpoints. Footer mono labels are signal orange. Footer body text is `paper-dim` on `ink`.
+The closing `coda` is a single block of Geist Mono 500 on a left-border signal accent, followed by buttons for the canonical outbound links. The footer is a five-column grid (`about / txn2 / sponsors / craig / build`) collapsing 5 → 3 → 2 → 1 across the breakpoints. Footer mono labels are signal cyan. Footer body text is `paper-dim` on `ink`.
 
 ## Do's and Don'ts
 
 Design rules that overrule taste:
 
 - **No card shadows.** The terminal is the only elevated component.
-- **No purple gradients.** No "AI-generated" colour schemes. Warm-black plus signal-orange. Period.
+- **No purple gradients.** No "AI-generated" colour schemes. Warm-black plus signal-cyan. Period.
 - **No centred hero.** The page is asymmetric and left-aligned on purpose.
 - **No all-caps body text.** Uppercase is reserved for mono labels.
 - **Blueprint grid stays at opacity 0.04.** It is a texture, not a feature.
-- **One signal-orange element above the fold per surface.** If you find yourself adding a second, find a way to remove the first.
+- **One signal-cyan element above the fold per surface.** If you find yourself adding a second, find a way to remove the first.
 - **Section indices use `§ 01 / title`.** Never the U+2014 character between number and title.
 - **Mermaid for architecture diagrams.** Never ASCII art.
 - **Skip-to-content link and `:focus-visible` outlines on every interactive element.** No exceptions.
@@ -467,11 +467,11 @@ Every page emits a `SoftwareApplication` block. Search engines dedupe across pag
 
 Every project ships a `1200 x 630` PNG OG card at `docs/images/PROJECT-og.png`. The card mirrors the homepage hero, not a screenshot of the app. Composition:
 
-- Warm-black canvas (`#0B0B09`) with the same subtle warm-tint radial wash and 60px blueprint grid at `0.04` opacity used by the rail.
-- Crosshair ticks at all four corners (`#5A554B`, 28px arms).
-- Top rail strip: Fraunces italic project name + JetBrains Mono subtitle on the left, signal-orange `TXN2 / OPEN SOURCE` capsule on the right, 1px rule below.
-- Centre: project symbol mark on the left at ~280px square (the `.hero__mark` glyph; paper linework + signal-orange accent), three-row Fraunces display on the right (`mcp-s3` / `object storage` / `for ai.`) with the middle row as a `-webkit-text-stroke` outline.
-- Bottom strip: 1px rule, signal-orange registration tick + JetBrains Mono mono caption (`APACHE 2.0  ·  COMPOSABLE MCP SERVER  ·  GO  ·  READ-ONLY BY DEFAULT`) on the left, signal-orange `PROJECT.TXN2.COM ↗` on the right.
+- Warm-black canvas (`#1E232A`) with the same subtle warm-tint radial wash and 60px blueprint grid at `0.04` opacity used by the rail.
+- Crosshair ticks at all four corners (`#5C6670`, 28px arms).
+- Top rail strip: Geist Mono project name + Geist Mono subtitle on the left, signal-cyan `TXN2 / OPEN SOURCE` capsule on the right, 1px rule below.
+- Centre: project symbol mark on the left at ~280px square (the `.hero__mark` glyph; paper linework + signal-cyan accent), three-row Geist Mono display on the right (`mcp-s3` / `object storage` / `for ai.`) with the middle row as a `-webkit-text-stroke` outline.
+- Bottom strip: 1px rule, signal-cyan registration tick + Geist Mono mono caption (`APACHE 2.0  ·  COMPOSABLE MCP SERVER  ·  GO  ·  READ-ONLY BY DEFAULT`) on the left, signal-cyan `PROJECT.TXN2.COM ↗` on the right.
 
 The card is authored as an SVG (`docs/images/PROJECT-og.svg`) and rasterised to PNG at 1200 x 630 with `rsvg-convert`. Both files ship; the PNG is what social platforms fetch, the SVG is the source of truth.
 
@@ -479,7 +479,7 @@ The card is authored as an SVG (`docs/images/PROJECT-og.svg`) and rasterised to
 rsvg-convert -w 1200 -h 630 -o docs/images/PROJECT-og.png docs/images/PROJECT-og.svg
 ```
 
-Fonts in the SVG: declare `font-family="Fraunces, Georgia, serif"` and `font-family="JetBrains Mono, Menlo, monospace"` so rasterisation falls back gracefully when the design fonts are not installed locally. Do not embed full font files in the SVG; the PNG already captures the rendered glyphs.
+Fonts in the SVG: declare `font-family="Geist Mono, Georgia, serif"` and `font-family="Geist Mono, Menlo, monospace"` so rasterisation falls back gracefully when the design fonts are not installed locally. Do not embed full font files in the SVG; the PNG already captures the rendered glyphs.
 
 ### `llms.txt`
 
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index b7d5535..9ad844f 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -129,8 +129,8 @@
     
     
     
-    
-    
+    
+    
 
     {{ with .OutputFormats.Get "RSS" -}}
         
@@ -139,10 +139,9 @@
     
     
     {{/* Trimmed font axes: only the families/weights the site actually uses.
-         Fraunces: italic + roman with opsz/wght (drop SOFT axis to cut payload).
-         Instrument Sans: roman only, 400-700.
-         JetBrains Mono: roman only, 400-700. */}}
-    
+         Geist: body and UI, weights 400-700.
+         Geist Mono: display headings, rail, labels, terminal, weights 400-600. */}}
+    
 
     
 
diff --git a/layouts/index.html b/layouts/index.html
index 09c30d6..e864b0e 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -21,8 +21,6 @@
         
         

                 
@@ -280,71 +278,57 @@ 

             

         
 
-        
    
+        
      
             
    • 
-                001
                 
      
                     portpxy
                     
      HTTP reverse proxy that routes requests to backend ports specified in the URL path (/8081/foo → backend:8081/foo). Useful for exposing dynamic ports (NiFi listeners, webhook receivers) through a single Kubernetes ingress.
      
                 
      
-                network
                 
             
      • 
             
    • 
-                002
                 
      
                     jwtpxy
                     
      Reverse proxy that pre-validates JWTs against Keycloak (or any OIDC realm) and forwards parsed claims as HTTP headers. Backend services read user, roles, and realm-access from headers. No token-handling library required.
      
                 
      
-                auth
                 
             
      • 
             
    • 
-                003
                 
      
                     amp
                     
      Kubernetes Admission Mutation Proxy. Forwards Pod admission reviews to a custom HTTP endpoint and applies the JSONPatch operations it returns. Originally built to inject per-user volumes and env vars into JupyterHub-spawned Pods.
      
                 
      
-                k8s
                 
             
      • 
             
    • 
-                004
                 
      
                     rxtx
                     
      Queue-based data collector with store-and-forward. Buffers HTTP POST data when downstream is offline, replays when it comes back. Built for IoT and edge collection where the network blinks.
      
                 
      
-                data
                 
             
      • 
             
    • 
-                005
                 
      
                     asws
                     
      Another static web server. Serves a directory and exposes its listing through a JSON REST API. Useful for download pages, asset catalogs, and any web app that wants to enumerate what's on disk without writing a backend.
      
                 
      
-                web
                 
             
      • 
             
    • 
-                006
                 
      
                     mcp-common
                     
      Shared MCP Go library: interfaces, types, middleware patterns, and utilities. The substrate behind mcp-trino, mcp-datahub, mcp-s3, and any custom server that wants to drop into the same composable stack.
      
                 
      
-                mcp · lib
                 
             
      • 
             
    • 
-                ···
                 
      
                     all repositories on github
                     
      Full list of source repositories under the txn2 organization.
      
                 
      
-                + more
                 
             
      • 
-        

+        
     
 
     {{/* ABOUT */}}
@@ -376,15 +360,15 @@ 

             securityLevel: 'strict',
             theme: 'base',
             themeVariables: {
-                background:         '#15140F',
-                primaryColor:       '#15140F',
-                primaryTextColor:   '#ECE3CE',
-                primaryBorderColor: '#3A3830',
-                secondaryColor:     '#1B1A15',
-                tertiaryColor:      '#15140F',
-                lineColor:          '#968F80',
-                textColor:          '#ECE3CE',
-                fontFamily:         '"JetBrains Mono", ui-monospace, monospace',
+                background:         '#2F3640',
+                primaryColor:       '#2F3640',
+                primaryTextColor:   '#EDF1F5',
+                primaryBorderColor: '#47515C',
+                secondaryColor:     '#2F3640',
+                tertiaryColor:      '#2F3640',
+                lineColor:          '#8A95A0',
+                textColor:          '#EDF1F5',
+                fontFamily:         '"Geist Mono", ui-monospace, monospace',
                 fontSize:           '13px'
             },
             flowchart: { curve: 'basis', padding: 16 }
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 58e30b4..6e4e00f 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -33,8 +33,7 @@
         

             
build

             
{{ .Site.Params.version | default "dev" }} · built {{ now.Format "2006.01.02" }}

-            los angeles, ca · 34.05° / −118.24°

-            ·· UTC

+            los angeles, ca · 34.05° / −118.24°
diff --git a/static/css/site.css b/static/css/site.css index f8150a1..e67da45 100644 --- a/static/css/site.css +++ b/static/css/site.css @@ -1,32 +1,32 @@ /* ──────────────────────────────────────────────────────────────── txn2 / open source components - a small engineering-journal aesthetic, dark canvas, signal orange + a small engineering-journal aesthetic, graphite canvas, single cyan accent ─────────────────────────────────────────────────────────────── */ :root { /* canvas */ - --ink: #0B0B09; /* warm near-black */ - --ink-2: #131310; /* surface */ - --ink-3: #1B1A15; /* card */ - --rule: #2A2922; /* subtle borders */ - --rule-2: #3A3830; /* stronger borders */ + --ink: #1E232A; /* warm near-black */ + --ink-2: #262C34; /* surface */ + --ink-3: #2F3640; /* card */ + --rule: #3A424C; /* subtle borders */ + --rule-2: #47515C; /* stronger borders */ /* type */ - --paper: #ECE3CE; /* warm parchment */ - --paper-dim: #C9C0AB; - --mute: #968F80; /* WCAG AA at small sizes on --ink */ - --mute-2: #5A554B; + --paper: #EDF1F5; /* warm parchment */ + --paper-dim: #C4CCD4; + --mute: #8A95A0; /* WCAG AA at small sizes on --ink */ + --mute-2: #5C6670; /* accents */ - --signal: #FF5A1F; /* signal orange */ - --signal-2: #FF8A4C; - --acid: #E1FF6E; /* electric lime, used sparingly */ - --cool: #6FE1FF; /* coolant blue, sparingly */ + --signal: #4FC7E6; /* signal cyan */ + --signal-2: #7FD6EC; + --acid: #9BCB86; /* electric lime, used sparingly */ + --cool: #8FB6D6; /* coolant blue, sparingly */ /* type stacks */ - --serif: "Fraunces", "Times New Roman", serif; - --sans: "Instrument Sans", -apple-system, "Helvetica Neue", sans-serif; - --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; + --serif: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; + --sans: "Geist", -apple-system, "Helvetica Neue", sans-serif; + --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* metrics */ --measure: 64ch; @@ -53,8 +53,6 @@ html, body { body { min-height: 100vh; background-image: - radial-gradient(circle at 18% 6%, rgba(255,90,31,0.05), transparent 38%), - radial-gradient(circle at 92% 84%, rgba(225,255,110,0.025), transparent 42%), linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); } @@ -105,7 +103,7 @@ a:hover { color: var(--signal); } img { max-width: 100%; display: block; } code, pre, .mono { font-family: var(--mono); } -em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } +em.serif { font-family: var(--serif); font-style: normal; font-weight: 500; } /* film grain + vignette overlays */ .grain, @@ -118,7 +116,7 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } mix-blend-mode: overlay; } .vignette { - background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 100%); + background: radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,0.14) 100%); } /* ────────────────────────────────────────────────────────────── @@ -139,8 +137,8 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } .blueprint__grid { position: absolute; inset: 0; background-image: - linear-gradient(to right, rgba(236,227,206,0.04) 1px, transparent 1px), - linear-gradient(to bottom, rgba(236,227,206,0.04) 1px, transparent 1px); + linear-gradient(to right, rgba(199,204,212,0.04) 1px, transparent 1px), + linear-gradient(to bottom, rgba(199,204,212,0.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(180deg, transparent, black 12%, black 88%, transparent); } @@ -194,13 +192,13 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } animation: spin 24s linear infinite; } .rail__name { - font-family: var(--serif); - font-style: italic; - font-size: 22px; + font-family: var(--mono); + font-style: normal; + font-size: 15px; text-transform: lowercase; letter-spacing: -0.01em; color: var(--paper); - font-weight: 400; + font-weight: 600; } .rail__sep { color: var(--rule-2); } .rail__sub { color: var(--mute); } @@ -286,12 +284,11 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } .hero__display { font-family: var(--serif); - font-weight: 300; - font-size: clamp(60px, 12.5vw, 220px); - line-height: 0.92; - letter-spacing: -0.04em; + font-weight: 500; + font-size: clamp(28px, 4vw, 64px); + line-height: 1.04; + letter-spacing: -0.02em; margin-bottom: 56px; - font-variation-settings: "opsz" 144, "SOFT" 60; } .hero__row { display: flex; align-items: baseline; gap: clamp(12px, 2vw, 36px); @@ -309,9 +306,8 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } animation: rise 1.1s .55s both ease-out; } .hero__row em.serif { - font-style: italic; + font-style: normal; color: var(--paper); - font-variation-settings: "opsz" 144, "SOFT" 80; } .outline { -webkit-text-stroke: 1.5px var(--paper); @@ -320,20 +316,6 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } font-weight: 400; font-family: var(--serif); } -.hero__chip { - font-family: var(--mono); - font-size: 13px; - letter-spacing: 0.04em; - color: var(--mute); - background: var(--ink-3); - border: 1px solid var(--rule); - padding: 6px 12px; - border-radius: 2px; - text-transform: uppercase; - align-self: center; - transform: translateY(-12px); - white-space: nowrap; -} .hero__intro { display: grid; @@ -355,23 +337,10 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } .hero__lede strong { color: var(--paper); font-weight: 600; } .hero__lede--muted { color: var(--mute); } -.dropcap { - font-family: var(--serif); - font-style: italic; - font-size: 3.4em; - line-height: 0.85; - float: left; - padding: 6px 10px 0 0; - color: var(--signal); - font-weight: 400; - font-variation-settings: "opsz" 144; -} - @media (max-width: 760px) { .hero__stamp { position: static; text-align: left; border-right: 0; border-left: 1px solid var(--signal); padding-right: 0; padding-left: 14px; margin-bottom: 36px; } .hero__intro { grid-template-columns: 1fr; padding-left: 0; } .hero__row--2, .hero__row--3 { padding-left: 0; } - .hero__chip { display: none; } } /* ticker */ @@ -431,15 +400,14 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } } .section__title { font-family: var(--serif); - font-weight: 300; - font-size: clamp(36px, 5.5vw, 76px); - line-height: 1.0; - letter-spacing: -0.025em; + font-weight: 600; + font-size: clamp(28px, 3.8vw, 52px); + line-height: 1.08; + letter-spacing: -0.02em; color: var(--paper); - font-variation-settings: "opsz" 144; margin-bottom: 24px; } -.section__title em.serif { color: var(--signal); font-style: italic; } +.section__title em.serif { color: var(--signal); font-style: normal; } .section__lede { color: var(--paper-dim); max-width: 64ch; @@ -503,7 +471,6 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } line-height: 0.95; letter-spacing: -0.03em; color: var(--paper); - font-variation-settings: "opsz" 144; margin-bottom: 12px; } .flagship__tag { @@ -516,7 +483,7 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } .flagship__tag code { font-size: .92em; color: var(--signal); - background: rgba(255,90,31,0.08); + background: rgba(79,199,230,0.08); padding: 1px 6px; border-radius: 2px; } @@ -529,7 +496,7 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } } .flagship__body code { color: var(--signal-2); - background: rgba(255,90,31,0.07); + background: rgba(79,199,230,0.07); padding: 1px 5px; border-radius: 2px; font-size: .9em; @@ -546,7 +513,7 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } .flagship__card--kubefwd { background: var(--ink-2); } .flagship__card--txeh { background: - linear-gradient(135deg, rgba(255,90,31,0.025), transparent 60%), + linear-gradient(135deg, rgba(79,199,230,0.025), transparent 60%), var(--ink-2); } @@ -598,9 +565,6 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } ────────────────────────────────────────────────────────────── */ .section--mcp { - background: - radial-gradient(ellipse at top right, rgba(255,90,31,0.06), transparent 60%), - radial-gradient(ellipse at bottom left, rgba(225,255,110,0.025), transparent 50%); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 40px; @@ -704,12 +668,11 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } } .mcp__name--big { font-family: var(--serif); - font-style: italic; - font-size: clamp(48px, 5vw, 80px); - line-height: 0.95; - font-weight: 300; + font-style: normal; + font-size: clamp(30px, 3.4vw, 48px); + line-height: 1.0; + font-weight: 600; letter-spacing: -0.025em; - font-variation-settings: "opsz" 144, "SOFT" 60; color: var(--paper); margin-bottom: 22px; } @@ -762,9 +725,7 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } /* feature card */ .mcp__card--feature { padding: 40px 40px 36px; - background: - radial-gradient(ellipse at top right, rgba(255,90,31,0.10), transparent 60%), - var(--ink-3); + background: var(--ink-3); border: 1px solid var(--rule-2); display: grid; grid-template-columns: 1fr; @@ -842,7 +803,7 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } } .stack__row { display: grid; - grid-template-columns: 80px 1fr 130px 40px; + grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 24px 8px; @@ -857,21 +818,15 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } } .stack__row:hover .stack__name { color: var(--signal); } .stack__row:hover .stack__year { color: var(--signal); transform: translateX(4px); } -.stack__num { - font-family: var(--mono); - color: var(--mute-2); - font-size: 13px; - letter-spacing: 0.08em; -} .stack__name { display: block; font-family: var(--serif); - font-style: italic; - font-size: clamp(24px, 2.5vw, 34px); + font-style: normal; + font-weight: 600; + font-size: clamp(22px, 2.2vw, 30px); color: var(--paper); - line-height: 1.05; + line-height: 1.1; transition: color .25s; - font-variation-settings: "opsz" 144; margin-bottom: 6px; } .stack__desc { @@ -880,19 +835,6 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } max-width: 70ch; line-height: 1.5; } -.stack__tag { - font-family: var(--mono); - font-size: 11px; - text-transform: uppercase; - letter-spacing: 0.18em; - color: var(--mute); - text-align: right; - border: 1px solid var(--rule); - padding: 5px 10px; - border-radius: 2px; - background: rgba(0,0,0,0.2); - justify-self: end; -} .stack__year { font-family: var(--mono); color: var(--mute); @@ -908,8 +850,7 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } } @media (max-width: 760px) { - .stack__row { grid-template-columns: 50px 1fr 50px; } - .stack__tag { display: none; } + .stack__row { grid-template-columns: 1fr auto; } } /* ────────────────────────────────────────────────────────────── @@ -934,13 +875,13 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } } .coda__big { font-family: var(--serif); - font-weight: 300; - font-size: clamp(28px, 3.6vw, 52px); - line-height: 1.15; - letter-spacing: -0.02em; + font-weight: 500; + font-size: clamp(14px, 1.05vw, 16px); + line-height: 1.6; + letter-spacing: 0; color: var(--paper); - font-variation-settings: "opsz" 144, "SOFT" 30; - margin-bottom: 48px; + margin-bottom: 28px; + max-width: 72ch; } .coda__big em.serif { color: var(--signal); } .coda__cta { @@ -950,7 +891,7 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } } .coda__sign { font-family: var(--serif); - font-style: italic; + font-style: normal; font-size: 22px; color: var(--mute); } @@ -1052,7 +993,7 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } .footer__links a:hover { color: var(--signal); } .footer__links__sub { color: var(--mute); - font-style: italic; + font-style: normal; font-family: var(--serif); font-size: 12.5px; margin-left: 4px; @@ -1089,8 +1030,7 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } .brand { display: flex; gap: 10px; align-items: center; } .brand__mark { color: var(--signal); } .brand__name { - font-family: var(--serif); font-style: italic; font-size: 22px; - font-variation-settings: "opsz" 144; + font-family: var(--serif); font-style: normal; font-size: 22px; } .topnav__back { font-family: var(--mono); font-size: 12px; color: var(--mute); } .topnav__back:hover { color: var(--signal); } @@ -1111,7 +1051,6 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5vw, 68px); line-height: 1.0; letter-spacing: -0.025em; - font-variation-settings: "opsz" 144; } .prose__date { font-family: var(--mono); color: var(--mute); margin-top: 14px; font-size: 13px; } .prose__body { @@ -1122,7 +1061,6 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } .prose__body h1, .prose__body h2, .prose__body h3 { font-family: var(--serif); color: var(--paper); margin: 1.4em 0 .5em; font-weight: 400; - font-variation-settings: "opsz" 144; } .prose__body p { margin: 0 0 1.2em; } .prose__body a { color: var(--signal); border-bottom: 1px solid var(--rule); } @@ -1144,10 +1082,9 @@ em.serif { font-family: var(--serif); font-style: italic; font-weight: 400; } .prose__list a { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; - font-family: var(--serif); font-style: italic; + font-family: var(--serif); font-style: normal; font-size: 22px; color: var(--paper); - font-variation-settings: "opsz" 144; } .prose__list a em { font-family: var(--mono); font-style: normal; diff --git a/static/js/site.js b/static/js/site.js index 62c15b6..c408c49 100644 --- a/static/js/site.js +++ b/static/js/site.js @@ -3,21 +3,6 @@ (function () { 'use strict'; - /* ── live UTC clock for the rails ─────────────────────────── */ - const clocks = document.querySelectorAll('[data-clock]'); - if (clocks.length) { - const tick = () => { - const now = new Date(); - const hh = String(now.getUTCHours()).padStart(2, '0'); - const mm = String(now.getUTCMinutes()).padStart(2, '0'); - const ss = String(now.getUTCSeconds()).padStart(2, '0'); - const txt = `${hh}:${mm}:${ss} UTC`; - clocks.forEach(el => { el.textContent = txt; }); - }; - tick(); - setInterval(tick, 1000); - } - /* ── on-scroll reveal (cheap IntersectionObserver) ────────── */ const reveal = document.querySelectorAll('.section, .flagship__card, .mcp__card, .stack__row'); if ('IntersectionObserver' in window) { diff --git a/tokens.json b/tokens.json index 08e3478..577441b 100644 --- a/tokens.json +++ b/tokens.json @@ -3,41 +3,41 @@ "$description": "txn2 design tokens. DTCG-compliant sidecar to DESIGN.md. Source of truth: static/css/site.css.", "color": { - "ink": { "$type": "color", "$value": "#0B0B09", "$description": "warm near-black canvas" }, - "ink-2": { "$type": "color", "$value": "#131310", "$description": "surface, body gradient endpoint" }, - "ink-3": { "$type": "color", "$value": "#1B1A15", "$description": "card background, mermaid background" }, - "rule": { "$type": "color", "$value": "#2A2922", "$description": "subtle borders, dashed dividers" }, - "rule-2": { "$type": "color", "$value": "#3A3830", "$description": "stronger borders, button outlines" }, - "paper": { "$type": "color", "$value": "#ECE3CE", "$description": "warm parchment, body text" }, - "paper-dim": { "$type": "color", "$value": "#C9C0AB", "$description": "secondary body text" }, - "mute": { "$type": "color", "$value": "#968F80", "$description": "muted text. WCAG AA at small sizes on ink (5.79:1)." }, - "mute-2": { "$type": "color", "$value": "#5A554B", "$description": "ultra-faint marks, blueprint crosshair lines" }, - "signal": { "$type": "color", "$value": "#FF5A1F", "$description": "signal orange. Primary accent. Used sparingly." }, - "signal-2": { "$type": "color", "$value": "#FF8A4C", "$description": "signal hover state" }, - "acid": { "$type": "color", "$value": "#E1FF6E", "$description": "electric lime. Terminal success only." }, - "cool": { "$type": "color", "$value": "#6FE1FF", "$description": "coolant blue. Reserved." } + "ink": { "$type": "color", "$value": "#1E232A", "$description": "graphite grey canvas" }, + "ink-2": { "$type": "color", "$value": "#262C34", "$description": "surface, body gradient endpoint" }, + "ink-3": { "$type": "color", "$value": "#2F3640", "$description": "card background, mermaid background" }, + "rule": { "$type": "color", "$value": "#3A424C", "$description": "subtle borders, dashed dividers" }, + "rule-2": { "$type": "color", "$value": "#47515C", "$description": "stronger borders, button outlines" }, + "paper": { "$type": "color", "$value": "#EDF1F5", "$description": "cool light foreground, body text" }, + "paper-dim": { "$type": "color", "$value": "#C4CCD4", "$description": "secondary body text" }, + "mute": { "$type": "color", "$value": "#8A95A0", "$description": "muted text. WCAG AA at small sizes on ink (5.79:1)." }, + "mute-2": { "$type": "color", "$value": "#5C6670", "$description": "ultra-faint marks, blueprint crosshair lines" }, + "signal": { "$type": "color", "$value": "#4FC7E6", "$description": "signal cyan. Primary accent. Used sparingly." }, + "signal-2": { "$type": "color", "$value": "#7FD6EC", "$description": "signal hover state" }, + "acid": { "$type": "color", "$value": "#9BCB86", "$description": "muted green. Terminal success only." }, + "cool": { "$type": "color", "$value": "#8FB6D6", "$description": "cool blue-grey. Reserved." } }, "font": { "serif": { "$type": "fontFamily", - "$value": ["Fraunces", "Times New Roman", "serif"], - "$description": "Display. Italic with opsz/wght variation, weights 300-700." + "$value": ["Geist Mono", "ui-monospace", "SF Mono", "Menlo", "monospace"], + "$description": "Display face for headings. Geist Mono, non-italic, weights 400-600." }, "sans": { "$type": "fontFamily", - "$value": ["Instrument Sans", "-apple-system", "Helvetica Neue", "sans-serif"], + "$value": ["Geist", "-apple-system", "Helvetica Neue", "sans-serif"], "$description": "Body and UI. Roman only, weights 400-700." }, "mono": { "$type": "fontFamily", - "$value": ["JetBrains Mono", "ui-monospace", "SF Mono", "Menlo", "monospace"], + "$value": ["Geist Mono", "ui-monospace", "SF Mono", "Menlo", "monospace"], "$description": "Rail, labels, terminal, code. Weights 400-700." }, "google-fonts-url": { "$type": "string", - "$value": "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Instrument+Sans:wght@400..700&family=JetBrains+Mono:wght@400..700&display=swap", - "$description": "Single stylesheet request. Axes trimmed (no SOFT, no italic for sans/mono)." + "$value": "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap", + "$description": "Single stylesheet request. Geist + Geist Mono, trimmed weights." } }, @@ -83,22 +83,22 @@ "$type": "typography", "$value": { "fontFamily": "{font.serif}", - "fontSize": "clamp(60px, 12.5vw, 220px)", - "fontWeight": "300", - "fontStyle": "italic", - "lineHeight": "0.92", - "letterSpacing": "-0.04em" + "fontSize": "clamp(28px, 4vw, 64px)", + "fontWeight": "500", + "fontStyle": "normal", + "lineHeight": "1.04", + "letterSpacing": "-0.02em" }, - "$description": "Three-row hero. Fraunces opsz 144, SOFT 60-80." + "$description": "Three-row hero. Geist Mono, non-italic." }, "section-title": { "$type": "typography", "$value": { "fontFamily": "{font.serif}", - "fontSize": "clamp(36px, 5.5vw, 76px)", - "fontWeight": "300", - "lineHeight": "1.0", - "letterSpacing": "-0.025em" + "fontSize": "clamp(28px, 3.8vw, 52px)", + "fontWeight": "600", + "lineHeight": "1.08", + "letterSpacing": "-0.02em" } }, "body": { @@ -146,17 +146,17 @@ "primaryColor": { "$type": "color", "$value": "{color.ink-3}" }, "primaryTextColor": { "$type": "color", "$value": "{color.paper}" }, "primaryBorderColor":{ "$type": "color", "$value": "{color.rule-2}" }, - "secondaryColor": { "$type": "color", "$value": "#1B1A15" }, + "secondaryColor": { "$type": "color", "$value": "#2F3640" }, "tertiaryColor": { "$type": "color", "$value": "{color.ink-3}" }, "lineColor": { "$type": "color", "$value": "{color.mute}" }, "textColor": { "$type": "color", "$value": "{color.paper}" }, - "fontFamily": { "$type": "string", "$value": "\"JetBrains Mono\", ui-monospace, monospace" }, + "fontFamily": { "$type": "string", "$value": "\"Geist Mono\", ui-monospace, monospace" }, "fontSize": { "$type": "string", "$value": "13px" }, "accentBorderColor": { "$type": "color", "$value": "{color.signal}", "$description": "applied per-node via classDef accent" } }, "blueprint": { - "grid-line-color": { "$type": "color", "$value": "rgba(236,227,206,0.04)" }, + "grid-line-color": { "$type": "color", "$value": "rgba(199,204,212,0.04)" }, "grid-pitch": { "$type": "dimension", "$value": "64px" }, "grid-mask": { "$type": "string", "$value": "linear-gradient(180deg, transparent, black 12%, black 88%, transparent)" }, "crosshair-size": { "$type": "dimension", "$value": "28px" }, @@ -173,7 +173,7 @@ }, "vignette": { - "gradient": { "$type": "string", "$value": "radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 100%)" }, + "gradient": { "$type": "string", "$value": "radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,0.14) 100%)" }, "z-index": { "$type": "number", "$value": 100 } }, @@ -214,7 +214,7 @@ "rail": { "$description": "Sticky top navigation.", "padding": { "$type": "string", "$value": "14px {size.gutter}" }, - "background": { "$type": "color", "$value": "rgba(11,11,9,0.72)" }, + "background": { "$type": "color", "$value": "rgba(13,15,18,0.72)" }, "backdropFilter": { "$type": "string", "$value": "blur(14px) saturate(140%)" }, "borderBottom": { "$type": "string", "$value": "1px solid {color.rule}" }, "fontFamily": { "$type": "fontFamily", "$value": "{font.mono}" },