feat(design-system): catalog synced to claude.ai/design + /cron & /shells redesigns#84
Merged
Conversation
Design system that mirrors real code (extracted tokens.css single source) and syncs an in-repo catalog to claude.ai/design via DesignSync. Approach B: generated foundation cards + hand-authored previews for the 13 ui/ primitives + a mapping.json round-trip contract. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- exact token line ranges (12-211/264-403/406-539) + keep @theme & import order - git strategy: commit authored sources, gitignore derived (tokens copy/foundations) - generator: zero-dep state-machine parser; skip --plugin-*, alias --data-*; 8 spacing - per-primitive notes: bits-ui DOM hardcoding, TierBadge hardcoded hex, KarmaIcon SVG - build hygiene: .prettierignore catalog (marker on line 1), .gitignore, eslint - known dark-block token inconsistencies tracked as future cleanup Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…cable) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…scripts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…cator, text-input, select, empty-state, tier-badge, theme-toggle) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…l, switch, tabs, collapsible-group, modal) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…, drop text-input ring litter Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…st render-check, segmented-control + chrome fidelity - build-catalog: load mapping.json and enforce bidirectional contract (card without key → exit 1; key without file → exit 1) - build-catalog: compute honest thin counter (body < 200 non-WS chars); drop variantsIdentical (was always 0) - generate-foundations: exclude --shadow* and --focus* from color grid (they have own cards); group remaining swatches into 10 labeled sections (Core/Semantic/Model/Event/Subagent/Provider/Ticket Status/Live Status/Nav/Scope + Other catch-all); Core RGB values shown as text notes not broken chips; subtitle count is now accurate (110) - preview.css: add border-bottom on .ds-swatch__chip so near-invisible alpha tints show bounds; .ds-section-label and .ds-swatch__val raised from --text-faint/--text-muted to --text-secondary (AA contrast) - segmented-control.html: active label color changed from #fff to var(--bg-base) matching real SegmentedControl.svelte - README: update render-check description to match actual counters Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… AA contrast Seven light-mode foreground tokens failed WCAG AA on their -subtle tint backgrounds (ratios ranged from 1.99:1 to 3.29:1). Darkened each to its Tailwind -700 shade: warning #f59e0b → #b45309 (amber-700, 4.65:1) success #10b981 → #047857 (emerald-700, 4.99:1) error #ef4444 → #b91c1c (red-700, 5.66:1) info #3b82f6 → #1d4ed8 (blue-700, 5.99:1) model-haiku = success; model-sonnet = info (same hue pairs) event-command #14b8a6 → #0f766e (teal-700, 4.63:1) Tint backgrounds and dark-mode blocks unchanged. Adds WCAG note to badge catalog card. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Two static HTML page cards in catalog/pages/ snapshot the current /cron and /shells routes with spec sample data and real var(--…) tokens. Adds mapping.json entries, a Pages-layer README section, and task report. ds:build → "catalog OK — 23 cards validated"; ds:drift → no drift. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Updated README.md to reflect 23 cards validated (was 21), and made session slug clickable in shells.html with accent-colored link styling. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
… show brand fonts Catalog previews named the brand families via tokens but loaded no web font, so claude.ai/design (and direct-opened HTML) fell back to system fonts. Vendor the woff2 weights actually used (Inter 400/500/600/700, JetBrains Mono 400/500/600) under shared/fonts/ and add @font-face to preview.css. Re-synced to claude.ai/design. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The app named these brand families via tokens but loaded no web font, silently falling back to system fonts on any machine without them installed. Vendor the used weights (Inter 400/500/600/700, JetBrains Mono 400/500/600) under static/fonts/ and add @font-face to app.css. Verified: build copies them to build/client/fonts/ and the bundled CSS references /fonts/*.woff2. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…+ inline outcome) Surface the two things hidden behind a click onto every row: a trust verdict (Confirmed/Inferred/TTL expired/Deleted + fire subline) and the inline last outcome. Group rows by status (Active / Expired & deleted) into bordered tables, reframe the stat strip around trust, add a legend. Presentation only — all data wiring, filters, URL state, expand, TTL, rescan, and the System tab preserved. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
… running + inline kill + sparkline) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…(Ledger, Process Monitor) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
JayantDevkar
changed the title
the-non-expert
approved these changes
Jun 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
A design system for Claude Karma that mirrors the real code and is synced to claude.ai/design, plus the first two page redesigns driven through that round-trip. The frontend had a rich token layer buried in
app.cssand ~150 components, but no canonical catalog and nothing tying a design change back to source. This adds the catalog, syncs it, and uses it to redesign/cronand/shells.Specs/plan:
docs/superpowers/specs/2026-06-23-claude-karma-design-system-design.md,docs/superpowers/plans/2026-06-23-claude-karma-design-system.md. Catalog usage:frontend/design-system/README.md.Design system
:root/ dark /prefers-color-schemeblocks out offrontend/src/app.cssintofrontend/src/styles/tokens.css(verbatim, byte-identical: 374/374 declarations, zero visual change). App and catalog both import it.frontend/design-system/): 8 generated foundation cards (Colors/Type/Spacing/Radius/Shadow/Motion/Focus/Brand), 13 hand-authoredui/primitive previews, and a Pages layer (pages/cron.html,pages/shells.html).mapping.jsonlinks every card to its Svelte source(s).npm run ds:build(copy tokens → generate foundations → validate every<!-- @dsCard … -->marker → enforce the mapping.json contract → writerender-check.json) andnpm run ds:drift(flags cards older than their mapped source). Pure Node built-ins,node:testtests, no new deps.5fdd2fba-3802-4151-98ba-586d685cebf5); re-syncs are incremental (only changed files upload).Page redesigns (the Design→Code round-trip)
Explored as a canvas in claude.ai/design, then built in the real SvelteKit routes — pure presentation; all data wiring preserved and verified byte-identical to the originals:
/cron→ "The Ledger" — status-grouped table with an inline "did it really run" trust column (confirmed / inferred / TTL-expired / deleted) and the last outcome inline, instead of behind a click./shells→ "The Process Monitor" — triage table with running shells pinned to the top, an always-visible inline Kill, and an output sparkline.The page cards were then refreshed to the new designs and re-synced, so the catalog stays an honest mirror of the app.
Fixes surfaced along the way
--warning/--success/--error/--info,--model-haiku/--model-sonnet,--event-command) to 4.6–6.0:1. Tints and dark mode untouched.static/fonts/) and in the catalog bundle (catalog/shared/fonts/).Quality
Built subagent-driven: per-task reviews + a whole-branch code review + a UI/UX review for the catalog; both page redesigns were opus-reviewed (behavior preservation confirmed at source) and visually verified on live data.
Follow-ups (not blocking)
--radius-xl; reconcile the documented dark-block token inconsistencies (--*-rgb,--subagent-*,--nav-amber/cyan).🤖 Generated with Claude Code