Docs draft
RatingMark
Component storyFigma (RatingMark) ↗React component ↗DSDS entity ↗
When to use it
useRegional age-rating marks on posters, thumbnails, hero meta, and the player — dropped into Label slots.
avoidNon-regulatory labels (Premium, Live, New) — those are Tags.
tag Tag.Variants
system · universal / brazil / nz — Universal = one neutral italic chip whose text is data; Brazil (ClassInd) and NZ (OFLC) keep per-rating variants because their colors and shapes are fixed by regulation.
rating · all / l / 10 / 12 / 14 / 16 / 18 / g / pg / m / 13 — Rating values per system.
Design specifications
| size | ONE size (24) — instances scale, per the icon-size ruling |
| brazil-colors | REGULATORY raw values (L green, 10 blue, 12 yellow, 14 orange, 16 red, 18 black) — never theme tokens |
| official-marks | A-prefix (A16) via the Label prop, same chip |
Accessibility
role=img named 'Rated {value}'. Colors are never the only signal — every mark carries its text.