# design-sync notes – Kupp-west Apple Clean

- Source of the design system is `variants/23-apple-clean/` (plain HTML + one
  CSS file). There is no React library in the repo, so
  `design-system-apple-clean/` is a thin React package written for the sync:
  every component only emits the semantic `kwac-*` classes of the variant.
  `npm run build` there runs `tsc` and copies
  `../variants/23-apple-clean/styles.css` to `dist/apple-clean.css`
  (`cssEntry`; the converter only accepts CSS inside the package). Never edit
  `dist/apple-clean.css` – edit the variant's stylesheet and rebuild.
- Tokens live in `design-system-apple-clean/tokens/` as a file: dependency
  (`@kuppwest/apple-clean-tokens`) so the converter's `tokensPkg` copy works.
  `colors.css` mirrors the eight custom properties of `.kwac` on `:root`; the
  type/spacing/radius files document the scale, the kwac classes do not read
  them (values are inline in the variant CSS).
- Provider: `cfg.provider = { component: "Page" }` – every preview is wrapped
  in `<div class="kwac">`; without it nothing is styled.
- The old project "Kupp-west Design System" (05046f19-…) in claude.ai/design
  is the earlier blue/white eBay look exported under `design-system/`. It is a
  different system and is NOT the target of this sync.
- Fonts: system stack ("Helvetica Neue", Helvetica, Arial) – no font files to
  ship; validate treats Helvetica as system-equivalent.
- Preview capture width is below the 900px breakpoint, so 3-, 4- and 5-column
  grids (Gallery, FeatureTrio, IncludedGrid, MoreOffers) show their tablet
  layout in the review sheets; `overrides.<Name>.viewport` is set to widen the
  card for those.
- Repo is not a git repository (no `.git`, no `.jj`); the "commit" steps of the
  skill were skipped. `.gitignore` is maintained anyway for a future init.
- The DesignSync tool resolves relative `localDir` against the shell's current
  directory, not the project root – always pass an absolute `localDir`.

- 2026-09-01: variant rebuilt after the Claude-Design template
  `templates/product-listing/ProductListing.dc.html` (read via DesignSync
  `get_file`; the claude_design MCP was not available in the session). Two new
  patterns became components: `DarkHero`, `LoadComparison`. The variant's
  margin reset now uses `:where()` so class margins win (the design had
  patched this with helmet overrides). Inter is loaded via `@import` in the
  variant CSS; validate reports `[FONT_REMOTE]` for it, which is expected.
- The design's placeholder data (abnehmbare Kugelstange, 750 kg ungebremst,
  Beispiel-HSN/TSN) was NOT adopted: product data stays as in
  `template_ahk_esatz.html` per project rules.

## Known render warns

- `[FONT_REMOTE] "Inter"` – Google Fonts @import, served at runtime.

- none after previews were authored (the initial `[RENDER_THIN]` lines were
  the unauthored floor cards).

## Re-sync risks

- `variants/23-apple-clean/styles.css` is the single style source: any class
  renamed there must be renamed in `design-system-apple-clean/src/` too, or the
  components emit dead classes (validate will not catch it – check the sheets).
- Preview fixtures (`.design-sync/previews/fixtures/data.ts`) inline the
  product/brand image URLs of the template; if those hosts change, cards show
  broken images.
- Playwright was installed under `.ds-sync/` (chromium from the shared cache).
- Node 22 / TypeScript 5.9 / React 18.3 at the time of this sync.