@insymetri/styleguide 0.1.88 → 0.1.89

package/dist/style/tailwind/typography.js

@@ -1,41 +1,67 @@
-// Semantic typography scale (matches TOTM conventions).
+// Semantic typography scale.
 // With 62.5% base (1rem = 10px), rem values read as pixels: 2.4rem = 24px.
-// TW4's extended fontSize format bundles size + lineHeight + fontWeight
-// into a single class — e.g. `text-h1` sets all three properties.
+// TW4's extended fontSize format bundles size + lineHeight + weight + tracking
+// into a single class — e.g. `text-h1` sets all four properties.
+//
+// Tuned to the artifact type system. Three things define that look, and they
+// matter more than the raw sizes:
+//
+//   1. Tracking tightens as size grows — body sits at -0.005em, headings run
+//      to -0.03em. At these sizes an untracked heading sprawls; this pulls it
+//      together. Not tied to one typeface — it was first tuned against Geist,
+//      and Inter, which measures ~5% WIDER at the same size, wants it at least
+//      as much.
+//   2. Headings are 600, never 700. Emphasis in running text is 500. The jump
+//      from 400 to 700 reads as shouting at these sizes.
+//   3. Body line-height is 1.5 and headings are 1.15–1.3 — tight enough that a
+//      two-line title still reads as one object.
+//
+// The half-pixel sizes (1.05rem, 1.15rem, 1.25rem, 1.35rem) are deliberate:
+// they are what the artifacts use for dense metadata, and at 62.5% base they
+// land on exact half-pixels rather than rounding artifacts.
+//
+// The loosened body leading is the biggest change here, not the weights, which
+// did not move: 13px text went from a 16px line box to 19.5px, and `tiny` from
+// 12px to 15px. Headings tightened the other way so a two-line title reads as
+// one object.
 export const fontSize = {
-    // Headings — semibold (600)
-    h1: ['2.4rem', { lineHeight: '3.2rem', fontWeight: '600' }], // 24px
-    h2: ['2.0rem', { lineHeight: '2.8rem', fontWeight: '600' }], // 20px
-    h3: ['1.8rem', { lineHeight: '2.4rem', fontWeight: '600' }], // 18px
-    h4: ['1.6rem', { lineHeight: '2.0rem', fontWeight: '600' }], // 16px
-    h5: ['1.4rem', { lineHeight: '2.0rem', fontWeight: '600' }], // 14px
-    h6: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '600' }], // 13px
-    // Medium — light weight display text (300)
-    m1: ['2.0rem', { lineHeight: '2.8rem', fontWeight: '300' }], // 20px
-    m2: ['1.6rem', { lineHeight: '2.4rem', fontWeight: '300' }], // 16px
-    'm2-emphasis': ['1.6rem', { lineHeight: '2.4rem', fontWeight: '500' }], // 16px
-    m3: ['1.4rem', { lineHeight: '2.0rem', fontWeight: '300' }], // 14px
-    'm3-emphasis': ['1.3rem', { lineHeight: '2.0rem', fontWeight: '500' }], // 13px
-    'm3-small': ['1.3rem', { lineHeight: '2.0rem', fontWeight: '400' }], // 13px
-    // Body — large (16px)
-    large: ['1.6rem', { lineHeight: '2.0rem', fontWeight: '400' }],
-    'large-emphasis': ['1.6rem', { lineHeight: '2.0rem', fontWeight: '500' }],
-    // Body — default (13px)
-    default: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '400' }],
-    emphasis: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '500' }],
-    strong: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '600' }],
-    // Body — small (12px)
-    small: ['1.2rem', { lineHeight: '1.6rem', fontWeight: '400' }],
-    'small-emphasis': ['1.2rem', { lineHeight: '1.6rem', fontWeight: '500' }],
-    'small-strong': ['1.2rem', { lineHeight: '1.6rem', fontWeight: '600' }],
-    // Body — tiny (11px)
-    tiny: ['1.1rem', { lineHeight: '1.2rem', fontWeight: '400' }],
-    'tiny-emphasis': ['1.1rem', { lineHeight: '1.2rem', fontWeight: '500' }],
-    'tiny-strong': ['1.1rem', { lineHeight: '1.2rem', fontWeight: '600' }],
-    // Special — numeric uses monospace font (pair with font-mono class)
-    numeric: ['1.4rem', { lineHeight: '1.6rem', fontWeight: '400' }], // 14px
-    // Display — hero/feature sizes (no bundled weight)
-    'display-lg': ['4.0rem', { lineHeight: '1.1' }], // 40px
-    'display-md': ['3.0rem', { lineHeight: '1.2' }], // 30px
-    'display-sm': ['2.4rem', { lineHeight: '1.2', fontWeight: '500' }], // 24px
+    // Headings — semibold (600), tracking tightening with size
+    h1: ['2.6rem', { lineHeight: '3.0rem', fontWeight: '600', letterSpacing: '-0.02em' }], // 26px
+    h2: ['2.0rem', { lineHeight: '2.6rem', fontWeight: '600', letterSpacing: '-0.02em' }], // 20px
+    h3: ['1.8rem', { lineHeight: '2.4rem', fontWeight: '600', letterSpacing: '-0.02em' }], // 18px
+    h4: ['1.5rem', { lineHeight: '2.0rem', fontWeight: '600', letterSpacing: '-0.01em' }], // 15px
+    h5: ['1.4rem', { lineHeight: '1.9rem', fontWeight: '600', letterSpacing: '-0.01em' }], // 14px
+    h6: ['1.3rem', { lineHeight: '1.8rem', fontWeight: '600', letterSpacing: '-0.005em' }], // 13px
+    // Medium — light display text (300)
+    m1: ['2.0rem', { lineHeight: '2.8rem', fontWeight: '300', letterSpacing: '-0.02em' }], // 20px
+    m2: ['1.6rem', { lineHeight: '2.4rem', fontWeight: '300', letterSpacing: '-0.01em' }], // 16px
+    'm2-emphasis': ['1.6rem', { lineHeight: '2.4rem', fontWeight: '500', letterSpacing: '-0.01em' }], // 16px
+    m3: ['1.4rem', { lineHeight: '2.0rem', fontWeight: '300', letterSpacing: '-0.005em' }], // 14px
+    'm3-emphasis': ['1.3rem', { lineHeight: '2.0rem', fontWeight: '500', letterSpacing: '-0.005em' }], // 13px
+    'm3-small': ['1.3rem', { lineHeight: '2.0rem', fontWeight: '400', letterSpacing: '-0.005em' }], // 13px
+    // Body — large (15px). The artifacts' lead/description size.
+    large: ['1.5rem', { lineHeight: '2.2rem', fontWeight: '400', letterSpacing: '-0.01em' }],
+    'large-emphasis': ['1.5rem', { lineHeight: '2.2rem', fontWeight: '500', letterSpacing: '-0.01em' }],
+    // Body — default (13px), the base size the whole system is set in
+    default: ['1.3rem', { lineHeight: '1.95rem', fontWeight: '400', letterSpacing: '-0.005em' }],
+    emphasis: ['1.3rem', { lineHeight: '1.95rem', fontWeight: '500', letterSpacing: '-0.005em' }],
+    strong: ['1.3rem', { lineHeight: '1.95rem', fontWeight: '600', letterSpacing: '-0.005em' }],
+    // Body — small (12.5px), for secondary/meta lines beside body text
+    small: ['1.25rem', { lineHeight: '1.7rem', fontWeight: '400', letterSpacing: '0' }],
+    'small-emphasis': ['1.25rem', { lineHeight: '1.7rem', fontWeight: '500', letterSpacing: '0' }],
+    'small-strong': ['1.25rem', { lineHeight: '1.7rem', fontWeight: '600', letterSpacing: '0' }],
+    // Body — tiny (11.5px), for timestamps, hints and counts
+    tiny: ['1.15rem', { lineHeight: '1.5rem', fontWeight: '400', letterSpacing: '0' }],
+    'tiny-emphasis': ['1.15rem', { lineHeight: '1.5rem', fontWeight: '500', letterSpacing: '0' }],
+    'tiny-strong': ['1.15rem', { lineHeight: '1.5rem', fontWeight: '600', letterSpacing: '0' }],
+    // Micro (10.5px) — the uppercase section label. Pair with `tracking-label`
+    // and `uppercase`; the positive tracking is what keeps caps legible small.
+    micro: ['1.05rem', { lineHeight: '1.575rem', fontWeight: '500', letterSpacing: '0.06em' }], // 10.5px × 1.5
+    // Special — numeric. Pair with `font-mono` for tabular figures.
+    numeric: ['1.3rem', { lineHeight: '1.8rem', fontWeight: '400', letterSpacing: '0' }], // 13px
+    // Display — hero/feature sizes. `amount` is the artifacts' big figure.
+    amount: ['2.6rem', { lineHeight: '2.9rem', fontWeight: '600', letterSpacing: '-0.03em' }], // 26px
+    'display-lg': ['4.0rem', { lineHeight: '1.1', letterSpacing: '-0.03em' }], // 40px
+    'display-md': ['3.0rem', { lineHeight: '1.2', letterSpacing: '-0.025em' }], // 30px
+    'display-sm': ['2.4rem', { lineHeight: '1.2', fontWeight: '500', letterSpacing: '-0.02em' }], // 24px
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.88",
+	"version": "0.1.89",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {