search

cfpb / design-system

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

Tags: Add initial tag styling #2026

Closed anselmbradford closed 3 weeks ago

anselmbradford commented 3 weeks 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 weeks 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 weeks 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 weeks 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.