Component

Score

A score visualization from 0–100 (application card, analysis). Bands: low / medium / high. Variants: halfDonut (semi-donut) and circle, with a bold 12px stroke and a default size of 120px. For the circle, the number is always centered.

Pattern: Match score badge

86 / 100

Potential score: 95 %

Hard skills80 / 100
Experience100 / 100
Soft skills75 / 100

Variants

Half-donut (default)

25 (low)
50 (medium)
75 (high)
90 + label next to it

Circle (number in the center)

40
70
86, size=140

Specification

  • Colors: ds-score-low, ds-score-medium, ds-score-high
  • Bands: 0–33 low, 34–66 medium, 67–100 high
  • Size: default 120px, 12px stroke (bold)
  • Circle: number always centered (text-5xl font-bold)
  • Props: value (0–100), variant (halfDonut | circle), size?, showValue (only halfDonut)