ui: Update badges

[SuaYoo]

Changes

• Standardizes and documents badges UI.
• Adds Storybook code snippets.

Screenshots

Page	Image/video
Storybook

[emma-sg]

Nice! I do think also updating --font-monostyle-variation to use "MONO" 0 might be a nice move here — I find the monospace variants of Recursive to be a little harder to read compared to their proportional counterpoints (the big chunky serifs on i and r, for example) in this context, and I think maybe also other contexts where we use monostyle? I'd venture to say that the change from Inter to Recursive, even without Recursive's monostyle variants, is still enough of a difference to look stylistically intentional.

[emma-sg]

A few examples of using "MONO" 0:

[SuaYoo]

I'd venture to say that the change from Inter to Recursive, even without Recursive's monostyle variants, is still enough of a difference to look stylistically intentional.

Keeping the font as-is for now per Discord conversation; tweaked horizontal padding @emma-sg