search

cfpb / design-system

CFPB's work-in-progress design system
https://cfpb.github.io/design-system
Creative Commons Zero v1.0 Universal
42 stars 13 forks source link

Tags: Add initial tag styling #2026

Closed anselmbradford closed 3 months ago

anselmbradford commented 3 months ago

Additions

Testing

  1. Check the tags page at https://deploy-preview-2026--cfpb-design-system.netlify.app/design-system/components/tags
netlify[bot] commented 3 months ago

Thanks for the improvements! Browse a preview of your changes using the link below.

Name Link
Latest commit cad141f577a923d7ad368d3594f21ae18a7bf5e1
Latest deploy log https://app.netlify.com/sites/cfpb-design-system/deploys/66c7506c202d660008209b8e
Deploy Preview https://deploy-preview-2026--cfpb-design-system.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

anselmbradford commented 3 months ago

One small edit: In looking at filter tags on the blog and Selects page, it looks like the text should be regular vs. medium weight.

@jenn-franklin So in TDP and prepaid it is medium (also CCDB, but that's its own beast)

https://www.consumerfinance.gov/consumer-tools/educator-tools/youth-financial-education/teach/activities/?grade_level=3 https://www.consumerfinance.gov/data-research/prepaid-accounts/search-agreements/?prepaid_type=GPR+%28General+Purpose+Reloadable%29

Do we want all cases to be regular or medium? Or do we want two versions (which I'd discourage).

jenn-franklin commented 3 months ago

Omg 😩

I agree with you regarding discouraging two versions. I think we should go with regular weight since this is currently our standard in places like the blog, DS Selects page, and Figma file.

I did contemplate if medium might look better and the fact that medium would be more in line with the button's styling. But we want to ensure tags aren't confused with buttons, so I think regular weight is actually better in that regard. And since regular weight is accessible on this teal background, we're good from a contrast perspective.