Design System Diagnosis

## Design system rules

<!-- Generated by roast-my-design-system from a scan of excalidraw/excalidraw on 2026-08-22.
     Paste into CLAUDE.md, .cursor/rules or AGENTS.md. Regenerate after big refactors:
     npx roast-my-design-system --rules -->

Follow these rules when writing or editing UI in this repo. Every rule below was derived from a scan of this codebase, with real paths and usage counts.

### Colours and tokens

- Design tokens live in `packages/excalidraw/css/theme.scss`. Reach for an existing token before inventing any value.
- Never hardcode colour values in components. The palette already has 164 tokens; the scan still found 44 hardcoded colours sitting next to them. Do not add more.
- Never eyeball a colour from memory: the scan found 42 nearly identical pairs (like #121212 next to #111111). Look the exact value up, or better, use its token.

### Canonical components

- Use these existing components instead of writing new ones, the way this repo already uses them:
  - `<IconButton>` from `packages/excalidraw/components/IconButton.tsx` (used 44x · props: size, visible, IconButtonProps)
  - `<FilledButton>` from `packages/excalidraw/components/FilledButton.tsx` (used 14x · props: icon, onClick, label, variant)
  - `<Trans>` from `packages/excalidraw/components/Trans.tsx` (used 14x · props: i18nKey)
  - `<Dialog>` from `packages/excalidraw/components/Dialog.tsx` (used 13x)
    - most common usage, as in `packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.tsx` (matching 5 of 11 usages): `<Dialog onCloseRequest={handleClose} title={false} size={916}>…</Dialog>`
  - `<Island>` from `packages/excalidraw/components/Island.tsx` (used 13x · props: padding, style, viewportUI, viewportUIName)
  - `<DropdownMenuItem>` from `packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx` (used 11x · props: icon, badge, value, shortcut)
  - `<Spinner>` from `packages/excalidraw/components/Spinner.tsx` (used 11x · props: size, circleWidth, synchronized)
    - most common usage, as in `excalidraw-app/share/QRCode.tsx` (matching 8 of 11 usages): `<Spinner />`
  - `<Tooltip>` from `packages/excalidraw/components/Tooltip.tsx` (used 10x · props: label, long, style, disabled)
    - most common usage, as in `packages/excalidraw/components/ImageExportDialog.tsx` (matching 4 of 9 usages): `<Tooltip label={tooltip} long={true}>…</Tooltip>`

### Known duplicates: do not make it worse

- `<CommandPalette>` is defined twice and one wraps the other; do not create a third.
- `<LiveCollaborationTrigger>` is defined twice and one wraps the other; do not create a third.
- `<SearchMenu>` is defined twice and one wraps the other; do not create a third.

### Spacing and sizing

- Stay on the Tailwind spacing scale. If a gap looks wrong on a scale step, flag it instead of nudging by a pixel.
- Avoid new one-off CSS spacing values; 84 off-scale values are already in play.

### Typography

- The repo uses 3 typefaces: Assistant, Cascadia, Excalifont. Do not introduce another, and do not re-declare font stacks by hand; use the existing setup.

### Styling discipline

- Never write `style={{ ... }}` for static values; styling belongs to classes and tokens where the system can see it.
  (83 static inline blocks already exist; do not add to them.)
- Never write !important; the scan found 90 declarations already. When a style does not apply, fix the selector or the source of the conflict instead of shouting over it.
- Before styling anything new, look at a neighbouring component and match how it does it. Consistency with the repo beats personal preference.

---
*Generated by [roast-my-design-system](https://github.com/gregkozakiewicz/roast-my-design-system) ver. 5.2.1. Rescan after refactors to keep these rules honest.*