Context: Filed during the first pass of `/interface-design:audit` against `.interface-design/system.md` (commits a9b4dc8 → 9032eab). The high-value mechanical wins and the one clear semantic violation have shipped. This issue tracks everything that's still drifting from the system but isn't worth its own dedicated PR.
Use: when touching code in any of the surfaces below, opportunistically migrate the violations near your edit. No big-bang sweep planned — the system is the reference, this is the punch list.
Open buckets
1. Off-scale spacing (~78 instances)
Padding values not in the canonical `{4, 8, 12, 16, 20, 24}` and not in the grandfathered `{6, 10, 14}`:
- `padding: 2px` × ~31 (often where `border: 1px` was wanted)
- `padding: 3px` × ~9
- `padding: 5px` × ~7
- `padding: 7px` × ~7
- `padding: 22px` × 1
- `padding: 26px` × 1
- `margin`/`gap` siblings: `2px` × 19, `3px` × 1, `5px` × 2
Rule of thumb when migrating: snap up to the next canonical size unless visual review proves otherwise. Layout primitives (sidebar widths, header heights, hero pads of `28/32/40/48/60/64/80`) are out of scope and stay as-is.
2. `rem` font-sizes in a px system (~28 instances)
The system commits to px for type. The connector / onboarding / setup section was authored against rem. Examples found:
`0.65rem`, `0.6875rem`, `0.7rem`, `0.75rem`, `0.8125rem`, `0.82rem`, `0.85rem`, `0.875rem`, `0.9375rem`, `1rem`, `1.05rem`, `1.25rem`, `1.5rem`.
Migration map (assuming 16px root): snap to nearest canonical px:
- `0.65rem` (~10.4) → 10px
- `0.6875rem` (11) → 11px
- `0.7rem` (~11.2) → 11px
- `0.75rem` (12) → 12px
- `0.8125rem` (13) → 13px
- `0.82rem` (~13.1) → 13px
- `0.85rem` (~13.6) → 14px
- `0.875rem` (14) → 14px
- `0.9375rem` (15) → 15px (allowed)
- `1rem` (16) → 16px
- `1.05rem` (~16.8) → 16px or 18px depending on hierarchy
- `1.25rem` (20) → 20px
- `1.5rem` (24) → 24px
Do this in a focused pass on each section — don't blast across the file.
3. Off-token border-radius (5 one-offs + 1 micro)
- `style.css:5635` — `border-radius: 16px` (likely tour-tooltip; review)
- `style.css:5656` — `border-radius: 20px`
- `style.css:5731` — `border-radius: 12px` on `.tour-tooltip` (also has a `box-shadow`, intentional)
- `style.css:6681` — `border-radius: 5px`
- `style.css:331` — `border-radius: 1px` (likely typo or border-emulation)
These are small enough to touch as you find them. If multiple converge on the same value, propose a token in a follow-up.
4. Undefined-token fallbacks (load-bearing hex literals)
Four CSS variables are referenced with hex fallbacks but never defined in `:root`:
- `var(--text-dimmer, #9ca1af)` — lines 1273, 1284
- `var(--success, #3fb68b)` — line 4194 (`.setup-status.success`)
- `var(--danger, #e5484d)` — line 4195 (`.setup-status.error`)
- `var(--color-stale, #c77)` — line 2809
The fallbacks are load-bearing (the variables are undefined), so the visible color is the hex. Do not strip these blindly — replacing with existing tokens like `--text-faint`/`--green`/`--red` will shift colors visibly. Decision needed: define the missing tokens in `:root` (preserves visual) or replace with existing tokens (changes visual).
5. Citation-state badge palette (B1.b)
Five state badges at `style.css:6252-6256` use Tailwind 100/800 pairs (valid / drifted / broken / orphaned / unverified). Hardcoded hex; doesn't switch in light mode.
Path A: define a `--state-{name}-{bg,text}` token cluster with proper light-mode pairs, migrate the five rules.
Path B: document as a deliberate exception in `system.md` — the badges read at-a-glance because of the Tailwind palette, not despite it.
Recommend Path A when you next touch the citations surface.
6. Hover-color audit (manual)
The state-color rule says: utility hover is neutral; only semantic actions (accept/reject/save/delete/pin/dismiss) may use color on hover. `/interface-design:audit` cannot mechanically verify this. Worth a single visual sweep of every `:hover` in the file at some point.
7. Font-size outliers
- `26px` × 1 — likely a heading; should probably be 24 or 28
- `48px` × 1 — likely a hero; document or accept
Out of scope
- Marketing site / features page (lighter system, separate document)
- Browser extension popup (distinct surface)
- iOS app (native HIG)
Done so far
- `a9b4dc8` — system.md baseline
- `3a15c72` — 25 radius-literal → token migrations
- `10a801c` — dead var() fallbacks dropped + #fff/#000 whitelisted
- `9b45559` — --radius-xs / --radius-md / --red-hover tokens added; literal 6/2px and #b84e44 migrated; half-px font-sizes snapped
- `9032eab` — pinned-space button repainted to accent semantic
Context: Filed during the first pass of `/interface-design:audit` against `.interface-design/system.md` (commits a9b4dc8 → 9032eab). The high-value mechanical wins and the one clear semantic violation have shipped. This issue tracks everything that's still drifting from the system but isn't worth its own dedicated PR.
Use: when touching code in any of the surfaces below, opportunistically migrate the violations near your edit. No big-bang sweep planned — the system is the reference, this is the punch list.
Open buckets
1. Off-scale spacing (~78 instances)
Padding values not in the canonical `{4, 8, 12, 16, 20, 24}` and not in the grandfathered `{6, 10, 14}`:
Rule of thumb when migrating: snap up to the next canonical size unless visual review proves otherwise. Layout primitives (sidebar widths, header heights, hero pads of `28/32/40/48/60/64/80`) are out of scope and stay as-is.
2. `rem` font-sizes in a px system (~28 instances)
The system commits to px for type. The connector / onboarding / setup section was authored against rem. Examples found:
`0.65rem`, `0.6875rem`, `0.7rem`, `0.75rem`, `0.8125rem`, `0.82rem`, `0.85rem`, `0.875rem`, `0.9375rem`, `1rem`, `1.05rem`, `1.25rem`, `1.5rem`.
Migration map (assuming 16px root): snap to nearest canonical px:
Do this in a focused pass on each section — don't blast across the file.
3. Off-token border-radius (5 one-offs + 1 micro)
These are small enough to touch as you find them. If multiple converge on the same value, propose a token in a follow-up.
4. Undefined-token fallbacks (load-bearing hex literals)
Four CSS variables are referenced with hex fallbacks but never defined in `:root`:
The fallbacks are load-bearing (the variables are undefined), so the visible color is the hex. Do not strip these blindly — replacing with existing tokens like `--text-faint`/`--green`/`--red` will shift colors visibly. Decision needed: define the missing tokens in `:root` (preserves visual) or replace with existing tokens (changes visual).
5. Citation-state badge palette (B1.b)
Five state badges at `style.css:6252-6256` use Tailwind 100/800 pairs (valid / drifted / broken / orphaned / unverified). Hardcoded hex; doesn't switch in light mode.
Path A: define a `--state-{name}-{bg,text}` token cluster with proper light-mode pairs, migrate the five rules.
Path B: document as a deliberate exception in `system.md` — the badges read at-a-glance because of the Tailwind palette, not despite it.
Recommend Path A when you next touch the citations surface.
6. Hover-color audit (manual)
The state-color rule says: utility hover is neutral; only semantic actions (accept/reject/save/delete/pin/dismiss) may use color on hover. `/interface-design:audit` cannot mechanically verify this. Worth a single visual sweep of every `:hover` in the file at some point.
7. Font-size outliers
Out of scope
Done so far