<span style="display:inline-flex;align-items:baseline;border-radius:999px;background:#efedf7;color:#672c72;font-family:'Satoshi',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;padding:4px 12px;white-space:nowrap;">
<span style="font-size:0.875rem;">3</span><span style="font-size:0.625rem;font-weight:500;opacity:0.7;margin-left:1px;">/10</span>
</span>
<span style="display:inline-flex;align-items:baseline;border-radius:999px;background:#efedf7;color:#672c72;font-family:'Satoshi',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;padding:4px 12px;white-space:nowrap;">
<span style="font-size:0.875rem;">{{score}}</span><span style="font-size:0.625rem;font-weight:500;opacity:0.7;margin-left:1px;">/{{max}}</span>
</span>
{
"score": 3,
"max": 10
}
Rounded-full pill showing a numeric score out of a fixed maximum (e.g. title score, fit score). Component tint background (#efedf7), primary text (#672c72), weight 700, tabular figures so a list of scores does not jiggle when digit widths change. The /10 denominator renders smaller and lighter than the score itself.
Signed off 2026-07-23 as part of the pattern language (docs/styling-review-2026-07/decision-doc.md).