diff --git a/CHANGELOG.md b/CHANGELOG.md index 283e847..5435e25 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, 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/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..9362e32 --- /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: 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)); +} 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. diff --git a/templates/bitcount-font/preview.html b/templates/bitcount-font/preview.html new file mode 100644 index 0000000..72d90e7 --- /dev/null +++ b/templates/bitcount-font/preview.html @@ -0,0 +1,84 @@ + + + + + + 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.

+
+
+ + + +