# Sporting Scouter Design System

Version: v3.5
Origin: https://design-system.sportingscouter.com

## Rules
1. Use semantic tokens from theme.css only - no arbitrary Tailwind values.
2. Blue navigates, black commits.
3. Compose forms with formLayout() + field(); no inline flex spacing between fields.
4. Authenticated apps use App Shell sideNav - do not invent a new grid.
5. Canonical code: ui/, theme.css, site/ - not _ds_bundle or styles.css.

## Implementing product UI (consumer apps)
Name the surface; copy the catalog structure snippet; fill slots. Missing variant: stop - do not invent in the app.
Use recipe functions, appShell() for authenticated pages, formLayout()+field(), starsFor(), ratingOf(), emptyState()/asyncState().

## Designing a new layout (this repo)
1. Confirm missing in catalog.json / Templates; extend existing before new chrome.
2. layout app: appShell+sideNav; layout page: marketing/auth templates.
3. Compose stack, layoutPanel, section, grid, formLayout, card, empty/async state; new tv() recipe only if needed.
4. COMPOSITION.md, theme.css tokens, GAPS.md sign-off; publish nav.mjs + page + structure snippet; site build.
5. Minor semver release; consumers ds:sync ui-vX.Y.Z.

## Areas
- Docs: https://design-system.sportingscouter.com/
- Components: https://design-system.sportingscouter.com/components/
- Templates: https://design-system.sportingscouter.com/templates/
- Agent docs: https://design-system.sportingscouter.com/agents/

## Catalog
See https://design-system.sportingscouter.com/catalog.json