docs: add Bitcount Prop Single font template from befailproof.ai

CHANGELOG.md

@@ -7,6 +7,7 @@
 
 ### Docs
 - Update the README logo (EN + 14 translated READMEs) from `logo-wordmark.png` to the new `fa_updated_full.svg` wordmark served on befailproof.ai (#387).
+- Add a Bitcount Prop Single font template under `templates/bitcount-font/` (next/font loader, framework-agnostic CSS with tunable knobs, and a `preview.html` demo page) capturing the befailproof.ai title treatment for reuse (#390).
 
 ## 0.0.11-beta.2 — 2026-05-21
 

templates/bitcount-font/README.md

@@ -0,0 +1,39 @@
+# Bitcount Prop Single — font template
+
+The title / wordmark treatment from **befailproof.ai**, packaged so you can drop
+the exact same look into any project.
+
+**Fine-tuned instance:** `font-variation-settings: "wght" 417, "ELSH" 55` (slnt 0),
+horizontally squished `scaleX(0.9)`, `letter-spacing: 0.08em`, lowercase. All four
+are exposed as knobs in `bitcount.css`.
+
+## Files
+- `bitcount.css` — the reusable `.bitcount-title` class + tunable `:root` knobs, plus a self-host `@font-face`. Framework-agnostic.
+- `fonts.ts.example` — Next.js `next/font/google` loader (rename to `fonts.ts`). Matches how befailproof.ai loads it.
+
+## Use it
+
+### Next.js
+1. Rename `fonts.ts.example` → `fonts.ts`, import `bitcount` in your root layout, add `bitcount.variable` to `<html>`.
+2. Import `bitcount.css` and **delete its `@font-face` block** (next/font already provides `--font-bitcount`).
+3. Add `class="bitcount-title"` to headings / wordmarks.
+
+### Anywhere else
+1. Self-host (most reliable): download the Bitcount Prop Single **variable** woff2 and drop it next to `bitcount.css` as `bitcount-prop-single.woff2`. Or use the Google Fonts CDN `@import` — see the comment in the CSS, and verify the `ELSH` range.
+2. Import `bitcount.css`, add `class="bitcount-title"`.
+
+## Tuning knobs (`:root` in `bitcount.css`)
+| Variable | Default | Effect |
+|---|---|---|
+| `--title-scale` | `0.9` | title size multiplier |
+| `--title-squish` | `0.9` | horizontal `scaleX` squish |
+| `--title-tracking` | `0.08em` | letter-spacing |
+
+To re-tune the glyph shape itself, change `"wght"` / `"ELSH"` in the
+`font-variation-settings` of `.bitcount-title`.
+
+## Provenance
+Recovered from the befailproof.ai web platform (PR #374). Axis values verified
+against the final iteration of that work (earlier passes used wght 413/414 and
+ELSH 51.4 before settling on **417 / 55**). The exact `--title-scale` application
+and the fallback stack are reconstructed from the session — adapt to your project.

templates/bitcount-font/bitcount.css

@@ -0,0 +1,46 @@
+/* =====================================================================
+   Bitcount Prop Single — title / wordmark treatment
+   Source: befailproof.ai (recovered from web platform PR #374)
+
+   Fine-tuned instance: wght 417, ELSH 55  (slnt left at default 0)
+   The ELSH "Element Shape" axis is kept variable so it can be tuned.
+
+   LOADING THE FONT — pick ONE:
+   (A) Next.js   -> use fonts.ts.example (next/font/google). It sets
+                   --font-bitcount for you. DELETE the @font-face below.
+   (B) Self-host -> drop the variable woff2 next to this file and keep
+                   the @font-face below (most reliable; ELSH stays variable).
+   (C) Google CDN-> replace @font-face with:
+       @import url('https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single:ELSH,wght@0..100,100..900&display=swap');
+       NOTE: this URL is verified working (ELSH 0..100, wght 100..900). Adjust ranges if you need others.
+   ===================================================================== */
+
+/* (B) Self-host — comment out if using (A) next/font or (C) the CDN @import. */
+@font-face {
+  font-family: "Bitcount Prop Single";
+  src: url("./bitcount-prop-single.woff2") format("woff2");
+  font-weight: 100 900;      /* variable weight range */
+  font-display: swap;
+}
+
+:root {
+  /* next/font sets --font-bitcount; for (B)/(C) we pin the family name. */
+  --font-bitcount: "Bitcount Prop Single";
+  --font-display: var(--font-bitcount), "VT323", ui-monospace, monospace;
+
+  /* --- fine-tuned knobs from befailproof.ai --- */
+  --title-scale: 0.9;        /* title size multiplier    */
+  --title-squish: 0.9;       /* horizontal scaleX squish */
+  --title-tracking: 0.08em;  /* letter-spacing           */
+}
+
+/* Reusable title treatment — apply to any heading / wordmark. */
+.bitcount-title {
+  font-family: var(--font-display);
+  font-variation-settings: "wght" 417, "ELSH" 55;  /* slnt stays at default 0 */
+  letter-spacing: var(--title-tracking);
+  text-transform: lowercase;
+  transform: scaleX(var(--title-squish));
+  transform-origin: left center;
+  font-size: calc(1em * var(--title-scale));
+}

templates/bitcount-font/fonts.ts.example

@@ -0,0 +1,23 @@
+// Bitcount Prop Single — Next.js loader (next/font/google).
+// Rename to `fonts.ts`. Exposes the `--font-bitcount` CSS variable that
+// bitcount.css consumes. `axes: ['ELSH']` opts into the Element Shape axis
+// (wght is variable by default); the specific instance (wght 417, ELSH 55)
+// is pinned in bitcount.css via font-variation-settings, not here.
+//
+// Shipped as `.ts.example` so this repo's tsc/eslint skip it. Rename on use.
+import { Bitcount_Prop_Single } from 'next/font/google';
+
+export const bitcount = Bitcount_Prop_Single({
+  subsets: ['latin'],
+  axes: ['ELSH'],
+  variable: '--font-bitcount',
+  display: 'swap',
+});
+
+// In your root layout:
+//   import { bitcount } from './fonts';
+//   export default function RootLayout({ children }: { children: React.ReactNode }) {
+//     return <html className={bitcount.variable}>{children}</html>;
+//   }
+//
+// Then anything with class="bitcount-title" picks up the tuned treatment.

templates/bitcount-font/preview.html

@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Bitcount Prop Single — template preview</title>
+
+  <!-- Real font bytes (validated): variable Bitcount Prop Single incl. the ELSH axis.
+       The self-host @font-face in bitcount.css 404s here (no local woff2) — harmless,
+       this CDN copy satisfies the "Bitcount Prop Single" family used by .bitcount-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=Bitcount+Prop+Single:ELSH,wght@0..100,100..900&display=swap" />
+
+  <!-- THE ARTIFACT under test -->
+  <link rel="stylesheet" href="bitcount.css" />
+
+  <style>
+    /* demo chrome only — not part of the template */
+    :root { color-scheme: dark; }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: #0f0f0e;
+      color: #e4e2dd;
+      font-family: ui-sans-serif, system-ui, sans-serif;
+      padding: 4vh 6vw 12vh;
+    }
+    .readout {
+      position: fixed; top: 0; left: 0; right: 0;
+      display: flex; gap: 1.5rem; justify-content: center;
+      padding: 6px; font: 12px/1 ui-monospace, monospace;
+      background: #1c1b19; color: #9b988f; letter-spacing: .04em;
+      border-bottom: 1px solid #2a2926; z-index: 10;
+    }
+    .readout b { color: #e4e2dd; }
+    .stack { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 3rem; }
+    .hero  { font-size: clamp(44px, 16vw, 200px); line-height: .9; }
+    .h1    { font-size: clamp(30px, 8vw, 96px); }
+    .h2    { font-size: clamp(22px, 5vw, 56px); color: #c9b6f7; }
+    .h3    { font-size: clamp(16px, 3.5vw, 34px); color: #8fd6c4; }
+    .label { font: 11px/1 ui-monospace, monospace; color: #6f6c64; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.4rem; }
+    .row   { display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: baseline; }
+    p.body { max-width: 46ch; color: #b7b4ab; line-height: 1.6; font-size: 15px; }
+  </style>
+</head>
+<body>
+  <div class="readout">
+    viewport <b id="vw">–</b> · dpr <b id="dpr">–</b> · headings <b>Bitcount Prop Single</b>
+  </div>
+
+  <div class="stack">
+    <div><div class="label">hero / wordmark</div><div class="hero bitcount-title">failproof</div></div>
+    <div><div class="label">h1</div><div class="h1 bitcount-title">runtime failure resolution</div></div>
+    <div><div class="label">h2 (accent)</div><div class="h2 bitcount-title">catches loops &amp; dangerous actions</div></div>
+    <div><div class="label">h3 (accent)</div><div class="h3 bitcount-title">zero latency · runs locally</div></div>
+
+    <div>
+      <div class="label">mixed line lengths (wrap / squish check)</div>
+      <div class="row">
+        <span class="h2 bitcount-title">404</span>
+        <span class="h2 bitcount-title">incident contained</span>
+        <span class="h2 bitcount-title">guardrails</span>
+      </div>
+    </div>
+
+    <div>
+      <div class="label">body text for contrast (not the template)</div>
+      <p class="body">Hooks into coding agents and catches loops, dangerous actions, and secret leaks before they become incidents. The headings above use <code>.bitcount-title</code> from the template.</p>
+    </div>
+  </div>
+
+  <script>
+    const set = () => {
+      document.getElementById('vw').textContent = innerWidth + '×' + innerHeight;
+      document.getElementById('dpr').textContent = (window.devicePixelRatio || 1).toFixed(2);
+    };
+    set(); addEventListener('resize', set);
+  </script>
+</body>
+</html>