# Project: [Your Design System Name]

## Architecture
- Tokens: `tokens/` ([format: Style Dictionary / Tokens Studio / CSS])
- Components: `src/components/` ([framework: React / Vue / Svelte] + CSS custom properties)
- [X] components, [X] semantic tokens, [X] themes

## Conventions
- Token naming: `{category}.{property}.{intent}.{modifier?}`
- Valid: color.bg.primary, color.fg.danger, space.gap.md
- Invalid: red-500, bg-primary, colorBgPrimary
- kebab-case everywhere. Never rename existing variables.
- Components use CSS custom properties, not hardcoded values.

## Key files
- @.design-system/token-schema.json
- @.design-system/naming-conventions.md

## Don't
- Don't use raw hex colors. Always reference a token.
- Don't create new tokens without checking for existing ones first.
- Don't rename existing tokens (breaking change).
- Don't generate camelCase token names.
- Don't hardcode spacing values. Use the spacing scale.

## Mistakes
<!-- Claude reads this on every request. Add mistakes here as they happen. -->
<!-- Example: Tried camelCase for tokens. Always use kebab-case. -->
<!-- Example: Generated color.background.primary. Correct: color.bg.primary. -->
<!-- Example: Created duplicate token space.padding.medium when space.padding.md exists. -->