Tags, Pills & Labels
Small, bold, uppercase, fully rounded. Used to categorize and annotate.
Filled — strong presence, use sparingly
beginnerexerciseconcepttipwarningbonusexamplepractice
Outline — lighter, for metadata and secondary info
beginnerexerciseconcepttipbonus
Semantic mapping — which tag for which purpose
topicPython concept being taught
try itInteractive exercise
noteImportant caveat or tip
advancedBeyond beginner scope
Spec:
padding: 0.25rem 0.75rem · border-radius: 9999px · font-size: 0.75rem · font-weight: 700 · letter-spacing: 0.05em · text-transform: uppercase