Menu


Check your site


The conformance checker lists every value written by hand and every component rebuilt by hand.

What the system doesn't have, your site builds itself from the design tokens and the system's components, with a class prefix of its own: site- on this page. A block from the Blocks pages is a head start: copy its code and its stylesheet, and rename site- to your prefix.

Run the checker


The conformance checker reads your site and lists every color, size or font written by hand where a design token belongs, and every component the site rebuilds by hand. Run it from your site's folder:

Terminal, in your site
npm install --save-dev tsx typescript
npx tsx design-system/conformance/cli.ts . --prefix site-

Settings and exceptions


You can set the prefix once in your package.json instead, as simbolik.prefix. A plain HTML site lists Phosphor's classes there too, ph and ph-* under simbolik.allowClasses, or the checker counts its icons as strays. --json gives a report a script can read. A finding you can't fix is explained in conformance-exceptions.json, never switched off, and every run still prints it.