Predefined typography compositions that bundle font size, weight, letter spacing, and line height into a single textStyle property.
#Display
display.xl
Aa Bb 01 23
font sans size 6.0rem / 60px weight 600 leading 1.1 tracking -0.04em
display.lg
Aa Bb 01 23
font sans size 4.8rem / 48px weight 600 leading 1.1 tracking -0.04em
display.md
Aa Bb 01 23
font sans size 4.0rem / 40px weight 600 leading 1.15 tracking -0.03em
display.sm
Aa Bb 01 23
font sans size 3.2rem / 32px weight 600 leading 1.15 tracking -0.03em
#Headings
heading.xl
Aa Bb 01 23
font sans size 2.8rem / 28px weight 600 leading 1.2 tracking -0.02em
heading.lg
Aa Bb 01 23
font sans size 2.4rem / 24px weight 600 leading 1.25 tracking -0.02em
heading.md
Aa Bb 01 23
font sans size 2.0rem / 20px weight 600 leading 1.3 tracking -0.01em
heading.sm
Aa Bb 01 23
font sans size 1.6rem / 16px weight 600 leading 1.4 tracking -0.01em
#Body
body.lg
Aa Bb 01 23
font sans size 1.8rem / 18px weight 400 leading 1.55 tracking 0
body.md
Aa Bb 01 23
font sans size 1.6rem / 16px weight 400 leading 1.55 tracking 0
body.sm
Aa Bb 01 23
font sans size 1.4rem / 14px weight 400 leading 1.5 tracking 0
#Labels
label.lg
Aa Bb 01 23
font sans size 1.6rem / 16px weight 500 leading 1.4 tracking 0
label.md
Aa Bb 01 23
font sans size 1.4rem / 14px weight 500 leading 1.4 tracking 0
label.sm
Aa Bb 01 23
font sans size 1.2rem / 12px weight 500 leading 1.4 tracking 0.02em
#Special
caption
Aa Bb 01 23
font sans size 1.2rem / 12px weight 400 leading 1.4 tracking 0.02em
code
Aa Bb 01 23
font mono size 1.4rem / 14px weight 400 leading 1.5 tracking 0
#Usage
import { css } from "@pindoba/styled-system/css";
<h1 className={css({ textStyle: "display.lg" })}>Hero Heading</h1>
<h2 className={css({ textStyle: "heading.xl" })}>Section Title</h2>
<p className={css({ textStyle: "body.md" })}>Paragraph text</p>
<label className={css({ textStyle: "label.md" })}>Form Label</label>
<code className={css({ textStyle: "code" })}>npm install</code>
#Responsive Text Styles
<h1
className={css({
textStyle: { base: "heading.md", md: "heading.xl", lg: "display.sm" },
})}
>
Responsive heading
</h1>
#Best Practices
- Use
textStyle instead of setting fontSize, fontWeight, and lineHeight individually
- Maintain hierarchy: display > heading > body > label > special
- Use responsive text styles for headings that need to scale across breakpoints