Crafts

Component study

Pastel status badges

Eight status badges with different labels, icons, and colors.

Ready Blocked In review At risk Scheduled Needs input Experiment Archived

Why they work

  • OKLCH keeps perceived brightness consistent across hues.
  • 6.99–9.07:1 text contrast across light and dark modes.
  • 12px icons in 20px pills: a 3:5 icon-to-height ratio.
  • Icon and label keep every status understandable without color.