60 lines
1.7 KiB
Plaintext
60 lines
1.7 KiB
Plaintext
---
|
|
globs: *.tsx,*.ts,*.css
|
|
---
|
|
|
|
# UI System Guidelines
|
|
|
|
## Theme & Design System
|
|
|
|
- **Default Theme**: Dark mode only - do not introduce light-first designs
|
|
- **Typography**: Use CSS variables for fonts (Geist, Geist Mono, Bebas Neue, Orbitron, etc.)
|
|
- **Components**: Use shadcn/ui primitives from [src/components/ui/](mdc:src/components/ui/)
|
|
- **Spacing**: Follow Tailwind 4 defaults, prefer utility classes over custom CSS
|
|
- **Animation**: Keep Framer Motion subtle and meaningful only
|
|
|
|
## Component Structure
|
|
|
|
```typescript
|
|
// Use shadcn/ui primitives as base
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card } from '@/components/ui/card'
|
|
|
|
// Extend with local wrappers when needed
|
|
export function CustomComponent() {
|
|
return (
|
|
<Card className="bg-black border-gray-800">
|
|
<Button variant="outline" className="text-white">
|
|
Action
|
|
</Button>
|
|
</Card>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Styling Rules
|
|
|
|
1. **Dark Theme**: All components must work in dark mode
|
|
2. **Tailwind First**: Use utility classes before custom CSS
|
|
3. **Component Variants**: Use class-variance-authority for component variants
|
|
4. **Responsive**: Mobile-first responsive design
|
|
5. **Accessibility**: Include proper ARIA labels and semantic HTML
|
|
|
|
## Font Usage
|
|
|
|
Available font variables from [src/app/layout.tsx](mdc:src/app/layout.tsx):
|
|
- `--font-geist-sans` (default)
|
|
- `--font-geist-mono`
|
|
- `--font-bebas`
|
|
- `--font-orbitron`
|
|
- `--font-inter`
|
|
- `--font-jetbrains-mono`
|
|
- `--font-space-mono`
|
|
- `--font-rajdhani`
|
|
- `--font-exo-2`
|
|
|
|
## Animation Guidelines
|
|
|
|
- Use Framer Motion sparingly for meaningful transitions
|
|
- Prefer CSS transitions for simple hover effects
|
|
- Keep animations under 300ms for UI feedback
|
|
- Respect `prefers-reduced-motion` for accessibility |