trykeyline 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,416 @@
+/* ─────────────────────────────────────────────────────────────────────────
+   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.
+   ───────────────────────────────────────────────────────────────────────── */
+
+@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. */
+  --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. */
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* ── Size ladder ──────────────────────────────────────────────────────
+     Each size exists for a named role. See glass/type/scale.md before
+     adding one — most new roles fit an existing size at a new leading. */
+  --text-page: 18px;       /* index-page title — the top of the ladder */
+  --text-section: 16px;    /* detail-page title · section heading · prose heading */
+  --text-copy: 14px;       /* body · lead · keyline · quote · dek · UI rows */
+  --text-summary: 13.5px;  /* collapsed summary lines — the one half-step */
+  --text-dense: 13px;      /* notes · captions · meta · facts · footer */
+  --text-code: 12.5px;     /* monospace runs, stepped down for a wider family */
+  --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.
+
+     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-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 */
+  --leading-lead: 1.9;     /* the opening paragraph */
+  --leading-prose: 1.75;   /* body — the baseline the others read against */
+  --leading-read: 1.65;
+  --leading-keyline: 1.6;
+  --leading-body: 1.55;
+  --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-page: -0.02em;     /* 18px */
+  --tracking-heading: -0.015em; /* 16px */
+  --tracking-card: -0.01em;     /* 7.5px, set solid */
+  --tracking-mark: 0.02em;      /* tiny caps need the opposite */
+
+  /* ── 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. */
+  --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. */
+
+@layer base {
+  body {
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-normal);
+    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. */
+    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. */
+  em,
+  i {
+    font-style: normal;
+  }
+
+  /* <cite> and <blockquote> carry UA italics the rule above doesn't reach. */
+  cite {
+    font-style: normal;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   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.
+   ───────────────────────────────────────────────────────────────────────── */
+
+@layer components {
+  /* An index page's title. The largest role there is. */
+  .t-page {
+    font-size: var(--text-page);
+    line-height: var(--leading-page);
+    letter-spacing: var(--tracking-page);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* A detail page's title. Looser leading than a section heading because it
+     wraps; otherwise identical, and deliberately so. */
+  .t-title {
+    font-size: var(--text-section);
+    line-height: var(--leading-title);
+    letter-spacing: var(--tracking-heading);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .t-section {
+    font-size: var(--text-section);
+    line-height: var(--leading-heading);
+    letter-spacing: var(--tracking-heading);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .t-sub {
+    font-size: var(--text-copy);
+    line-height: var(--leading-tight);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* Long-form body. Same size as a UI paragraph; the leading is the whole
+     difference, and it has to be exact. */
+  .t-prose {
+    font-size: var(--text-copy);
+    line-height: var(--leading-prose);
+  }
+
+  /* The opening paragraph. Separates from .t-prose on leading alone. */
+  .t-lead {
+    font-size: var(--text-copy);
+    line-height: var(--leading-lead);
+  }
+
+  /* The one sentence a section is for. Separates on weight and on air —
+     symmetric margins, because it belongs to neither neighbour. */
+  .t-keyline {
+    font-size: var(--text-copy);
+    line-height: var(--leading-keyline);
+    font-weight: var(--font-weight-medium);
+    margin-block: 36px;
+  }
+
+  /* A standfirst. Separates from .t-lead on colour and leading — the
+     tightest pairing in the system. Check this one first if a page starts
+     to look undifferentiated. */
+  .t-dek {
+    font-size: var(--text-copy);
+    line-height: var(--leading-body);
+    color: var(--color-muted);
+  }
+
+  .t-read {
+    font-size: var(--text-copy);
+    line-height: var(--leading-read);
+  }
+
+  .t-body {
+    font-size: var(--text-copy);
+    line-height: var(--leading-body);
+  }
+
+  /* Single-line UI text in a fixed-height box. leading-none so a descender
+     can't shift the box and vertical centring is exact. */
+  .t-row {
+    font-size: var(--text-copy);
+    line-height: var(--leading-none);
+  }
+
+  .t-summary {
+    font-size: var(--text-summary);
+    line-height: var(--leading-keyline);
+  }
+
+  .t-dense {
+    font-size: var(--text-dense);
+    line-height: var(--leading-tight);
+  }
+
+  /* An aside set outside the argument — a caveat, a scope limit, a piece of
+     provenance. Its 1px rule is deliberately lighter than the pull quote's
+     3px bar: two indented rules on one page must be unmistakable. */
+  .t-note {
+    font-size: var(--text-dense);
+    line-height: var(--leading-keyline);
+    color: var(--color-faint);
+    border-left: 1px solid var(--color-gray-alpha-300);
+    padding-left: 16px;
+    margin-block: 28px;
+  }
+
+  .t-meta {
+    font-size: var(--text-dense);
+  }
+
+  .t-code {
+    font-family: var(--font-mono);
+    font-size: var(--text-code);
+    line-height: var(--leading-keyline);
+  }
+
+  .t-micro {
+    font-size: var(--text-micro);
+  }
+
+  .t-tip {
+    font-size: var(--text-tip);
+    line-height: var(--leading-none);
+  }
+
+  /* Not text — a two-or-three-letter stand-in for a logo, sized below the
+     readability floor because you recognise it rather than read it. */
+  .t-mark {
+    font-size: var(--text-mark);
+    line-height: var(--leading-none);
+    letter-spacing: var(--tracking-mark);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .t-card {
+    font-size: var(--text-card);
+    line-height: 1.2;
+    letter-spacing: var(--tracking-card);
+    font-weight: var(--font-weight-card);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   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.
+   ───────────────────────────────────────────────────────────────────────── */
+
+@layer components {
+  .prose-imported {
+    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 {
+    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 {
+    margin: 44px 0 12px;
+    font-size: var(--text-section);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-heading);
+    letter-spacing: var(--tracking-heading);
+    color: var(--color-gray-1000);
+  }
+  .prose-imported 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 {
+    margin: 24px 0 8px;
+    font-size: var(--text-dense);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-tight);
+    color: var(--color-gray-900);
+  }
+
+  .prose-imported p,
+  .prose-imported ul,
+  .prose-imported ol,
+  .prose-imported 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 {
+    list-style: none;
+    padding-left: 18px;
+  }
+  .prose-imported ul > li {
+    position: relative;
+  }
+  .prose-imported ul > li::before {
+    content: "";
+    position: absolute;
+    left: -14px;
+    top: 10px;
+    width: 3px;
+    height: 3px;
+    border-radius: 999px;
+    background: var(--color-gray-500);
+  }
+  .prose-imported ol {
+    list-style: decimal;
+    padding-left: 18px;
+  }
+  /* Tabular, so a run past 9 doesn't shift its text. */
+  .prose-imported li::marker {
+    color: var(--color-faint);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .prose-imported strong {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-gray-1000);
+  }
+
+  .prose-imported code {
+    font-family: var(--font-mono);
+    font-size: 0.87em;
+    background: var(--color-gray-100);
+    border-radius: 4px;
+    padding: 1.5px 4px;
+    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 {
+    margin: 16px 0;
+    padding: 14px 16px;
+    background: var(--color-background-200);
+    border: 1px solid var(--color-gray-alpha-300);
+    border-radius: 12px;
+    overflow-x: auto;
+  }
+  .prose-imported pre code {
+    background: none;
+    padding: 0;
+    font-size: var(--text-code);
+    line-height: var(--leading-keyline);
+    color: var(--color-gray-900);
+  }
+
+  /* Wrap each <table> in a div with this class at render time. */
+  .prose-imported .table-scroll {
+    margin: 16px 0;
+    overflow-x: auto;
+  }
+  .prose-imported table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--text-dense);
+    line-height: 1.5;
+  }
+  .prose-imported th,
+  .prose-imported td {
+    padding: 8px 12px 8px 0;
+    text-align: left;
+    vertical-align: top;
+    border-bottom: 1px solid var(--color-gray-alpha-300);
+  }
+  .prose-imported th {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-gray-1000);
+    white-space: nowrap;
+  }
+
+  /* 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 {
+    padding-left: 15px;
+    border-left: 2px solid var(--color-gray-alpha-300);
+    color: var(--color-faint);
+  }
+  .prose-imported hr {
+    margin: 32px 0;
+    border: 0;
+    border-top: 1px solid var(--color-gray-alpha-300);
+  }
+  .prose-imported img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 12px;
+  }
+}

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

@@ -0,0 +1,220 @@
+# Glass Typography
+
+> **Glass preset.** This is the type system running on [modimihir.com](https://modimihir.com), with its real values, meant to be copied whole. Read it beside `domains/type/guide.md`: the laws and their reasons are there, and this guide holds only what Glass decides — its ladder, its values, its recipes and why it chose them. Under any other preset, the domain guide leads and this guide is only a worked example.
+
+For interfaces where the text *is* the product — portfolios, docs, writing. The aim: **a reader should never notice the typography, only the hierarchy.** The example is Archivo in a 640px measure with Tailwind v4 tokens.
+
+## 1. The role ladder
+
+Each role gets a size in steps of 1–2px, as densely as the roles demand (domain law 1):
+
+| Role | Size | Leading | Tracking | Weight | Text tier |
+|---|---|---|---|---|---|
+| Index page title (h1) | 18 | 1.25 | −0.02em | 500 | primary |
+| Detail page title (h1) | 16 | 1.3 | −0.015em | 500 | primary |
+| Section heading (h2) | 16 | 1.2 | −0.015em | 500 | primary |
+| Prose heading (h2) | 16 | 1.2 | −0.015em | 500 | primary |
+| Keyline — a section's claim | 14 | 1.6 | — | 500 | primary |
+| Lead paragraph | 14 | 1.9 | — | 400 | primary |
+| Prose body | 14 | 1.75 | — | 400 | primary |
+| Pull quote | 14 | 1.75 | — | 400 | primary |
+| Dek / standfirst | 14 | 1.55 | — | 400 | muted |
+| Reading paragraph | 14 | 1.65 | — | 400 | primary or muted |
+| Sub-heading (h3/h4) | 14 | 1.4 | — | 500 | primary |
+| UI row | 14 | 1 | — | 400 | secondary |
+| Summary line | 13.5 | 1.6 | — | 400 | primary |
+| List row / dense label | 13 | 1.4 | — | 400 | secondary |
+| Note, caption, meta, fact | 13 | 1.5–1.6 | — | 400 | faint or quiet |
+| Code | 12.5 | 1.6 | — | 400 mono | secondary |
+| Tag, micro-label | 12 | — | — | 400 | muted |
+| Tooltip | 11 | 1 | — | 400 | inverted |
+| Lettermark | 8.5 | 1 | +0.02em | 500 | muted |
+| Card lettering | 7.5 | 1.2 | −0.01em | 600 | primary |
+
+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).
+
+### When size stops doing the work
+
+Collapse the ladder and eight roles share 14px — the constraint the system is *for*. Each separates on a different axis (domain law 4):
+
+| Role | The signal | Not |
+|---|---|---|
+| Keyline | weight 500, and 36px of air on both sides | a size step |
+| Lead | leading — 1.9 against the body's 1.75 | a size step |
+| Pull quote | a 3px rounded bar and a 16px indent | a size step |
+| Dek | the muted tier, and tighter leading at 1.55 | a size step |
+
+At one size, the 17px keyline that once shouted over a 16px heading can't return (domain law 3).
+
+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).
+
+→ Full derivation, including how to add a role without bloating the ladder: `glass/type/scale.md`
+
+## 2. Two weights
+
+Load 400 and 500. That is the system.
+
+- **400** — all body copy, all reading copy, all quiet UI.
+- **500** — headings at every level, active states, `<strong>`, lettermarks.
+
+Quiet or lifted is set by what the line is doing there, one lift per group, one weight per set of titles; no 600, no 700 (domain law 5).
+
+**The one exception** is a single `font-semibold`, on 7.5px folder-card lettering. Below about 8px a 500 doesn't survive rasterisation as a weight — too few pixels across a stem — so it's 600 or nothing. It's below the readable floor, on something recognised rather than read: the only kind of exception to accept, and one is the right number.
+
+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`
+
+## 3. Leading runs inverse to size
+
+Glass's values on the three curves (domain law 6):
+
+| Job | Range | Rule |
+|---|---|---|
+| **Display** — titles, headings | 1.2 – 1.3 | Bigger means tighter. A 16px heading at 1.65 reads as two loose lines, not one heading. |
+| **Reading** — paragraphs, prose | 1.55 – 1.9 | Longer passages, more open: prose body 14/1.75 against a UI paragraph's 14/1.55. |
+| **UI** — rows, tooltips, labels | 1 – 1.4 | Single-line text in a fixed-height box takes `leading-none`. |
+
+**Two headings at one size can still differ**: a detail-page title is 16/1.3 and a section heading 16/1.2, because titles wrap and section headings are one word. In prose the 0.15 step between lead (1.9) and body (1.75) is the whole signal, so it must be exact.
+
+## 4. Tracking is negative and scales with size
+
+```
+≤14px      0
+16px      −0.015em    (headings and detail-page titles)
+18px      −0.02em     (index-page titles — the top of the ladder)
+7.5px     −0.01em     (card lettering, which is set solid and needs pulling in)
+tiny caps +0.02em     (8.5px lettermarks, 11px initials)
+```
+
+Why each direction, and never on body copy: domain law 7. With no large sizes the system barely needs tracking — two negative values, 2px apart.
+
+## 5. Emphasis without italic or bold
+
+```css
+/* Italics are switched off globally. */
+em, i { font-style: normal; }
+```
+
+Archivo's true italic is a separate file whose slant fights its geometric letterforms, so emphasis moves to two axes the system already has:
+
+- `*emphasis*` → the **muted** text colour. It recedes rather than tilts.
+- `**strong**` → weight 500 + the **primary** text colour. It advances.
+
+```tsx
+// From the inline markdown renderer
+if (bold) return <strong className="font-medium text-gray-1000">{text}</strong>;
+if (em)   return <em className="text-muted">{text}</em>;
+```
+
+Why the mapping works, and the semantic tags it keeps: domain law 9 and `domains/type/prose-and-emphasis.md`.
+
+## 6. Numerals
+
+```css
+body { font-variant-numeric: tabular-nums; }
+```
+
+Glass sets the numerals dial (domain law 10) globally, not per component: text-heavy interfaces put numbers in columns that should align — date ranges, timestamps, read times, versions. Proportional numerals win only inside a running sentence, too rare to set the default.
+
+## 7. One family, self-hosted
+
+One family, plus the one second register that passes domain law 5:
+
+```css
+--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 the
+   few monospace runs on the site isn't worth the request. */
+--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+```
+
+A few `<code>` spans and two code blocks don't justify a request. *A second family earns a download only if it's carrying reading copy.*
+
+### Self-host, and let the loader generate the fallback
+
+```tsx
+// next/font — fetched at build time, served from your own origin.
+const archivo = Archivo({ subsets: ["latin"], display: "swap", variable: "--font-archivo" });
+```
+
+Google's CDN cost the site three round trips over two third-party hosts before the font was requested; self-hosted, it rides the existing connection with a `<link rel="preload">` alongside the HTML (domain law 12). `display: swap` stays, and `next/font` synthesises the metric-matched fallback, a local face scaled to Archivo's metrics, so a swap that *does* happen doesn't move the line.
+
+**Where a swap costs most here** is the opening screen, one line alone on the page; tune loading for that frame.
+
+```css
+body {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+```
+
+## 8. Prose you don't control
+
+Imported Markdown, styled by element in one scoped class on the same ladder (domain law 11):
+
+```css
+.skill-prose            { font-size: 14px; line-height: 1.65; color: var(--color-muted); }
+.skill-prose h2         { margin: 44px 0 12px; font-size: 16px; font-weight: 500; }
+.skill-prose h3         { margin: 32px 0 10px; font-size: 14px; font-weight: 500; }
+.skill-prose h4         { margin: 24px 0  8px; font-size: 13px; font-weight: 500; }
+.skill-prose > :first-child { margin-top: 0; }
+```
+
+What Glass adds to the domain's mapping (`domains/type/prose-and-emphasis.md`):
+
+- **`h4` at 13px, secondary tier.**
+- **A wrapping `.table-scroll` div on each table**, and `overflow-x: auto` on the `<pre>`.
+- **Its own `<ul>` marker**: `list-style: none` and a 3px `::before` dot matching the hand-rolled bullets, because a UA disc at 14px is far too heavy.
+
+## 9. UI copy and reading copy are different systems
+
+Glass's two systems (domain law 8):
+
+|  | UI copy | Reading copy |
+|---|---|---|
+| Size | 11–16 | 13–18 |
+| Leading | 1 – 1.55 | 1.55 – 1.9 |
+| Lives in | chrome, rows, labels, nav | a constrained measure |
+| Optimised for | scanning, glancing | sustained reading |
+| Colour | often secondary/quiet | primary |
+
+The ranges overlap, so leading and measure carry the distinction. Reading leading on a UI row is the usual symptom here: it grows, and the dock loses its rhythm.
+
+**Labels are sentence case, generated ones included** (patterns law 1), and **icons beside text** follow domain law 13: 13px text, a 13–14px icon, a 4–6px gap.
+
+→ How prose blocks are set — headings, quotes, lists, spacing: `glass/type/long-form-prose.md`
+
+## Assets
+
+- `glass/type/assets/type-tokens.css` — the ladder as CSS custom properties and Tailwind v4 `@theme` tokens, the role classes, and a scoped block for imported Markdown.
+- `glass/type/assets/prose.tsx` — the long-form renderer: the two-size column, the `lead` / `keyline` / `note` / `quote` / `figure` blocks and their axes, inline emphasis and link mapping.
+
+## Applying this to an existing codebase
+
+Inventory and sweep as the domain guide does (**Auditing existing code**). Moving a codebase onto Glass, the order that pays:
+
+1. **Collapse weights first** — the highest-leverage change, and the most visible.
+2. **Map sizes onto the ladder above**, by role.
+3. **Set leading per curve.** Most drift is here.
+4. **Add tracking only above 14px.**
+5. **Switch emphasis to weight + colour.** Then delete the italic font file.
+6. **Sweep**, moving raw sizes onto Glass's role tokens. → Its `tailwind-merge` registration: `glass/type/scale.md`
+
+## Checklist
+
+The domain checklist, plus Glass's values:
+
+- [ ] Two weights loaded and used, 400 and 500; 600 only on the 7.5px card lettering.
+- [ ] Every size is on the ladder above; nothing above 18px; no role resizes.
+- [ ] The 14px roles separate as the table in §1 says.
+- [ ] Tracking: −0.015em at 16px, −0.02em at 18px, +0.02em on lettermarks and initials, −0.01em on card lettering; nothing else.
+- [ ] No `font-style: italic` in output; `em` maps to muted; `<strong>` is 500 + primary.
+- [ ] `tabular-nums` global; live-updating numbers verified stable.
+- [ ] Archivo self-hosted through the loader, `display: swap`, generated fallback; mono a system stack.
+- [ ] Imported prose under one scoped class, with the §8 additions.
+- [ ] Sentence case on every label, generated ones included.
+- [ ] Icons beside text sized to it: 13px text, 13–14px icon, 4–6px gap.