@scattered-light/loomiere-mojave 0.2.0 → 0.4.0

package/dist/exports/design-system/tokens.json

@@ -35,7 +35,7 @@
         "name": "sl-surface-overlay",
         "value": {
           "light": "{sl-color-neutral-100}",
-          "dark": "{sl-color-neutral-1000}"
+          "dark": "{sl-color-neutral-1100}"
         },
         "usage": "Popups, menus and code blocks that sit above raised surfaces."
       },
@@ -59,7 +59,7 @@
         "name": "sl-surface-tray",
         "value": {
           "light": "{sl-color-neutral-50}",
-          "dark": "{sl-color-neutral-1000}"
+          "dark": "{sl-color-neutral-1100}"
         },
         "usage": "The strip behind a row of controls (toolbars, toggle groups). A step off the page in both themes, so the controls sitting on it stand out, while secondary and accent text on it still pass AA."
       },
@@ -83,7 +83,7 @@
         "name": "sl-text-disabled",
         "value": {
           "light": "{sl-color-neutral-500}",
-          "dark": "{sl-color-neutral-600}"
+          "dark": "{sl-color-neutral-900}"
         },
         "usage": "Text in disabled controls. Deliberately below AA, which WCAG allows for disabled UI."
       },
@@ -120,7 +120,7 @@
         "name": "sl-text-tertiary",
         "value": {
           "light": "{sl-color-neutral-900}",
-          "dark": "{sl-color-neutral-400}"
+          "dark": "{sl-color-neutral-600}"
         },
         "usage": "Placeholders, captions and metadata. The lightest text that still passes AA (4.5:1) on every surface."
       },
@@ -433,7 +433,7 @@
           "light": "{sl-color-primary-600}",
           "dark": "{sl-color-primary-400}"
         },
-        "usage": "bold: solid in accent (primary)"
+        "usage": "bold in default: solid in accent (primary)"
       },
       {
         "name": "sl-emphasis-bold-bg-hover",
@@ -441,7 +441,7 @@
           "light": "{sl-color-primary-700}",
           "dark": "{sl-color-primary-300}"
         },
-        "usage": "bold: solid in accent (primary)"
+        "usage": "bold in default: solid in accent (primary)"
       },
       {
         "name": "sl-emphasis-bold-bg-active",
@@ -449,7 +449,7 @@
           "light": "{sl-color-primary-800}",
           "dark": "{sl-color-primary-200}"
         },
-        "usage": "bold: solid in accent (primary)"
+        "usage": "bold in default: solid in accent (primary)"
       },
       {
         "name": "sl-emphasis-bold-fg",
@@ -457,7 +457,7 @@
           "light": "{sl-color-primary-on-600}",
           "dark": "{sl-color-primary-on-400}"
         },
-        "usage": "bold: solid in accent (primary)"
+        "usage": "bold in default: solid in accent (primary)"
       },
       {
         "name": "sl-emphasis-bold-border",
@@ -465,7 +465,7 @@
           "light": "{sl-color-primary-600}",
           "dark": "{sl-color-primary-400}"
         },
-        "usage": "bold: solid in accent (primary)"
+        "usage": "bold in default: solid in accent (primary)"
       },
       {
         "name": "sl-emphasis-bold-border-hover",
@@ -473,12 +473,12 @@
           "light": "{sl-color-primary-700}",
           "dark": "{sl-color-primary-300}"
         },
-        "usage": "bold: solid in accent (primary)"
+        "usage": "bold in default: solid in accent (primary)"
       },
       {
         "name": "sl-emphasis-standard-bg",
         "value": "#00000000",
-        "usage": "standard: outline in accent (primary)"
+        "usage": "standard in default: outline in accent (primary)"
       },
       {
         "name": "sl-emphasis-standard-bg-hover",
@@ -486,7 +486,7 @@
           "light": "{sl-color-primary-50}",
           "dark": "{sl-color-primary-1000}"
         },
-        "usage": "standard: outline in accent (primary)"
+        "usage": "standard in default: outline in accent (primary)"
       },
       {
         "name": "sl-emphasis-standard-bg-active",
@@ -494,7 +494,7 @@
           "light": "{sl-color-primary-100}",
           "dark": "{sl-color-primary-900}"
         },
-        "usage": "standard: outline in accent (primary)"
+        "usage": "standard in default: outline in accent (primary)"
       },
       {
         "name": "sl-emphasis-standard-fg",
@@ -502,7 +502,7 @@
           "light": "{sl-color-primary-700}",
           "dark": "{sl-color-primary-200}"
         },
-        "usage": "standard: outline in accent (primary)"
+        "usage": "standard in default: outline in accent (primary)"
       },
       {
         "name": "sl-emphasis-standard-border",
@@ -510,7 +510,7 @@
           "light": "{sl-color-primary-600}",
           "dark": "{sl-color-primary-400}"
         },
-        "usage": "standard: outline in accent (primary)"
+        "usage": "standard in default: outline in accent (primary)"
       },
       {
         "name": "sl-emphasis-standard-border-hover",
@@ -518,7 +518,7 @@
           "light": "{sl-color-primary-700}",
           "dark": "{sl-color-primary-300}"
         },
-        "usage": "standard: outline in accent (primary)"
+        "usage": "standard in default: outline in accent (primary)"
       },
       {
         "name": "sl-emphasis-subtle-bg",
@@ -526,7 +526,7 @@
           "light": "{sl-color-neutral-200}",
           "dark": "{sl-color-neutral-900}"
         },
-        "usage": "subtle: soft in chrome (neutral)"
+        "usage": "subtle in default: soft in chrome (neutral)"
       },
       {
         "name": "sl-emphasis-subtle-bg-hover",
@@ -534,7 +534,7 @@
           "light": "{sl-color-neutral-300}",
           "dark": "{sl-color-neutral-800}"
         },
-        "usage": "subtle: soft in chrome (neutral)"
+        "usage": "subtle in default: soft in chrome (neutral)"
       },
       {
         "name": "sl-emphasis-subtle-bg-active",
@@ -542,7 +542,7 @@
           "light": "{sl-color-neutral-400}",
           "dark": "{sl-color-neutral-700}"
         },
-        "usage": "subtle: soft in chrome (neutral)"
+        "usage": "subtle in default: soft in chrome (neutral)"
       },
       {
         "name": "sl-emphasis-subtle-fg",
@@ -550,7 +550,7 @@
           "light": "{sl-color-neutral-1200}",
           "dark": "{sl-color-neutral-50}"
         },
-        "usage": "subtle: soft in chrome (neutral)"
+        "usage": "subtle in default: soft in chrome (neutral)"
       },
       {
         "name": "sl-emphasis-subtle-border",
@@ -558,7 +558,7 @@
           "light": "{sl-color-neutral-200}",
           "dark": "{sl-color-neutral-900}"
         },
-        "usage": "subtle: soft in chrome (neutral)"
+        "usage": "subtle in default: soft in chrome (neutral)"
       },
       {
         "name": "sl-emphasis-subtle-border-hover",
@@ -566,12 +566,12 @@
           "light": "{sl-color-neutral-300}",
           "dark": "{sl-color-neutral-800}"
         },
-        "usage": "subtle: soft in chrome (neutral)"
+        "usage": "subtle in default: soft in chrome (neutral)"
       },
       {
         "name": "sl-emphasis-quiet-bg",
         "value": "#00000000",
-        "usage": "quiet: outline in chrome (neutral)"
+        "usage": "quiet in default: outline in chrome (neutral)"
       },
       {
         "name": "sl-emphasis-quiet-bg-hover",
@@ -579,7 +579,7 @@
           "light": "{sl-color-neutral-200}",
           "dark": "{sl-color-neutral-900}"
         },
-        "usage": "quiet: outline in chrome (neutral)"
+        "usage": "quiet in default: outline in chrome (neutral)"
       },
       {
         "name": "sl-emphasis-quiet-bg-active",
@@ -587,7 +587,7 @@
           "light": "{sl-color-neutral-300}",
           "dark": "{sl-color-neutral-800}"
         },
-        "usage": "quiet: outline in chrome (neutral)"
+        "usage": "quiet in default: outline in chrome (neutral)"
       },
       {
         "name": "sl-emphasis-quiet-fg",
@@ -595,7 +595,7 @@
           "light": "{sl-color-primary-1000}",
           "dark": "{sl-color-white}"
         },
-        "usage": "quiet: outline in chrome (neutral)"
+        "usage": "quiet in default: outline in chrome (neutral)"
       },
       {
         "name": "sl-emphasis-quiet-border",
@@ -603,7 +603,7 @@
           "light": "{sl-color-neutral-800}",
           "dark": "{sl-color-neutral-600}"
         },
-        "usage": "quiet: outline in chrome (neutral)"
+        "usage": "quiet in default: outline in chrome (neutral)"
       },
       {
         "name": "sl-emphasis-quiet-border-hover",
@@ -611,7 +611,7 @@
           "light": "{sl-color-neutral-1000}",
           "dark": "{sl-color-neutral-200}"
         },
-        "usage": "quiet: outline in chrome (neutral)"
+        "usage": "quiet in default: outline in chrome (neutral)"
       },
       {
         "name": "sl-content-blockquote-border",
@@ -1091,6 +1091,16 @@
         "value": "#9d5747",
         "usage": "Inset background for code: fg 6% into bg. fg on it is 5.22:1."
       },
+      {
+        "name": "sl-pair-ember-dune-bg-hover",
+        "value": "#9f5b4a",
+        "usage": "Background on hover, when the pair paints a control: fg 8% into bg. fg on it is 4.99:1."
+      },
+      {
+        "name": "sl-pair-ember-dune-bg-active",
+        "value": "{sl-pair-ember-dune-bg-hover}",
+        "usage": "Background while pressed, when the pair paints a control: bg-hover itself, because a stronger tint would drop text below AA."
+      },
       {
         "name": "sl-pair-mirage-deep-bg",
         "value": "{sl-color-primary-900}",
@@ -1131,6 +1141,16 @@
         "value": "#412954",
         "usage": "Inset background for code: fg 6% into bg. fg on it is 11.48:1."
       },
+      {
+        "name": "sl-pair-mirage-deep-bg-hover",
+        "value": "#452d57",
+        "usage": "Background on hover, when the pair paints a control: fg 8% into bg. fg on it is 10.86:1."
+      },
+      {
+        "name": "sl-pair-mirage-deep-bg-active",
+        "value": "#513a63",
+        "usage": "Background while pressed, when the pair paints a control: fg 15% into bg. fg on it is 8.98:1."
+      },
       {
         "name": "sl-pair-stone-soft-bg",
         "value": {
@@ -1192,6 +1212,22 @@
         },
         "usage": "Inset background for code: fg 6% into bg. fg on it is 13.97:1."
       },
+      {
+        "name": "sl-pair-stone-soft-bg-hover",
+        "value": {
+          "light": "#e2e5e2",
+          "dark": "#424a45"
+        },
+        "usage": "Background on hover, when the pair paints a control: fg 8% into bg. fg on it is 13.34:1."
+      },
+      {
+        "name": "sl-pair-stone-soft-bg-active",
+        "value": {
+          "light": "#d0d4d1",
+          "dark": "#4f5651"
+        },
+        "usage": "Background while pressed, when the pair paints a control: fg 15% into bg. fg on it is 11.31:1."
+      },
       {
         "name": "sl-color-white",
         "value": "#ffffff",
@@ -2294,103 +2330,203 @@
       },
       {
         "name": "sl-color-data-1",
-        "value": "#a04fdf",
-        "usage": "Data series 1 (violet). Categorical; use in order."
+        "value": "{sl-color-data-violet}",
+        "usage": "Data series 1: violet. Categorical; use in order."
       },
       {
         "name": "sl-color-data-2",
-        "value": "#ef7053",
-        "usage": "Data series 2 (coral). Categorical; use in order."
+        "value": "{sl-color-data-coral}",
+        "usage": "Data series 2: coral. Categorical; use in order."
       },
       {
         "name": "sl-color-data-3",
-        "value": "#c4b679",
-        "usage": "Data series 3 (gold). Categorical; use in order."
+        "value": "{sl-color-data-gold}",
+        "usage": "Data series 3: gold. Categorical; use in order."
       },
       {
         "name": "sl-color-data-4",
-        "value": "#612c3d",
-        "usage": "Data series 4 (burgundy). Categorical; use in order."
+        "value": "{sl-color-data-burgundy}",
+        "usage": "Data series 4: burgundy. Categorical; use in order."
       },
       {
         "name": "sl-color-data-5",
-        "value": "#86e6ca",
-        "usage": "Data series 5 (mint). Categorical; use in order."
+        "value": "{sl-color-data-mint}",
+        "usage": "Data series 5: mint. Categorical; use in order."
       },
       {
         "name": "sl-color-data-6",
-        "value": "#154975",
-        "usage": "Data series 6 (navy). Categorical; use in order."
+        "value": "{sl-color-data-navy}",
+        "usage": "Data series 6: navy. Categorical; use in order."
       },
       {
         "name": "sl-color-data-7",
-        "value": "#bbc3fe",
-        "usage": "Data series 7 (periwinkle). Categorical; use in order."
+        "value": "{sl-color-data-periwinkle}",
+        "usage": "Data series 7: periwinkle. Categorical; use in order."
       },
       {
         "name": "sl-color-data-8",
-        "value": "#0b5313",
-        "usage": "Data series 8 (forest). Categorical; use in order."
+        "value": "{sl-color-data-forest}",
+        "usage": "Data series 8: forest. Categorical; use in order."
       },
       {
         "name": "sl-color-data-9",
-        "value": "#74ce4b",
-        "usage": "Data series 9 (lime). Categorical; use in order."
+        "value": "{sl-color-data-lime}",
+        "usage": "Data series 9: lime. Categorical; use in order."
       },
       {
         "name": "sl-color-data-10",
-        "value": "#dac925",
-        "usage": "Data series 10 (yellow). Categorical; use in order."
+        "value": "{sl-color-data-yellow}",
+        "usage": "Data series 10: yellow. Categorical; use in order."
       },
       {
         "name": "sl-color-data-11",
-        "value": "#b4a1e2",
-        "usage": "Data series 11 (lavender). Categorical; use in order."
+        "value": "{sl-color-data-lavender}",
+        "usage": "Data series 11: lavender. Categorical; use in order."
       },
       {
         "name": "sl-color-data-12",
-        "value": "#ffc3b5",
-        "usage": "Data series 12 (peach). Categorical; use in order."
+        "value": "{sl-color-data-peach}",
+        "usage": "Data series 12: peach. Categorical; use in order."
       },
       {
         "name": "sl-color-data-13",
-        "value": "#f1e5af",
-        "usage": "Data series 13 (cream). Categorical; use in order."
+        "value": "{sl-color-data-cream}",
+        "usage": "Data series 13: cream. Categorical; use in order."
       },
       {
         "name": "sl-color-data-14",
-        "value": "#a6838e",
-        "usage": "Data series 14 (mauve). Categorical; use in order."
+        "value": "{sl-color-data-mauve}",
+        "usage": "Data series 14: mauve. Categorical; use in order."
       },
       {
         "name": "sl-color-data-15",
-        "value": "#bfecdf",
-        "usage": "Data series 15 (seafoam). Categorical; use in order."
+        "value": "{sl-color-data-seafoam}",
+        "usage": "Data series 15: seafoam. Categorical; use in order."
       },
       {
         "name": "sl-color-data-16",
-        "value": "#7fa8cb",
-        "usage": "Data series 16 (sky). Categorical; use in order."
+        "value": "{sl-color-data-sky}",
+        "usage": "Data series 16: sky. Categorical; use in order."
       },
       {
         "name": "sl-color-data-17",
-        "value": "#e5e8ff",
-        "usage": "Data series 17 (ice). Categorical; use in order."
+        "value": "{sl-color-data-ice}",
+        "usage": "Data series 17: ice. Categorical; use in order."
       },
       {
         "name": "sl-color-data-18",
-        "value": "#b1d0b5",
-        "usage": "Data series 18 (sage). Categorical; use in order."
+        "value": "{sl-color-data-sage}",
+        "usage": "Data series 18: sage. Categorical; use in order."
       },
       {
         "name": "sl-color-data-19",
-        "value": "#d0fabd",
-        "usage": "Data series 19 (chartreuse). Categorical; use in order."
+        "value": "{sl-color-data-chartreuse}",
+        "usage": "Data series 19: chartreuse. Categorical; use in order."
       },
       {
         "name": "sl-color-data-20",
+        "value": "{sl-color-data-ivory}",
+        "usage": "Data series 20: ivory. Categorical; use in order."
+      },
+      {
+        "name": "sl-color-data-violet",
+        "value": "#a04fdf",
+        "usage": "Data color violet. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-coral",
+        "value": "#ef7053",
+        "usage": "Data color coral. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-gold",
+        "value": "#c4b679",
+        "usage": "Data color gold. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-burgundy",
+        "value": "#612c3d",
+        "usage": "Data color burgundy. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-mint",
+        "value": "#86e6ca",
+        "usage": "Data color mint. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-navy",
+        "value": "#154975",
+        "usage": "Data color navy. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-periwinkle",
+        "value": "#bbc3fe",
+        "usage": "Data color periwinkle. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-forest",
+        "value": "#0b5313",
+        "usage": "Data color forest. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-lime",
+        "value": "#74ce4b",
+        "usage": "Data color lime. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-yellow",
+        "value": "#dac925",
+        "usage": "Data color yellow. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-lavender",
+        "value": "#b4a1e2",
+        "usage": "Data color lavender. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-peach",
+        "value": "#ffc3b5",
+        "usage": "Data color peach. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-cream",
+        "value": "#f1e5af",
+        "usage": "Data color cream. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-mauve",
+        "value": "#a6838e",
+        "usage": "Data color mauve. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-seafoam",
+        "value": "#bfecdf",
+        "usage": "Data color seafoam. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-sky",
+        "value": "#7fa8cb",
+        "usage": "Data color sky. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-ice",
+        "value": "#e5e8ff",
+        "usage": "Data color ice. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-sage",
+        "value": "#b1d0b5",
+        "usage": "Data color sage. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-chartreuse",
+        "value": "#d0fabd",
+        "usage": "Data color chartreuse. Charts use it through the numbered series slots."
+      },
+      {
+        "name": "sl-color-data-ivory",
         "value": "#fffce1",
-        "usage": "Data series 20 (ivory). Categorical; use in order."
+        "usage": "Data color ivory. Charts use it through the numbered series slots."
       }
     ]
   },
@@ -2407,7 +2543,7 @@
         "family": "body",
         "styles": [
           {
-            "name": "text-style-minimize",
+            "name": "text-style-body-minimize",
             "family": "body",
             "fontSize": "0.625rem",
             "lineHeight": 1.428,
@@ -2415,7 +2551,7 @@
             "usage": "Body copy in the minimize tier, the smallest functional text (captions, fine print)."
           },
           {
-            "name": "text-style-minimize-trigger",
+            "name": "text-style-trigger-minimize",
             "family": "body",
             "fontSize": "0.625rem",
             "lineHeight": 1.428,
@@ -2423,7 +2559,7 @@
             "usage": "Buttons and triggers in the minimize tier (the smallest UI): minimize body text at medium, like base-trigger one tier down."
           },
           {
-            "name": "text-style-minimize-selected",
+            "name": "text-style-selected-minimize",
             "family": "body",
             "fontSize": "0.625rem",
             "lineHeight": 1.428,
@@ -2431,7 +2567,7 @@
             "usage": "The selected or current item in the minimize tier (the smallest functional text): selected tabs and toggles, the current nav item or page. Minimize body text at semibold, so selection reads without changing size."
           },
           {
-            "name": "text-style-minimize-link",
+            "name": "text-style-link-minimize",
             "family": "body",
             "fontSize": "0.625rem",
             "lineHeight": 1.428,
@@ -2439,7 +2575,7 @@
             "usage": "Links in the minimize tier. The same type as minimize body text: a link stands out by color and underline, not by its type."
           },
           {
-            "name": "text-style-minimize-subtitle",
+            "name": "text-style-subtitle-minimize",
             "family": "body",
             "fontSize": "0.625rem",
             "lineHeight": 1.428,
@@ -2447,7 +2583,7 @@
             "usage": "Subtitles in the minimize tier, the smallest functional text (captions, fine print)."
           },
           {
-            "name": "text-style-minimize-subtitle-label",
+            "name": "text-style-eyebrow-minimize",
             "family": "body",
             "fontSize": "0.625rem",
             "lineHeight": 1.428,
@@ -2459,10 +2595,18 @@
       },
       {
         "name": "Condense",
-        "family": "body",
+        "family": "mono",
         "styles": [
           {
-            "name": "text-style-condense",
+            "name": "text-style-code-condense",
+            "family": "mono",
+            "fontSize": "0.75rem",
+            "lineHeight": 1.428,
+            "fontWeight": 400,
+            "usage": "Code uses the mono family so characters line up."
+          },
+          {
+            "name": "text-style-body-condense",
             "family": "body",
             "fontSize": "0.75rem",
             "lineHeight": 1.428,
@@ -2470,7 +2614,7 @@
             "usage": "Body copy in the condense tier, dense UI text (tables, secondary labels)."
           },
           {
-            "name": "text-style-condense-trigger",
+            "name": "text-style-trigger-condense",
             "family": "body",
             "fontSize": "0.75rem",
             "lineHeight": 1.428,
@@ -2478,7 +2622,7 @@
             "usage": "Buttons and triggers in the condense tier (dense UI): condense body text at medium, like base-trigger one tier down."
           },
           {
-            "name": "text-style-condense-selected",
+            "name": "text-style-selected-condense",
             "family": "body",
             "fontSize": "0.75rem",
             "lineHeight": 1.428,
@@ -2486,7 +2630,7 @@
             "usage": "The selected or current item in the condense tier (dense UI text): selected tabs and toggles, the current nav item or page. Condense body text at semibold, so selection reads without changing size."
           },
           {
-            "name": "text-style-condense-link",
+            "name": "text-style-link-condense",
             "family": "body",
             "fontSize": "0.75rem",
             "lineHeight": 1.428,
@@ -2494,7 +2638,7 @@
             "usage": "Links in the condense tier. The same type as condense body text: a link stands out by color and underline, not by its type."
           },
           {
-            "name": "text-style-condense-subtitle",
+            "name": "text-style-subtitle-condense",
             "family": "body",
             "fontSize": "0.75rem",
             "lineHeight": 1.428,
@@ -2502,13 +2646,21 @@
             "usage": "Subtitles in the condense tier, dense UI text (tables, secondary labels)."
           },
           {
-            "name": "text-style-condense-subtitle-label",
+            "name": "text-style-eyebrow-condense",
             "family": "body",
             "fontSize": "0.75rem",
             "lineHeight": 1.428,
             "fontWeight": 600,
             "letterSpacing": "0.05em",
             "usage": "Small uppercase eyebrow labels in the condense tier, dense UI text (tables, secondary labels)."
+          },
+          {
+            "name": "text-style-title-condense",
+            "family": "display",
+            "fontSize": "0.75rem",
+            "lineHeight": 1.428,
+            "fontWeight": 600,
+            "usage": "Titles in the condense tier: group headers in tables, menus and dense panels. Titles use the display family; the tier sets the size."
           }
         ]
       },
@@ -2517,7 +2669,7 @@
         "family": "body",
         "styles": [
           {
-            "name": "text-style-base",
+            "name": "text-style-body-base",
             "family": "body",
             "fontSize": "1rem",
             "lineHeight": 1.35,
@@ -2525,7 +2677,7 @@
             "usage": "Body copy in the base tier, the default UI and body text. Fluid: 14px at 320px wide → 16px at 1280px wide."
           },
           {
-            "name": "text-style-base-selected",
+            "name": "text-style-selected-base",
             "family": "body",
             "fontSize": "1rem",
             "lineHeight": 1.35,
@@ -2533,7 +2685,7 @@
             "usage": "The selected or current item in the base tier (the default UI and body text): selected tabs and toggles, the current nav item or page. Base body text at semibold, so selection reads without changing size. Fluid: 14px at 320px wide → 16px at 1280px wide."
           },
           {
-            "name": "text-style-base-label",
+            "name": "text-style-label-base",
             "family": "body",
             "fontSize": "0.75rem",
             "lineHeight": 1.428,
@@ -2541,7 +2693,7 @@
             "usage": "Form labels in the base tier, the default UI and body text."
           },
           {
-            "name": "text-style-base-link",
+            "name": "text-style-link-base",
             "family": "body",
             "fontSize": "1rem",
             "lineHeight": 1.35,
@@ -2549,7 +2701,7 @@
             "usage": "Links in the base tier. The same type as base body text: a link stands out by color and underline, not by its type. Fluid: 14px at 320px wide → 16px at 1280px wide."
           },
           {
-            "name": "text-style-base-subtitle",
+            "name": "text-style-subtitle-base",
             "family": "body",
             "fontSize": "1rem",
             "lineHeight": 1.35,
@@ -2557,12 +2709,20 @@
             "usage": "Subtitles in the base tier, the default UI and body text. Fluid: 14px at 320px wide → 16px at 1280px wide."
           },
           {
-            "name": "text-style-base-trigger",
+            "name": "text-style-trigger-base",
             "family": "body",
             "fontSize": "1rem",
             "lineHeight": 1.428,
             "fontWeight": 500,
             "usage": "Buttons and triggers in the base tier, the default UI and body text. Fluid: 14px at 320px wide → 16px at 1280px wide."
+          },
+          {
+            "name": "text-style-title-base",
+            "family": "display",
+            "fontSize": "1rem",
+            "lineHeight": 1.35,
+            "fontWeight": 600,
+            "usage": "Titles in the base tier: a toast, an accordion row, a list item heading. Titles use the display family; the tier sets the size. Fluid: 14px at 320px wide → 16px at 1280px wide."
           }
         ]
       },
@@ -2571,7 +2731,7 @@
         "family": "body",
         "styles": [
           {
-            "name": "text-style-magnify",
+            "name": "text-style-body-magnify",
             "family": "body",
             "fontSize": "1.2rem",
             "lineHeight": 1.35,
@@ -2579,96 +2739,48 @@
             "usage": "Body copy in the magnify tier, emphasized body text (lead paragraphs). Fluid: 16px at 320px wide → 19.2px at 1280px wide."
           },
           {
-            "name": "text-style-magnify-trigger",
+            "name": "text-style-trigger-magnify",
             "family": "body",
             "fontSize": "1.2rem",
             "lineHeight": 1.35,
             "fontWeight": 500,
             "usage": "Buttons and triggers in the magnify tier (emphasized, larger UI): magnify body text at medium, like base-trigger one tier up. Fluid: 16px at 320px wide → 19.2px at 1280px wide."
+          },
+          {
+            "name": "text-style-title-magnify",
+            "family": "display",
+            "fontSize": "1.2rem",
+            "lineHeight": 1.35,
+            "fontWeight": 600,
+            "usage": "Titles in the magnify tier: popovers, cards and fieldsets. Titles use the display family; the tier sets the size. Fluid: 16px at 320px wide → 19.2px at 1280px wide."
           }
         ]
       },
       {
-        "name": "Maximize",
+        "name": "Amplify",
         "family": "display",
         "styles": [
           {
-            "name": "text-style-maximize-2xl",
+            "name": "text-style-title-amplify",
             "family": "display",
             "fontSize": "1.728rem",
             "lineHeight": 1.253,
             "fontWeight": 600,
-            "usage": "Display text at 2xl, for headings and hero copy. Fluid: 23.04px at 320px wide → 27.65px at 1280px wide."
-          },
-          {
-            "name": "text-style-maximize-3xl",
-            "family": "display",
-            "fontSize": "2.0736rem",
-            "lineHeight": 1.204,
-            "fontWeight": 600,
-            "usage": "Display text at 3xl, for headings and hero copy. Fluid: 27.65px at 320px wide → 33.18px at 1280px wide."
-          },
-          {
-            "name": "text-style-maximize-4xl",
-            "family": "display",
-            "fontSize": "2.4883rem",
-            "lineHeight": 1,
-            "fontWeight": 600,
-            "usage": "Display text at 4xl, for headings and hero copy. Fluid: 33.18px at 320px wide → 39.81px at 1280px wide."
-          },
-          {
-            "name": "text-style-maximize-lg",
-            "family": "display",
-            "fontSize": "1.2rem",
-            "lineHeight": 1.35,
-            "fontWeight": 600,
-            "usage": "Display text at lg, for headings and hero copy. Fluid: 16px at 320px wide → 19.2px at 1280px wide."
-          },
-          {
-            "name": "text-style-maximize-md",
-            "family": "display",
-            "fontSize": "1rem",
-            "lineHeight": 1.35,
-            "fontWeight": 600,
-            "usage": "Display text at md, for headings and hero copy. Fluid: 14px at 320px wide → 16px at 1280px wide."
-          },
-          {
-            "name": "text-style-maximize-sm",
-            "family": "display",
-            "fontSize": "0.75rem",
-            "lineHeight": 1.428,
-            "fontWeight": 600,
-            "usage": "Display text at sm, for headings and hero copy."
-          },
-          {
-            "name": "text-style-maximize-xl",
-            "family": "display",
-            "fontSize": "1.44rem",
-            "lineHeight": 1.35,
-            "fontWeight": 600,
-            "usage": "Display text at xl, for headings and hero copy. Fluid: 19.2px at 320px wide → 23.04px at 1280px wide."
-          },
-          {
-            "name": "text-style-maximize-xs",
-            "family": "display",
-            "fontSize": "0.625rem",
-            "lineHeight": 1.428,
-            "fontWeight": 600,
-            "usage": "Display text at xs, for headings and hero copy."
+            "usage": "Titles in the amplify tier: dialogs, drawers and page sections. Titles use the display family; the tier sets the size. Fluid: 23.04px at 320px wide → 27.65px at 1280px wide."
           }
         ]
       },
       {
-        "name": "Code",
-        "family": "mono",
+        "name": "Maximize",
+        "family": "display",
         "styles": [
           {
-            "name": "text-style-code",
-            "family": "mono",
-            "fontSize": "0.75rem",
-            "lineHeight": 1.428,
-            "fontWeight": 400,
-            "usage": "Code uses the mono family so characters line up."
+            "name": "text-style-title-maximize",
+            "family": "display",
+            "fontSize": "2.4883rem",
+            "lineHeight": 1,
+            "fontWeight": 600,
+            "usage": "Titles in the maximize tier: the page head. Titles use the display family; the tier sets the size. Fluid: 33.18px at 320px wide → 39.81px at 1280px wide."
           }
         ]
       }