Andrew's Digital Garden

Design System overlay

These can be an interesting way of getting a subjective feel about how rendered pages use your [[designsystem]].

Often this is done through simple CSS and classes, but targeting your design system namespace and giving it obvious styling, you can identify what components on the page are design system components.

The devil is in the details, however. Your classes may apply to more than classes, which requires nuance in your selectors.

Additionally you can potentially track tokens if you're using CSS variables. Change these to a custom non-brand colour, and you can identify what is using [[designtokens]]. [[20221201032649-css-variables-theming]],

[[20220509012517-design-system-adoption]] [[20230922030029-design-system-metrics]]

Design System overlay