Typography

Every text style in your tokens becomes one class that sets font family, size, weight, line height, letter spacing and text transform together. With the default tokens these are the headings text-h1 to text-h6, the content styles text-lead, text-body, text-small and text-label, and the component styles text-form-* and text-cookie-consent-*. Three color classes color text from the active theme.

Quick referenceLink to this section

Each font family in the font collection also becomes a font-<name> class:

Basic usageLink to this section

Add a text style class and a color class to an element. The heading styles pair with color-heading, the content styles with color-body, and text-label with color-label. Switch the preview between device widths: the sizes step up at md and lg.

const ramp = [
  ['text-h1', 'color-heading'],
  ['text-h2', 'color-heading'],
  ['text-h3', 'color-heading'],
  ['text-h4', 'color-heading'],
  ['text-h5', 'color-heading'],
  ['text-h6', 'color-heading'],
  ['text-lead', 'color-body'],
  ['text-body', 'color-body'],
  ['text-small', 'color-body'],
  ['text-label', 'color-label'],
]

export default function Demo() {
  return (
    <div className="flex w-full flex-col gap-4">
      {ramp.map(([style, color]) => (
        <div key={style} className="flex items-baseline gap-4">
          <span className="color-label w-20 shrink-0 font-mono text-xs">{style}</span>
          <div className={`${style} ${color} truncate`}>Systhema type ramp</div>
        </div>
      ))}
    </div>
  )
}

The Heading and Paragraph components apply the right pair for you: <Heading.h2> renders text-h2 color-heading, and <Paragraph type="lead"> renders text-lead color-body. Write the classes yourself when the element is not a heading or paragraph, or when the visual style should differ from the tag:

export default function Demo() {
  return (
    <div className="flex max-w-[480px] flex-col gap-2">
      <span className="text-label color-label">Case study</span>
      <h2 className="text-h4 color-heading">Rebuilding a catalogue in four weeks</h2>
      <div className="text-body color-body">
        The document outline keeps its h2, the visual weight comes from the text-h4 style.
      </div>
    </div>
  )
}

text-label also sets text-transform: uppercase and a letter spacing from the tokens. The text-form-* styles are used by the form components and the text-cookie-consent-* styles by the cookie consent banner.

Text colorsLink to this section

color-heading, color-body and color-label read the typography roles of the color system, so they follow the theme of the nearest data-theme ancestor:

export default function Demo() {
  return (
    <div className="grid w-full grid-cols-2 gap-4">
      {['default', 'dark'].map((theme) => (
        <div key={theme} data-theme={theme} className="bg-layout-main flex flex-col gap-2 rounded-lg border border-(--color-foundations-surface-border) p-6">
          <span className="text-label color-label">{theme}</span>
          <span className="text-h5 color-heading">Heading color</span>
          <span className="text-body color-body">Body color for running text.</span>
        </div>
      ))}
    </div>
  )
}

With the default tokens all three roles are black in the default mode and white in dark; a brand palette usually gives them distinct values. See Themes and backgrounds.

Font familiesLink to this section

font-geist (one class per token font family) sets only the font family, for text that should use a token font without the rest of a text style. The font files themselves are loaded by your project; see Fonts.

Responsive and state variantsLink to this section

Font size, line height and letter spacing are responsiveSizing tokens, so a text style changes per breakpoint without a prefix. With the default tokens text-h1 is 33px on sm, 43px on md and 54px on lg; the full table is in Typography tokens.

To switch to a different style at a breakpoint, prefix the class: text-h3 lg:text-h1 keeps a heading at the h3 size until lg. State variants such as hover:color-heading work as well.

The text style classes sit in Systhema's utilities.systhema sub-layer, so a Tailwind utility on the same element overrides one property and keeps the rest: text-h2 font-normal is an h2 at regular weight. See Cascade layers.

CustomizingLink to this section

A text style combines tokens from three collections: the family and weight from font, the size, line height and letter spacing from responsiveSizing (typography.*), and the composite itself from the text styles. text-h1 reads --font-h1-font-family, --font-h1-font-weight, --typography-h1-font-size, --typography-h1-line-height and --typography-h1-letter-spacing. Change a value in Figma, or override the token in systhema.config:

const config: SysthemaConfig = {
  customTokens: {
    font: { h1: { fontFamily: 'Fraunces, Georgia, serif' } },
    responsiveSizing: {
      lg: { typography: { h1: { fontSize: '64px', lineHeight: '68px' } } },
    },
  },
}

customTokens.textStyles overrides a composite or adds a new one, which becomes a class named after its key ('Display Hero' becomes text-display-hero). See Text styles and Fonts. blocks.typography: false removes the text style and color classes.

RelatedLink to this section

• Typography tokens
• Auto line height
• Heading
• Paragraph