trykeyline 0.1.1 → 0.1.2

package/plugins/keyline/skills/keyline/glass/type/assets/type-tokens.css

@@ -1,24 +1,16 @@
 /* ─────────────────────────────────────────────────────────────────────────
    Typographic system — tokens
-   Drop-in for Tailwind v4 (@theme) or any CSS setup (the :root block).
-   Swap "Archivo" for your family; keep the ladder.
-
-   The ladder tops out at 18px on purpose. See glass/type/scale.md — a low
-   ceiling is what forces every template onto one scale, and it's the single
-   most consequential choice in this system.
+   Tailwind v4 @theme tokens; outside Tailwind, put the same custom
+   properties on :root. Swap "Archivo" for your family; keep the ladder,
+   which tops out at 18px on purpose (glass/type/scale.md).
    ───────────────────────────────────────────────────────────────────────── */
 
 @theme {
-  /* Self-hosted, with a metric-matched fallback generated by the loader
-     (next/font, fontaine, or a hand-tuned @font-face with size-adjust). The
-     system faces after it are belt and braces for a request that never lands.
-     A bare `display: swap` without metric matching is a reflow under the
-     reader's eye — see §7 of glass/type/guide.md. */
+  /* Self-hosted with a loader-generated metric-matched fallback (§7 of
+     glass/type/guide.md). */
   --font-sans: var(--font-archivo), system-ui, -apple-system, "Helvetica Neue", sans-serif;
 
-  /* Code, commands and paths. System stack on purpose — a second webfont for
-     a handful of monospace runs isn't worth the request. A second family
-     earns a download only if it's carrying reading copy. */
+  /* Code, commands and paths: a system stack on purpose. */
   --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
 
   /* ── Size ladder ──────────────────────────────────────────────────────
@@ -33,14 +25,10 @@
   --text-micro: 12px;      /* tags · micro-labels */
   --text-tip: 11px;        /* tooltips · initials */
   --text-mark: 8.5px;      /* lettermarks — recognised, not read */
-  --text-card: 7.5px;      /* card lettering — the one place 600 is allowed */
-
-  /* ── Leading: three curves, one per job ───────────────────────────────
-     Display tightens as size grows. Reading opens as passages lengthen.
-     UI collapses to 1 so fixed-height boxes centre exactly.
+  --text-card: 7.5px;      /* card lettering */
 
-     With the size ladder this short, leading is a ROLE SIGNAL, not a
-     refinement: lead / body / dek are the same size and differ only here. */
+  /* ── Leading: three curves, one per job (§3 of the guide). With a ladder
+     this short, leading is a role signal: lead / body / dek differ only here. */
   --leading-page: 1.25;
   --leading-title: 1.3;    /* a detail-page title, which wraps to two lines */
   --leading-heading: 1.2;  /* a section heading, which doesn't */
@@ -52,9 +40,7 @@
   --leading-tight: 1.4;
   --leading-none: 1;
 
-  /* ── Tracking: a large-size correction ────────────────────────────────
-     Two values, 2px apart, because there are only two sizes above 14px.
-     A system tracking six steps has a scale doing too much work. */
+  /* ── Tracking (§4 of the guide) ───────────────────────────────────── */
   --tracking-page: -0.02em;     /* 18px */
   --tracking-heading: -0.015em; /* 16px */
   --tracking-card: -0.01em;     /* 7.5px, set solid */
@@ -63,24 +49,11 @@
   /* ── Weight: two, and only two ─────────────────────────────────────── */
   --font-weight-normal: 400;   /* all body, all prose, all quiet UI */
   --font-weight-medium: 500;   /* headings, <strong>, active state, marks */
-  /* The one exception, and it lives below the readable floor: at 7.5px a 500
-     doesn't survive rasterisation, so the choice is 600 or nothing. One
-     instance of this in a codebase is the right number. */
+  /* The one exception: §2 of the guide. */
   --font-weight-card: 600;
 }
 
-/* Text colour tiers live in the Glass colour guide (`glass/color/guide.md`). The roles below
-   reference them by name:
-     primary   → --color-gray-1000   17.93:1
-     secondary → --color-gray-900     8.45:1
-     muted     → --color-muted        6.48:1
-     quiet     → --color-quiet        5.49:1
-     faint     → --color-faint        4.61:1
-
-   Only the top two are ramp steps. muted/quiet/faint are their OWN tokens,
-   because a border needs 3:1 against its surface and text needs 4.5:1 — one
-   step can't serve both. Reusing mid-ramp greys (500-800) for text fails in
-   a light theme while looking perfectly fine in dark. */
+/* Text tiers (primary → faint) and their contrast: glass/color/guide.md. */
 
 @layer base {
   body {
@@ -89,18 +62,14 @@
     font-size: var(--text-copy);
     line-height: var(--leading-body);
 
-    /* Tabular by default. In a text-heavy interface most numbers sit in a
-       column that should align — dates, timestamps, read times, clocks.
-       A live-updating number is unreadable without this. */
+    /* Tabular by default (§6 of the guide). */
     font-variant-numeric: tabular-nums;
 
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
 
-  /* Emphasis is re-mapped onto weight and colour. A separate italic file
-     fights geometric letterforms, and a 700 bold blots open prose. Keep the
-     semantic tags — only the visual mapping changed. */
+  /* Emphasis maps onto weight and colour (§5 of the guide). */
   em,
   i {
     font-style: normal;
@@ -115,11 +84,7 @@
 /* ─────────────────────────────────────────────────────────────────────────
    Role classes — optional. Use these, or apply the tokens inline through
    Tailwind arbitrary values (text-[14px] leading-[1.65]) as the reference
-   implementation does. Either way the numbers come from one place.
-
-   Note how many of these share --text-copy. That's the system working: once
-   the ladder is short, a role is a (size, leading, weight, rule) tuple and
-   size is usually the part that doesn't vary.
+   implementation does.
    ───────────────────────────────────────────────────────────────────────── */
 
 @layer components {
@@ -260,27 +225,26 @@
 }
 
 /* ─────────────────────────────────────────────────────────────────────────
-   Imported prose — a rendered Markdown document, a CMS field, a README.
-   It arrives as an HTML string, so it can't carry utility classes. Style it
-   by element inside one scoped class, and map it onto the roles above rather
-   than letting it invent a second ladder.
+   Imported prose — rendered Markdown that can't carry utility classes,
+   styled by element in one scoped class on the ladder above (§8 of the
+   guide). `.skill-prose` is the class the reference site uses.
    ───────────────────────────────────────────────────────────────────────── */
 
 @layer components {
-  .prose-imported {
+  .skill-prose {
     font-size: var(--text-copy);
     line-height: var(--leading-read);
     color: var(--color-muted);
   }
   /* The document starts with whatever it starts with; a leading <h2> would
      otherwise push 44px of nothing above itself. */
-  .prose-imported > :first-child {
+  .skill-prose > :first-child {
     margin-top: 0;
   }
 
   /* Three levels, not two — an imported document nests deeper than authored
      prose, so h4 gets a real role instead of a browser default. */
-  .prose-imported h2 {
+  .skill-prose h2 {
     margin: 44px 0 12px;
     font-size: var(--text-section);
     font-weight: var(--font-weight-medium);
@@ -288,14 +252,14 @@
     letter-spacing: var(--tracking-heading);
     color: var(--color-gray-1000);
   }
-  .prose-imported h3 {
+  .skill-prose h3 {
     margin: 32px 0 10px;
     font-size: var(--text-copy);
     font-weight: var(--font-weight-medium);
     line-height: var(--leading-tight);
     color: var(--color-gray-1000);
   }
-  .prose-imported h4 {
+  .skill-prose h4 {
     margin: 24px 0 8px;
     font-size: var(--text-dense);
     font-weight: var(--font-weight-medium);
@@ -303,23 +267,22 @@
     color: var(--color-gray-900);
   }
 
-  .prose-imported p,
-  .prose-imported ul,
-  .prose-imported ol,
-  .prose-imported blockquote {
+  .skill-prose p,
+  .skill-prose ul,
+  .skill-prose ol,
+  .skill-prose blockquote {
     margin: 12px 0;
   }
 
-  /* A UA disc at 14px is far too heavy for this system. Same 3px dot as the
-     hand-rolled bullets everywhere else. */
-  .prose-imported ul {
+  /* The 3px dot of the hand-rolled bullets (glass/type/long-form-prose.md). */
+  .skill-prose ul {
     list-style: none;
     padding-left: 18px;
   }
-  .prose-imported ul > li {
+  .skill-prose ul > li {
     position: relative;
   }
-  .prose-imported ul > li::before {
+  .skill-prose ul > li::before {
     content: "";
     position: absolute;
     left: -14px;
@@ -329,22 +292,22 @@
     border-radius: 999px;
     background: var(--color-gray-500);
   }
-  .prose-imported ol {
+  .skill-prose ol {
     list-style: decimal;
     padding-left: 18px;
   }
   /* Tabular, so a run past 9 doesn't shift its text. */
-  .prose-imported li::marker {
+  .skill-prose li::marker {
     color: var(--color-faint);
     font-variant-numeric: tabular-nums;
   }
 
-  .prose-imported strong {
+  .skill-prose strong {
     font-weight: var(--font-weight-medium);
     color: var(--color-gray-1000);
   }
 
-  .prose-imported code {
+  .skill-prose code {
     font-family: var(--font-mono);
     font-size: 0.87em;
     background: var(--color-gray-100);
@@ -353,10 +316,8 @@
     color: var(--color-gray-1000);
   }
 
-  /* Code blocks and tables are the two things a Markdown document has that a
-     designed page doesn't, and both are unbounded. Each scrolls inside its
-     own box — the page body must never scroll sideways. */
-  .prose-imported pre {
+  /* Code blocks and tables scroll inside their own box, never the page. */
+  .skill-prose pre {
     margin: 16px 0;
     padding: 14px 16px;
     background: var(--color-background-200);
@@ -364,7 +325,7 @@
     border-radius: 12px;
     overflow-x: auto;
   }
-  .prose-imported pre code {
+  .skill-prose pre code {
     background: none;
     padding: 0;
     font-size: var(--text-code);
@@ -373,24 +334,24 @@
   }
 
   /* Wrap each <table> in a div with this class at render time. */
-  .prose-imported .table-scroll {
+  .skill-prose .table-scroll {
     margin: 16px 0;
     overflow-x: auto;
   }
-  .prose-imported table {
+  .skill-prose table {
     width: 100%;
     border-collapse: collapse;
     font-size: var(--text-dense);
     line-height: 1.5;
   }
-  .prose-imported th,
-  .prose-imported td {
+  .skill-prose th,
+  .skill-prose td {
     padding: 8px 12px 8px 0;
     text-align: left;
     vertical-align: top;
     border-bottom: 1px solid var(--color-gray-alpha-300);
   }
-  .prose-imported th {
+  .skill-prose th {
     font-weight: var(--font-weight-medium);
     color: var(--color-gray-1000);
     white-space: nowrap;
@@ -398,17 +359,17 @@
 
   /* Imported Markdown can't take the authored pull quote's 3px rounded bar
      (glass/type/assets/prose.tsx), so it keeps a plain 2px rule. */
-  .prose-imported blockquote {
+  .skill-prose blockquote {
     padding-left: 15px;
     border-left: 2px solid var(--color-gray-alpha-300);
     color: var(--color-faint);
   }
-  .prose-imported hr {
+  .skill-prose hr {
     margin: 32px 0;
     border: 0;
     border-top: 1px solid var(--color-gray-alpha-300);
   }
-  .prose-imported img {
+  .skill-prose img {
     max-width: 100%;
     height: auto;
     border-radius: 12px;

package/plugins/keyline/skills/keyline/glass/type/guide.md

@@ -33,7 +33,7 @@ Each role gets a size in steps of 1–2px, as densely as the roles demand (domai
 
 Text tiers (`primary` → `quiet`) come from the Glass colour guide (`glass/color/guide.md`). Only the top two are grey-ramp steps (`gray-1000`, `gray-900`); `muted` / `quiet` / `faint` are separate tokens picked for contrast (colour law 2).
 
-**Eighteen is the ceiling, and it's lower than you think.** An earlier ladder topped out at 30px, with a 19px prose heading, a 17px dek and a 16px prose body. Case studies and articles opened at 30px and every other page at 18px, so a case study felt like a different site (domain law 2). The rest of the site ran on **two sizes**, 16 for headings and 14 for everything read; the detail templates came down to those, and the four sizes were deleted, not replaced. One element likewise takes one role on every page, and sibling controls match (domain law 2).
+**Eighteen is the ceiling, and it's lower than you think.** The site runs on **two sizes**, 16 for headings and 14 for everything read; the detail templates that once opened two steps above every other page came down to those (domain law 2; the deleted sizes are in `glass/type/scale.md`). One element likewise takes one role on every page, and sibling controls match (domain law 2).
 
 ### When size stops doing the work
 
@@ -50,7 +50,7 @@ At one size, the 17px keyline that once shouted over a 16px heading can't return
 
 The cost is a flatter page: titles and section headings are both 16px, separated by position and spacing. It's the right flat, because the home page already worked that way and the detail pages were the outlier.
 
-**Nothing in this ladder resizes.** The old step, a 30px title dropping to 26px below `sm`, went with the size that needed it (the domain's responsive-sizes dial).
+**Nothing in this ladder resizes** (the domain's responsive-sizes dial).
 
 → Full derivation, including how to add a role without bloating the ladder: `glass/type/scale.md`
 
@@ -67,7 +67,7 @@ Quiet or lifted is set by what the line is doing there, one lift per group, one
 
 A contents rail's active row takes `font-medium` *and* primary colour, so state is never on colour alone; no state greys a title (domain laws 3 and 5).
 
-→ Weight and tracking in depth, including when 300 is legitimate: `glass/type/weight-and-tracking.md`
+→ Weight and tracking in depth: `glass/type/weight-and-tracking.md`
 
 ## 3. Leading runs inverse to size
 

package/plugins/keyline/skills/keyline/glass/type/long-form-prose.md

@@ -10,7 +10,7 @@ How Glass sets the reading half: looser leading and spacing than anything else o
 
 Prose body is 14/1.75: a UI paragraph's size, noticeably more open (1.75 vs 1.55).
 
-Why 1.75: a 576px text column at 14px holds roughly 85–95 characters a line, past comfortable, and long lines need more leading for the eye to find the next line's start. A shorter measure could pull it back toward 1.6.
+Why 1.75: the ~90-character measure (`glass/layout/measure-and-rhythm.md`). A shorter measure could pull it back toward 1.6.
 
 ## The reading column is two sizes
 
@@ -24,25 +24,9 @@ Why 1.75: a 576px text column at 14px holds roughly 85–95 characters a line, p
 | Pull quote | 14 | a 3px rounded bar and a 16px indent |
 | Note | 13 | a 1px rule, the faint tier, and a step down in size |
 
-## Keyline and note
+## The blocks, in code
 
-Both came from one diagnosis: a body of writing that was 114 paragraphs and almost nothing else. What each is for, and the build check that keeps them honest: `domains/type/prose-and-emphasis.md`, **Two block types worth having**.
-
-**`keyline`** — body size, weight 500, `my-9`.
-
-```tsx
-case "keyline":
-  return <p className="reveal my-9 text-[14px] font-medium leading-[1.6] text-gray-1000">…</p>;
-```
-
-**`note`** — 13px, faint tier, a 1px left rule and 16px of indent.
-
-```tsx
-case "note":
-  return <p className="reveal my-7 border-l border-gray-alpha-300 pl-4 text-[13px] leading-[1.6] text-faint">…</p>;
-```
-
-The note's rule is 1px and the quote's 3px, with the type inside four steps apart, so the two indented rules can't be mistaken for each other.
+Every block's classes — lead, body, keyline, note, h2, quote, figure, lists — are in `glass/type/assets/prose.tsx`, with the reason for each beside it. Keyline and note both came from one diagnosis, a body of writing that was 114 paragraphs and almost nothing else; what each is for, and the build check that keeps them honest: `domains/type/prose-and-emphasis.md`, **Two block types worth having**.
 
 ## Block spacing
 
@@ -59,61 +43,12 @@ The note's rule is 1px and the quote's 3px, with the type inside four steps apar
 
 The heading's 40 above and 12 below, ~3.3:1, is the domain's asymmetric heading space; the keyline is its symmetric exception.
 
-## Headings inside prose
-
-```tsx
-<h2 className="mt-10 mb-3 text-[16px] font-medium leading-[1.2] tracking-[-0.015em]">
-```
-
-16px against 14px body is one step; the weight (500), the tight leading (1.2) and the 40px above do the real work.
-
-It matches a page-level section heading and the detail page's own `<h1>`: three levels at one size, separated by position and spacing. Flatter than most article templates, and deliberate — the alternative was an in-body heading larger than the page title.
-
-## Quotes
-
-```tsx
-<blockquote className="my-9 flex gap-4">
-  <span aria-hidden className="w-[3px] shrink-0 rounded-full bg-gray-500" />
-  <div className="text-[14px] leading-[1.75] text-gray-1000">…</div>
-</blockquote>
-```
-
-The type matches the body around it, so the bar is the entire signal: the 2px `gray-alpha-300` border it replaced is domain law 4's example of auditing what's left after a signal goes. Why a flex child with no vertical margin: `domains/type/prose-and-emphasis.md`, **Quotes**.
-
-- **`bg-gray-500`, from the grey ramp, not the alpha ramp.** It's a decorative mark on an opaque surface — see the Glass colour guide (`glass/color/guide.md`) on why decorative marks stay on the solid ramp.
-
-Still absent: italic (globally disabled), quotation marks, background, colour step. Stepping the quote *down* to secondary, as earlier versions did, at body size just makes a de-emphasised paragraph.
-
-The citation goes quieter and explicitly kills the browser's italic (domain law 9):
-
-```tsx
-<cite className="mt-2 block text-[13px] not-italic text-quiet">— {cite}</cite>
-```
-
-## Figures
-
-```tsx
-<figure className="reveal my-9">
-  <div className="overflow-hidden rounded-[10px] bg-gray-100 ring-1 ring-gray-alpha-300">
-    <div style={{ aspectRatio: b.aspect ?? "16 / 9" }}>
-      <img src={b.src} alt={b.alt} loading="lazy" decoding="async" className="h-full w-full object-cover" />
-    </div>
-  </div>
-  <figcaption className="mt-2.5 text-[13px] leading-[1.55] text-faint">{caption}</figcaption>
-</figure>
-```
-
-The aspect ratio sits on a wrapper so the box is reserved before the image loads. `ring-1` rather than a border, so the outline stays out of the box model and the corner radius stays exact.
-
-**The caption is the point of the figure, not a label on it**: what the thing was for, and which constraint shaped it. It sits at the note/meta tier (13px, faint).
-
-## Lists
-
-```tsx
-<ul className="mb-6 list-disc space-y-2 pl-5 marker:text-gray-500">
-```
+## What the code doesn't say
 
-The `marker:` variant puts the domain's quiet marker (`domains/type/prose-and-emphasis.md`, **Lists**) on `gray-500`; the same goes for `list-decimal`.
+- **Prose headings** match a page-level section heading and the detail page's own `<h1>`: three levels at 16px, separated by position and spacing. The alternative was an in-body heading larger than the page title.
+- **The pull quote's bar is the entire signal**, since its type matches the body: the 2px `gray-alpha-300` border it replaced is domain law 4's example of auditing what's left after a signal goes. `bg-gray-500` is from the solid ramp, a decorative mark on an opaque surface (`glass/color/guide.md`). Still absent: italic, quotation marks, background, a colour step.
+- **A figure's caption is the point of the figure**, not a label on it: what the thing was for, and which constraint shaped it.
+- **Authored lists keep the UA marker** (`list-disc` / `list-decimal`) on `gray-500`, the domain's quiet marker; imported Markdown uses the 3px dot instead (§8 of `glass/type/guide.md`). Both are what the site ships.
 
 ## Hand-rolled bullets in UI context
 
@@ -144,7 +79,7 @@ Every block carries `reveal`, so paragraphs fade up one by one as they enter the
 <p className="mt-2 text-[14px] leading-[1.55] text-muted">{dek}</p>
 ```
 
-Body size, muted, tighter leading. It was 17px, the ladder's one odd number, sitting between a 30px title and 16px prose; with both gone it separates on colour and leading alone: 1.55, against the body's 1.75 and the lead's 1.9. Dek and lead are the domain's tightest pairing; check them first.
+Body size, muted, tighter leading: it separates on colour and leading alone, 1.55 against the body's 1.75 and the lead's 1.9. Dek and lead are the domain's tightest pairing; check them first.
 
 ## Cover art and the measure
 

package/plugins/keyline/skills/keyline/glass/type/scale.md

@@ -17,7 +17,7 @@ A modular scale gives too few sizes in the 11–16px band, where Glass needs 11,
 - 12.5px code. Monospace runs wide, so it steps down to occupy the same measure as the prose around it — the one size that compensates for a *family* rather than a role.
 - 12px. Tags, prev/next labels, hover-card titles; small enough to read as annotation.
 - 11px. Tooltips and avatar initials. The floor for anything a user is expected to read.
-- 8.5px lettermarks, 7.5px card lettering. Below the floor on purpose — recognised rather than read, which is also why 7.5px is the one place a 600 weight is allowed.
+- 8.5px lettermarks, 7.5px card lettering. Below the floor on purpose — recognised rather than read (the 600 exception: §2 of the guide).
 
 **What was deleted**
 
@@ -44,11 +44,7 @@ In the 11–16px band the steps are 1px, and that is enough (`domains/type/ladde
 
 ## Fixed sizes, not `rem`, and why that's a choice
 
-The reference implementation uses `px` throughout (`text-[14px]`, not `text-sm` or `0.875rem`).
-
-The trade: `rem` respects a user's browser font-size setting and `px` doesn't, a real accessibility cost. But this hierarchy depends on precise 1px relationships in the 11–16 band, a root scaled to 20px turns them into 15px steps that break the ladder, and browser *zoom* — which everyone uses, and which scales `px` fine — already covers the need.
-
-If your audience skews toward users who set a root font size — documentation, government, healthcare — use `rem` and accept a looser ladder. Convert at a fixed 16px root: 18px → 1.125rem, 14px → 0.875rem, 13px → 0.8125rem. Never mix the two (the domain's unit dial).
+The reference implementation uses `px` throughout (`text-[14px]`, not `text-sm` or `0.875rem`), to keep the 1px steps of the 11–16 band exact under a scaled root; the trade is the domain's unit dial. Moving to `rem`, convert at a fixed 16px root: 18px → 1.125rem, 14px → 0.875rem, 13px → 0.8125rem.
 
 ## Keeping every element on it
 

package/plugins/keyline/skills/keyline/glass/type/weight-and-tracking.md

@@ -16,13 +16,11 @@ All body copy. All prose. Deks. Meta lines. Tags. Tooltips. Timestamps. Quiet na
 **500 — structure and state.**
 Headings h1–h4. `<strong>`. The active row in a table of contents. Names and wordmarks. Captions that label an image rather than describe it. Lettermarks. Company/role titles in a list, where the role is structural and the date supporting.
 
-### Quiet and lifted, by scenario
+The lists are defaults; the choice is made per spot (domain law 5): the same 13px line is 400 as a date under a title and 500 as the name heading a group.
 
-The lists above are defaults; the choice is made per spot, by the rules in domain law 5. The same 13px line is 400 as a date under a title and 500 as the name heading a group, because the job changed, not the importance. With two weights, a step is the whole axis, so when a screen feels heavy the fix is moving lines back to 400, one context at a time; there's never a lighter scale to reach for.
+### 300
 
-### When 300 is legitimate
-
-Rarely, and never for text read at length: at a very large display size (48px+), where 400 starts to look heavy, or a decorative numeral. If your interface tops out at 30px — most do — you don't need it. The reference implementation loaded 300 for a while and never used it; dropping it from the font request was a straight performance win.
+Not loaded. The reference implementation loaded it for a while and never used it; dropping it from the font request was a straight performance win.
 
 ### Weight as an accessibility signal
 
@@ -32,23 +30,9 @@ The active table-of-contents row takes the primary text colour *and* weight 500
 className={`… ${tone} ${state === "active" ? "font-medium" : ""}`}
 ```
 
-Weight is cheaper here than a background pill, border or icon, each of which adds visual weight to a list meant to be quiet.
-
 ## Tracking
 
-### The ladder
-
-| Size | Tracking | Reasoning |
-|---|---|---|
-| 7.5px | −0.01em | Card lettering, set solid. The exception below the floor — see the note. |
-| 8.5–11px | +0.02em | Tiny glyphs and near-caps need air or the counters close up. |
-| 12–14px | 0 | Default metrics are designed for this range. Leave them. |
-| 16px | −0.015em | Enough to look set; small enough to be invisible as a decision. |
-| 18px | −0.02em | A page title is a tighter, more deliberate object than a section heading two pixels below. |
-
-Only two rows are the negative-tracking-at-size rule, because the ladder tops out at 18px. An earlier table ran to 30px at −0.025em, with separate values for a 19px heading and a 19px quote; all three sizes left the ladder and took their tracking with them.
-
-The 7.5px row doesn't contradict the 8.5–11px one: that lettering is set solid at near-caps size on a card, so the tightening compensates for the *setting*, not the size. It's also the one place a 600 weight is allowed. Two exceptions in one place hint you're outside the text system — which you are, since nobody reads it.
+The values are §4 of `glass/type/guide.md`. Only 16px and 18px are the negative-tracking-at-size rule, because the ladder tops out at 18px. The 7.5px card lettering's −0.01em doesn't contradict the lettermarks' +0.02em: it is set solid at near-caps size, so the tightening compensates for the *setting*, not the size.
 
 ### The 8.5px lettermark
 

package/plugins/keyline/skills/keyline/scripts/check/css.mjs

@@ -13,12 +13,6 @@ export function blankComments(text) {
   return text.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, " "));
 }
 
-export function lineAt(text, offset) {
-  let line = 1;
-  for (let i = 0; i < offset && i < text.length; i++) if (text.charCodeAt(i) === 10) line++;
-  return line;
-}
-
 /** Lines start offsets, for fast offset → line lookups on big files. */
 export function lineIndex(text) {
   const starts = [0];
@@ -44,8 +38,7 @@ export function parseCss(source, baseLine = 1) {
   const at = lineIndex(text);
   const decls = [];
   const atRules = [];
-  const blocks = []; // { selector, atRules, decls }
-  const stack = []; // open blocks: { kind: 'rule'|'at', prelude, block }
+  const stack = []; // open blocks: { kind: 'rule'|'at', prelude, block: { decls } }
   let start = 0;
   let quote = null;
   let paren = 0;
@@ -65,7 +58,7 @@ export function parseCss(source, baseLine = 1) {
     const value = raw.slice(colon + 1).trim();
     const lead = from + raw.search(/\S/);
     const ctx = context();
-    const d = { prop, value, line: at(lead) + baseLine - 1, offset: lead, selector: ctx.selector, atRules: ctx.atRules, block: ctx.block };
+    const d = { prop, value, line: at(lead) + baseLine - 1, selector: ctx.selector, atRules: ctx.atRules, block: ctx.block };
     decls.push(d);
     ctx.block?.decls.push(d);
   };
@@ -85,10 +78,8 @@ export function parseCss(source, baseLine = 1) {
       const prelude = text.slice(start, i).trim().replace(/\s+/g, " ");
       const kind = prelude.startsWith("@") ? "at" : "rule";
       const lead = start + text.slice(start, i).search(/\S/);
-      const block = { selector: kind === "rule" ? prelude : context().selector, atRules: [...context().atRules, ...(kind === "at" ? [prelude] : [])], decls: [], line: at(Math.max(lead, 0)) + baseLine - 1 };
-      if (kind === "at") atRules.push({ prelude, line: block.line });
-      blocks.push(block);
-      stack.push({ kind, prelude, block });
+      if (kind === "at") atRules.push({ prelude, line: at(Math.max(lead, 0)) + baseLine - 1 });
+      stack.push({ kind, prelude, block: { decls: [] } });
       start = i + 1;
     } else if (c === ";") {
       if (stack.length) pushDecl(start, i);
@@ -103,7 +94,7 @@ export function parseCss(source, baseLine = 1) {
       start = i + 1;
     }
   }
-  return { decls, atRules, blocks };
+  return { decls, atRules };
 }
 
 /** Parse a `style="..."` attribute's body. */

package/plugins/keyline/skills/keyline/scripts/check/design.mjs

@@ -50,7 +50,9 @@ export function readDesign(root) {
   // or mentions one — their values are the ladder.
   const layout = section(md, "Layout");
   const zLadder = new Set();
-  for (const row of layout.split("\n").filter((l) => /^\|\s*`?z\./.test(l) || (l.startsWith("|") && /`-?z-\[?-?\d|`z\./.test(l)))) {
+  // A project rung (`--z-header`, `$z-header`, a `z-header` utility) counts when it opens the token cell, the row's second.
+  const zCell = (c) => /^`(--|\$)?z-[\w-]+`/.test(c);
+  for (const row of layout.split("\n").filter((l) => /^\|\s*`?z\./.test(l) || (l.startsWith("|") && (/`-?z-\[?-?\d|`z\./.test(l) || zCell((l.split("|")[2] ?? "").trim()))))) {
     const cells = row.split("|").slice(1, -1).map((c) => c.trim());
     for (const c of cells.slice(1)) for (const m of c.matchAll(/(?<![\w.#-])(-?\d+)(?![\w.%])/g)) zLadder.add(Number(m[1]));
   }