impress/app/assets/stylesheets/application/item-badges.css

/*
 * Shared item badge styles for NC/NP/PB badges
 * Used across item pages, wardrobe, search results, etc.
 *
 * These colors are from DTI 2020, based on Chakra UI's color palette.
 */

.item-badge {
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  text-decoration: none;
  font-size: .75rem;
  font-weight: bold;
  line-height: 1;

  background: #E2E8F0;
  color: #1A202C;

  &[data-item-kind="nc"] {
    background: #E9D8FD;
    color: #44337A;
  }

  &[data-item-kind="pb"] {
    background: #FEEBC8;
    color: #7B341E;
  }

  &[data-item-kind="own"] {
    background: #C6F6D5;
    color: #22543D;
  }

  &[data-item-kind="want"] {
    background: #BEE3F8;
    color: #2C5282;
  }

  .icon {
    vertical-align: middle;
  }
}