Cursor rule

1---
2description: Styling and theming standards for the project UI
3globs: src/**/*.tsx,*.tsx,*.css,*.scss
4alwaysApply: false
5---
6 
7# Styling and Theming Standards
8 
9This project follows the default styling conventions recommended by ShadCN UI, using Tailwind CSS as the utility-first framework.
10 
11## Theme Guidelines
12 
13- The base theme uses **black and white** tones with **grey variants** for accents and depth.
14- The visual style must reflect **clean, minimal UIs**:
15  - Flat backgrounds
16  - Soft borders
17  - Neutral color hierarchy
18- Avoid vibrant or saturated colors unless explicitly needed for semantic purpose (e.g., error, success).
19- Use **consistent corner radius** and **balanced spacing** to maintain visual harmony and aesthetic flow.
20 
21## Accessibility & WCAG Compliance
22 
23- All components must follow the latest **WCAG guidelines**.
24- Maintain sufficient color contrast between text and background.
25- Ensure all interactive elements are keyboard accessible and include appropriate ARIA roles or labels where needed.
26- The UI should be **accessible and visually pleasant** at the same time — clean but inclusive.
27 
28## Tailwind Usage
29 
30- Use Tailwind utility classes directly in JSX where possible.
31- Avoid writing custom CSS unless necessary (e.g., for complex layout or animation).
32- Use `@apply` only in global or shared style definitions, not inside component JSX.
33- Prefer spacing, sizing, and typography scales from Tailwind's default config.
34 
35## ShadCN Defaults
36 
37- Follow ShadCN CLI-generated component defaults.
38- Extend ShadCN components via wrapper components or `className` props only.
39- Do not modify original ShadCN UI files directly (`src/components/lib/shadcn/ui/`).
40 
41## Color Usage
42 
43- Background: `bg-white`, `bg-black`, `bg-gray-50`, `bg-gray-100`, etc.
44- Text: `text-black`, `text-white`, `text-gray-700`, `text-gray-500`
45- Border: `border-gray-200`, `border-gray-300`
46- Interactive: `hover:bg-gray-100`, `focus:outline-none`, `disabled:opacity-50`
47 
48## Spacing & Layout
49 
50- Use consistent spacing utilities (`p-x`, `m-x`) for alignment.
51- Avoid hardcoded pixel values; use Tailwind spacing scale.
52- Maintain vertical rhythm with margin/padding spacing between sections.
53 
54## Typography
55 
56- Use Tailwind typography scale for font sizes.
57- Stick to a single readable sans-serif font defined in the theme config.
58- Avoid multiple font families or mixing serif with sans-serif.
59 
60## Components
61 
62- Use `rounded` utilities to ensure consistent border radius.
63- Use `shadow` utilities minimally for subtle depth.
64- Ensure all components are responsive and mobile-friendly by default.
65 
66## Example
67 
68```tsx
69return (
70  <div className="bg-white text-gray-800 p-4 rounded border border-gray-200 shadow-sm">
71    <h2 className="text-lg font-semibold">Section Title</h2>
72    <p className="text-sm text-gray-600">This is a clean, minimal UI block.</p>
73  </div>
74);
75```
76 
77This style guide ensures that the application maintains a consistent, modern aesthetic that is both visually pleasing and accessible to all users.
78