/* Sizes are expressed in REM against a 16px root, so the whole ramp scales with the person's browser/OS text-size setting. Apple asks for enlargement to at least 200% (accessibility.md > Vision); a fixed-px ramp cannot do that. At the default 16px root every value below resolves to exactly the px size Apple publishes — 1.0625rem is 17px. Dynamic Type ramps. iOS values are the Large (default) size class — the size every iOS layout is designed at. macOS values are the 13pt-base desktop ramp. Never hard-code a px size in a component; use a --type-* triple. */ :root { /* ---- iOS / iPadOS text styles (size / line-height / weight) ---- */ --type-large-title-size: 2.125rem; --type-large-title-line: 2.5625rem; --type-large-title-weight: 400; --type-title-1-size: 1.75rem; --type-title-1-line: 2.125rem; --type-title-1-weight: 400; --type-title-2-size: 1.375rem; --type-title-2-line: 1.75rem; --type-title-2-weight: 400; --type-title-3-size: 1.25rem; --type-title-3-line: 1.5625rem; --type-title-3-weight: 400; --type-headline-size: 1.0625rem; --type-headline-line: 1.375rem; --type-headline-weight: 600; --type-body-size: 1.0625rem; --type-body-line: 1.375rem; --type-body-weight: 400; --type-callout-size: 1rem; --type-callout-line: 1.3125rem; --type-callout-weight: 400; --type-subheadline-size: 0.9375rem; --type-subheadline-line: 1.25rem; --type-subheadline-weight: 400; --type-footnote-size: 0.8125rem; --type-footnote-line: 1.125rem; --type-footnote-weight: 400; --type-caption-1-size: 0.75rem; --type-caption-1-line: 1rem; --type-caption-1-weight: 400; --type-caption-2-size: 0.6875rem; --type-caption-2-line: 0.8125rem; --type-caption-2-weight: 400; /* ---- macOS text styles ---- */ --type-mac-large-title-size: 1.625rem; --type-mac-large-title-line: 2rem; --type-mac-title-1-size: 1.375rem; --type-mac-title-1-line: 1.625rem; --type-mac-title-2-size: 1.0625rem; --type-mac-title-2-line: 1.375rem; --type-mac-title-3-size: 0.9375rem; --type-mac-title-3-line: 1.25rem; --type-mac-headline-size: 0.8125rem; --type-mac-headline-line: 1rem; --type-mac-body-size: 0.8125rem; --type-mac-body-line: 1rem; --type-mac-callout-size: 0.75rem; --type-mac-callout-line: 0.9375rem; --type-mac-subheadline-size: 0.6875rem; --type-mac-subheadline-line: 0.875rem; --type-mac-footnote-size: 0.625rem; --type-mac-footnote-line: 0.8125rem; --type-mac-caption-1-size: 0.625rem; --type-mac-caption-1-line: 0.8125rem; --type-mac-caption-2-size: 0.625rem; --type-mac-caption-2-line: 0.8125rem; /* macOS Headline is BOLD, not semibold, and Caption 2 is Medium (typography.md) */ --type-mac-headline-weight: 700; /* @kind font */ --type-mac-caption-2-weight: 500; /* @kind font */ /* ---- tvOS built-in text styles ---- Apple publishes a full nine-style ramp here and the system was carrying three invented 'anchors' instead (hero/title/body), with no line heights and a 'title' that matched no real style. Replaced with the published table. Note the weights: tvOS sets almost everything MEDIUM, not regular — the exception is Subtitle 1. At ten feet a regular weight thins out, so the platform's baseline is one step heavier than iOS's. Emphasized is Bold throughout (Medium for Subtitle 1). */ --type-tv-title-1-size: 4.75rem; --type-tv-title-1-line: 6rem; --type-tv-title-1-weight: 500; --type-tv-title-2-size: 3.5625rem; --type-tv-title-2-line: 4.125rem; --type-tv-title-2-weight: 500; --type-tv-title-3-size: 3rem; --type-tv-title-3-line: 3.5rem; --type-tv-title-3-weight: 500; --type-tv-headline-size: 2.375rem; --type-tv-headline-line: 2.875rem; --type-tv-headline-weight: 500; --type-tv-subtitle-1-size: 2.375rem;--type-tv-subtitle-1-line: 2.875rem;--type-tv-subtitle-1-weight: 400; --type-tv-callout-size: 1.9375rem; --type-tv-callout-line: 2.375rem; --type-tv-callout-weight: 500; --type-tv-body-size: 1.8125rem; --type-tv-body-line: 2.25rem; --type-tv-body-weight: 500; --type-tv-caption-1-size: 1.5625rem;--type-tv-caption-1-line: 2rem; --type-tv-caption-1-weight: 500; --type-tv-caption-2-size: 1.4375rem;--type-tv-caption-2-line: 1.875rem;--type-tv-caption-2-weight: 500; /* ---- watchOS text styles ---- ⚠️ VERIFIED September 2026, and one thing to know before using these: watchOS has FOUR default Dynamic Type sizes keyed to case size, not one — xSmall · Small (38mm) · Large (40/41/42mm) · xLarge (44/45/49mm) The block immediately below is the LARGE column. Every watch Apple currently ships is 44mm or larger, so xLarge is the modern default and is given after it. Note this also reconciles a mismatch: the complication tokens above use the 45mm/49mm column, so pair them with the xLarge ramp, not this one. ---- Large (40/41/42mm) ---- Also replaced: the previous three anchors had a 22px 'title' that is not a watchOS size at all, and a 13px 'caption' that is actually Footnote 1 (Caption 1 is 15px). watchOS is the one platform with TWO footnote steps and no Callout or Subhead. Leading here is fractional by design — Apple publishes .5pt values. */ --type-watch-large-title-size: 2.25rem; --type-watch-large-title-line: 2.40625rem; --type-watch-large-title-weight: 400; --type-watch-title-1-size: 2.125rem; --type-watch-title-1-line: 2.28125rem; --type-watch-title-1-weight: 400; --type-watch-title-2-size: 1.75rem; --type-watch-title-2-line: 1.90625rem; --type-watch-title-2-weight: 400; --type-watch-title-3-size: 1.1875rem; --type-watch-title-3-line: 1.34375rem; --type-watch-title-3-weight: 400; --type-watch-headline-size: 1rem; --type-watch-headline-line: 1.15625rem; --type-watch-headline-weight: 600; --type-watch-body-size: 1rem; --type-watch-body-line: 1.15625rem; --type-watch-body-weight: 400; --type-watch-caption-1-size: 0.9375rem; --type-watch-caption-1-line: 1.09375rem; --type-watch-caption-1-weight: 400; --type-watch-caption-2-size: 0.875rem; --type-watch-caption-2-line: 1.03125rem; --type-watch-caption-2-weight: 400; --type-watch-footnote-1-size: 0.8125rem; --type-watch-footnote-1-line: 0.96875rem; --type-watch-footnote-1-weight: 400; --type-watch-footnote-2-size: 0.75rem; --type-watch-footnote-2-line: 0.90625rem; --type-watch-footnote-2-weight: 400; /* ---- xLarge (44/45/49mm) — the modern default, and what the complication tokens above are sized against. Emphasized weight is Semibold throughout except Large Title, which is Bold. ---- */ --type-watch-xl-large-title-size: 2.5rem; --type-watch-xl-large-title-line: 2.65625rem; --type-watch-xl-title-1-size: 2.375rem; --type-watch-xl-title-1-line: 2.53125rem; --type-watch-xl-title-2-size: 1.875rem; --type-watch-xl-title-2-line: 2.03125rem; --type-watch-xl-title-3-size: 1.25rem; --type-watch-xl-title-3-line: 1.40625rem; --type-watch-xl-headline-size: 1.0625rem; --type-watch-xl-headline-line: 1.21875rem; --type-watch-xl-headline-weight: 600; --type-watch-xl-body-size: 1.0625rem; --type-watch-xl-body-line: 1.21875rem; --type-watch-xl-caption-1-size: 1rem; --type-watch-xl-caption-1-line: 1.15625rem; --type-watch-xl-caption-2-size: 0.9375rem; --type-watch-xl-caption-2-line: 1.09375rem; --type-watch-xl-footnote-1-size: 0.875rem; --type-watch-xl-footnote-1-line: 1.03125rem; --type-watch-xl-footnote-2-size: 0.8125rem; --type-watch-xl-footnote-2-line: 0.96875rem; /* ---- EMPHASIZED WEIGHTS (typography.md > Specifications, added Dec 16 2025) ---- Apple publishes an emphasized weight per style, reachable via the bold() modifier or traitBold. It is NOT a uniform "bold" — it varies by style and by platform, and using 700 everywhere overshoots most of the ramp. iOS/iPadOS: Bold (700) for Large Title, Title 1, Title 2; Semibold (600) for every other style, Title 3 downward. macOS: Bold for Large Title / Title 1 / Title 2; Semibold for Title 3, Body, Callout, Subheadline, Footnote, Caption 2; HEAVY (800) for Headline, whose base weight is already Bold; MEDIUM (500) for Caption 1. tvOS: Bold throughout except Subtitle 1, which emphasizes to Medium. watchOS: Bold for Large Title, Semibold for everything else. */ --type-emphasis-title: 700; --type-emphasis-default: 600; --type-emphasis-macos-headline: 800; --type-emphasis-macos-caption-1: 500; --type-emphasis-tv-subtitle-1: 500; /* ---- watchOS complication default text (complications.md) — VERIFIED ---- Every complication layout defaults to SF COMPACT ROUNDED — verified against typography.md, which states watchOS uses SF Compact as its system font and "in complications, watchOS uses SF Compact Rounded". Pair these with --font-watchos-rounded, not --font-system-rounded (SF PRO Rounded), which is a different face. Sizes are the 45mm/49mm column; weight Medium except Corner (Semibold). */ --type-complication-circular-size: 0.90625rem; /* 14.5pt @kind font-size */ --type-complication-xl-circular-size: 2.5625rem; /* 41pt @kind font-size */ --type-complication-corner-size: 0.75rem; /* 12pt @kind font-size */ --type-complication-rect-size: 1.21875rem; /* 19.5pt @kind font-size */ --type-complication-weight: 500; --type-complication-corner-weight: 600; /* Legacy aliases for the three anchors this block replaced, repointed at the real styles so existing rules keep working. Prefer the named styles above. */ --type-tv-hero-size: var(--type-tv-title-1-size); --type-tv-title-size: var(--type-tv-title-3-size); --type-watch-title-size: var(--type-watch-title-3-size); --type-watch-caption-size: var(--type-watch-caption-1-size); /* ---- Tracking. Converted from Apple's published SF Pro tracking table (typography.md > Tracking values, 1/1000 em -> em). SF Pro does NOT simply tighten as it grows. Tracking is most NEGATIVE in the 17-20pt interface range (-0.026em at 17pt), crosses zero around 23-24pt, turns POSITIVE through the display range (+0.014em at 28pt), then decays back to zero at 80pt and above. Large display type therefore wants slightly OPEN tracking, and hero type at 80pt+ wants none at all. ---- */ --tracking-11: 0.006em; --tracking-12: 0em; --tracking-13: -0.006em; --tracking-15: -0.016em; --tracking-17: -0.026em; --tracking-20: -0.023em; --tracking-22: -0.012em; --tracking-24: 0.003em; --tracking-28: 0.014em; --tracking-34: 0.012em; --tracking-48: 0.008em; --tracking-64: 0.004em; --tracking-80: 0em; /* Semantic aliases, each pinned to the size it is actually used at */ --tracking-caption: var(--tracking-12); --tracking-body: var(--tracking-17); --tracking-title: var(--tracking-28); --tracking-display: var(--tracking-34); --tracking-hero: var(--tracking-80); /* Not Apple's: our own value for uppercase eyebrow/section labels, which SF's table does not cover because the system never sets UI text in all caps. */ --tracking-caps: 0.06em; /* ---- New York tracking. A SEPARATE table in typography.md, and it behaves nothing like SF Pro: NY tightens monotonically as it grows and never turns positive above 15pt, where SF Pro swings back open through the display range. Using the SF values on a New York heading is therefore wrong in the direction that shows most — large sizes. Use these whenever the serif family is set. ---- */ --tracking-ny-11: 0.011em; --tracking-ny-13: 0.004em; --tracking-ny-15: 0em; --tracking-ny-17: -0.004em; --tracking-ny-20: -0.01em; --tracking-ny-24: -0.011em; --tracking-ny-28: -0.012em; --tracking-ny-34: -0.014em; --tracking-ny-48: -0.014em; --tracking-ny-64: -0.015em; --tracking-ny-80: -0.016em; --tracking-ny-body: var(--tracking-ny-17); --tracking-ny-title: var(--tracking-ny-28); --tracking-ny-display: var(--tracking-ny-48); /* ---- Emphasized weights. The weight a text style takes when the bold symbolic trait is applied (typography.md > Specifications; Apple added these 2025-12-16). Use these instead of picking an arbitrary bold. ---- */ --type-large-title-emph: 700; /* @kind font */ --type-title-1-emph: 700; /* @kind font */ --type-title-2-emph: 700; /* @kind font */ --type-title-3-emph: 600; /* @kind font */ --type-headline-emph: 600; /* @kind font */ --type-body-emph: 600; /* @kind font */ --type-callout-emph: 600; /* @kind font */ --type-subheadline-emph: 600; /* @kind font */ --type-footnote-emph: 600; /* @kind font */ --type-caption-1-emph: 600; /* @kind font */ --type-caption-2-emph: 600; /* @kind font */ --type-mac-headline-emph: 800; /* Heavy @kind font */ --type-mac-caption-1-emph: 500; /* Medium @kind font */ /* ---- Accessibility floors ---- */ /* Minimum legible size per platform (accessibility.md > Vision). tvOS is far larger because it is read from ten feet. */ --type-min-ios: 0.6875rem; /* 11pt */ --type-min-macos: 0.625rem; /* 10pt */ --type-min-tvos: 1.4375rem; /* 23pt — default is 29pt */ --type-min-visionos: 0.75rem; /* 12pt */ --type-min-watchos: 0.75rem; /* 12pt — default is 16pt */ /* Default (not minimum) body size per platform — the size each platform's layouts are actually designed at (typography.md > Ensuring legibility). */ --type-default-ios: 1.0625rem; /* 17pt */ --type-default-macos: 0.8125rem; /* 13pt */ --type-default-tvos: 1.8125rem; /* 29pt */ --type-default-visionos: 1.0625rem; /* 17pt */ --type-default-watchos: 1rem; /* 16pt */ /* Mac Catalyst iPad idiom scales the whole iPadOS interface to 77% (mac-catalyst.md > Choose an idiom). VERIFIED — and it is exactly why the two default body sizes already above line up: 17pt iPadOS x 0.77 = 13pt macOS. The Mac idiom renders at 100% instead, which is why text set with the iPad idiom in mind looks oversized the moment you switch. Use text styles, never fixed sizes, if both are in play. */ --scale-mac-catalyst-ipad-idiom: 0.77; /* @kind other */ /* Text-enlargement target (accessibility.md > Vision) — VERIFIED September 2026. People should be able to enlarge text by at least 200% — or 140% on watchOS, where screen size caps how far the ramp can usefully go. Support it through Dynamic Type or your own scaling; either satisfies the guidance. */ --scale-text-enlargement-min: 2.0; /* @kind other */ --scale-text-enlargement-min-watchos: 1.4; /* @kind other */ } /* visionOS note, no tokens: visionOS uses BOLDER versions of the Dynamic Type body and title styles than iOS, and adds Extra Large Title 1 and 2 for editorial layouts. Apple names these but publishes no sizes for them, so nothing is invented here — when setting visionOS type, start from the iOS ramp and step the weight up one. Weight floor, all platforms: prefer Regular / Medium / Semibold / Bold. Ultralight, Thin and Light are explicitly called out as hard to see, especially at small sizes. */