Components from tokens

Buttons, cards, and badges are not designed one-by-one — they compose from logo, type, color, and radius tokens.

Buttons

Badges

EditorialCraftSystematicLive
SR

SeratRupa

Card component · radius: soft

This card uses surface background, ink/muted text, primary border tint, and logo tile — all from tokens.

Component checklist for POs & designers

  • Does every button use primary / outline / ghost variants — not ad-hoc colors?
  • Are cards built from surface + radius tokens?
  • Does the logo tile appear consistently in nav, cards, and empty states?
  • Can you swap the preset and see the whole UI re-theme?