@insymetri/styleguide 0.1.87 → 0.1.89

package/dist/style/tailwind/preset.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
         backgroundColor: {
             primary: string;
             'primary-hover': string;
+            'primary-soft': string;
             accent: string;
             'accent-hover': string;
             secondary: string;
@@ -16,6 +17,10 @@ declare const _default: {
             'surface-raised': string;
             background: string;
             'background-alt': string;
+            app: string;
+            'success-soft': string;
+            'warning-soft': string;
+            'error-soft': string;
             'background-l0': string;
             'background-l1': string;
             'background-l2': string;
@@ -252,111 +257,148 @@ declare const _default: {
             blue: string;
         };
         fontSize: {
-            readonly h1: readonly ["2.4rem", {
-                readonly lineHeight: "3.2rem";
+            readonly h1: readonly ["2.6rem", {
+                readonly lineHeight: "3.0rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.02em";
             }];
             readonly h2: readonly ["2.0rem", {
-                readonly lineHeight: "2.8rem";
+                readonly lineHeight: "2.6rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.02em";
             }];
             readonly h3: readonly ["1.8rem", {
                 readonly lineHeight: "2.4rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.02em";
             }];
-            readonly h4: readonly ["1.6rem", {
+            readonly h4: readonly ["1.5rem", {
                 readonly lineHeight: "2.0rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.01em";
             }];
             readonly h5: readonly ["1.4rem", {
-                readonly lineHeight: "2.0rem";
+                readonly lineHeight: "1.9rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.01em";
             }];
             readonly h6: readonly ["1.3rem", {
-                readonly lineHeight: "1.6rem";
+                readonly lineHeight: "1.8rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.005em";
             }];
             readonly m1: readonly ["2.0rem", {
                 readonly lineHeight: "2.8rem";
                 readonly fontWeight: "300";
+                readonly letterSpacing: "-0.02em";
             }];
             readonly m2: readonly ["1.6rem", {
                 readonly lineHeight: "2.4rem";
                 readonly fontWeight: "300";
+                readonly letterSpacing: "-0.01em";
             }];
             readonly 'm2-emphasis': readonly ["1.6rem", {
                 readonly lineHeight: "2.4rem";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "-0.01em";
             }];
             readonly m3: readonly ["1.4rem", {
                 readonly lineHeight: "2.0rem";
                 readonly fontWeight: "300";
+                readonly letterSpacing: "-0.005em";
             }];
             readonly 'm3-emphasis': readonly ["1.3rem", {
                 readonly lineHeight: "2.0rem";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "-0.005em";
             }];
             readonly 'm3-small': readonly ["1.3rem", {
                 readonly lineHeight: "2.0rem";
                 readonly fontWeight: "400";
+                readonly letterSpacing: "-0.005em";
             }];
-            readonly large: readonly ["1.6rem", {
-                readonly lineHeight: "2.0rem";
+            readonly large: readonly ["1.5rem", {
+                readonly lineHeight: "2.2rem";
                 readonly fontWeight: "400";
+                readonly letterSpacing: "-0.01em";
             }];
-            readonly 'large-emphasis': readonly ["1.6rem", {
-                readonly lineHeight: "2.0rem";
+            readonly 'large-emphasis': readonly ["1.5rem", {
+                readonly lineHeight: "2.2rem";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "-0.01em";
             }];
             readonly default: readonly ["1.3rem", {
-                readonly lineHeight: "1.6rem";
+                readonly lineHeight: "1.95rem";
                 readonly fontWeight: "400";
+                readonly letterSpacing: "-0.005em";
             }];
             readonly emphasis: readonly ["1.3rem", {
-                readonly lineHeight: "1.6rem";
+                readonly lineHeight: "1.95rem";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "-0.005em";
             }];
             readonly strong: readonly ["1.3rem", {
-                readonly lineHeight: "1.6rem";
+                readonly lineHeight: "1.95rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.005em";
             }];
-            readonly small: readonly ["1.2rem", {
-                readonly lineHeight: "1.6rem";
+            readonly small: readonly ["1.25rem", {
+                readonly lineHeight: "1.7rem";
                 readonly fontWeight: "400";
+                readonly letterSpacing: "0";
             }];
-            readonly 'small-emphasis': readonly ["1.2rem", {
-                readonly lineHeight: "1.6rem";
+            readonly 'small-emphasis': readonly ["1.25rem", {
+                readonly lineHeight: "1.7rem";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "0";
             }];
-            readonly 'small-strong': readonly ["1.2rem", {
-                readonly lineHeight: "1.6rem";
+            readonly 'small-strong': readonly ["1.25rem", {
+                readonly lineHeight: "1.7rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "0";
             }];
-            readonly tiny: readonly ["1.1rem", {
-                readonly lineHeight: "1.2rem";
+            readonly tiny: readonly ["1.15rem", {
+                readonly lineHeight: "1.5rem";
                 readonly fontWeight: "400";
+                readonly letterSpacing: "0";
             }];
-            readonly 'tiny-emphasis': readonly ["1.1rem", {
-                readonly lineHeight: "1.2rem";
+            readonly 'tiny-emphasis': readonly ["1.15rem", {
+                readonly lineHeight: "1.5rem";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "0";
             }];
-            readonly 'tiny-strong': readonly ["1.1rem", {
-                readonly lineHeight: "1.2rem";
+            readonly 'tiny-strong': readonly ["1.15rem", {
+                readonly lineHeight: "1.5rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "0";
             }];
-            readonly numeric: readonly ["1.4rem", {
-                readonly lineHeight: "1.6rem";
+            readonly micro: readonly ["1.05rem", {
+                readonly lineHeight: "1.575rem";
+                readonly fontWeight: "500";
+                readonly letterSpacing: "0.06em";
+            }];
+            readonly numeric: readonly ["1.3rem", {
+                readonly lineHeight: "1.8rem";
                 readonly fontWeight: "400";
+                readonly letterSpacing: "0";
+            }];
+            readonly amount: readonly ["2.6rem", {
+                readonly lineHeight: "2.9rem";
+                readonly fontWeight: "600";
+                readonly letterSpacing: "-0.03em";
             }];
             readonly 'display-lg': readonly ["4.0rem", {
                 readonly lineHeight: "1.1";
+                readonly letterSpacing: "-0.03em";
             }];
             readonly 'display-md': readonly ["3.0rem", {
                 readonly lineHeight: "1.2";
+                readonly letterSpacing: "-0.025em";
             }];
             readonly 'display-sm': readonly ["2.4rem", {
                 readonly lineHeight: "1.2";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "-0.02em";
             }];
         };
         spacing: Record<string, string>;
@@ -365,6 +407,7 @@ declare const _default: {
             pill: string;
             subtle: string;
             card: string;
+            'comm-hover': string;
             'card-hover': string;
             dropdown: string;
             submenu: string;
@@ -372,11 +415,10 @@ declare const _default: {
             floating: string;
             drawer: string;
             toast: string;
-            'focus-ring': string;
-            'selection-ring': string;
-            'comm-hover': string;
             'login-card': string;
             'dialog-overlay': string;
+            'focus-ring': string;
+            'selection-ring': string;
         };
         borderRadius: Record<string, string>;
         zIndex: Record<string, string>;
@@ -413,6 +455,15 @@ declare const _default: {
             full: string;
             screen: string;
         };
+        letterSpacing: {
+            tighter: string;
+            tight: string;
+            snug: string;
+            normal: string;
+            none: string;
+            label: string;
+            wide: string;
+        };
         extend: {
             keyframes: {
                 loginFadeInUp: {
@@ -626,6 +677,8 @@ declare const _default: {
             };
             fontFamily: {
                 inherit: string;
+                sans: string;
+                mono: string;
             };
             textColor: {
                 inherit: string;

package/dist/style/tailwind/preset.js

@@ -47,6 +47,18 @@ export default {
             full: '100%',
             screen: '100vh',
         }),
+        letterSpacing: {
+            // Negative tracking scales with type size — see typography.ts.
+            tighter: '-0.03em',
+            tight: '-0.02em',
+            snug: '-0.01em',
+            normal: '-0.005em',
+            none: '0',
+            // Positive tracking, for the uppercase section labels only. Caps at
+            // 10–11px are unreadable without it.
+            label: '0.06em',
+            wide: '0.04em',
+        },
         extend: {
             keyframes,
             animation,
@@ -86,8 +98,17 @@ export default {
                 'auto-340': 'repeat(auto-fill, minmax(340px, 1fr))',
                 'auto-fit-200': 'repeat(auto-fit, minmax(200px, 1fr))',
             },
+            // Both go through the variables base.css defines, for the same reason the
+            // `body` rule does: this package ships no font files, so an app that has not
+            // self-hosted the face must be able to point `--font-family` somewhere else
+            // and have `font-sans` follow. Hardcoding the stack here would leave
+            // `font-sans` still asking for a font that 404s.
             fontFamily: {
                 inherit: 'inherit',
+                sans: 'var(--font-family)',
+                // No mono FACE is shipped; `--font-family-mono` is the system stack, which
+                // is what `font-mono` resolved to before it was named.
+                mono: 'var(--font-family-mono)',
             },
             textColor: {
                 inherit: 'inherit',

package/dist/style/tailwind/shadows.d.ts

@@ -3,6 +3,7 @@ export declare const boxShadow: {
     pill: string;
     subtle: string;
     card: string;
+    'comm-hover': string;
     'card-hover': string;
     dropdown: string;
     submenu: string;
@@ -10,9 +11,8 @@ export declare const boxShadow: {
     floating: string;
     drawer: string;
     toast: string;
-    'focus-ring': string;
-    'selection-ring': string;
-    'comm-hover': string;
     'login-card': string;
     'dialog-overlay': string;
+    'focus-ring': string;
+    'selection-ring': string;
 };

package/dist/style/tailwind/shadows.js

@@ -1,33 +1,32 @@
+// Elevation maps onto the three tiers defined in style/colors.css (and swapped
+// for dark surfaces in style/dark.css). Keeping the utility names stable means
+// no call site changes; only what they resolve to does.
+//
+//   tier 1 — hairline lift: buttons at rest, cards, active segment thumbs
+//   tier 2 — ambient float: menus, popovers, tooltips, raised/hovered cards
+//   tier 3 — modal scale:   dialogs, drawers, toasts
+const T1 = 'var(--ii-shadow-1)';
+const T2 = 'var(--ii-shadow-2)';
+const T3 = 'var(--ii-shadow-3)';
 export const boxShadow = {
     none: 'none',
-    // Pill elevation (pills, tags, small controls)
-    pill: '0 3px 6px -2px rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.04), inset 0 0 0 0.5px rgba(0, 0, 0, 0.08)',
-    // Subtle elevation (switch knobs, active pills)
-    subtle: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-    // Cards at rest
-    card: '0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06)',
-    // Card hover / raised state
-    'card-hover': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
-    // Dropdown menus, popovers, comboboxes, date pickers
-    dropdown: '0 6px 18px rgba(0, 0, 0, 0.02), 0 3px 9px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.04)',
-    // Submenu / nested floating panels
-    submenu: '0 9px 48px rgba(0, 0, 0, 0.08), 0 6px 24px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.04)',
-    // Modal dialogs
-    modal: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-    // Floating dialogs / modals shown without an overlay — needs to read as elevated on its own
-    floating: '0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 24px -4px rgba(0, 0, 0, 0.12), 0 24px 60px -12px rgba(0, 0, 0, 0.22)',
-    // Side drawers / floating panels
-    drawer: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-    // Toast notifications
-    toast: '0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.08)',
-    // Focus ring — input/control focus state
+    // Tier 1 — at rest
+    pill: T1,
+    subtle: T1,
+    card: T1,
+    'comm-hover': T1,
+    // Tier 2 — floating above the page
+    'card-hover': T2,
+    dropdown: T2,
+    submenu: T2,
+    // Tier 3 — modal scale
+    modal: T3,
+    floating: T3,
+    drawer: T3,
+    toast: T3,
+    'login-card': T3,
+    'dialog-overlay': T3,
+    // Rings — the focus ring is the teal accent, never the near-black primary
     'focus-ring': '0 0 0 3px var(--ii-focus-primary)',
-    // Selection ring — selected item indicator
     'selection-ring': '0 0 0 2px var(--ii-primary-20)',
-    // Communication card hover
-    'comm-hover': '0 2px 8px var(--ii-shadow-subtle-color)',
-    // Login card — deep overlay shadow
-    'login-card': '0 20px 60px var(--ii-overlay), 0 0 1px var(--ii-hover-overlay)',
-    // Dialog overlay — elevated panel
-    'dialog-overlay': '0 20px 25px -5px var(--ii-hover-overlay), 0 10px 10px -5px var(--ii-shadow-xs)',
 };

package/dist/style/tailwind/typography.d.ts

@@ -1,108 +1,145 @@
 export declare const fontSize: {
-    readonly h1: readonly ["2.4rem", {
-        readonly lineHeight: "3.2rem";
+    readonly h1: readonly ["2.6rem", {
+        readonly lineHeight: "3.0rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.02em";
     }];
     readonly h2: readonly ["2.0rem", {
-        readonly lineHeight: "2.8rem";
+        readonly lineHeight: "2.6rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.02em";
     }];
     readonly h3: readonly ["1.8rem", {
         readonly lineHeight: "2.4rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.02em";
     }];
-    readonly h4: readonly ["1.6rem", {
+    readonly h4: readonly ["1.5rem", {
         readonly lineHeight: "2.0rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.01em";
     }];
     readonly h5: readonly ["1.4rem", {
-        readonly lineHeight: "2.0rem";
+        readonly lineHeight: "1.9rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.01em";
     }];
     readonly h6: readonly ["1.3rem", {
-        readonly lineHeight: "1.6rem";
+        readonly lineHeight: "1.8rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.005em";
     }];
     readonly m1: readonly ["2.0rem", {
         readonly lineHeight: "2.8rem";
         readonly fontWeight: "300";
+        readonly letterSpacing: "-0.02em";
     }];
     readonly m2: readonly ["1.6rem", {
         readonly lineHeight: "2.4rem";
         readonly fontWeight: "300";
+        readonly letterSpacing: "-0.01em";
     }];
     readonly 'm2-emphasis': readonly ["1.6rem", {
         readonly lineHeight: "2.4rem";
         readonly fontWeight: "500";
+        readonly letterSpacing: "-0.01em";
     }];
     readonly m3: readonly ["1.4rem", {
         readonly lineHeight: "2.0rem";
         readonly fontWeight: "300";
+        readonly letterSpacing: "-0.005em";
     }];
     readonly 'm3-emphasis': readonly ["1.3rem", {
         readonly lineHeight: "2.0rem";
         readonly fontWeight: "500";
+        readonly letterSpacing: "-0.005em";
     }];
     readonly 'm3-small': readonly ["1.3rem", {
         readonly lineHeight: "2.0rem";
         readonly fontWeight: "400";
+        readonly letterSpacing: "-0.005em";
     }];
-    readonly large: readonly ["1.6rem", {
-        readonly lineHeight: "2.0rem";
+    readonly large: readonly ["1.5rem", {
+        readonly lineHeight: "2.2rem";
         readonly fontWeight: "400";
+        readonly letterSpacing: "-0.01em";
     }];
-    readonly 'large-emphasis': readonly ["1.6rem", {
-        readonly lineHeight: "2.0rem";
+    readonly 'large-emphasis': readonly ["1.5rem", {
+        readonly lineHeight: "2.2rem";
         readonly fontWeight: "500";
+        readonly letterSpacing: "-0.01em";
     }];
     readonly default: readonly ["1.3rem", {
-        readonly lineHeight: "1.6rem";
+        readonly lineHeight: "1.95rem";
         readonly fontWeight: "400";
+        readonly letterSpacing: "-0.005em";
     }];
     readonly emphasis: readonly ["1.3rem", {
-        readonly lineHeight: "1.6rem";
+        readonly lineHeight: "1.95rem";
         readonly fontWeight: "500";
+        readonly letterSpacing: "-0.005em";
     }];
     readonly strong: readonly ["1.3rem", {
-        readonly lineHeight: "1.6rem";
+        readonly lineHeight: "1.95rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.005em";
     }];
-    readonly small: readonly ["1.2rem", {
-        readonly lineHeight: "1.6rem";
+    readonly small: readonly ["1.25rem", {
+        readonly lineHeight: "1.7rem";
         readonly fontWeight: "400";
+        readonly letterSpacing: "0";
     }];
-    readonly 'small-emphasis': readonly ["1.2rem", {
-        readonly lineHeight: "1.6rem";
+    readonly 'small-emphasis': readonly ["1.25rem", {
+        readonly lineHeight: "1.7rem";
         readonly fontWeight: "500";
+        readonly letterSpacing: "0";
     }];
-    readonly 'small-strong': readonly ["1.2rem", {
-        readonly lineHeight: "1.6rem";
+    readonly 'small-strong': readonly ["1.25rem", {
+        readonly lineHeight: "1.7rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "0";
     }];
-    readonly tiny: readonly ["1.1rem", {
-        readonly lineHeight: "1.2rem";
+    readonly tiny: readonly ["1.15rem", {
+        readonly lineHeight: "1.5rem";
         readonly fontWeight: "400";
+        readonly letterSpacing: "0";
     }];
-    readonly 'tiny-emphasis': readonly ["1.1rem", {
-        readonly lineHeight: "1.2rem";
+    readonly 'tiny-emphasis': readonly ["1.15rem", {
+        readonly lineHeight: "1.5rem";
         readonly fontWeight: "500";
+        readonly letterSpacing: "0";
     }];
-    readonly 'tiny-strong': readonly ["1.1rem", {
-        readonly lineHeight: "1.2rem";
+    readonly 'tiny-strong': readonly ["1.15rem", {
+        readonly lineHeight: "1.5rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "0";
     }];
-    readonly numeric: readonly ["1.4rem", {
-        readonly lineHeight: "1.6rem";
+    readonly micro: readonly ["1.05rem", {
+        readonly lineHeight: "1.575rem";
+        readonly fontWeight: "500";
+        readonly letterSpacing: "0.06em";
+    }];
+    readonly numeric: readonly ["1.3rem", {
+        readonly lineHeight: "1.8rem";
         readonly fontWeight: "400";
+        readonly letterSpacing: "0";
+    }];
+    readonly amount: readonly ["2.6rem", {
+        readonly lineHeight: "2.9rem";
+        readonly fontWeight: "600";
+        readonly letterSpacing: "-0.03em";
     }];
     readonly 'display-lg': readonly ["4.0rem", {
         readonly lineHeight: "1.1";
+        readonly letterSpacing: "-0.03em";
     }];
     readonly 'display-md': readonly ["3.0rem", {
         readonly lineHeight: "1.2";
+        readonly letterSpacing: "-0.025em";
     }];
     readonly 'display-sm': readonly ["2.4rem", {
         readonly lineHeight: "1.2";
         readonly fontWeight: "500";
+        readonly letterSpacing: "-0.02em";
     }];
 };

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
 };