Portal Community

Badge Visual Design

LevelIconColorLabel
Official Green (#34d399) Official
Certified Blue (#60a5fa) Certified
Community Grey (#94a3b8) Community

Where Badges Appear

LocationBadge FormatNotes
Package cards (search results)Icon + label in top-left corner of cardMost frequently seen by users during browsing
Package detail page headerIcon + label beside package name + large badge in header card top-rightDisplayed twice for emphasis
Package detail breadcrumbIcon + label in the page breadcrumb trailVisible before scrolling to the header
Publisher profile — package gridIcon + label on each package card in the gridAllows users to see certification spread across a publisher's portfolio
Publisher info card (on package detail)Cert count badge: "2 Certified packages"Summary of publisher's certification status
LeaderboardCert count badge next to publisher nameVisible when comparing publishers on the leaderboard

Badge Tooltip

Hovering over or tapping any certification badge triggers a tooltip that explains what the badge means — designed for users unfamiliar with the certification system: