The patterns tab in the devtools extension is a not very polished overview of the patterns in your pattern library and the current page. It is only available when a pattern library is active.
- Breakpoints lists the breakpoints that the current pattern library was configured to use and highlights the current breakpoint (which depends on the viewport width).
- Media and feature queries compares the media queries and feature queries used by the pattern library with those used in the current page.
- Colors compares the pattern library's color palette with the colors that are used in the current page at the current breakpoint.
- Typography sets lists the valid typography property combinations according to the pattern library's configuration for the current breakpoint.
- Components lists all components defined in the pattern library and counts the number of component instances in the current test result.
- Utilities lists all utilities defined in the pattern library and shows the utility's styles.