Dorian
c28e6dd811
Foundation for the next-generation AI content surface UI: - 16 Cursor rules files covering philosophy, Vue conventions, design system, content surfaces, plugin system, AI integration, renderers, security, Bitcoin-only policy, dev/prod modes, accessibility, performance, animation, mobile UX, and git workflow - pnpm workspaces + Turborepo monorepo (@aiui/core, @aiui/app) - Vue 3 + Vite + TypeScript + Tailwind CSS 4 - Core type system: plugins, renderers, messages, content blocks - Plugin registry with renderer registration - 50 mock film fixtures with search/filter utilities - App shell with chat page layout - Environment config templates Made-with: Cursor
75 lines
2.5 KiB
Plaintext
75 lines
2.5 KiB
Plaintext
---
|
|
description: Design system foundations - colors, typography, spacing, component patterns
|
|
globs: "**/*.vue,**/*.css,**/*.ts"
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Design System
|
|
|
|
## Design Tokens
|
|
|
|
### Color Palette
|
|
Semantic color tokens defined by purpose, not appearance:
|
|
- `primary` — main brand actions (#606060 / configurable)
|
|
- `accent` — highlight, Bitcoin orange (#F7931A)
|
|
- `success` — positive states (#10B981)
|
|
- `error` — negative states (#EF4444)
|
|
- `warning` — caution states (#F59E0B)
|
|
- `info` — informational (#3B82F6)
|
|
- Neutrals: gray-50 through gray-900
|
|
|
|
### Typography
|
|
- Display font: Geometric sans-serif (Space Grotesk, Inter Display)
|
|
- Body font: Clean sans-serif (Inter, system-ui)
|
|
- Mono font: Menlo, Monaco, Courier New
|
|
- Use single font family with weight variations for simplicity
|
|
|
|
### Spacing
|
|
All spacing on 4px grid. Common patterns:
|
|
- Component padding: `p-4` (16px) to `p-6` (24px)
|
|
- Section spacing: `py-12` (48px) to `py-16` (64px)
|
|
- Element gaps: `gap-4` (16px) default
|
|
|
|
### Shadows & Glows
|
|
```css
|
|
shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08)
|
|
shadow-card: 0 4px 16px rgba(0, 0, 0, 0.1)
|
|
shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.15)
|
|
```
|
|
|
|
## Component Patterns
|
|
|
|
### Buttons
|
|
- Primary: solid background, white text, `rounded-lg`, `font-semibold`
|
|
- Secondary: border only, primary text, fill on hover
|
|
- Ghost: text only, subtle background on hover
|
|
- Icon: `p-2 rounded-md`, minimum 44x44px touch target
|
|
- Sizes: sm (`px-4 py-2`), md (`px-6 py-3`), lg (`px-8 py-4`)
|
|
|
|
### Cards
|
|
- Background: white/dark with `rounded-2xl` (16px radius)
|
|
- Padding: `p-6`
|
|
- Shadow: `shadow-card` default, `shadow-elevated` on hover
|
|
- Interactive cards get `hover:shadow-lg transition-shadow duration-300 cursor-pointer`
|
|
|
|
### Form Elements
|
|
- Inputs: `min-h-[44px]` touch target, `text-base` (prevents iOS zoom), `rounded-lg`
|
|
- Labels: `text-sm font-semibold text-gray-700 mb-2`
|
|
- Error text: `text-sm text-error mt-1`
|
|
- Focus: `focus:border-primary focus:ring-2 focus:ring-primary/50`
|
|
|
|
### Badges
|
|
- Status badges: `inline-flex items-center px-3 py-1 rounded-full text-sm font-medium`
|
|
- Color variants: success (green-100/green-800), warning (yellow-100/yellow-800), error (red-100/red-800)
|
|
|
|
### Icons
|
|
- SVG preferred, using Lucide Icons
|
|
- Sizes: xs (16px), sm (20px), md (24px), lg (32px), xl (48px)
|
|
- Always use `currentColor` for stroke/fill
|
|
- Icon-only buttons must have `aria-label`
|
|
|
|
## Layout Patterns
|
|
- Standard container: `max-w-7xl mx-auto px-4 md:px-6`
|
|
- Reading container: `max-w-3xl mx-auto px-4 md:px-6`
|
|
- Sidebar + content: `grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-6`
|