feat(tokens): add editorial typography family (#1940)

* feat(tokens): add editorial typography family

Adds a Sora-based editorial typography token family for brand-themed
surfaces (empty states, hero moments, announcements) that need the
marketing-site type system rather than the utility scale.

- New `fontFamily.sora` with Inter fallback
- New `fontSize.editorial.{14..80}` rungs (pixel-named to match size
  primitives; avoids style-dictionary CSS font-shorthand emitter
  mis-tokenizing 4-digit rung names)
- New `fontWeight.editorial.{medium,semibold,bold}` namespace
- New unitless `lineHeight.editorial.{tight,snug,close,default,relaxed}`
- New top-level `letterSpacing` group with `editorial.*` sub-namespace
  (consumers apply alongside the typography shorthand since CSS font
  shorthand does not include letter-spacing)
- 7 new `text.editorial.*` compositions: display, h1, h1-alt, h2, h2-alt,
  h2-medium, h3 — Sora-only; Söhne mixins deferred pending licensing
- Adds `size.30` and `size.50` primitives required by the new scale

Source of truth: `_typography.scss` and `Text/index.tsx` DEFAULT_WEIGHT
map in launchdarkly-nextjs/ai-refresh.

Phase 2 (gonfalon Sora global preload + fairytale rollout) lands in a
separate PR — see Editorial Typography Tokens proposal.

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

* 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>

* feat(tokens): load Sora in Storybook + fix editorial heading tags

Storybook now demonstrates the actual Sora editorial type instead of
silently falling back to Inter: the Editorial specimens render with
font-family var(--lp-font-family-sora) ("Sora, Inter, ..."), but no
Sora webfont was loaded in the preview, so they rendered in Inter.

- preview-head.html: load Sora from Google Fonts (OFL) for Storybook
  specimens only. The in-product @font-face/preload ships in Phase 2
  (gonfalon), so this stays scoped to the docs surface.
- typography.stories.tsx: map editorial-h1/h2/h3 to real h1/h2/h3 tags
  in getSemanticElement (previously fell through to a generic div);
  drop a stray per-token console.log.

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

* fix(box): flatten fontSize/fontWeight/lineHeight token groups; add changeset

The editorial typography tokens nest an `editorial.*` sub-namespace under
fontSize, fontWeight, and lineHeight. Box's rainbow-sprinkles passed these
groups straight into defineProperties, which expects a flat
Record<string, string>, so the nested objects broke its overload typing —
cascading into BoxProps and every <Box> consumer (preview, stories, specs)
failing Type Check.

Flatten those three groups via `flat` (the same treatment the `font`
typography group already gets), so editorial.* tokens become flat keys and
defineProperties typing holds. Also adds the missing changeset for the
@launchpad-ui/tokens + @launchpad-ui/box changes.

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

---------

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

Author: OneHunnid

.changeset/editorial-typography-tokens.md

@@ -0,0 +1,8 @@
+---
+'@launchpad-ui/tokens': minor
+'@launchpad-ui/box': patch
+---
+
+Add a Sora-based editorial typography token family for brand-themed surfaces (empty states, hero moments, announcements). Adds `fontFamily.sora` (with an Inter fallback), pixel-named `fontSize.editorial.*`, `fontWeight.editorial.*`, unitless `lineHeight.editorial.*`, a new top-level `letterSpacing.editorial.*` group, seven `text.editorial.*` compositions, and `size.30`/`size.50` primitives. All values mirror the `ai-refresh` `_typography.scss` source of truth. Existing utility `text.*` compositions are unchanged.
+
+Box's `rainbow-sprinkles` now flattens the `fontSize`, `fontWeight`, and `lineHeight` token groups (matching how the `font` typography group is already handled) so the nested `editorial.*` sub-namespaces don't break `defineProperties`' flat-record typing.

.storybook/preview-head.html

@@ -1,6 +1,14 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link rel="preload" href="./static/assets/Audimat3000-Regulier.var-subset.woff2" as="font" crossorigin />
 <link rel="preload" href="./static/assets/Inter.var-subset.woff2" as="font" crossorigin />
 
+<!-- Sora (editorial type family) loaded from Google Fonts for Storybook specimens only.
+     The in-product @font-face/preload ships separately in Phase 2 (gonfalon). -->
+<link
+	href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap"
+	rel="stylesheet"
+/>
+
 <link href="./styles.css" rel="stylesheet" />
 <link href="./static/fonts.css" rel="stylesheet" />

packages/box/src/styles/rainbow-sprinkles.css.ts

@@ -5,7 +5,7 @@ import { createRainbowSprinkles, defineProperties } from 'rainbow-sprinkles';
 
 // biome-ignore lint/correctness/noUnusedVariables: ignore
 const { bg, border, fill, shadow, text, ...global } = vars.color;
-const { text: typography, gradient } = vars;
+const { text: typography, gradient, fontSize, fontWeight, lineHeight } = vars;
 
 type FlattenObjectKeys<T extends Record<string, unknown>, Key = keyof T> = Key extends string
 	? T[Key] extends Record<string, unknown>
@@ -19,13 +19,19 @@ type BorderKeys = FlattenObjectKeys<typeof border>;
 type FillKeys = FlattenObjectKeys<typeof fill>;
 type TextKeys = FlattenObjectKeys<typeof text>;
 type TypographyKeys = FlattenObjectKeys<typeof typography>;
+type FontSizeKeys = FlattenObjectKeys<typeof fontSize>;
+type FontWeightKeys = FlattenObjectKeys<typeof fontWeight>;
+type LineHeightKeys = FlattenObjectKeys<typeof lineHeight>;
 
 const colors = flatten<typeof global, Record<GlobalKeys, string>>(global);
 const backgrounds = flatten<typeof bg, Record<BackgroundKeys, string>>(bg);
 const borders = flatten<typeof border, Record<BorderKeys, string>>(border);
 const fills = flatten<typeof fill, Record<FillKeys, string>>(fill);
 const texts = flatten<typeof text, Record<TextKeys, string>>(text);
 const typographies = flatten<typeof typography, Record<TypographyKeys, string>>(typography);
+const fontSizes = flatten<typeof fontSize, Record<FontSizeKeys, string>>(fontSize);
+const fontWeights = flatten<typeof fontWeight, Record<FontWeightKeys, string>>(fontWeight);
+const lineHeights = flatten<typeof lineHeight, Record<LineHeightKeys, string>>(lineHeight);
 
 const responsiveProperties = defineProperties({
 	conditions: {
@@ -70,9 +76,9 @@ const responsiveProperties = defineProperties({
 		borderWidth: vars.borderWidth,
 		font: typographies,
 		fontFamily: vars.fontFamily,
-		fontSize: vars.fontSize,
-		fontWeight: vars.fontWeight,
-		lineHeight: vars.lineHeight,
+		fontSize: fontSizes,
+		fontWeight: fontWeights,
+		lineHeight: lineHeights,
 		width: vars.size,
 		height: vars.size,
 		maxHeight: vars.size,

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}`;
@@ -55,7 +81,24 @@ const getSemanticElement = (token: string, font: string) => {
 	const category = parts[0]; // heading, body, etc.
 	const size = parts[1]; // 1, 2, etc.
 
-	console.log({ category, token });
+	// Editorial tokens are keyed as editorial-<variant>[-modifier] (e.g. editorial-h1-alt),
+	// so the heading level lives in parts[1]. Map it to the matching tag instead of falling
+	// through to the generic div below.
+	if (category === 'editorial') {
+		const variant = parts[1]; // display, h1, h2, h3
+		const match = /^h(\d+)$/.exec(variant);
+		if (match) {
+			const Tag = `h${match[1]}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+			return {
+				element: Tag,
+				render: (text: string) => <Tag style={{ font }}>{text}</Tag>,
+			};
+		}
+		return {
+			element: 'div',
+			render: (text: string) => <div style={{ font }}>{text}</div>,
+		};
+	}
 
 	switch (category) {
 		case 'display':
@@ -167,6 +210,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()} />,
 };

packages/tokens/tokens/font.json

@@ -16,6 +16,9 @@
 		},
 		"display": {
 			"$value": "Audimat\\ 3000 Regulier"
+		},
+		"sora": {
+			"$value": "Sora, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, sans-serif"
 		}
 	},
 	"fontSize": {
@@ -50,6 +53,47 @@
 		},
 		"800": {
 			"$value": 60
+		},
+		"editorial": {
+			"14": {
+				"$value": "{size.14}"
+			},
+			"16": {
+				"$value": "{size.16}"
+			},
+			"18": {
+				"$value": "{size.18}"
+			},
+			"20": {
+				"$value": "{size.20}"
+			},
+			"24": {
+				"$value": "{size.24}"
+			},
+			"30": {
+				"$value": "{size.30}"
+			},
+			"32": {
+				"$value": "{size.32}"
+			},
+			"40": {
+				"$value": "{size.40}"
+			},
+			"48": {
+				"$value": "{size.48}"
+			},
+			"50": {
+				"$value": "{size.50}"
+			},
+			"56": {
+				"$value": "{size.56}"
+			},
+			"64": {
+				"$value": "{size.64}"
+			},
+			"80": {
+				"$value": "{size.80}"
+			}
 		}
 	},
 	"fontWeight": {
@@ -78,6 +122,17 @@
 		},
 		"extrabold": {
 			"$value": 800
+		},
+		"editorial": {
+			"medium": {
+				"$value": 500
+			},
+			"semibold": {
+				"$value": 600
+			},
+			"bold": {
+				"$value": 700
+			}
 		}
 	},
 	"lineHeight": {
@@ -103,6 +158,62 @@
 		},
 		"500": {
 			"$value": "{size.72}"
+		},
+		"editorial": {
+			"tight": {
+				"$value": 1
+			},
+			"snug": {
+				"$value": 1.05
+			},
+			"close": {
+				"$value": 1.1
+			},
+			"default": {
+				"$value": 1.15
+			},
+			"relaxed": {
+				"$value": 1.5
+			}
+		}
+	},
+	"letterSpacing": {
+		"$type": "dimension",
+		"$extensions": {
+			"com.figma": {
+				"hiddenFromPublishing": false,
+				"scopes": ["LETTER_SPACING"],
+				"codeSyntax": {}
+			}
+		},
+		"editorial": {
+			"tight-2px": {
+				"$value": "-2px"
+			},
+			"tight-1px": {
+				"$value": "-1px"
+			},
+			"tight-em-05": {
+				"$value": "-0.05em"
+			},
+			"tight-em-03": {
+				"$value": "-0.03em"
+			},
+			"tight-px-065": {
+				"$value": "-0.65px"
+			},
+			"tight-px-050": {
+				"$value": "-0.5px"
+			},
+			"tight-px-025": {
+				"$value": "-0.25px"
+			},
+			"wide-em-06": {
+				"$value": "0.06em"
+			},
+			"normal": {
+				"$value": 0
+			}
 		}
 	}
 }

packages/tokens/tokens/size.json

@@ -62,6 +62,9 @@
 		"28": {
 			"$value": 28
 		},
+		"30": {
+			"$value": 30
+		},
 		"32": {
 			"$value": 32
 		},
@@ -77,6 +80,9 @@
 		"48": {
 			"$value": 48
 		},
+		"50": {
+			"$value": 50
+		},
 		"56": {
 			"$value": 56
 		},