Text #

The aFP Design System provides utility classes to style text consistently across your UI. These utilities cover body text, headings, captions, and links, and use the typography tokens defined in the design tokens documentation. They ensure uniform font sizes, line heights, weights, and colors for a cohesive visual hierarchy.

Body #

Body text classes are intended for general content, paragraphs, and smaller blocks of text. They use the body font family, normal weight, and standard line-height. For token reference, see font sizes.

Headings #

Heading classes define visual hierarchy for titles and headings. They use the body font family with bold weight and condensed line-height. For token reference, see font sizes.

Captions #

Caption classes are used for secondary or supporting text such as labels, hints, or small notes. They use a quieter text color and condensed line-height. For token reference, see font sizes.

Links #

Link classes provide consistent styles for hyperlinks. afp-link is the default style with standard underline and hover color, while afp-link-plain removes the underline for a cleaner look. For token reference, see links.