Quartz

Black and white chassis with five muted kind hues and warm trouble colors, for AI support products and agent consoles.

Setup

Once, in the root layout: put the "quartz" class on <body> or the root element of the UI, with QuartzPortalProvider inside it. Quartz's styles and tokens apply only inside that class. Menus, dialogs, popovers and toasts render at the end of the body; QuartzPortalProvider keeps them inside the scope, and without it they lose every token. import {QuartzPortalProvider} from '@/lib/quartz/portal' <body className="quartz"><QuartzPortalProvider>{children}</QuartzPortalProvider></body>

Steps

1. For a whole screen, start from a block under Blocks when one fits: install it, then swap its sample data and copy for the real ones.
2. Pick the components the screen needs from the index below. Fetch each one's page before using it: it has the props, variants and that component's rules.
3. Build only from those components and the tokens under Tokens, inside an element with the "quartz" class. Import each from the path in the index; support pieces are under Imports. Dark mode: put data-theme="dark" or the class dark on the quartz element or any ancestor, such as . The theme does not follow the system setting (prefers-color-scheme) on its own.
4. Frame the screen with the Page shell. If a component is missing, build the stand-in under Coverage gaps; if none is listed, compose it from existing components and tokens and say what you built. Never invent a token.
5. Ask the person when the screen needs a credential, an environment, the object of a destructive action or an approval policy you were not given; never invent a key, an endpoint or which tools need approval. Decide layout, copy and components from these rules and say what you chose.
6. Porting an existing screen: swap one piece at a time for its component, keep the behavior and copy, and delete the old styles once nothing uses them. For a whole app, run migrate-design-system when it is installed.
7. Lint: install it once with npx shadcn@latest add https://design.how/r/quartz/lint.json, then run npx eslint -c quartz.eslint.config.mjs .. Each message names the fix.
8. Review before you finish: run the lint and fix every error, then render the screen at 390 and 1280 wide, check it against the global rules and the anti-slop list, fix the worst defect, and check again. Done when no MUST or NEVER is broken and no raw color, size or font is left. Run ui-review when it is installed.