ConnectedAttentionIn progressAI assistedDraft
Badge
Compact semantic signals for statuses, progress, and metadata. Built from semantic tokens, keyboard-friendly HTML, and reusable React composition.
12 live3 delayed24 ready
Usage guidance
Use the simplest control that communicates the task. Keep labels specific, preserve comfortable targets, and avoid presenting static information as an action.
Design language
Neutral controls sit on calm charcoal or paper surfaces. Every rounded rectangle uses a continuous G2-style squircle corner; true circles and capsules stay round. Orange is reserved for primary decisions, while coral, violet, cyan, sage, and yellow communicate category and context.