Typography
Typography holds your brand's font families and the text size scale. AI tools read these values so generated UI uses your type, not a default.
Font families
You set three font families, matching the standard font tokens:
- Sans. Your primary interface and body typeface.
- Serif. Used where your brand calls for a serif, for example editorial or display contexts.
- Mono. Your monospace typeface for code and tabular content.
New brands start on Geist for the sans family and Geist Mono for the mono family. Replace them with your brand's typefaces.
The text size scale
Typography includes the Tailwind --text-* size scale, from xs through 9xl. Each step holds a size and a line-height, so AI tools have the full type ramp rather than a single base value.
Brand-specimen previews
Each family and size step renders a brand-specimen preview using your actual fonts and values. The preview is how you confirm a family loads correctly and how the scale reads at every step before AI tools start using it.
Already have your type defined elsewhere? You can pull families and sizes in from a source. See Importing styles.
Rules
Author General rules groups for typography to capture intent that values cannot, for example which size to use for a heading or when to reach for the serif. Each rule carries text, a Guidance marker (Do, Don't, Caution, or Info), and an Importance (Required, Recommended, or Optional).
