Typography

Stratum’s type tokens cover font sizes, weights, line heights, and letter spacings. Every Text and Heading component derives from these — no raw values appear in component code.

Import

import { fontSizes, fontWeights, lineHeights, letterSpacings } from '@/tokens';

Font sizes

Token	Value	Default use
`fontSizes.xs`	11px	Captions, timestamps, fine print
`fontSizes.sm`	13px	Labels, secondary text
`fontSizes.md`	15px	Body copy (base size)
`fontSizes.lg`	17px	Heading 4, emphasized body
`fontSizes.xl`	20px	Heading 3
`fontSizes['2xl']`	24px	Heading 2
`fontSizes['3xl']`	30px	Heading 1

Font weights

Token	Value	Use
`fontWeights.regular`	`'400'`	Body text
`fontWeights.medium`	`'500'`	Labels, captions
`fontWeights.semibold`	`'600'`	Form labels (above), headings 3–4
`fontWeights.bold`	`'700'`	Headings 1–2

Note: React Native expects weight as a string literal (e.g. '600'), not a number. These tokens are already typed as strings.

Line heights

Line heights are multipliers — multiply by the font size to get the actual height.

Token	Multiplier	Use
`lineHeights.tight`	1.2	Headings
`lineHeights.normal`	1.4	Most body text
`lineHeights.relaxed`	1.6	Long-form reading copy, captions

const styles = StyleSheet.create({
  body: {
    fontSize: fontSizes.md,
    lineHeight: fontSizes.md * lineHeights.relaxed, // 15 × 1.6 = 24
  },
});

Letter spacings

Token	Value	Use
`letterSpacings.tight`	-0.3	Tight large headings
`letterSpacings.normal`	0	Default
`letterSpacings.wide`	0.3	Labels, badges
`letterSpacings.wider`	0.6	Uppercase section titles
`letterSpacings.widest`	1.2	Allcaps labels

Font family

Font family is set per theme, not as a global token. Each theme implements:

theme.typography.fontFamily.heading  // heading typeface
theme.typography.fontFamily.body     // body typeface
theme.typography.fontFamily.mono     // monospace typeface

The value 'System' uses the platform default (San Francisco on iOS, Roboto on Android). Custom themes can supply brand typefaces.

Usage in custom components

Use Text and Heading atoms for all text — they apply these tokens automatically. Only reach for raw token values when styling non-component text (e.g. inside a third-party library):

import { fontSizes, fontWeights } from '@/tokens';

// In a StyleSheet for custom components:
label: {
  fontSize: fontSizes.sm,
  fontWeight: fontWeights.medium,
},