From f3e2a3d0f61089e04b06381ae289df4938408958 Mon Sep 17 00:00:00 2001 From: Nikita Agarwal Date: Wed, 27 May 2026 13:57:31 -0700 Subject: [PATCH 1/4] 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 0000000..5318aea --- /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 0000000..97fb0d3 --- /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 0000000..04c7a3f --- /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/4] 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 283e847..bd8624d 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/4] 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 bd8624d..5435e25 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 97fb0d3..9362e32 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 0000000..ce02532 --- /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/4] 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 ce02532..72d90e7 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)