spielos-uilisted

# SpielOS UI Polish the existing product without reskinning it. Move repeated decisions upward into tokens and primitives, then verify their consumers and states. ## Source of truth The design system lives in the companion SpielOS product repo (path is environment-specific; resolve it from your local checkout — for example via a `SPIELOS_PRODUCT_REPO` environment variable — it is not inside this website repository): 1. `packages/design-system/src/tokens/` — raw palettes + semantic mappings (`index.css`, `semantic-*.css`). 2. `packages/design-system/src/tokens/brand.ts` — brand mark geometry and static favicon palette (tile `#282828`, glyph `#ebdbb2`). 3. `packages/design-system/src/components/` — shared primitives (`BrandMark`, `Button`, `Icon`, etc.). 4. `docs/design-system.md` and `docs/interaction-design.md` — composition contracts. The website mirrors the token files in `src/styles/tokens/` and must stay in sync. When tokens change upstream, copy the `semantic-*.css` and palette files, then re-add the website-only `--panel-deep` extension (the app has no alternating-section surface). The RTL font override in `index.css` keeps IRANSansX (not Vazirmatn) on this site. ## Before editing UI Read these files: 1. `$SPIELOS_PRODUCT_REPO/docs/design-system.md` — tokens, hierarchy, surfaces, typography, icons, rules 2. `$SPIELOS_PRODUCT_REPO/docs/interaction-design.md` — selection, creation, loading, feedback, motion, accessibility 3. `src/styles/tokens/` — the website's th