CSS Architecture & Design System

Help me build a maintainable CSS architecture or design system.

Project: [DESCRIBE]
Approach: [TAILWIND / CSS MODULES / STYLED-COMPONENTS / SASS / VANILLA CSS]

Current issues: [SPAGHETTI CSS / INCONSISTENT / HARD TO MAINTAIN / STARTING FRESH]

Provide:
1. **Methodology**: BEM, ITCSS, or utility-first — which for my project
2. **Design Tokens**: Colours, spacing, typography, shadows, borders
3. **Typography Scale**: Font sizes and line heights system
4. **Spacing Scale**: Consistent spacing values
5. **Colour System**: Primary, secondary, neutrals, semantic colours
6. **Component Styles**: Pattern for styling reusable components
7. **Responsive Strategy**: Breakpoints and mobile-first approach
8. **Dark Mode**: How to implement dark mode cleanly
9. **Animation Guidelines**: When and how to use transitions and animations
10. **Documentation**: How to document the design system for the team

Help me build a maintainable CSS architecture or design system.

Project: [DESCRIBE]
Approach: [TAILWIND / CSS MODULES / STYLED-COMPONENTS / SASS / VANILLA CSS]
Current issues: [SPAGHETTI CSS / INCONSISTENT / HARD TO MAINTAIN / STARTING FRESH]

Provide:
1. **Methodology**: BEM, ITCSS, or utility-first — which for my project
2. **Design Tokens**: Colours, spacing, typography, shadows, borders
3. **Typography Scale**: Font sizes and line heights system
4. **Spacing Scale**: Consistent spacing values
5. **Colour System**: Primary, secondary, neutrals, semantic colours
6. **Component Styles**: Pattern for styling reusable components
7. **Responsive Strategy**: Breakpoints and mobile-first approach
8. **Dark Mode**: How to implement dark mode cleanly
9. **Animation Guidelines**: When and how to use transitions and animations
10. **Documentation**: How to document the design system for the team