Typography
Tailwind's default type scale is the source of truth. MiHCM typography names such as body-sm, title, and stat are semantic aliases over Tailwind steps, so components stay readable without adding a separate product scale.
Public websites and campaign pages have a separate marketing-only typography guide for Albert Sans headings and Barlow body copy: Marketing typography. Those fonts do not change the core product typography tokens.
MiHCM semantic aliases
Each alias maps to a default Tailwind utility and exposes the matching CSS variable pair via --text-*--line-height. Use the Text primitive with size="body-sm" etc. when semantic intent is clearer, or use Tailwind utilities directly.
Standard Tailwind scale
Use these utilities directly in consumer app layouts and marketing pages. Body text defaults to base (16px) so browser zoom behaves predictably.
Weights
Four weights — enough for hierarchy without font-file bloat. Components use the Text primitive's weight prop; never inline fontWeight.
Line heights
| Token | Value | Use |
|---|---|---|
tight | 1.2 | Display headings, stat numbers |
snug | 1.3 | Section headings, title bars |
normal | 1.5 | Body text, descriptions |
relaxed | 1.625 | Long-form prose, documentation |
loose | 2 | Captions, finely-spaced lists |
Usage
/* Text primitive (preferred for DS components) */
<Text size="body-sm" weight="semibold">Label</Text>
<Text size="stat" weight="bold">13,283</Text>
<Text size="caption" tone="muted">Badge text</Text>
/* Tailwind utilities */
<p className="text-body-sm font-semibold">Label</p>
<p className="text-stat font-bold">13,283</p>
/* CSS variable */
.custom { font-size: var(--text-body-sm); }
/* TypeScript (React Native) */
import { fontSize, fontWeight } from '@mihcm/tokens';
const size = fontSize['body-sm']; // 14, same as Tailwind text-sm
const weight = fontWeight.bold; // '700'