Typography
Typography is scheme-independent: every --ox-text-* and --ox-font-* token has one value, used the same way in light and dark. The semantic scale below (14 styles) is what components and page content should reach for; the raw scale underneath it is the size ramp, weight names, and font stacks those semantic styles are built from.
Semantic type scale
Each style is three tokens (size, weight, line-height) rendered together at its real values.
Heading 1: The quick brown fox jumps over the lazy dog
--ox-text-heading-1-size- 1.5rem
--ox-text-heading-1-weight- 600
--ox-text-heading-1-leading- 1.3333
Heading 2: The quick brown fox jumps over the lazy dog
--ox-text-heading-2-size- 1.25rem
--ox-text-heading-2-weight- 600
--ox-text-heading-2-leading- 1.4
Heading 3: The quick brown fox jumps over the lazy dog
--ox-text-heading-3-size- 1.0625rem
--ox-text-heading-3-weight- 600
--ox-text-heading-3-leading- 1.4118
Heading 4: The quick brown fox jumps over the lazy dog
--ox-text-heading-4-size- 0.875rem
--ox-text-heading-4-weight- 600
--ox-text-heading-4-leading- 1.4286
Heading 5: The quick brown fox jumps over the lazy dog
--ox-text-heading-5-size- 0.75rem
--ox-text-heading-5-weight- 600
--ox-text-heading-5-leading- 1.6667
Heading 6: The quick brown fox jumps over the lazy dog
--ox-text-heading-6-size- 0.625rem
--ox-text-heading-6-weight- 600
--ox-text-heading-6-leading- 1.6
Body: The quick brown fox jumps over the lazy dog
--ox-text-body-size- 0.875rem
--ox-text-body-weight- 400
--ox-text-body-leading- 1.4286
Large: The quick brown fox jumps over the lazy dog
--ox-text-large-size- 1.0625rem
--ox-text-large-weight- 600
--ox-text-large-leading- 1.4118
Label: The quick brown fox jumps over the lazy dog
--ox-text-label-size- 0.875rem
--ox-text-label-weight- 500
--ox-text-label-leading- 1.4286
Code: The quick brown fox jumps over the lazy dog
--ox-text-code-size- 0.875rem
--ox-text-code-weight- 400
--ox-text-code-leading- 1.4286
Supporting: The quick brown fox jumps over the lazy dog
--ox-text-supporting-size- 0.75rem
--ox-text-supporting-weight- 400
--ox-text-supporting-leading- 1.6667
Display 1: The quick brown fox jumps over the lazy dog
--ox-text-display-1-size- 2.625rem
--ox-text-display-1-weight- 400
--ox-text-display-1-leading- 1.2381
Display 2: The quick brown fox jumps over the lazy dog
--ox-text-display-2-size- 2.1875rem
--ox-text-display-2-weight- 400
--ox-text-display-2-leading- 1.2571
Display 3: The quick brown fox jumps over the lazy dog
--ox-text-display-3-size- 1.8125rem
--ox-text-display-3-weight- 400
--ox-text-display-3-leading- 1.2414
Raw scale
The semantic tokens above reference these directly: a semantic size like --ox-text-heading-1-size is literally var(--ox-font-size-2xl), not a separate number.
Font size
--ox-font-size-4xs0.375rem--ox-font-size-3xs0.4375rem--ox-font-size-2xs0.5rem--ox-font-size-xs0.625rem--ox-font-size-sm0.75rem--ox-font-size-base0.875rem--ox-font-size-lg1.0625rem--ox-font-size-xl1.25rem--ox-font-size-2xl1.5rem--ox-font-size-3xl1.8125rem--ox-font-size-4xl2.1875rem--ox-font-size-5xl2.625remFont weight
--ox-font-weight-normal400--ox-font-weight-medium500--ox-font-weight-semibold600--ox-font-weight-bold700Font family
--ox-font-family-body-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif--ox-font-family-code'SF Mono', Monaco, Consolas, monospace--ox-font-family-heading-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif