Redesign: Systems/Terminal direction

Diffhero read most machine-made of the three: it carried the pill badge, the
centred hero and the centred subtitle — the three most recognisable signatures
of a generated landing page. The cause is mechanical rather than aesthetic:
shadcn/ui became the dominant component vocabulary, so it dominates training
data, so it is what gets produced by default. The escape is a vocabulary with
its own internal logic, not "more creative".

Direction: the interface should look like the artefact it produces. Grounded in
Unix tooling aesthetics and Tufte's data-ink ratio — a diff IS a data
visualisation, so that applies literally. Reference points: CyberChef, regex101.

- Pill badge replaced by a full-width instrument spec bar. Rules drawn with a
  1px grid gap over a border-coloured ground, which stays correct however the
  columns wrap; border-right dangles at row ends and did, at first.
- Hero left-aligned. Headings set in the mono face, since the product's output
  is monospaced text.
- All radii to 0 and all shadows to none. Radius is the loudest single tell,
  and separation is now done with 1px rules like a technical drawing.
- Dropped the radial accent wash behind the hero; squared the logo mark.

Accessibility caught before shipping, not after: muted chrome at 12px measured
2.79:1 against the ground, below the 4.5 AA floor. Moved to --text-secondary,
now 5.46:1 dark and 5.73:1 light, verified by canvas-resolving the computed
oklch and computing WCAG ratios in both themes. (The first measurement pass
reported 1.00 for everything — the parser assumed rgb() and the browser
returns oklch() verbatim. Broken measurement, not a passing result.)

Hybrid, not purist: guides and prose keep the readable sans, since Diffhero
also gets non-developer traffic — contracts, résumés, Word documents.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: Bruno FK

about.html

@@ -21,7 +21,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="./assets/style.css?v=dff7f34c">
+<link rel="stylesheet" href="./assets/style.css?v=bc8cedc1">
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q907KGWEP4"></script>
 <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}
 gtag('js',new Date());gtag('config','G-Q907KGWEP4');</script>
@@ -38,15 +38,15 @@
 <a class="skip-link" href="#main">Skip to content</a>
 <header>
   <a class="logo" href="/">
-    <svg class="logo-mark" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true"><rect x="2" y="3" width="7" height="16" rx="2.5" fill="currentColor"/><rect x="13" y="7" width="7" height="12" rx="2.5" fill="currentColor" opacity="0.45"/></svg>
+    <svg class="logo-mark" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true"><rect x="2" y="3" width="7" height="16" fill="currentColor"/><rect x="13" y="7" width="7" height="12" fill="currentColor" opacity="0.45"/></svg>
     Diffhero
   </a>
   <button type="button" class="theme-toggle" id="themeToggle" aria-label="Toggle light/dark">
     <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2.5M12 19.5V22M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2 12h2.5M19.5 12H22M4.2 19.8 6 18M18 6l1.8-1.8"/></svg>
     <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.2 14.6A8.5 8.5 0 1 1 9.4 3.8a7 7 0 0 0 10.8 10.8Z"/></svg>
   </button>
 </header>
-<nav class="main-nav" aria-label="Site">
+<nav class="main-nav chrome-rule" aria-label="Site">
   <a href="/guides">Guides</a>
   <a href="/diffchecker-alternative">Compare</a>
   <a href="/about">About</a>

assets/style.css

@@ -63,10 +63,15 @@
   --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px;
   --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
   --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
-  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 999px;
+  /* Squared throughout. A terminal has hard edges; radius is the single
+     loudest tell of the generic component look, and this tool's whole
+     credibility rests on looking like an instrument rather than a product. */
+  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-full: 0;
   --container-max: 1080px;
-  --shadow-sm: 0 2px 6px hsl(var(--shadow-color) / 0.28), 0 1px 2px hsl(var(--shadow-color) / 0.30);
-  --shadow-md: 0 8px 24px hsl(var(--shadow-color) / 0.30), 0 2px 6px hsl(var(--shadow-color) / 0.24);
+  /* No soft elevation. Separation is done with 1px rules, the way a
+     technical drawing separates regions — not with drop shadows. */
+  --shadow-sm: none;
+  --shadow-md: none;
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --duration-fast: 120ms; --duration-base: 200ms;
 }
@@ -77,15 +82,14 @@ body {
   font-family: var(--font-ui); font-size: var(--text-base); line-height: 1.5;
   color: var(--text-primary); background: var(--bg); -webkit-font-smoothing: antialiased;
   min-height: 100vh; display: flex; flex-direction: column;
-  /* A whisper of the accent behind the hero, not a flat neutral field — echoes
-     the cyan used everywhere else instead of introducing a new color. */
-  background-image: radial-gradient(ellipse 900px 480px at 50% -8%, var(--accent-soft), transparent 60%);
-  background-repeat: no-repeat;
 }
 a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
 h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
-h1 { font-size: var(--text-3xl); text-wrap: balance; }
+/* Headings set in the mono face, not the UI sans: the product's output is
+   monospaced text, so the voice of the page matches the artefact it makes. */
+h1, h2 { font-family: var(--font-display); }
+h1 { font-size: var(--text-3xl); text-wrap: balance; letter-spacing: -0.045em; }
 h2 { font-size: var(--text-xl); }
 h3 { font-size: var(--text-md); }
 :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: var(--radius-sm); }
@@ -97,17 +101,20 @@ h3 { font-size: var(--text-md); }
 .muted { color: var(--text-secondary); font-size: var(--text-sm); }
 
 /* ---- Header / nav ---- */
+/* Header reads as a terminal status bar: full-bleed rule underneath, mono
+   chrome, no floating. It frames the page rather than sitting on top of it. */
 header {
   display: flex; align-items: center; justify-content: space-between;
-  max-width: var(--container-max); margin: 0 auto; width: 100%; padding: var(--space-4) var(--space-5);
+  max-width: var(--container-max); margin: 0 auto; width: 100%; padding: var(--space-3) var(--space-5);
 }
-.logo { font-weight: 700; font-size: var(--text-lg); color: var(--text-primary); letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: var(--space-2); }
+.chrome-rule { border-bottom: 1px solid var(--border-subtle); }
+.logo { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--text-primary); letter-spacing: -0.04em; display: inline-flex; align-items: center; gap: var(--space-2); }
 .logo:hover { text-decoration: none; }
 .logo-mark { color: var(--accent); flex: 0 0 auto; }
 .theme-toggle {
   display: inline-flex; align-items: center; justify-content: center;
   background: var(--surface-elevated); border: 1px solid var(--border-subtle); color: var(--text-secondary);
-  width: 36px; height: 36px; border-radius: var(--radius-full); cursor: pointer;
+  width: 30px; height: 30px; cursor: pointer;
   transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
 }
 .theme-toggle:hover { background: var(--surface-hover); color: var(--text-primary); }
@@ -116,22 +123,27 @@ header {
 [data-theme="light"] .theme-toggle .icon-moon { display: none; }
 .main-nav {
   display: flex; gap: var(--space-5); flex-wrap: wrap;
-  max-width: var(--container-max); margin: 0 auto; width: 100%; padding: 0 var(--space-5) var(--space-4); font-size: var(--text-sm);
+  max-width: var(--container-max); margin: 0 auto; width: 100%;
+  padding: var(--space-3) var(--space-5); font-family: var(--font-display);
+  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
 }
 .main-nav a { color: var(--text-secondary); }
+.main-nav a:hover { color: var(--accent); text-decoration: none; }
 
 /* ---- Main / hero ---- */
-main.wrap { flex: 1; padding-top: var(--space-6); padding-bottom: var(--space-16); }
+main.wrap { flex: 1; padding-top: var(--space-8); padding-bottom: var(--space-16); }
 .hero { margin-bottom: var(--space-8); }
-.hero--home { text-align: center; margin-bottom: var(--space-8); padding-top: var(--space-4); }
-.hero--home h1 { font-size: clamp(2.4rem, 5.2vw, 3.6rem); }
+/* Left-aligned, always. Centred hero + centred subtitle is the layout every
+   generated page defaults to; the grid should decide where the eye enters. */
+.hero--home { text-align: left; margin-bottom: var(--space-10); padding-top: 0; }
+.hero--home h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); }
 .eyebrow { display: inline-block; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: var(--space-3); }
 .lede { font-size: var(--text-md); color: var(--text-secondary); max-width: 64ch; margin-top: var(--space-4); }
 /* Secondary hero line: the concrete competitive claim, deliberately smaller
    than the main lede so it reads as a footnote, not a second headline. */
 .lede--sub { font-size: var(--text-sm); margin-top: var(--space-3); }
 .lede--sub a { color: var(--accent); font-weight: 600; }
-.hero--home .lede { margin-left: auto; margin-right: auto; max-width: 46ch; }
+.hero--home .lede { margin-left: 0; margin-right: 0; max-width: 58ch; }
 
 /* Split hero: copy on the left, a static illustrative diff snippet on the
    right — shows what the product does before the visitor ever reaches the
@@ -146,8 +158,7 @@ main.wrap { flex: 1; padding-top: var(--space-6); padding-bottom: var(--space-16
 .hero--split .lede { margin-left: 0; margin-right: 0; max-width: 52ch; }
 .hero-sample {
   background: var(--surface-elevated); border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
-  transform: rotate(-1deg);
+  overflow: hidden; border-left: 2px solid var(--accent);
 }
 .hero-sample-head {
   display: flex; align-items: center; padding: var(--space-2) var(--space-4);
@@ -162,17 +173,25 @@ main.wrap { flex: 1; padding-top: var(--space-6); padding-bottom: var(--space-16
   .hero-sample { transform: none; }
 }
 
-/* Trust badge — home hero only. States something true (client-side, nothing
-   uploaded) rather than decorating; see .badge .dot for the "live" signal. */
-.badge {
-  display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui);
-  font-size: var(--text-xs); color: var(--text-secondary); background: var(--surface-elevated);
-  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
-  padding: 6px var(--space-3) 6px var(--space-2); margin-bottom: var(--space-5);
-}
-.badge .dot {
-  width: 6px; height: 6px; border-radius: 50%; background: var(--success);
-  box-shadow: 0 0 0 3px oklch(0.72 0.15 152 / 0.16); flex: none;
+/* Instrument spec bar. Replaces the old pill badge — a rounded capsule with a
+   coloured dot above a centred headline is the single most recognisable
+   signature of a generated landing page. This states the same true things as
+   a device's printed markings: hard edges, mono, rule-separated fields.
+   Full-width rather than inside the hero column, which is why it no longer
+   wraps. The 1px grid gap over a border-coloured ground draws the rules, so
+   they stay correct however the columns wrap. */
+.specbar {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 1px; background: var(--border-subtle);
+  border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: var(--space-10); font-family: var(--font-display);
+  font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase;
+  color: var(--text-secondary);
+}
+.specbar > span { background: var(--bg); padding: var(--space-3) var(--space-4); }
+.specbar .dot {
+  width: 5px; height: 5px; background: var(--success); flex: none;
+  display: inline-block; margin-right: var(--space-2); vertical-align: 1px;
 }
 
 /* ---- The tool shell ---- */

contact.html

@@ -21,7 +21,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="./assets/style.css?v=dff7f34c">
+<link rel="stylesheet" href="./assets/style.css?v=bc8cedc1">
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q907KGWEP4"></script>
 <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}
 gtag('js',new Date());gtag('config','G-Q907KGWEP4');</script>
@@ -38,15 +38,15 @@
 <a class="skip-link" href="#main">Skip to content</a>
 <header>
   <a class="logo" href="/">
-    <svg class="logo-mark" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true"><rect x="2" y="3" width="7" height="16" rx="2.5" fill="currentColor"/><rect x="13" y="7" width="7" height="12" rx="2.5" fill="currentColor" opacity="0.45"/></svg>
+    <svg class="logo-mark" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true"><rect x="2" y="3" width="7" height="16" fill="currentColor"/><rect x="13" y="7" width="7" height="12" fill="currentColor" opacity="0.45"/></svg>
     Diffhero
   </a>
   <button type="button" class="theme-toggle" id="themeToggle" aria-label="Toggle light/dark">
     <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2.5M12 19.5V22M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2 12h2.5M19.5 12H22M4.2 19.8 6 18M18 6l1.8-1.8"/></svg>
     <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.2 14.6A8.5 8.5 0 1 1 9.4 3.8a7 7 0 0 0 10.8 10.8Z"/></svg>
   </button>
 </header>
-<nav class="main-nav" aria-label="Site">
+<nav class="main-nav chrome-rule" aria-label="Site">
   <a href="/guides">Guides</a>
   <a href="/diffchecker-alternative">Compare</a>
   <a href="/about">About</a>

content.mjs

@@ -17,9 +17,14 @@ export const home = {
   title: `${C.NAME} — Free Online Diff Checker for Text & Code`,
   description: C.DESCRIPTION,
   bodyHtml: `
+  <div class="specbar">
+    <span><span class="dot" aria-hidden="true"></span>Client-side</span>
+    <span>Nothing uploaded</span>
+    <span>~17 languages</span>
+    <span>No account</span>
+  </div>
   <section class="hero hero--home hero--split">
     <div class="hero-copy">
-      <span class="badge"><span class="dot" aria-hidden="true"></span>Every feature free and unmetered — nothing uploaded</span>
       <h1>${C.NAME}</h1>
       <p class="lede">A diff checker that doesn't hold anything back: syntax highlighting across ~17 languages, character-level detail, split and unified views, 3-way merge, image and CSV comparison — all free, all unlimited, all running on your own machine.</p>
       <p class="lede lede--sub">Most free diff tools do plain line comparison and stop. The big paid one meters syntax highlighting at five uses a month. <a href="/diffchecker-alternative">See the comparison →</a></p>

de/index.html

@@ -24,7 +24,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="../assets/style.css?v=dff7f34c">
+<link rel="stylesheet" href="../assets/style.css?v=bc8cedc1">
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q907KGWEP4"></script>
 <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}
 gtag('js',new Date());gtag('config','G-Q907KGWEP4');</script>
@@ -41,15 +41,15 @@
 <a class="skip-link" href="#main">Skip to content</a>
 <header>
   <a class="logo" href="/">
-    <svg class="logo-mark" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true"><rect x="2" y="3" width="7" height="16" rx="2.5" fill="currentColor"/><rect x="13" y="7" width="7" height="12" rx="2.5" fill="currentColor" opacity="0.45"/></svg>
+    <svg class="logo-mark" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true"><rect x="2" y="3" width="7" height="16" fill="currentColor"/><rect x="13" y="7" width="7" height="12" fill="currentColor" opacity="0.45"/></svg>
     Diffhero
   </a>
   <button type="button" class="theme-toggle" id="themeToggle" aria-label="Toggle light/dark">
     <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2.5M12 19.5V22M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2 12h2.5M19.5 12H22M4.2 19.8 6 18M18 6l1.8-1.8"/></svg>
     <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.2 14.6A8.5 8.5 0 1 1 9.4 3.8a7 7 0 0 0 10.8 10.8Z"/></svg>
   </button>
 </header>
-<nav class="main-nav" aria-label="Site">
+<nav class="main-nav chrome-rule" aria-label="Site">
   <a href="/guides">Guides</a>
   <a href="/diffchecker-alternative">Compare</a>
   <a href="/about">About</a>

diff/code-diff.html

@@ -21,7 +21,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="../assets/style.css?v=dff7f34c">
+<link rel="stylesheet" href="../assets/style.css?v=bc8cedc1">
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q907KGWEP4"></script>
 <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}
 gtag('js',new Date());gtag('config','G-Q907KGWEP4');</script>
@@ -38,15 +38,15 @@
 <a class="skip-link" href="#main">Skip to content</a>
 <header>
   <a class="logo" href="/">
-    <svg class="logo-mark" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true"><rect x="2" y="3" width="7" height="16" rx="2.5" fill="currentColor"/><rect x="13" y="7" width="7" height="12" rx="2.5" fill="currentColor" opacity="0.45"/></svg>
+    <svg class="logo-mark" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true"><rect x="2" y="3" width="7" height="16" fill="currentColor"/><rect x="13" y="7" width="7" height="12" fill="currentColor" opacity="0.45"/></svg>
     Diffhero
   </a>
   <button type="button" class="theme-toggle" id="themeToggle" aria-label="Toggle light/dark">
     <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2.5M12 19.5V22M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2 12h2.5M19.5 12H22M4.2 19.8 6 18M18 6l1.8-1.8"/></svg>
     <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.2 14.6A8.5 8.5 0 1 1 9.4 3.8a7 7 0 0 0 10.8 10.8Z"/></svg>
   </button>
 </header>
-<nav class="main-nav" aria-label="Site">
+<nav class="main-nav chrome-rule" aria-label="Site">
   <a href="/guides">Guides</a>
   <a href="/diffchecker-alternative">Compare</a>
   <a href="/about">About</a>