3 features · 3 modules · 2 tables
Legend
# System Specification: Untitled Project
## Objective
Build as a SaaS / Web App.
## System Type
**SaaS / Web App** — Full-featured web application with auth, data persistence, real-time features, and multi-user support.
## System Features
### Must Have
- **User Authentication** [Authentication]: Email/password login with session management and JWT tokens
- Module: Auth
- **Data Management** [CRUD / Data]: CRUD operations for core entities with filtering, sorting, and pagination
- Module: Core
### Should Have
- **Notifications** [Notifications]: In-app and email notifications for important events
- Module: Notifications
## Service Configuration
### Authentication
- Method: Email + Password
- Session: JWT tokens
- MFA: disabled | Email verification: required
- Rate limiting: enabled | Account lockout: enabled
- Password: min 8 chars
### CRUD System
- Entities: users, items
- Pagination: offset-based | Soft delete: enabled
- Search: enabled | Bulk actions: disabled
- Export formats: csv
- Field validation: both | Optimistic updates: yes
### Notifications
- Channels: in-app, email
- Real-time: enabled (WebSocket/SSE)
- Digest mode: disabled | User preferences: manageable
## Design System
### Design Theme
`minimal` — Clean whites, neutrals, and max contrast. No decoration beyond content.
### Colors
- Primary: `#6366f1` + gradient (to-br)
- Secondary: `#8b5cf6`
- Accent: `#ec4899`
### Typography
`font-sans tracking-tight antialiased` confident modern sans (Geist, Plus Jakarta Sans)
### Components
- Button: `rounded-md px-4 py-2 text-sm font-semibold`
- Input: `border border-neutral-300 rounded-md px-3 py-2 bg-white focus:border-primary focus:ring-1 focus:ring-primary/20`
- Card: `bg-white rounded-xl shadow-md p-5`
- Badge: `rounded-full text-xs font-medium px-2.5 py-0.5 bg-primary/10 text-primary`
- Navbar: `sticky top-0 z-40 bg-white/90 backdrop-blur-sm border-b border-neutral-100 h-14`
- Table: `w-full text-sm [&_thead]:bg-neutral-50 [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-medium [&_td]:px-4 [&_td]:py-3 [&_tbody_tr:nth-child(even)]:bg-neutral-50/50`
- Sidebar: `w-14 flex flex-col items-center gap-1 py-4` (icon-only, expand on hover)
- Icons: `lucide-react` or `heroicons/outline` 1.5px stroke, 24px default
### Layout Tokens
- Corner radius: `rounded-md` (6px)
- Shadow: `shadow-sm` (0 1px 3px rgba(0,0,0,.08))
- Spacing: Base unit 4 `gap-4` / `p-4`. Balanced spacing.
- Motion: `transition-all duration-200 ease-in-out` on interactive elements only
## Constraints (Must Follow)
1. **Avoid nested cards**: Never nest card components inside other card components — flatten the hierarchy
2. **No emojis as icons**: Use Lucide, Heroicons, or a dedicated icon library — never emoji characters for UI icons
3. **Avoid em dashes**: No em dashes in any generated text or UI copy — restructure sentences instead
4. **Subtle background colors**: Use light/muted color variants for backgrounds. Avoid aggressive solid dark colors
5. **Enforce spacing tokens**: Use the design system spacing scale — no arbitrary px values outside the scale
6. **No inline styles**: No style={{}} attributes — use Tailwind classes or CSS modules exclusively
7. **Enforce reusable components**: Any UI pattern used 2+ times must be extracted into a shared component immediately
8. **Mobile-first responsive**: Write base styles targeting mobile — apply sm:/md:/lg: prefixes for larger viewports
9. **No lorem ipsum placeholders**: Use realistic, contextually accurate placeholder content that reflects the real use case
10. **Consistent corner radius**: Use a single base radius (e.g. 8px) for buttons and small cards. Scale up to 16px+ for modals and large containers — never mix arbitrary values per-component
11. **Nested radius harmony**: Outer radius must always be Inner radius + padding. A card with 16px radius and 12px padding needs its inner element to be 4px radius — never equal or greater
12. **60-30-10 color distribution**: 60% neutral/base (backgrounds), 30% secondary brand color (cards, nav, structural elements), 10% accent/CTA (buttons, highlights, notifications) — never invert
13. **WCAG contrast compliance**: Normal text must achieve 4.5:1 contrast ratio (AA). Large text and UI components need 3:1. Never use color as the only indicator of state or meaning
14. **Semantic color usage**: Assign colors consistent meaning: blue for links/info, red for errors/destructive, green for success/confirmation, amber for warnings. Never swap these meanings
## Code Architecture
### Tech Stack
- Framework: Next.js (App Router)
- Language: TypeScript (strict mode)
- Styling: Tailwind CSS
- State management: Zustand
- Database: PostgreSQL
- ORM: Prisma
### Conventions
- Folder structure: Feature-based (`src/features/[name]/`)
- File naming: kebab-case
- Max component lines: 200
- Custom hooks: extracted to hooks/ directory
- Type definitions: separate *.types.ts filesProject info
System type