From f3e2a3d0f61089e04b06381ae289df4938408958 Mon Sep 17 00:00:00 2001 From: Nikita Agarwal Date: Wed, 27 May 2026 13:57:31 -0700 Subject: [PATCH 1/7] docs: add Bitcount Prop Single font template from befailproof.ai Reusable title/wordmark treatment recovered from the web platform: a next/font/google loader (fonts.ts.example) plus framework-agnostic bitcount.css (.bitcount-title class, tunable knobs, self-host @font-face). Fine-tuned instance wght 417 / ELSH 55, scaleX 0.9, 0.08em tracking, lowercase. Shipped under templates/ with a .ts.example extension so repo tsc/eslint skip it. Co-Authored-By: Claude Opus 4.7 --- templates/bitcount-font/README.md | 39 ++++++++++++++++++++ templates/bitcount-font/bitcount.css | 46 ++++++++++++++++++++++++ templates/bitcount-font/fonts.ts.example | 23 ++++++++++++ 3 files changed, 108 insertions(+) create mode 100644 templates/bitcount-font/README.md create mode 100644 templates/bitcount-font/bitcount.css create mode 100644 templates/bitcount-font/fonts.ts.example diff --git a/templates/bitcount-font/README.md b/templates/bitcount-font/README.md new file mode 100644 index 00000000..5318aea9 --- /dev/null +++ b/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 ``. +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. diff --git a/templates/bitcount-font/bitcount.css b/templates/bitcount-font/bitcount.css new file mode 100644 index 00000000..97fb0d39 --- /dev/null +++ b/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: confirm the ELSH range for your build; adjust if Google 400s. + ===================================================================== */ + +/* (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)); +} diff --git a/templates/bitcount-font/fonts.ts.example b/templates/bitcount-font/fonts.ts.example new file mode 100644 index 00000000..04c7a3fb --- /dev/null +++ b/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 {children}; +// } +// +// Then anything with class="bitcount-title" picks up the tuned treatment. From 3011736f2bff432816bd93ed9fc68dc0ae9e4268 Mon Sep 17 00:00:00 2001 From: Nikita Agarwal Date: Wed, 27 May 2026 13:58:35 -0700 Subject: [PATCH 2/7] docs: add CHANGELOG entry for Bitcount font template (#390) Co-Authored-By: Claude Opus 4.7 --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 283e8479..bd8624d1 100644 --- a/CHANGELOG.md +++ b/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) capturing the befailproof.ai title treatment for reuse (#390). ## 0.0.11-beta.2 — 2026-05-21 From cb9cc5f6cfd8ce9e6f0e4494d390ff37a185feb1 Mon Sep 17 00:00:00 2001 From: Nikita Agarwal Date: Wed, 27 May 2026 14:25:46 -0700 Subject: [PATCH 3/7] docs: add preview.html demo for Bitcount font template Self-contained demo page (loads the font via the validated Google Fonts CDN URL + the artifact's bitcount.css) showing the .bitcount-title treatment at fluid sizes. Verified rendering across 320/375/768/1280/1920px viewports with a headless browser. Also fills in the verified CDN @import URL note in bitcount.css. Co-Authored-By: Claude Opus 4.7 --- CHANGELOG.md | 2 +- templates/bitcount-font/bitcount.css | 2 +- templates/bitcount-font/preview.html | 82 ++++++++++++++++++++++++++++ 3 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 templates/bitcount-font/preview.html diff --git a/CHANGELOG.md b/CHANGELOG.md index bd8624d1..5435e25a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +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) capturing the befailproof.ai title treatment for reuse (#390). +- 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 diff --git a/templates/bitcount-font/bitcount.css b/templates/bitcount-font/bitcount.css index 97fb0d39..9362e324 100644 --- a/templates/bitcount-font/bitcount.css +++ b/templates/bitcount-font/bitcount.css @@ -12,7 +12,7 @@ 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: confirm the ELSH range for your build; adjust if Google 400s. + 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. */ diff --git a/templates/bitcount-font/preview.html b/templates/bitcount-font/preview.html new file mode 100644 index 00000000..ce025321 --- /dev/null +++ b/templates/bitcount-font/preview.html @@ -0,0 +1,82 @@ + + + + + + Bitcount Prop Single — template preview + + + + + + + + + + + + +
+ viewport – · dpr – · headings Bitcount Prop Single +
+ +
+
hero / wordmark
failproof
+
h1
runtime failure resolution
+
h2 (accent)
catches loops & dangerous actions
+
h3 (accent)
zero latency · runs locally
+ +
+
mixed line lengths (wrap / squish check)
+
+ 404 + incident contained + guardrails +
+
+ +
+
body text for contrast (not the template)
+

Hooks into coding agents and catches loops, dangerous actions, and secret leaks before they become incidents. The headings above use .bitcount-title from the template.

+
+
+ + + + From 8acb241615669e4ae30593c2bdb7905c468a30cf Mon Sep 17 00:00:00 2001 From: Nikita Agarwal Date: Wed, 27 May 2026 14:33:41 -0700 Subject: [PATCH 4/7] fix: use semantic headings in Bitcount preview demo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Address CodeRabbit a11y feedback on PR #390: the demo's heading-styled text used
/; switch to real

-

in
wrappers (classes preserved). Add a .stack heading reset (margin:0; font-weight:inherit) so the size classes + .bitcount-title still drive rendering — verified identical layout at 375 and 1280px. Co-Authored-By: Claude Opus 4.7 --- templates/bitcount-font/preview.html | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/templates/bitcount-font/preview.html b/templates/bitcount-font/preview.html index ce025321..72d90e7f 100644 --- a/templates/bitcount-font/preview.html +++ b/templates/bitcount-font/preview.html @@ -35,6 +35,8 @@ border-bottom: 1px solid #2a2926; z-index: 10; } .readout b { color: #e4e2dd; } + /* neutralize UA heading margins/bold so the size classes + .bitcount-title drive everything */ + .stack h1, .stack h2, .stack h3, .stack h4 { margin: 0; font-weight: inherit; } .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); } @@ -51,19 +53,19 @@

-
hero / wordmark
failproof
-
h1
runtime failure resolution
-
h2 (accent)
catches loops & dangerous actions
-
h3 (accent)
zero latency · runs locally
+
hero / wordmark

failproof

+
h1

runtime failure resolution

+
h2 (accent)

catches loops & dangerous actions

+
h3 (accent)

zero latency · runs locally

-
+
mixed line lengths (wrap / squish check)
- 404 - incident contained - guardrails +

404

+

incident contained

+

guardrails

-
+
body text for contrast (not the template)
From 29c2d813bc941c6addb771a7eb9e8512af94ae03 Mon Sep 17 00:00:00 2001 From: Nikita Agarwal Date: Sun, 7 Jun 2026 22:22:52 -0700 Subject: [PATCH 5/7] fix(bitcount-font): bundle static instance to fix dots-on-phones Google Fonts' CDN serves a static default-instance of Bitcount Prop Single to mobile UAs, so font-variation-settings: "ELSH" 55 no-ops on phones and the title renders as round dots instead of rounded squares. Bundle a self-hosted woff2 instanced at wght 417 + ELSH 55 and load it from bitcount.css. preview.html drops the Google Fonts CDN link. Co-Authored-By: Claude Opus 4.7 --- CHANGELOG.md | 1 + .../bitcount-font/bitcount-prop-single.woff2 | Bin 0 -> 6440 bytes templates/bitcount-font/bitcount.css | 35 ++++++++++-------- templates/bitcount-font/preview.html | 12 ++---- 4 files changed, 23 insertions(+), 25 deletions(-) create mode 100644 templates/bitcount-font/bitcount-prop-single.woff2 diff --git a/CHANGELOG.md b/CHANGELOG.md index 5435e25a..9b38a128 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,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). +- Bundle a self-hosted static instance of Bitcount Prop Single (`bitcount-prop-single.woff2`, wght 417 + ELSH 55 baked in) in the font template and switch `bitcount.css` + `preview.html` to load it directly. Fixes the dots-on-phones rendering caused by Google Fonts' CDN serving a static default-instance to mobile user-agents, where `font-variation-settings: "ELSH" 55` silently no-ops (#390). ## 0.0.11-beta.2 — 2026-05-21 diff --git a/templates/bitcount-font/bitcount-prop-single.woff2 b/templates/bitcount-font/bitcount-prop-single.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..edd36b647031d2e18f987bb640d7db57cb8b4fdc GIT binary patch literal 6440 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 CU=i^E literal 0 HcmV?d00001 diff --git a/templates/bitcount-font/bitcount.css b/templates/bitcount-font/bitcount.css index 9362e324..f37e911b 100644 --- a/templates/bitcount-font/bitcount.css +++ b/templates/bitcount-font/bitcount.css @@ -2,42 +2,45 @@ 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. + Fine-tuned instance: wght 417, ELSH 55 (slnt default 0). ELSH is + Bitcount's "Element Shape" axis: 55 = rounded squares; the font's + default 0 = round dots. - 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. + THIS FOLDER SHIPS A SELF-HOSTED STATIC INSTANCE + (bitcount-prop-single.woff2 — wght 417 + ELSH 55 baked in). That is the + reliable path: it renders the rounded-square shape on every device, + phones included, with no dependency on variable-axis support. + + Why not the Google Fonts CDN? Google serves a STATIC default-instance + file to many mobile user-agents, so `font-variation-settings: "ELSH" 55` + silently no-ops there and you get the default round dots. Self-hosting + (or next/font, which also self-hosts) avoids that. See fonts.ts.example. ===================================================================== */ -/* (B) Self-host — comment out if using (A) next/font or (C) the CDN @import. */ +/* Self-hosted static instance — rounded squares baked in (no runtime axis needed). */ @font-face { font-family: "Bitcount Prop Single"; src: url("./bitcount-prop-single.woff2") format("woff2"); - font-weight: 100 900; /* variable weight range */ + font-weight: 400; /* instanced at wght 417 */ 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 --- */ + /* fine-tuned knobs from befailproof.ai. Shape/weight are baked into the + bundled woff2; these three control layout. */ --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 */ + /* No-op on the bundled static font (shape is baked in); applies the same + instance if you swap in the VARIABLE font instead, e.g. via next/font. */ + font-variation-settings: "wght" 417, "ELSH" 55; letter-spacing: var(--title-tracking); text-transform: lowercase; transform: scaleX(var(--title-squish)); diff --git a/templates/bitcount-font/preview.html b/templates/bitcount-font/preview.html index 72d90e7f..5527b4ad 100644 --- a/templates/bitcount-font/preview.html +++ b/templates/bitcount-font/preview.html @@ -5,15 +5,9 @@ Bitcount Prop Single — template preview - - - - - - + - - -
- viewport – · dpr – · headings Bitcount Prop Single -
- -
-
hero / wordmark

failproof

-
h1

runtime failure resolution

-
h2 (accent)

catches loops & dangerous actions

-
h3 (accent)

zero latency · runs locally

- -
-
mixed line lengths (wrap / squish check)
-
-

404

-

incident contained

-

guardrails

-
-
- -
-
body text for contrast (not the template)
-

Hooks into coding agents and catches loops, dangerous actions, and secret leaks before they become incidents. The headings above use .bitcount-title from the template.

-
-
- - - -