Cursor rule

1---
2description: # Design System & UI Guidelines
3globs:
4alwaysApply: true
5---
6 
7# bossROD TV Design System & UI Guidelines
8 
9## Core Aesthetic: "Minimalist Tech & Code"
10 
11The bossROD TV brand aesthetic sits at the intersection of **Programming, Technology, and Content Creation**. It is **"Clean Code meets Visual Clarity."**
12 
13The design must instantly communicate four key pillars:
14 
151.  **Technical Excellence:** Clean, precise layouts that reflect code structure and logical thinking.
162.  **Minimalist Focus:** Black and white palette that removes distraction and emphasizes content.
173.  **Developer Identity:** Terminal aesthetics, monospace typography, and code-inspired UI patterns.
184.  **Content Creation:** Video frames, streaming UI elements, and creator-focused components.
19 
20**Key Visual Metaphors:**
21 
22- **The Terminal:** Dark backgrounds, monospace fonts, command-line aesthetics.
23- **The IDE:** Syntax highlighting accents, tab-based navigation, panel layouts.
24- **The Triangle:** Logo-inspired angular shapes, geometric precision, sharp edges.
25- **The Stream:** Video frames, live indicators, recording UI elements.
26 
27---
28 
29## 1. Typography & Text Effects
30 
31### Font Stack
32 
33- **Primary:** `Inter` (via Tailwind default sans) for UI and body text.
34- **Code/Accent:** `JetBrains Mono` or system monospace for technical elements and emphasis.
35 
36### Text Colors (Theme-Aware)
37 
38**CRITICAL:** ALWAYS use semantic theme colors (`text-foreground`, `text-muted-foreground`, `text-primary`, `bg-background`, `bg-card`). **NEVER** use hardcoded colors like `text-gray-900`, `text-gray-600`, or `bg-white` (unless intentionally fixed, e.g., on a dark overlay).
39 
40| Role           | Class                   | Description                              |
41| -------------- | ----------------------- | ---------------------------------------- |
42| **Headings**   | `text-foreground`       | Main titles, high contrast.              |
43| **Body**       | `text-muted-foreground` | Descriptions and secondary text.         |
44| **Code/Tech**  | `font-mono`             | Technical terms, code snippets.          |
45| **Emphasis**   | `text-primary`          | Key brand moments or active states.      |
46 
47### The "Code Comment" Effect
48 
49Use this for section subtitles to emphasize the **developer/tech** identity. It simulates code comments.
50 
51```tsx
52<p className="font-mono text-sm text-muted-foreground">
53  <span className="text-muted-foreground/60">// </span>
54  Building the future, one commit at a time
55</p>
56```
57 
58### The "Terminal Prompt" Effect
59 
60Use for CTAs or interactive elements to create a command-line feel.
61 
62```tsx
63<span className="font-mono text-sm">
64  <span className="text-primary">$</span> start learning
65  <span className="animate-pulse">_</span>
66</span>
67```
68 
69---
70 
71## 2. Color System
72 
73### Primary Palette: Black & White
74 
75The core palette is strictly monochromatic for maximum clarity and focus.
76 
77| Token              | Light Mode          | Dark Mode           | Usage                    |
78| ------------------ | ------------------- | ------------------- | ------------------------ |
79| `--background`     | `#ffffff`           | `#0a0a0a`           | Page backgrounds         |
80| `--foreground`     | `#0a0a0a`           | `#fafafa`           | Primary text             |
81| `--card`           | `#ffffff`           | `#111111`           | Card backgrounds         |
82| `--card-foreground`| `#0a0a0a`           | `#fafafa`           | Card text                |
83| `--muted`          | `#f4f4f5`           | `#1a1a1a`           | Muted backgrounds        |
84| `--muted-foreground`| `#71717a`          | `#a1a1aa`           | Secondary text           |
85| `--border`         | `#e4e4e7`           | `#27272a`           | Borders and dividers     |
86| `--primary`        | `#0a0a0a`           | `#fafafa`           | Primary actions          |
87| `--primary-foreground`| `#fafafa`        | `#0a0a0a`           | Text on primary          |
88 
89### Accent Colors (Sparingly Used)
90 
91Only use accents for functional feedback, never for decoration.
92 
93| Color    | Usage                                    |
94| -------- | ---------------------------------------- |
95| `green`  | Success states, "live" indicators        |
96| `red`    | Error states, recording indicators       |
97| `yellow` | Warning states, pending actions          |
98| `blue`   | Links, information (use minimally)       |
99 
100---
101 
102## 3. Component Patterns
103 
104### A. The "Code Block" Card
105 
106Used for: _Features, tutorials, technical content._ Represents the **Developer Identity** aspect.
107 
108- **Container:** Dark background with subtle border, monospace accents.
109- **Header:** Simulates a terminal/IDE title bar with dots.
110 
111```tsx
112<div className="overflow-hidden rounded-lg border border-border bg-card">
113  {/* Terminal Header */}
114  <div className="flex items-center gap-2 border-b border-border bg-muted px-4 py-2">
115    <div className="h-3 w-3 rounded-full bg-red-500/80" />
116    <div className="h-3 w-3 rounded-full bg-yellow-500/80" />
117    <div className="h-3 w-3 rounded-full bg-green-500/80" />
118    <span className="ml-2 font-mono text-xs text-muted-foreground">
119      component.tsx
120    </span>
121  </div>
122  {/* Content */}
123  <div className="p-4">
124    <pre className="font-mono text-sm text-foreground">
125      {/* Code content */}
126    </pre>
127  </div>
128</div>
129```
130 
131### B. The "Panel" Card (Clean Container)
132 
133Used for: _General content, stats, info blocks._ Represents the **Minimalist Focus** aspect.
134 
135- **Style:** Clean borders, no shadows (or very subtle), sharp corners or minimal rounding.
136- **Spacing:** Generous padding, clear hierarchy.
137 
138```tsx
139<div className="rounded-lg border border-border bg-card p-6">
140  <h3 className="text-lg font-semibold text-foreground">Panel Title</h3>
141  <p className="mt-2 text-muted-foreground">
142    Clean, focused content without distraction.
143  </p>
144</div>
145```
146 
147### C. The "Stat Block" (Dashboard Widget)
148 
149Used for: _Metrics, numbers, key statistics._ Represents the **Technical Excellence** aspect.
150 
151```tsx
152<div className="rounded-lg border border-border bg-card p-4">
153  <p className="font-mono text-xs uppercase tracking-wider text-muted-foreground">
154    Total Views
155  </p>
156  <div className="mt-1 flex items-baseline gap-2">
157    <span className="font-mono text-3xl font-bold text-foreground">
158      1.2M
159    </span>
160    <span className="font-mono text-xs text-green-500">+12%</span>
161  </div>
162</div>
163```
164 
165### D. The "Video Frame" (Content Showcase)
166 
167Used for: _Video previews, thumbnails, media content._ Represents the **Content Creation** aspect.
168 
169```tsx
170<div className="group relative overflow-hidden rounded-lg border border-border bg-black">
171  {/* Live/Recording Indicator */}
172  <div className="absolute left-3 top-3 z-10 flex items-center gap-1.5 rounded bg-red-600 px-2 py-0.5">
173    <div className="h-2 w-2 animate-pulse rounded-full bg-white" />
174    <span className="font-mono text-xs font-medium text-white">LIVE</span>
175  </div>
176  {/* Video Content */}
177  <div className="aspect-video bg-muted">
178    <img className="h-full w-full object-cover" />
179  </div>
180  {/* Progress Bar */}
181  <div className="h-1 w-full bg-muted">
182    <div className="h-full w-1/3 bg-primary" />
183  </div>
184</div>
185```
186 
187### E. The "Triangle Accent" (Brand Element)
188 
189Used for: _Decorative accents, section dividers._ Represents the **Logo/Brand Identity**.
190 
191```tsx
192{/* Decorative triangle inspired by logo */}
193<div className="relative">
194  <div className="absolute -left-4 top-0 h-0 w-0 border-l-[16px] border-r-[16px] border-t-[24px] border-l-transparent border-r-transparent border-t-primary opacity-10" />
195</div>
196 
197{/* Or as a section divider */}
198<div className="flex items-center gap-4">
199  <div className="h-px flex-1 bg-border" />
200  <div className="h-0 w-0 border-l-8 border-r-8 border-t-12 border-l-transparent border-r-transparent border-t-foreground" />
201  <div className="h-px flex-1 bg-border" />
202</div>
203```
204 
205### F. The "Command Palette" (Interactive Element)
206 
207Used for: _Search, navigation, quick actions._ Represents the **Developer Tools** aspect.
208 
209```tsx
210<div className="mx-auto w-full max-w-lg overflow-hidden rounded-lg border border-border bg-card shadow-2xl">
211  <div className="flex items-center gap-2 border-b border-border px-4 py-3">
212    <span className="font-mono text-muted-foreground">&gt;</span>
213    <input
214      className="flex-1 bg-transparent font-mono text-foreground outline-none placeholder:text-muted-foreground"
215      placeholder="Type a command..."
216    />
217    <kbd className="rounded border border-border bg-muted px-2 py-0.5 font-mono text-xs text-muted-foreground">
218      ⌘K
219    </kbd>
220  </div>
221  {/* Results */}
222</div>
223```
224 
225---
226 
227## 4. Backgrounds & Textures
228 
229### The "Grid" Pattern (Subtle Structure)
230 
231Used for: _Hero sections, backgrounds._ Represents **Technical Precision**.
232 
233```tsx
234<div className="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:32px_32px]" />
235```
236 
237### The "Dot Matrix" (Minimal Texture)
238 
239Used for: _Section backgrounds._ Represents **Digital/Tech**.
240 
241```tsx
242<div className="absolute inset-0 -z-10 bg-[radial-gradient(#71717a_0.5px,transparent_0.5px)] [background-size:24px_24px] opacity-30" />
243```
244 
245### The "Gradient Fade" (Depth)
246 
247Used for: _Edge fading, focus areas._ Creates depth without color.
248 
249```tsx
250<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent" />
251```
252 
253---
254 
255## 5. Buttons & Interactive Elements
256 
257### Primary Button (Solid)
258 
259Clean, high-contrast, no frills.
260 
261```tsx
262className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
263```
264 
265### Secondary Button (Outline)
266 
267Subtle, for secondary actions.
268 
269```tsx
270className="inline-flex items-center justify-center rounded-md border border-border bg-transparent px-4 py-2 font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
271```
272 
273### Ghost Button
274 
275Minimal, for tertiary actions.
276 
277```tsx
278className="inline-flex items-center justify-center rounded-md px-4 py-2 font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
279```
280 
281### Code-Style Button
282 
283For tech-focused CTAs.
284 
285```tsx
286<button className="group inline-flex items-center gap-2 rounded-md border border-border bg-card px-4 py-2 font-mono text-sm transition-colors hover:bg-muted">
287  <span className="text-primary">$</span>
288  <span className="text-foreground">npm start</span>
289  <span className="text-muted-foreground group-hover:text-foreground">↵</span>
290</button>
291```
292 
293---
294 
295## 6. Animation Guidelines
296 
297- **Transitions:** Keep it subtle. `transition-colors duration-200` for most interactions.
298- **Hover States:** Prefer color/opacity changes over transforms.
299- **Loading:** Use simple pulse or skeleton animations, avoid spinners when possible.
300- **Cursor Blink:** `animate-pulse` for terminal cursor effects.
301 
302```tsx
303// Blinking cursor
304<span className="animate-pulse">_</span>
305 
306// Subtle fade in
307<div className="animate-in fade-in duration-300">
308 
309// Skeleton loading
310<div className="h-4 w-32 animate-pulse rounded bg-muted" />
311```
312 
313---
314 
315## 7. Spacing & Layout
316 
317### Grid System
318 
319Use 8px base unit. Prefer `gap-4`, `gap-6`, `gap-8` for consistency.
320 
321### Card Spacing
322 
323- Internal padding: `p-4` (compact), `p-6` (standard), `p-8` (spacious)
324- Card gaps: `gap-4` minimum
325 
326### Section Spacing
327 
328- Between sections: `py-16` to `py-24`
329- Content max-width: `max-w-6xl mx-auto px-4`
330 
331---
332 
333## 8. Implementation Checklist for Agents
334 
335When generating new UI components:
336 
3371.  [ ] **Color Check:** Using only `text-foreground`, `bg-background`, `border-border`, etc.?
3382.  [ ] **Contrast Check:** Is there enough contrast? Black/white should dominate.
3393.  [ ] **Font Check:** Is `font-mono` used for technical elements?
3404.  [ ] **Minimal Check:** Can anything be removed? Less is more.
3415.  [ ] **Border Check:** Using borders over shadows for separation?
3426.  [ ] **Spacing Check:** Is spacing consistent with 8px grid?
3437.  [ ] **No Decorative Colors:** Accents only for functional feedback (success/error/warning).
3448.  [ ] **Theme Support:** Does it work in both light and dark modes?
345