Badge Color Test Page

☀️ Light Mode

Color System

gray

gray filled
gray outlined
gray soft

success

success filled
success outlined
success soft

tertiary

tertiary filled
tertiary outlined
tertiary soft

brand

brand filled
brand outlined
brand soft

secondary

secondary filled
secondary outlined
secondary soft

error

error filled
error outlined
error soft

warning

warning filled
warning outlined
warning soft

gradient

gradient filled
gradient outlined
gradient soft

Affected Component Usages

PostTags.tsx — "NEW" tag
NEW
PostTags.tsx — topic tag
SOME TOPIC
Filters.tsx — expand "..." button
...
Filters.tsx — selected filter
SELECTED TOPIC
Filters.tsx — unselected filter
UNSELECTED TOPIC
TagsFilter.tsx — selected (light theme)
SELECTED TAG
TagsFilter.tsx — selected (dark theme)
SELECTED TAG
TagsFilter.tsx — unselected
UNSELECTED TAG
TagsFilter.tsx — more "..." button
✕
Scraper/Tags.tsx — selected
SELECTED
Scraper/Tags.tsx — unselected
UNSELECTED
PricingCard.tsx — discount badge
-30%
HomepageHero/transformer.tsx
HERO BADGE
HeroInfoBadgeDefault.tsx
HERO INFO BADGE
HeroInfoBadge.tsx — default variant
DEFAULT VARIANT
HeroInfoBadge.tsx — non-default variant
OTHER VARIANT
PricingRow.tsx — discount
-20%
PricingSectionExplainer.tsx
BADGE TEXT
PricingSectionMobileCard.tsx
LABEL
PricingSectionHeaderColumnBadge.tsx
MOST POPULAR
CardsWithHeaderStrapi.tsx
CARD BADGE
BannerContent.tsx — via BadgeStrapi inner
BANNER BADGE
Toggle/index.tsx — label badge
SAVE 20%

🌙 Dark Mode

Color System

gray

gray filled
gray outlined
gray soft

success

success filled
success outlined
success soft

tertiary

tertiary filled
tertiary outlined
tertiary soft

brand

brand filled
brand outlined
brand soft

secondary

secondary filled
secondary outlined
secondary soft

error

error filled
error outlined
error soft

warning

warning filled
warning outlined
warning soft

gradient

gradient filled
gradient outlined
gradient soft

Affected Component Usages

PostTags.tsx — "NEW" tag
NEW
PostTags.tsx — topic tag
SOME TOPIC
Filters.tsx — expand "..." button
...
Filters.tsx — selected filter
SELECTED TOPIC
Filters.tsx — unselected filter
UNSELECTED TOPIC
TagsFilter.tsx — selected (light theme)
SELECTED TAG
TagsFilter.tsx — selected (dark theme)
SELECTED TAG
TagsFilter.tsx — unselected
UNSELECTED TAG
TagsFilter.tsx — more "..." button
✕
Scraper/Tags.tsx — selected
SELECTED
Scraper/Tags.tsx — unselected
UNSELECTED
PricingCard.tsx — discount badge
-30%
HomepageHero/transformer.tsx
HERO BADGE
HeroInfoBadgeDefault.tsx
HERO INFO BADGE
HeroInfoBadge.tsx — default variant
DEFAULT VARIANT
HeroInfoBadge.tsx — non-default variant
OTHER VARIANT
PricingRow.tsx — discount
-20%
PricingSectionExplainer.tsx
BADGE TEXT
PricingSectionMobileCard.tsx
LABEL
PricingSectionHeaderColumnBadge.tsx
MOST POPULAR
CardsWithHeaderStrapi.tsx
CARD BADGE
BannerContent.tsx — via BadgeStrapi inner
BANNER BADGE
Toggle/index.tsx — label badge
SAVE 20%