Update Hekouwang listing (CJK long-form metrics + Dark, free MIT)

_posts/2026-07-20-hekouwang.md

@@ -5,121 +5,88 @@ author: "huiyonghkw"
 preview: "hekouwang.png"
 homepage: "https://github.com/huiyonghkw/hekouwang-typora-theme"
 download: "https://github.com/huiyonghkw/hekouwang-typora-theme/archive/refs/heads/main.zip"
-description: "A warm off-white theme (light + dark) reproducing the reading experience of Claude's desktop app. Generated from a token file, zero !important, 100 KB of bundled fonts, and CJK/Latin mixing that follows what the app actually does."
+description: "CJK long-form Typora theme (light + dark): body 1rem · leading 1.65 · fluid 52em · paper card on #write. Token-generated CSS, zero !important, ~100 KB Inter — MIT free default."
 tags: [light, dark, clean, cjk, minimal, reading]
 ---
 
 # Hekouwang for Typora
 
-A warm off-white theme (light **and** dark) built for long reading sessions, reproducing the reading
-experience of Claude's desktop app.
+A Typora theme for people who write **long-form Markdown in Chinese** for hours — not chat-bubble density.
 
-The CSS is **generated from a token file** rather than hand-written — every color, size and
-spacing value lives in `scripts/tokens.json`, and `scripts/build.py` emits the stylesheet.
+**Themes menu (this listing / MIT zip):**
 
-## Design principles
+| Menu | What you get |
+|---|---|
+| **Hekouwang** | Light · warm paper · CJK long-form |
+| **Hekouwang Dark** | Dark · same reading metrics · paper card |
+
+Shared metrics: body `1rem` · leading `1.65` · measure `min(52em, 100% − gutter)` · paper surface on `#write`.
+
+The CSS is **generated from a token file** (`scripts/tokens.json` → `scripts/build.py`) rather than hand-written.
 
-Built for people who stare at a Markdown editor for hours:
+Repo: [huiyonghkw/hekouwang-typora-theme](https://github.com/huiyonghkw/hekouwang-typora-theme) · live notes: [GitHub Pages](https://huiyonghkw.github.io/hekouwang-typora-theme/)
 
-- **No high-saturation accent colors.** Inline code uses a low-saturation warm brown, not a
-  bright red. A paragraph with eight inline code spans should still read as text, not as a
-  rash of colored blocks.
-- **Hierarchy from size, weight and spacing — not color.** No colored accent bars, no heavy
-  borders, no decorative rules.
-- **Borders are ink at low alpha**, never flat gray. A flat `#ccc` on a warm background reads
-  as a dead, muddy line.
-- **Tighter tracking as size grows.** `h1` at `-0.022em`, body at `0`.
-- **Compact but not cramped.** Line height `1.62`, paragraph gap `0.78rem`.
+## Design principles
+
+- **Built for CJK long-form.** Chinese paragraphs need leading ≥1.6 and a measure near ~40–50 characters.
+- **No high-saturation accents.** Inline code uses a low-saturation warm brown so a line with many `` `code` `` spans still reads as text.
+- **Hierarchy from size, weight, and spacing — not color bars.** No left accent stripes.
+- **Borders are ink at low alpha**, never flat gray on a warm page.
+- **Paper card on `#write`** (light and dark): warm radial, large radius, outer shadow; chrome (sidebar / gutter) sits one step behind.
 
 ## CJK / Latin mixing
 
-Anthropic Sans contains **581 glyphs and zero CJK characters** — not even the ideographic
-comma. So Chinese text necessarily falls back to the system face. That is not a compromise;
-it is exactly what the desktop app does. This theme therefore pairs a Latin face with the
-system CJK face and **bundles no CJK font at all**.
+Anthropic Sans contains **581 glyphs and zero CJK characters** — not even ideographic punctuation. Chinese always falls back to the system face (PingFang SC on macOS). This theme pairs a Latin face with that system CJK face and **bundles no CJK font**.
+
+Stack: Anthropic Sans (only if already on your machine — proprietary, never shipped) → **Inter** (SIL OFL, Latin subset, ~100 KB, shipped) → system UI. Most people see Inter.
+
+## Installation
+
+```bash
+git clone https://github.com/huiyonghkw/hekouwang-typora-theme.git
+cd hekouwang-typora-theme
+./scripts/install.sh
+```
+
+Or copy `theme/hekouwang.css`, `theme/hekouwang-dark.css`, and the `theme/hekouwang/` folder into Typora’s themes directory (Preferences → Open Theme Folder).
 
-The font stack degrades in three tiers: Anthropic Sans (only if already present on your
-system — proprietary, never bundled) → **Inter** (SIL OFL, Latin subset, 100 KB, shipped) →
-system UI font. Tier 2 is what almost everyone sees.
+Then **quit Typora completely (Cmd+Q) and relaunch** — switching themes does not reload a modified CSS file. Choose **Hekouwang** or **Hekouwang Dark**.
 
 ## Customization
 
-Don't edit the CSS; it's generated. Edit `scripts/tokens.json` and rebuild:
+Do not edit the CSS; it is generated. Edit `scripts/tokens.json` and rebuild:
 
 ```bash
 python3 scripts/build.py
 ```
 
-The build refuses to emit CSS that violates two Typora rules, so a bad edit fails loudly
-instead of silently breaking the editor:
+The build asserts:
 
-- **zero `!important`** — `#write` specificity is sufficient
-- **zero `px` font sizes except the root** — otherwise Typora's font-size preference stops
-  working
+- **zero `!important`**
+- **zero `px` font sizes** except the root (so Typora’s font-size preference keeps working)
 
-## Relationship to the existing "Claude Theme"
+## Relationship to the gallery “Claude Theme”
 
-There is already a [Claude Theme](https://theme.typora.io/theme/Claude-Theme/) in the gallery
-with a similar goal. **This is an independent implementation, not a fork** — no CSS was
-copied, and the stylesheet is machine-generated from a token file. Both themes reference
-Anthropic's published brand colors, which is where any color overlap comes from.
+There is already a [Claude Theme](https://theme.typora.io/theme/Claude-Theme/) with a similar goal. **This is an independent implementation, not a fork** — no CSS was copied. Both themes reference Anthropic’s published brand colors; that is where color overlap comes from.
 
-Measurable differences, reproducible from both repositories:
-
-| | Existing Claude Theme | Hekouwang |
+| | Gallery Claude Theme | Hekouwang |
 |---|---|---|
-| Authoring | 3,158 hand-written lines | generated from a token file |
-| `!important` declarations | 397 | **0** (enforced at build time) |
+| Authoring | ~3,158 hand-written lines | generated from tokens |
+| `!important` | 397 | **0** (build-enforced) |
 | Font sizes | some `px` | all `rem` except root |
-| Bundled fonts | ~24 MB (full Noto Serif SC variable) | **100 KB** (Inter, Latin subset) |
-| Anthropic fonts | bundled and redistributed | **not bundled**; `local()` + Inter fallback |
+| Bundled fonts | ~24 MB (incl. Noto Serif SC) | **~100 KB** (Inter Latin) |
+| Anthropic fonts | redistributed | **not shipped**; `local()` + Inter |
 | Body CJK | Noto Serif SC (serif) | system sans-serif |
-| Latin weights | single 400 → synthetic bold | true variable **300–800** + `opsz` axis |
-| Page background | `#faf9f5` | `#fdfdfc` |
-| UI coverage | mainly the editor pane | sidebar, file tree, outline, search panel, focus mode |
-
-Two of these are worth explaining:
-
-**Body CJK.** The existing theme sets `#write { font-family: var(--font-serif) }`, rendering
-Chinese in Noto Serif SC — a serif. The desktop app renders Chinese in the system sans-serif
-(it has no choice, given the glyph coverage above). Matching the app means *not* bundling a
-CJK serif, which is also why this theme is 100 KB instead of 24 MB.
+| Latin weights | single 400 → synthetic bold | variable **300–800** + `opsz` |
 
-**Page background.** `#faf9f5` is Anthropic's cream, but it is the *window/sidebar* color.
-Sampling the app's conversation pane gives `#fdfdfc`. This theme uses `#fdfdfc` for the editor
-pane and `#f5f4ed` for the sidebar, preserving the app's two-level relationship.
-
-## Licensing note
+## Dark variant
 
-This theme does **not** bundle, redistribute or include any Anthropic font. Anthropic Sans and
-Anthropic Serif are proprietary to Anthropic PBC with no open license. Only Inter (SIL OFL
-1.1) is shipped. The theme is an independent work inspired by the app's reading experience,
-not affiliated with or endorsed by Anthropic PBC.
+`hekouwang-dark.css` is **sampled**, not inverted from light — light-mode relationships do not survive inversion (e.g. in dark mode the sidebar is *lighter* than the editor pane). Both variants share the same reading metrics; the `dark` block overrides only `color` / `alpha`.
 
-## Installation
+## Licensing
 
-1. Download and unzip the theme.
-2. Copy `theme/hekouwang.css`, `theme/hekouwang-dark.css` and the `theme/hekouwang/` folder
-   into Typora's theme folder.
-3. **Quit Typora completely and relaunch** (switching themes does not reload a modified CSS
-   file), then select **Hekouwang** from the Themes menu.
+MIT for the free theme CSS and scripts. Only Inter (SIL OFL 1.1) is shipped. This theme does **not** bundle or redistribute Anthropic fonts. Independent work; not affiliated with Anthropic PBC.
 
 ## Platform support
 
-Designed and tested on **macOS**. Not fully tested, but should work for Windows/Linux.
-This theme does not include styles for the Windows "unibody" style.
-
-## Dark variant
-
-`hekouwang-dark.css` is **sampled** from the app's dark mode, not derived by inverting the
-light theme — which matters, because the light theme's relationships do not survive inversion:
-
-- In dark mode the **sidebar (`#262626`) is lighter than the editor pane (`#1f1f1e`)** — the
-  reverse of the light theme. Inverting would have gotten this backwards.
-- Inline code sits on a **neutral white overlay** in dark (solving for alpha gives a consistent
-  0.036/0.040/0.031 across channels), rather than the brand-orange wash used in light (which
-  would solve inconsistently: 0.043/0.10/0.12).
-- Border and shadow base colors swap: ink-at-low-alpha in light, white-at-low-alpha in dark.
-
-Both variants are generated from the same token file; the `dark` block overrides only the
-`color` and `alpha` groups.
+Designed and tested on **macOS**. Windows / Linux should work but are not fully tested. No Windows “unibody” styles.