commit 13ae9e1be76a44b445797320d79772d8cd51cb4f
parent 831f55a285af485e6632284b51c959024d6e1fd9
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date: Thu, 13 Aug 2026 01:27:30 -0400
Turn the volume down
The site was set in bold expanded caps at every level — a 4.75rem uppercase
headline over uppercase section titles over uppercase card titles — and each
panel carried a full paragraph where a clause would do. It read as shouting,
which is the wrong register for a tool whose whole argument is composure.
Type: sentence case everywhere except the wordmark and the small mono machine
labels, where caps are functional rather than decorative. The headline drops
from 4.75rem bold to 3rem semibold, section and card titles from bold-caps to
plain semibold, and Archivo's width axis from 125% to 110% — at poster sizes
the widest cut is the loudest thing on the page.
Copy: roughly halved. The three "what it does" panels lose about half their
words each, the four how-it-works steps and the four trust-block claims drop to
a line apiece, and the proof band stops explaining itself three times. Every
claim that was load-bearing survives verbatim — including the "available is a
floor, not a guarantee" caveat, which is the one piece of hedging on the page
that is doing real work.
Page height falls ~10% and the reading time rather more than that.
All 21 homepage specs still green: the assertions were written against the
claims rather than their phrasing, so trimming the prose didn't move them.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Diffstat:
11 files changed, 66 insertions(+), 73 deletions(-)
diff --git a/common/styles/tokens.css b/common/styles/tokens.css
@@ -130,12 +130,14 @@ html[data-theme="archilyzer"] {
--font-sans: var(--font-plex); /* IBM Plex Sans — documentation body */
--font-mono: var(--font-plex-mono); /* IBM Plex Mono — counts, states, time */
}
-/* Archivo carries a `wdth` axis (declared in common/styles/fonts.ts). Pushing
- display type to 125% is what makes this family's headline voice EXPANDED —
- engineered and poster-scale — rather than the same neo-grotesque swiss uses
- at default width. Scoped to the display utility so body copy is unaffected. */
+/* Archivo carries a `wdth` axis (declared in common/styles/fonts.ts). A modest
+ widening is what separates this family's headline voice from the same
+ neo-grotesque swiss uses at default width. Held at 110% rather than the full
+ 125%: at poster sizes the widest cut reads as shouting, and the point of the
+ instrument face is composure. Scoped to the display utility so body copy is
+ unaffected. */
html[data-theme="archilyzer"] .font-display {
- font-stretch: 125%;
+ font-stretch: 110%;
}
/* ---------------------------------------------------------------------------
diff --git a/homepage/app/components/ArchiveCards.tsx b/homepage/app/components/ArchiveCards.tsx
@@ -46,7 +46,7 @@ export function ArchiveCards({ sites }: { sites: HomepageSummarySite[] }) {
className="h-5 w-[3px] shrink-0"
style={{ backgroundColor: color }}
/>
- <h3 className="font-display text-base font-bold uppercase tracking-[0.05em] text-[var(--foreground)]">
+ <h3 className="font-display text-base font-semibold text-[var(--foreground)]">
{site.siteTitle}
</h3>
</div>
diff --git a/homepage/app/components/DocBody.tsx b/homepage/app/components/DocBody.tsx
@@ -61,7 +61,7 @@ function anchored(
// out-shout the page's own title if a file grows a second top-level heading.
function H1({ children }: { children?: ReactNode }) {
return (
- <h2 className="scroll-mt-24 mt-12 mb-3 font-display text-xl font-bold uppercase tracking-[0.04em] text-[var(--foreground)]">
+ <h2 className="scroll-mt-24 mt-12 mb-3 font-display text-lg font-semibold text-[var(--foreground)]">
{children}
</h2>
);
@@ -112,7 +112,7 @@ const OVERRIDES = {
h2: {
component: anchored(
"h2",
- "scroll-mt-24 mt-12 mb-3 font-display text-xl font-bold uppercase tracking-[0.04em] text-[var(--foreground)] flex items-baseline",
+ "scroll-mt-24 mt-12 mb-3 font-display text-lg font-semibold text-[var(--foreground)] flex items-baseline",
),
},
h3: {
diff --git a/homepage/app/components/Footer.tsx b/homepage/app/components/Footer.tsx
@@ -22,7 +22,7 @@ export default function Footer() {
<footer className="mt-20 border-t border-[var(--border)]">
<div className="max-w-6xl mx-auto px-5 sm:px-6 py-10 flex flex-col gap-8 sm:flex-row sm:justify-between">
<div className="flex flex-col gap-2 max-w-xs">
- <span className="font-display text-sm font-bold uppercase tracking-[0.16em] text-[var(--foreground)]">
+ <span className="font-display text-sm font-semibold uppercase tracking-[0.12em] text-[var(--foreground)]">
{PROJECT_NAME}
</span>
<p className="text-sm leading-relaxed text-[var(--muted-foreground)]">
diff --git a/homepage/app/components/Header.tsx b/homepage/app/components/Header.tsx
@@ -45,7 +45,7 @@ export default function Header() {
aria-hidden="true"
className="h-0 w-0 border-y-[6px] border-y-transparent border-l-[9px] border-l-[var(--foreground)] transition-colors group-hover:border-l-[var(--brand)]"
/>
- <span className="font-display text-[1.05rem] font-bold uppercase leading-none tracking-[0.14em] text-[var(--foreground)]">
+ <span className="font-display text-[1.05rem] font-semibold uppercase leading-none tracking-[0.11em] text-[var(--foreground)]">
{PROJECT_NAME}
</span>
</Link>
diff --git a/homepage/app/components/PageShell.tsx b/homepage/app/components/PageShell.tsx
@@ -35,7 +35,7 @@ export function PageHeading({
return (
<div className="flex flex-col gap-3 doc-measure">
{eyebrow && <span className="label-machine">{eyebrow}</span>}
- <h1 className="font-display text-3xl sm:text-4xl font-bold uppercase leading-[1.05] tracking-[0.01em] text-[var(--foreground)]">
+ <h1 className="font-display text-[1.75rem] sm:text-[2.15rem] font-semibold leading-[1.1] tracking-[-0.01em] text-[var(--foreground)]">
{title}
</h1>
{standfirst && (
diff --git a/homepage/app/docs/page.tsx b/homepage/app/docs/page.tsx
@@ -18,7 +18,7 @@ export default function DocsIndexPage() {
<PageHeading
eyebrow="Documentation"
title="Docs"
- standfirst="Everything needed to take a channel URL and end up with a searchable archive you host. Written for the operator, not the contributor."
+ standfirst="From a channel URL to a searchable archive you host."
/>
{groups.map((group) => (
@@ -31,7 +31,7 @@ export default function DocsIndexPage() {
href={`/docs/${doc.slug}/`}
className="group flex flex-col gap-1 py-4 sm:flex-row sm:items-baseline sm:gap-6"
>
- <span className="font-display text-base font-bold uppercase tracking-[0.04em] text-[var(--foreground)] sm:w-64 sm:shrink-0">
+ <span className="font-display text-base font-semibold text-[var(--foreground)] sm:w-64 sm:shrink-0">
{doc.title}
</span>
<span className="text-sm leading-relaxed text-[var(--muted-foreground)] group-hover:text-[var(--foreground)] transition-colors">
diff --git a/homepage/app/downloads/page.tsx b/homepage/app/downloads/page.tsx
@@ -37,7 +37,7 @@ export default function DownloadsPage() {
<PageHeading
eyebrow="Source"
title="Downloads"
- standfirst="Archilyzer is MIT licensed and published as a dated snapshot of the source tree."
+ standfirst="MIT licensed, published as a dated snapshot of the source tree."
/>
<div className="doc-measure flex flex-col gap-4">
@@ -45,11 +45,10 @@ export default function DownloadsPage() {
<strong className="font-semibold text-[var(--foreground)]">
This is a snapshot, not a repository.
</strong>{" "}
- It is a <code className="font-mono text-[var(--foreground)]">git archive</code>{" "}
- of the main branch: the working tree at one commit, and nothing else.
- There is <em>no history, no branches, no remote, and nothing to{" "}
- <code className="font-mono">git pull</code></em>. Updating means
- downloading a newer snapshot.
+ A <code className="font-mono text-[var(--foreground)]">git archive</code>{" "}
+ of the main branch — the working tree at one commit. No history, no
+ branches, nothing to <code className="font-mono">git pull</code>.
+ Updating means downloading a newer snapshot.
</p>
</div>
@@ -109,7 +108,7 @@ export default function DownloadsPage() {
<div className="doc-measure flex flex-col gap-8 border-t border-[var(--border)] pt-8">
<div className="flex flex-col gap-3">
- <h2 className="font-display text-lg font-bold uppercase tracking-[0.05em] text-[var(--foreground)]">
+ <h2 className="font-display text-base font-semibold text-[var(--foreground)]">
What’s inside
</h2>
<p className="text-sm leading-[1.7] text-[var(--muted-foreground)]">
@@ -121,7 +120,7 @@ export default function DownloadsPage() {
</div>
<div className="flex flex-col gap-3">
- <h2 className="font-display text-lg font-bold uppercase tracking-[0.05em] text-[var(--foreground)]">
+ <h2 className="font-display text-base font-semibold text-[var(--foreground)]">
What isn’t
</h2>
<ul className="list-disc pl-5 space-y-2 text-sm leading-[1.7] text-[var(--muted-foreground)] marker:text-[var(--faint)]">
@@ -155,7 +154,7 @@ export default function DownloadsPage() {
</div>
<div className="flex flex-col gap-3">
- <h2 className="font-display text-lg font-bold uppercase tracking-[0.05em] text-[var(--foreground)]">
+ <h2 className="font-display text-base font-semibold text-[var(--foreground)]">
License
</h2>
<p className="text-sm leading-[1.7] text-[var(--muted-foreground)]">
diff --git a/homepage/app/not-found.tsx b/homepage/app/not-found.tsx
@@ -10,7 +10,7 @@ export default function NotFound() {
<PageHeading
eyebrow="404"
title="No such page"
- standfirst="That address isn't part of this site. It may have been renamed, or it may never have existed here."
+ standfirst="That address isn't part of this site."
/>
<nav aria-label="Site sections" className="flex flex-col gap-3">
<span className="label-machine">Try one of these</span>
diff --git a/homepage/app/page.tsx b/homepage/app/page.tsx
@@ -44,37 +44,31 @@ export default function Home() {
{/* ── Hero ─────────────────────────────────────────────────────────── */}
<section className={`${CONTAINER} pt-14 pb-16 sm:pt-20 sm:pb-24`}>
<div className="flex flex-col gap-8">
+ {/* Sentence case, and nowhere near poster scale. The earlier version
+ was set in bold expanded caps at 4.75rem, which read as shouting —
+ the wrong register for a tool whose argument is composure. */}
<h1
- className="reveal font-display text-[2.5rem] leading-[0.98] font-bold uppercase tracking-[0.005em] text-[var(--foreground)] sm:text-[4rem] lg:text-[4.75rem] max-w-5xl"
+ className="reveal font-display text-[1.9rem] leading-[1.1] font-semibold tracking-[-0.01em] text-[var(--foreground)] sm:text-[2.6rem] lg:text-[3rem] max-w-3xl"
style={{ "--d": "60ms" } as React.CSSProperties}
>
{hours ? (
<>
- <span className="tabular font-semibold">
+ <span className="tabular font-medium">
{hours.toLocaleString()}
</span>{" "}
- hours of speech,
- <br />
- searchable to the second.
+ hours of speech, searchable to the second.
</>
) : (
- <>
- Every word a channel
- <br />
- ever said, searchable
- <br />
- to the second.
- </>
+ <>Every word a channel said, searchable to the second.</>
)}
</h1>
<p
- className="reveal max-w-2xl text-lg leading-relaxed text-[var(--muted-foreground)]"
+ className="reveal max-w-xl text-[1.0625rem] leading-relaxed text-[var(--muted-foreground)]"
style={{ "--d": "160ms" } as React.CSSProperties}
>
- Archilyzer downloads a channel’s back catalogue, transcribes it
- on your machine, and builds a static site you host yourself. No
- account, no service, no server of ours in the path.
+ Download a channel’s back catalogue, transcribe it on your own
+ machine, publish a static site you host yourself.
</p>
<div
@@ -120,25 +114,25 @@ export default function Home() {
{[
{
title: "Archive",
- body: "Point it at a channel and it takes the whole back catalogue — then keeps up with new uploads on a schedule you set. Where the platform publishes captions it takes those; where it doesn't, it downloads the audio and transcribes it locally.",
+ body: "The whole back catalogue, then new uploads on a schedule. Captions where the platform has them, local transcription where it doesn't.",
},
{
title: "Publish",
- body: "A build produces plain HTML and JSON: no database, no runtime, nothing to keep running. One corpus can publish several sites, each with its own channels, name and domain, without duplicating a byte of data.",
+ body: "Plain HTML and JSON — no database, nothing to keep running. One corpus can publish several sites without duplicating data.",
},
{
title: "Search & ask",
- body: "Search every transcript at once and land on the exact second a phrase was said. Each archive also publishes a machine-readable index, so an LLM can navigate it without scraping.",
+ body: "Search every transcript at once, land on the exact second. A machine-readable index ships with it, so an LLM can navigate the archive too.",
},
].map((panel) => (
<div
key={panel.title}
- className="bg-[var(--surface)] p-6 flex flex-col gap-3"
+ className="bg-[var(--surface)] p-6 flex flex-col gap-2"
>
- <h3 className="font-display text-lg font-bold uppercase tracking-[0.05em] text-[var(--foreground)]">
+ <h3 className="font-display text-base font-semibold text-[var(--foreground)]">
{panel.title}
</h3>
- <p className="text-sm leading-[1.7] text-[var(--muted-foreground)]">
+ <p className="text-sm leading-[1.65] text-[var(--muted-foreground)]">
{panel.body}
</p>
</div>
@@ -149,23 +143,21 @@ export default function Home() {
{/* ── The proof point ──────────────────────────────────────────────── */}
{gone > 0 && (
<Band>
- <div className="flex flex-col gap-5 max-w-3xl">
- <p className="font-display text-2xl sm:text-3xl font-bold uppercase leading-[1.15] tracking-[0.01em] text-[var(--foreground)]">
- <span className="tabular font-semibold text-[var(--state-gone)]">
+ <div className="flex flex-col gap-4 max-w-2xl">
+ <p className="font-display text-xl sm:text-2xl font-semibold leading-[1.25] text-[var(--foreground)]">
+ <span className="tabular font-medium text-[var(--state-gone)]">
{gone.toLocaleString()}
</span>{" "}
- recordings in this archive no longer exist where they came from.
+ recordings here no longer exist where they came from.
</p>
<p className="text-[var(--muted-foreground)] leading-relaxed">
- Those are the ones re-checked and found gone — deleted, or pulled
- behind a wall. Their transcripts are still here, still searchable,
- still citable to the second.
+ Re-checked and found gone. The transcripts are still here, still
+ searchable, still citable to the second.
</p>
<p className="text-sm text-[var(--faint)] leading-relaxed">
The other {(counted - gone).toLocaleString()} are simply not known
- to be gone. Nothing re-checks tens of thousands of recordings
- continuously, so that figure is a floor, not a guarantee — which is
- rather the argument for keeping a copy.
+ to be gone — nothing re-checks a corpus this size continuously. A
+ floor, not a guarantee.
</p>
</div>
</Band>
@@ -179,32 +171,32 @@ export default function Home() {
{
n: "01",
t: "Pick channels",
- d: "Add a URL. Decide whether its captions are taken as published or its audio is transcribed here.",
+ d: "Add a URL. Captions as published, or audio transcribed here.",
},
{
n: "02",
t: "Transcribe",
- d: "Audio is transcribed on your own hardware, by whisper.cpp or another local backend. Nothing is uploaded.",
+ d: "whisper.cpp or another local backend. Nothing is uploaded.",
},
{
n: "03",
t: "Compose",
- d: "Transcripts become a paginated index and a static site — rebuilt incrementally, so one new video costs one new video.",
+ d: "A paginated index and a static site, rebuilt incrementally.",
},
{
n: "04",
t: "Ship",
- d: "Deploy the output anywhere that serves files. The reference deployment runs on a free hosting tier.",
+ d: "Deploy anywhere that serves files. A free tier is enough.",
},
].map((step) => (
- <li key={step.n} className="flex flex-col gap-2">
+ <li key={step.n} className="flex flex-col gap-1.5">
<span className="tabular text-xs text-[var(--faint)]">
{step.n}
</span>
- <h3 className="font-display text-base font-bold uppercase tracking-[0.05em] text-[var(--foreground)]">
+ <h3 className="font-display text-base font-semibold text-[var(--foreground)]">
{step.t}
</h3>
- <p className="text-sm leading-[1.7] text-[var(--muted-foreground)]">
+ <p className="text-sm leading-[1.65] text-[var(--muted-foreground)]">
{step.d}
</p>
</li>
@@ -220,26 +212,26 @@ export default function Home() {
{[
[
"Not a hosted service",
- "There is nothing to sign up for. It runs on your machine and publishes to your hosting.",
+ "Nothing to sign up for. Your machine, your hosting.",
],
[
"No public repository",
- "The source ships as a dated snapshot tarball. No history, no branches, nothing to pull.",
+ "A dated snapshot tarball. Nothing to pull.",
],
[
"You supply the tools",
- "yt-dlp, ffmpeg and a transcription backend are yours to install. Archilyzer drives them; it doesn't bundle them.",
+ "yt-dlp, ffmpeg and a transcription backend are yours to install.",
],
[
"Transcription is slow",
- "It is bound by your GPU or CPU. A large back catalogue is days of machine time, and no wishing changes that.",
+ "Bound by your GPU. A large catalogue is days of machine time.",
],
].map(([title, body]) => (
- <li key={title} className="flex flex-col gap-1.5">
- <h3 className="font-mono text-xs uppercase tracking-[0.14em] text-[var(--foreground)]">
+ <li key={title} className="flex flex-col gap-1">
+ <h3 className="text-sm font-semibold text-[var(--foreground)]">
{title}
</h3>
- <p className="text-sm leading-[1.7] text-[var(--muted-foreground)]">
+ <p className="text-sm leading-[1.65] text-[var(--muted-foreground)]">
{body}
</p>
</li>
@@ -251,9 +243,9 @@ export default function Home() {
{summary && summary.sites.length > 0 && (
<Band>
<Eyebrow>The reference deployment</Eyebrow>
- <p className="mb-8 max-w-2xl text-[var(--muted-foreground)] leading-relaxed">
- Public archives built and hosted with Archilyzer, from one corpus on
- one machine. This is what the output looks like in use.
+ <p className="mb-8 max-w-xl text-[var(--muted-foreground)] leading-relaxed">
+ Public archives built from one corpus on one machine — the output in
+ use.
</p>
<ArchiveCards sites={summary.sites} />
</Band>
diff --git a/homepage/app/stats/page.tsx b/homepage/app/stats/page.tsx
@@ -50,7 +50,7 @@ export default function StatsPage() {
title="Stats"
standfirst={
summary
- ? "What this install has archived, and when. Every number is computed at build time from the operator's own corpus."
+ ? "What this install has archived, and when. Computed at build time from the operator's own corpus."
: undefined
}
/>
