Caption

Small, quiet metadata: timestamps, counts, and hints that support what’s around them.

Q3 planning notes

Edited 2 minutes ago · 3 comments

Lowercase letters, numbers, and dashes.

Fig. 1 Captions under a title and a field. Each one adds context; none carries the message.

One role, always muted

caption is 12px regular, and it almost always pairs with muted-foreground. That keeps metadata readable but a step behind the content it describes.

Updated a moment agocaption12 / 1.5 · 400
Fig. 2 The caption role, measured.

Support, don’t carry

If someone has to read it to avoid a mistake, it isn’t a caption. Errors, warnings, and anything that changes what people do next need body text and the matching role color.

Do

The error uses body-sm in the destructive role, where it can’t be missed.

Don’t

This card was declined.

A muted caption makes the most important message on screen the easiest to skip.

Fig. 3 The same failure, reported two ways.

Build it

Set the role with muted-foreground:

type-roles.tsx