Primitives
Callout
The 3px left rule. The tone paints only the rule. The body never takes the tone's colour — the rule is the signal, the text is the content.
The problem
Seventy-three per cent of athletes who give feedback are never contacted again.
Internal survey, 2026
The source slot is not decoration. A number in a callout without a source is a number someone made up.
Registers
Comfortable · no padding, in the reading column
Organisers who reply within a week keep 2.4× more athletes.
Default · padded, muted fill, 14px
14 debriefs are waiting on your reply.
action · defaultneutralexcellentfairpoorsuccessdestructiveCallout is static. For a message the user can dismiss, use Toast. The rule is drawn with the rule-l utility, never border-l-[3px] — 3px is off the 4px scale and part of the identity, so it gets a name.
Sporting Scouter Design System
Every token on this site is generated from
theme.css.