Motif

The shared design system + static resource library for the chess workspace.

Motif/
├── design/             # the visual identity
│   ├── tokens.css        ← surface, text, shadow, radius, transition tokens
│   ├── chess-tokens.css  ← win/loss colors, NAG palette, state gradients
│   ├── board-texture.css ← opt-in 40px chessboard body overlay
│   ├── fonts.css         ← @font-face web-font declarations
│   └── theme.js          ← runtime piece-theme + board-color + scheme switcher
├── components/         # chess-aware Lit web components
│   ├── MoveList/         ← <motif-move-list> — PGN move list with variations
│   ├── EnginePanel/      ← <motif-engine-panel> — UCI engine UI
│   ├── FenArea/          ← <motif-fen-area> — FEN import/export
│   ├── PositionSetup/    ← <motif-position-setup> — board position editor
│   ├── PgnArea/          ← mountPgnArea(…) — MoveList + ContextMenu composer
│   ├── BranchPopover/    ← <motif-branch-popover> — variation chooser
│   ├── ContextMenu/      ← right-click menu primitive
│   ├── EcoOpeningBar/    ← <motif-eco-opening-bar> — ECO classification chip
│   ├── PlayerHeader/     ← <motif-player-header> — player names + result
│   ├── SanPreview/       ← SAN hover preview popup
│   └── Toolbar/          ← <motif-toolbar>
├── pieces/             # 39 chess piece SVG sets (lila-sourced; see docs/PIECE-LICENSING.md)
├── data/               # other static resources
│   ├── eco-epd.json      ← opening classifications (3641 positions)
│   └── test-pgns/        ← small PGN fixtures for tests/demos
└── docs/
    ├── RECIPES.md            ← copy-paste CSS patterns (raised panel, result chip, …)
    ├── KEYBOARD.md           ← canonical keyboard map for chess apps
    ├── ROADMAP.md            ← what's landed, what's queued
    ├── ARCHITECTURE.md       ← workspace overview + design rationale
    ├── GAME-CONTRACT.md      ← what Motif requires of a Tabia-shaped Game
    ├── RENDERER-CONTRACT.md  ← what Motif requires of a chess board renderer
    └── PIECE-LICENSING.md    ← per-piece-set license audit

Quick start

<!doctype html>
<html class="motif">
<head>
  <link rel="stylesheet" href="../Motif/design/tokens.css">
  <link rel="stylesheet" href="../Motif/design/chess-tokens.css">  <!-- optional: chess-aware tokens -->
  <link rel="stylesheet" href="../Motif/design/board-texture.css"> <!-- optional: body texture -->
</head>
<body class="motif motif-texture">
  <main class="motif-content">
    <div class="raised-panel" style="padding: 1rem;">
      Hello, dark-themed chess world.
    </div>
  </main>
  <script type="module">
    import { applyAll } from '../Motif/design/theme.js';
    applyAll();   // pulls stored prefs from localStorage
  </script>
</body>
</html>

What goes here

Pure CSS tokens — colors, shadows, radii, transitions
Theme management JS (small; no chess logic)
Chess-aware Lit web components (move list, engine panel, FEN area, …)
Static reference data (ECO, test PGNs, 39 piece SVG sets)
Pattern documentation (docs/RECIPES.md, docs/KEYBOARD.md)
Cross-library contracts (docs/GAME-CONTRACT.md, docs/RENDERER-CONTRACT.md) — the duck-typed surfaces Motif components require of a Game and a board renderer

What doesn’t

Any chess logic — that’s Tabia
Board rendering — that’s Rabbit
Anything app-specific
Generic UI primitives (filters, virtual lists, dropdowns) — Motif’s scope is chess-aware UI; generic ones are the app’s job

See docs/ARCHITECTURE.md for how Motif fits with Tabia and the rest of the chess workspace.