Predefined typography compositions for consistent text rendering across all components and frameworks.
Predefined typography compositions that bundle font size, weight, letter spacing, and line height into a single textStyle property.
One scale for every title. The large steps are expressive (tight tracking + leading) and fluid — heading.lg, heading.xl, and heading.2xl use a clamp() generated from the type scale, so they scale between 360px and 1280px viewports. The small steps (heading.xs–heading.3xs) are compact semibold headers for cards, banners, and dense components.
Big tabular figures for currency, counts, percentages, and KPIs. font-variant-numeric: tabular-nums keeps digits aligned and stops them jittering as values update.
Per-size typography for interactive labels (buttons, inputs, badges). These mirror the sizing pattern’s font scale and carry no weight of their own — each control keeps its own.
import { css } from "@pindoba/styled-system/css";
<h1 className={css({ textStyle: "heading.2xl" })}>Hero Heading</h1>
<h2 className={css({ textStyle: "heading.md" })}>Section Title</h2>
<p className={css({ textStyle: "body.md" })}>Paragraph text</p>
<strong className={css({ textStyle: "numeric.lg" })}>R$ 12,840.55</strong>
<label className={css({ textStyle: "label.md" })}>Form Label</label>
<code className={css({ textStyle: "code" })}>npm install</code>heading.lg, heading.xl, and heading.2xl are already fluid (clamp()), so they scale automatically. For discrete per-breakpoint steps you can also vary the token at the usage site:
<h1
className={css({
textStyle: { base: "heading.md", md: "heading.lg", lg: "heading.2xl" },
})}
>
Responsive heading
</h1>textStyle instead of setting fontSize, fontWeight, and lineHeight individuallynumeric.* for any prominent figure (currency, stats, counts) so digits stay tabular