feat(tokens): split typography story into Utility and Editorial sections

Replaces the single Typography story with two stories so each section
renders with its own heading and description above its own canvas.
Custom docs page (Title + Description + Stories with includePrimary
and no section title) skips the default Primary canvas and removes
the "Stories" separator heading.

Editorial label rendering: getDisplayText now handles editorial keys
by expanding h1/h2/h3 to "Heading 1/2/3" with alt and medium kept as
variant suffixes. Component description mentions the two type sets
and links to the Utility & Editorial Type System proposal.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: OneHunnid

packages/tokens/stories/typography.stories.tsx

@@ -1,4 +1,5 @@
 import { vars } from '@launchpad-ui/vars';
+import { Description, Stories, Title } from '@storybook/addon-docs/blocks';
 
 import { Button } from '../../components/src/Button';
 import { ToastRegion, toastQueue } from '../../components/src/Toast';
@@ -11,8 +12,15 @@ export default {
 		docs: {
 			description: {
 				component:
-					'Typography tokens for the LaunchPad design system. For components using these tokens, see [Text](/docs/components-content-text--docs), [Heading](/docs/components-content-heading--docs), [Label](/docs/components-content-label--docs), and [Code](/docs/components-content-code--docs).',
+					'Typography tokens for the LaunchPad design system. Our typography is split between two type sets: Utility and Editorial. For components using these tokens, see [Text](/docs/components-content-text--docs), [Heading](/docs/components-content-heading--docs), [Label](/docs/components-content-label--docs), and [Code](/docs/components-content-code--docs). For the full framework, see the [Utility & Editorial Type System for LaunchPad](https://launchdarkly.atlassian.net/wiki/spaces/~712020490f77e4363240f1888e975e52e895be/pages/4939022523/) proposal.',
 			},
+			page: () => (
+				<>
+					<Title />
+					<Description />
+					<Stories title="" includePrimary />
+				</>
+			),
 		},
 	},
 };
@@ -33,15 +41,33 @@ const flatten = (obj: Record<string, unknown>, prefix = ''): Record<string, stri
 	return result;
 };
 
+const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+
 const getDisplayText = (key: string) => {
 	const parts = key.split('-');
 
+	if (parts[0] === 'editorial') {
+		const variant = parts[1]; // display, h1, h2, h3
+		const modifiers = parts.slice(2); // alt, medium, etc. all treated as variant suffixes
+
+		let base: string;
+		if (variant === 'display') {
+			base = 'Display';
+		} else if (/^h\d+$/.test(variant)) {
+			base = `Heading ${variant.slice(1)}`;
+		} else {
+			base = capitalize(variant);
+		}
+
+		return modifiers.length ? `${base} ${modifiers.map(capitalize).join(' ')}` : base;
+	}
+
 	const category = parts[0]; // heading, body, etc.
 	const size = parts[1]; // 1, 2, etc.
 	const weight = parts[2]; // medium, semibold, etc.
 
 	if (weight) {
-		return `${category.charAt(0).toUpperCase() + category.slice(1)} ${size} - ${weight.charAt(0).toUpperCase() + weight.slice(1)}`;
+		return `${capitalize(category)} ${size} - ${capitalize(weight)}`;
 	}
 	if (category === 'display') {
 		return `Display ${size}`;
@@ -167,6 +193,39 @@ const TokenTable = ({ tokens }: { tokens: Record<string, string> }) => {
 	);
 };
 
-export const Typography = {
-	render: () => <TokenTable tokens={flatten(vars.text)} />,
+const UTILITY_DESCRIPTION = `The foundation of the LaunchDarkly product. Inter for text, SF Mono for numeric content where vertical alignment matters. Designed to feel invisible: when it's working correctly, users don't notice it. Used across navigation, forms, tables, modals, settings, and any task-driven surface.`;
+
+const EDITORIAL_DESCRIPTION =
+	'Carries the LaunchDarkly brand voice into the product by using Sora for display headings. Used on first-time onboarding empty states, in-app banners, feature announcements, and educational moments where the user has paused. Should feel intentional and slightly different from the rest of the UI.';
+
+const utilityTokens = () =>
+	Object.fromEntries(
+		Object.entries(flatten(vars.text)).filter(([key]) => !key.startsWith('editorial-')),
+	);
+
+const editorialTokens = () =>
+	Object.fromEntries(
+		Object.entries(flatten(vars.text)).filter(([key]) => key.startsWith('editorial-')),
+	);
+
+export const Utility = {
+	parameters: {
+		docs: {
+			description: {
+				story: UTILITY_DESCRIPTION,
+			},
+		},
+	},
+	render: () => <TokenTable tokens={utilityTokens()} />,
+};
+
+export const Editorial = {
+	parameters: {
+		docs: {
+			description: {
+				story: EDITORIAL_DESCRIPTION,
+			},
+		},
+	},
+	render: () => <TokenTable tokens={editorialTokens()} />,
 };