Typography
SourceText is the one primitive for every text node. Pick a variant for the role, a color for the tone, and an element with as when the outline needs it.
Variants
Each role sets family, size, weight, leading, and tracking together. Sizes are keyed by px; two roles grow at the md breakpoint.
displaydisplay clamp(2rem, 8vw, 6rem) 600 h1
The quick brown foxheading-ldisplay 30px, 36px from md 700 h1
The quick brown foxpage-titledisplay 26px 600 h1
The quick brown foxvaluedisplay 48px, 60px from md 600 p
The quick brown foxheading-ssans 14px 600 h2
The quick brown foxheading-xssans 15px 600 h3
The quick brown foxleadsans 21px 400 p
The quick brown foxbody-lsans 16px 400 p
The quick brown foxbodysans 14px 400 p
The quick brown foxsmallsans 13px 400 p
The quick brown foxlabelsans 12px 700 span
The quick brown foxcaptionsans 11px 400 span
The quick brown foxMonospace and tabular figures
monospace swaps the family and keeps the size. tabularNums lines figures up in a column. Both are booleans on any variant.
6,413
6413128,000.5
128000.542
42<Text variant="value" monospace tabularNums formatter="number">
{6413}
</Text>Colors
Tone, by name. inverse is for copy on a foreground surface; inherit takes the color of the parent Box.
default
The quick brown fox jumps over the lazy dogmuted
The quick brown fox jumps over the lazy dogprimary
The quick brown fox jumps over the lazy dogaccent
The quick brown fox jumps over the lazy dogsuccess
The quick brown fox jumps over the lazy dogwarning
The quick brown fox jumps over the lazy dogdanger
The quick brown fox jumps over the lazy doginverse
The quick brown fox jumps over the lazy dog