yigitdot · May 13, 2026 · May 13, 2026 · May 13, 2026
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
@@ -142,8 +142,7 @@ export default async function BlogPost({
             </div>
             <h1
               id="post-h"
-              className="hug text-balance leading-[0.95] font-bold"
-              style={{ fontSize: "var(--fs-h2)" }}
+              className="hug text-h2 text-balance leading-[0.95] font-bold"
             >
               {post.title}
             </h1>
@@ -189,10 +188,7 @@ export default async function BlogPost({
                     </span>{" "}
                     earlier
                   </span>
-                  <span
-                    className="hug leading-[1.2] font-bold"
-                    style={{ fontSize: "var(--fs-lead)" }}
-                  >
+                  <span className="hug text-lead leading-[1.2] font-bold">
                     {older.title}
                   </span>
                 </Link>
@@ -213,10 +209,7 @@ export default async function BlogPost({
                       →
                     </span>
                   </span>
-                  <span
-                    className="hug leading-[1.2] font-bold"
-                    style={{ fontSize: "var(--fs-lead)" }}
-                  >
+                  <span className="hug text-lead leading-[1.2] font-bold">
                     {newer.title}
                   </span>
                 </Link>

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -61,8 +61,7 @@ export default function BlogIndex() {
         <header className="flex flex-col gap-6">
           <h1
             id="blog-h"
-            className="hug rise rise-0 leading-[0.92] font-bold"
-            style={{ fontSize: "var(--fs-h2)" }}
+            className="hug rise rise-0 text-h2 leading-[0.92] font-bold"
           >
             field notes
             <span aria-hidden className="text-whisper">
@@ -73,10 +72,7 @@ export default function BlogIndex() {
               dimmed lead sits inside a .rise wrapper rather than carrying
               the class itself. */}
           <div className="rise rise-1">
-            <p
-              className="max-w-[60ch] leading-[1.7] opacity-75"
-              style={{ fontSize: "var(--fs-lead)" }}
-            >
+            <p className="max-w-[60ch] text-lead leading-[1.7] opacity-75">
               long-form posts on the deCDN protocol — what it is, why now, and
               how the pieces fit together. published when something&apos;s worth
               saying.
@@ -87,12 +83,7 @@ export default function BlogIndex() {
         {posts.length === 0 ? (
           <>
             <span aria-hidden className="rule mt-16 opacity-20" />
-            <p
-              className="mt-16 opacity-60"
-              style={{ fontSize: "var(--fs-body)" }}
-            >
-              nothing yet.
-            </p>
+            <p className="mt-16 text-body opacity-60">nothing yet.</p>
           </>
         ) : (
           <div className="mt-16 flex flex-col">

diff --git a/app/globals.css b/app/globals.css
@@ -34,17 +34,20 @@
   ); /* floor coupled to nav height — see --nav-h note above */
   --frame-min-h-cap: 54rem;
 
-  /* Type scale: micro and CTA are fixed; body and headlines scale with viewport. */
-  --fs-micro: 0.6875rem;
-  --fs-cta: 0.8125rem;
-  --fs-body: clamp(0.9375rem, 0.55vw + 0.78rem, 1.0625rem);
-  --fs-lead: clamp(1rem, 0.6vw + 0.82rem, 1.125rem);
-  --fs-h3: clamp(1.375rem, 4vw, 3.5rem);
-  --fs-h2: clamp(1.875rem, 5.8vw, 5.25rem);
-  --fs-method-row: clamp(2rem, 6.5vw, 6rem);
-  --fs-h1: clamp(2.25rem, 7vw, 6.5rem);
-  --fs-display: clamp(3.5rem, 14vw, 12.5rem);
-  --fs-price: clamp(1.125rem, 5vw, 4rem);
+  /* Type scale: micro and CTA are fixed; body and headlines scale with viewport.
+     Named under Tailwind v4's --text-* namespace so `text-body`, `text-h1`, …
+     utilities auto-generate. Each key is bare (no --text-*--line-height sibling),
+     so the utilities set font-size only — every call site brings its own leading-*. */
+  --text-micro: 0.6875rem;
+  --text-cta: 0.8125rem;
+  --text-body: clamp(0.9375rem, 0.55vw + 0.78rem, 1.0625rem);
+  --text-lead: clamp(1rem, 0.6vw + 0.82rem, 1.125rem);
+  --text-h3: clamp(1.375rem, 4vw, 3.5rem);
+  --text-h2: clamp(1.875rem, 5.8vw, 5.25rem);
+  --text-method-row: clamp(2rem, 6.5vw, 6rem);
+  --text-h1: clamp(2.25rem, 7vw, 6.5rem);
+  --text-display: clamp(3.5rem, 14vw, 12.5rem);
+  --text-price: clamp(1.125rem, 5vw, 4rem);
 }
 
 html {
@@ -846,11 +849,11 @@ a.underline-brutal:hover .arrow {
 
 /* --- prose: MDX body styling ------------------------------------------ */
 /* Long-form post body. Wrapped in <Prose>. Tokens drawn from the shared
-   scale (--fs-body, --fs-lead, --fs-h3) so headings track the same
+   scale (--text-body, --text-lead, --text-h3) so headings track the same
    responsive curve as everywhere else on the site.
    We deliberately do not pull in @tailwindcss/typography: Tailwind v4
    with @theme inline in globals.css makes the plugin awkward to wire,
-   and the plugin's defaults override our shared --fs-* scale, which is
+   and the plugin's defaults override our shared --text-* scale, which is
    what we wanted to keep. The block is paper-tone only by current
    usage (every <Frame> wrapping it is tone="paper"); if it's ever
    reused on a dark surface, swap var(--ink) → currentColor here and
@@ -871,7 +874,7 @@ a.underline-brutal:hover .arrow {
     "ss01" on,
     "zero" on;
   font-variant-numeric: tabular-nums;
-  font-size: var(--fs-h3);
+  font-size: var(--text-h3);
   font-weight: 600;
   letter-spacing: -0.03em;
   line-height: 1.05;
@@ -886,15 +889,15 @@ a.underline-brutal:hover .arrow {
 }
 
 .prose h3 {
-  font-size: var(--fs-lead);
+  font-size: var(--text-lead);
   font-weight: 600;
   letter-spacing: -0.01em;
   line-height: 1.2;
 }
 
 .prose p,
 .prose li {
-  font-size: var(--fs-body);
+  font-size: var(--text-body);
   line-height: 1.7;
 }
 
@@ -972,7 +975,7 @@ a.underline-brutal:hover .arrow {
 .prose table {
   width: 100%;
   border-collapse: collapse;
-  font-size: var(--fs-body);
+  font-size: var(--text-body);
 }
 
 .prose th,

diff --git a/components/site/Chrome.tsx b/components/site/Chrome.tsx
@@ -140,15 +140,11 @@ export function Chrome() {
       data-scrolled={scrolled ? "true" : undefined}
       data-tone={onDark ? "ink" : "paper"}
       data-mobile-open={mobileOpen ? "true" : undefined}
-      className={`chrome-nav fixed inset-x-0 top-0 z-50 py-5 ${
+      className={`chrome-nav fixed inset-x-0 top-0 z-50 px-[var(--frame-gutter)] py-5 ${
         onDark ? "text-paper" : "text-ink"
       }`}
-      style={{ paddingInline: "var(--frame-gutter)" }}
     >
-      <div
-        className="mx-auto grid w-full grid-cols-[1fr_auto_1fr] items-center gap-4"
-        style={{ maxWidth: "var(--frame-max)" }}
-      >
+      <div className="mx-auto grid w-full max-w-[var(--frame-max)] grid-cols-[1fr_auto_1fr] items-center gap-4">
         <Link
           href="/#intro"
           className="col-start-1 flex items-center gap-3 no-underline"

diff --git a/components/site/Close.tsx b/components/site/Close.tsx
@@ -38,11 +38,8 @@ export function Close() {
           {/* prettier-ignore */}
           <p
             data-reveal
-            style={{
-              "--reveal-delay": "120ms",
-              fontSize: "var(--fs-body)",
-            }}
-            className="max-w-[64ch] leading-[1.7]"
+            style={{ "--reveal-delay": "120ms" }}
+            className="max-w-[64ch] text-body leading-[1.7]"
           >
             <span className="text-whisper">deCDN</span>{" "}is a peer-to-peer delivery layer for large files — software releases, datasets, media libraries, ai models, anything meant to be pulled a million times and that shouldn&apos;t depend on one bucket. the code is open. the network is open. the price is posted.
           </p>
@@ -53,8 +50,7 @@ export function Close() {
             className="flex flex-col flex-wrap gap-x-10 gap-y-4 @md:flex-row @md:items-baseline"
           >
             <a
-              className="underline-brutal font-semibold tracking-[0.02em]"
-              style={{ fontSize: "var(--fs-lead)" }}
+              className="underline-brutal text-lead font-semibold tracking-[0.02em]"
               href={links.litepaper}
               target="_blank"
               rel="noopener noreferrer"
@@ -65,8 +61,7 @@ export function Close() {
               </span>
             </a>
             <a
-              className="underline-brutal font-semibold tracking-[0.02em]"
-              style={{ fontSize: "var(--fs-lead)" }}
+              className="underline-brutal text-lead font-semibold tracking-[0.02em]"
               href={links.docs}
             >
               read the docs
@@ -75,8 +70,7 @@ export function Close() {
               </span>
             </a>
             <a
-              className="underline-brutal font-semibold tracking-[0.02em]"
-              style={{ fontSize: "var(--fs-lead)" }}
+              className="underline-brutal text-lead font-semibold tracking-[0.02em]"
               href={links.github}
             >
               source on github

diff --git a/components/site/Comparison.tsx b/components/site/Comparison.tsx
@@ -15,20 +15,16 @@ export function Comparison() {
         <h2
           data-reveal
           id="compare-h"
-          className="hug flex flex-col font-semibold leading-[0.92] tracking-[-0.04em]"
-          style={{ fontSize: "var(--fs-h2)" }}
+          className="hug flex flex-col text-h2 leading-[0.92] font-semibold tracking-[-0.04em]"
         >
           <span>information scaled.</span>
           <span className="pl-[3vw] opacity-60">supply didn&apos;t.</span>
         </h2>
 
         <p
           data-reveal
-          style={{
-            "--reveal-delay": "120ms",
-            fontSize: "var(--fs-body)",
-          }}
-          className="max-w-[62ch] leading-[1.7] text-paper/75"
+          style={{ "--reveal-delay": "120ms" }}
+          className="max-w-[62ch] text-body leading-[1.7] text-paper/75"
         >
           the pattern repeats whenever something big ships: mirrors fork, cdns
           rate-limit, small teams burn tens of thousands hosting bytes they
@@ -62,13 +58,7 @@ export function Comparison() {
           <div className="meta opacity-60 @xl:col-span-2 @xl:pt-2">price</div>
           <div className="grid grid-cols-2 gap-4 @xl:contents">
             <div className="@xl:col-span-5">
-              <div
-                className="hug relative inline-flex font-semibold tracking-[-0.04em]"
-                style={{
-                  fontSize: "var(--fs-price)",
-                  lineHeight: "0.96",
-                }}
-              >
+              <div className="hug relative inline-flex text-price leading-[0.96] font-semibold tracking-[-0.04em]">
                 <span className="opacity-55">
                   $0.085–$0.17
                   <span className="meta ml-1 align-baseline opacity-70">
@@ -82,13 +72,7 @@ export function Comparison() {
               </div>
             </div>
             <div className="@xl:col-span-5">
-              <div
-                className="hug font-semibold tracking-[-0.04em]"
-                style={{
-                  fontSize: "var(--fs-price)",
-                  lineHeight: "0.96",
-                }}
-              >
+              <div className="hug text-price leading-[0.96] font-semibold tracking-[-0.04em]">
                 $0.01
                 <span className="meta ml-1 align-baseline opacity-70">/GB</span>
               </div>

diff --git a/components/site/Faq.tsx b/components/site/Faq.tsx
@@ -12,8 +12,7 @@ export function Faq() {
         <h2
           data-reveal
           id="faq-h"
-          className="hug font-semibold leading-[0.92] tracking-[-0.04em]"
-          style={{ fontSize: "var(--fs-h2)" }}
+          className="hug text-h2 leading-[0.92] font-semibold tracking-[-0.04em]"
         >
           frequently asked.
         </h2>

diff --git a/components/site/Footer.tsx b/components/site/Footer.tsx
@@ -2,19 +2,10 @@ import { links } from "@/lib/links";
 
 export function Footer() {
   return (
-    <footer
-      className="bg-paper pt-16 pb-10 text-ink"
-      style={{ paddingInline: "var(--frame-gutter)" }}
-    >
-      <div
-        className="@container mx-auto flex flex-col gap-3"
-        style={{ maxWidth: "var(--frame-max)" }}
-      >
+    <footer className="bg-paper px-[var(--frame-gutter)] pt-16 pb-10 text-ink">
+      <div className="@container mx-auto flex max-w-[var(--frame-max)] flex-col gap-3">
         <span aria-hidden className="rule opacity-40" />
-        <div
-          className="grid grid-cols-1 gap-2 tracking-[0.2em] uppercase opacity-80 @md:grid-cols-3 @md:items-center"
-          style={{ fontSize: "var(--fs-micro)" }}
-        >
+        <div className="grid grid-cols-1 gap-2 text-micro tracking-[0.2em] uppercase opacity-80 @md:grid-cols-3 @md:items-center">
           <span>© decdn labs · open source</span>
           <span className="@md:text-center">
             built in rust · probably over-engineered

diff --git a/components/site/Hero.tsx b/components/site/Hero.tsx
@@ -16,8 +16,7 @@ export function Hero() {
       <div className="mt-10 flex flex-col gap-8 @4xl:gap-12">
         <h1
           id="intro-h"
-          className="hug flex flex-col font-semibold leading-[0.9] tracking-[-0.04em]"
-          style={{ fontSize: "var(--fs-h1)" }}
+          className="hug flex flex-col text-h1 leading-[0.9] font-semibold tracking-[-0.04em]"
         >
           <span className="rise rise-1">the delivery layer</span>
           <span className="rise rise-2 pl-[7vw]">
@@ -31,10 +30,7 @@ export function Hero() {
 
         <div className="grid gap-10 @4xl:grid-cols-[minmax(0,1fr)_minmax(0,440px)] @4xl:items-end @4xl:gap-12">
           <div className="flex flex-col gap-8 @4xl:gap-12">
-            <p
-              className="rise rise-3 max-w-[64ch] leading-[1.65]"
-              style={{ fontSize: "var(--fs-body)" }}
-            >
+            <p className="rise rise-3 max-w-[64ch] text-body leading-[1.65]">
               a 14-gigabyte file posted in berlin reaches a client in tokyo in
               under a second. the client streams from three peers at once,
               verifies every chunk with blake3, and pays per megabyte in usdc —
@@ -48,8 +44,7 @@ export function Hero() {
 
             <div className="rise rise-4 flex flex-col flex-wrap gap-x-8 gap-y-3 @md:flex-row @md:items-end">
               <a
-                className="underline-brutal font-semibold tracking-[0.14em] uppercase"
-                style={{ fontSize: "var(--fs-cta)" }}
+                className="underline-brutal text-cta font-semibold tracking-[0.14em] uppercase"
                 href={links.litepaper}
                 target="_blank"
                 rel="noopener noreferrer"
@@ -60,8 +55,7 @@ export function Hero() {
                 </span>
               </a>
               <a
-                className="underline-brutal font-semibold tracking-[0.14em] uppercase"
-                style={{ fontSize: "var(--fs-cta)" }}
+                className="underline-brutal text-cta font-semibold tracking-[0.14em] uppercase"
                 href={links.docs}
               >
                 read the docs
@@ -70,8 +64,7 @@ export function Hero() {
                 </span>
               </a>
               <a
-                className="underline-brutal font-semibold tracking-[0.14em] uppercase"
-                style={{ fontSize: "var(--fs-cta)" }}
+                className="underline-brutal text-cta font-semibold tracking-[0.14em] uppercase"
                 href={links.github}
               >
                 source

diff --git a/components/site/Method.tsx b/components/site/Method.tsx
@@ -39,10 +39,7 @@ export function Method() {
 
       <div data-reveal className="mt-auto pt-12">
         <span className="meta mb-3 block opacity-60">stack</span>
-        <div
-          className="hug flex flex-wrap items-baseline gap-x-5 gap-y-2 font-semibold tracking-[-0.03em]"
-          style={{ fontSize: "var(--fs-h3)" }}
-        >
+        <div className="hug flex flex-wrap items-baseline gap-x-5 gap-y-2 text-h3 font-semibold tracking-[-0.03em]">
           <span>blake3</span>
           <span aria-hidden className="opacity-30">
             ·

diff --git a/components/ui/ComparisonRow.tsx b/components/ui/ComparisonRow.tsx
@@ -12,11 +12,8 @@ export function ComparisonRow({
   return (
     <div
       data-reveal
-      style={{
-        "--reveal-delay": `${delay}ms`,
-        fontSize: "var(--fs-body)",
-      }}
-      className="grid gap-2 border-t border-current/20 py-4 @xl:grid-cols-12 @xl:gap-8 @xl:py-5"
+      style={{ "--reveal-delay": `${delay}ms` }}
+      className="grid gap-2 border-t border-current/20 py-4 text-body @xl:grid-cols-12 @xl:gap-8 @xl:py-5"
     >
       <div className="meta opacity-60 @xl:col-span-2">{label}</div>
       <div className="grid grid-cols-2 gap-4 @xl:contents">

diff --git a/components/ui/FaqItem.tsx b/components/ui/FaqItem.tsx
@@ -27,16 +27,10 @@ export function FaqItem({
       style={{ "--reveal-delay": `${delay}ms` }}
       className="grid grid-cols-1 gap-3 py-6 @xl:grid-cols-12 @xl:gap-8 @xl:py-8"
     >
-      <div
-        className="font-semibold tracking-[-0.01em] @xl:col-span-5"
-        style={{ fontSize: "var(--fs-lead)" }}
-      >
+      <div className="text-lead font-semibold tracking-[-0.01em] @xl:col-span-5">
         {q}
       </div>
-      <p
-        className="max-w-[60ch] leading-[1.7] text-paper/75 @xl:col-span-7"
-        style={{ fontSize: "var(--fs-body)" }}
-      >
+      <p className="max-w-[60ch] text-body leading-[1.7] text-paper/75 @xl:col-span-7">
         {highlightBrand(a)}
       </p>
     </div>