Style Cheatsheet

Elements

Typography

This is a paragraph.

Labels

default labeldefault labeldefault labeldefault labeldefault labeldefault labeldefault label

KBD

Enter

Components

Chip

UserX

Badge Icons

Contributor badge icons use the local ContributorBadgeIcon widget instead of Font Awesome. Use it when a compact, self-contained achievement mark is needed on contributor-facing UI.

<ContributorBadgeIcon icon="search" />
<ContributorBadgeIcon icon="box" label="25+" />
<ContributorBadgeIcon icon="trophy" label="10" />
<ContributorBadgeIcon icon="year-search" label="2026" />

Badge icon rules:

• Render at 70x70 with the component's fixed SVG viewbox.
• Keep each icon self-descriptive without relying on nearby text.
• Use the same icon for related states and separate them by tone when possible.
• Put tier text in the label prop, for example 25+.
• For trophy rank badges, use only the rank number in the icon label, for example 10; keep the full Top 10 wording in the tooltip or nearby text.
• For year badges, feature the four-digit year as the label and keep the role icon small. Use year-search for Package Hunter years and year-box for Package Owner years.
• Use search, box, trophy, spark, coin, year-search, and year-box before adding a new icon.
• Add new icons inside ContributorBadgeIcon.vue so they remain reusable.
• Set tone through currentColor; do not use remote images or generated assets.

Current badge tones:

• hunter: #2f7d78
• owner: #816a2d
• history: #8a5b3d
• support: #b24b68
• muted: #7a7f87

Quotes