# Cursor-Inspired UI Design System 🎨 **Modern Flat + Subtle Depth • 200ms Smooth Animations • Purple Accents** Complete redesign of the crypto trading platform with a Cursor-inspired modern flat design system. --- ## 🚀 Quick Start ### 1. View the Component Showcase ``` Open: http://localhost:8000/static/cursor-ui-showcase.html ``` See all components in action with interactive examples. ### 2. Create a New Page Copy [page-template.html](static/page-template.html) to start a new page: ```bash cp static/page-template.html static/pages/your-page/index.html ``` The template includes: - ✅ Proper HTML structure - ✅ Cursor CSS imports (in correct order) - ✅ Header & sidebar containers - ✅ Component examples (cards, buttons, tables, alerts) - ✅ Page initialization script ### 3. Update Existing Pages Replace the `` CSS imports: ```html ``` Change theme to dark: ```html ``` --- ## 📦 What's Included ### Core CSS Files (4 files) 1. **[design-system-cursor.css](static/shared/css/design-system-cursor.css)** - Design Tokens - Colors (deep dark theme, purple accents) - Typography (Inter font, refined scale) - Spacing (4px grid system) - Shadows, animations, breakpoints 2. **[layout-cursor.css](static/shared/css/layout-cursor.css)** - Layout System - 56px header with breadcrumb & search - 240px sidebar (collapsible to 60px) - Responsive mobile breakpoints 3. **[components-cursor.css](static/shared/css/components-cursor.css)** - Components - Buttons, Cards, Forms, Tables - Badges, Alerts, Modals, Tooltips - Progress bars, Skeletons, Dropdowns 4. **[animations-cursor.css](static/shared/css/animations-cursor.css)** - Animations - Fade, slide, scale animations - Hover effects (lift, glow, scale) - Loading states (spinners, dots) ### Layout Components (2 files) - **[header.html](static/shared/layouts/header.html)** - Cursor-style header - **[sidebar.html](static/shared/layouts/sidebar.html)** - Icon-first navigation ### Updated Pages (3 files) - ✅ [Dashboard](static/pages/dashboard/index.html) - ✅ [Market](static/pages/market/index.html) - ✅ [AI Models](static/pages/models/index.html) --- ## 🎨 Design Tokens ### Colors ```css /* Backgrounds - Deep Dark */ --bg-primary: #0A0A0A; --bg-secondary: #121212; --surface-primary: #1E1E1E; /* Cards */ --surface-secondary: #252525; /* Elevated */ /* Text */ --text-primary: #EFEFEF; /* High contrast */ --text-secondary: #A0A0A0; /* Muted */ --text-tertiary: #666666; /* Very subtle */ /* Accent - Purple (Cursor-style) */ --accent-purple: #8B5CF6; --accent-purple-gradient: linear-gradient(135deg, #8B5CF6, #6D28D9); /* Semantic */ --color-success: #10B981; /* Green */ --color-warning: #F59E0B; /* Amber */ --color-danger: #EF4444; /* Red */ --color-info: #06B6D4; /* Cyan */ ``` ### Typography ```css /* Font Family */ --font-primary: 'Inter', system-ui, sans-serif; /* Sizes */ --text-xs: 11px; /* Labels */ --text-sm: 13px; /* Small text */ --text-base: 15px; /* Body (default) */ --text-lg: 17px; /* Emphasized */ --text-xl: 20px; /* H3 */ --text-2xl: 24px; /* H2 */ --text-3xl: 30px; /* H1 */ /* Weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; ``` ### Spacing (4px Grid) ```css --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* Common gap */ --space-6: 24px; /* Card padding */ --space-8: 32px; /* Section spacing */ --space-16: 64px; /* Large sections */ ``` ### Animations ```css /* Duration - Cursor-style (Fast & Snappy) */ --duration-normal: 200ms; /* Default */ /* Easing */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Material Design */ ``` --- ## 🧩 Component Examples ### Buttons ```html ``` ### Cards ```html

Card Title

Card content goes here.

Title

Content...

$12,345

Total Volume

↑ +12.5%

``` ### Forms ```html

Email Address We'll never share your email.

``` ### Tables ```html

Name	Price	Change
Bitcoin	$45,123	+5.2%

``` ### Badges ```html Primary Success Warning ``` ### Alerts ```html

Information

This is an informational message.

``` --- ## ✨ Animations ### Entrance Animations ```html

Content

Item 1 (0ms delay)

Item 2 (50ms delay)

Item 3 (100ms delay)

``` ### Hover Effects ```html

Hover me

``` ### Loading States ```html

``` --- ## 📱 Mobile Responsive The design system is mobile-first: **Breakpoints:** - Mobile: < 768px - Tablet: 768px - 1024px - Desktop: > 1024px **Automatic Behavior:** - Sidebar slides in as overlay on mobile - Header search hidden on mobile - Cards go full-width with reduced padding - Tables scroll horizontally --- ## 🎯 Best Practices ### 1. Always Load CSS in Order ```html ``` ### 2. Use CSS Variables ```css /* Good ✅ */ padding: var(--space-4); color: var(--text-secondary); /* Avoid ❌ */ padding: 16px; color: #A0A0A0; ``` ### 3. Use Component Classes ```html ``` ### 4. Follow 200ms Standard All transitions should be 200ms for consistent Cursor-like feel. --- ## 📚 Documentation - **[Integration Guide](CURSOR_UI_INTEGRATION_GUIDE.md)** - Detailed integration instructions - **[Component Showcase](static/cursor-ui-showcase.html)** - Visual reference - **[Page Template](static/page-template.html)** - Quick-start template --- ## 🛠️ Customization Override CSS variables in your page-specific CSS: ```css /* custom-page.css */ :root { /* Change accent color */ --accent-purple: #3B82F6; /* Blue instead of purple */ /* Adjust spacing */ --space-6: 32px; /* Increase card padding */ /* Custom durations */ --duration-normal: 250ms; /* Slightly slower */ } ``` --- ## ✅ Migration Checklist When updating an existing page: - [ ] Change `data-theme="light"` to `data-theme="dark"` - [ ] Replace old CSS imports with Cursor design system - [ ] Update favicon to purple gradient - [ ] Replace button classes: `.btn-gradient` → `.btn .btn-primary` - [ ] Replace card classes: `.glass-card` → `.card` - [ ] Update form inputs: `.form-input` → `.input` - [ ] Test mobile responsiveness (< 768px) - [ ] Verify sidebar collapse works - [ ] Check all animations load correctly --- ## 📞 Quick Reference | Element | Class | Example | |---------|-------|---------| | Button Primary | `.btn .btn-primary` | Purple gradient | | Button Secondary | `.btn .btn-secondary` | Flat dark surface | | Card | `.card` | Flat with subtle shadow | | Stat Card | `.stat-card` | Dashboard metrics | | Input | `.input` | Text input field | | Badge | `.badge .badge-primary` | Label/tag | | Alert | `.alert .alert-info` | Info message | | Table | `.table-container .table` | Data table | --- ## 🎉 What Makes It "Cursor-Like" 1. ✅ **Deep dark theme** (`#0A0A0A` - true black) 2. ✅ **Purple accent** (#8B5CF6 - distinctive) 3. ✅ **200ms animations** (fast, snappy) 4. ✅ **Flat + subtle depth** (shadows for hierarchy) 5. ✅ **Generous spacing** (breathable, not cramped) 6. ✅ **Hover lift** (2px translateY) 7. ✅ **Inter typography** (clean, modern) 8. ✅ **Icon-first nav** (collapsible sidebar) 9. ✅ **Professional polish** (attention to detail) 10. ✅ **Minimal borders** (background colors for separation) --- **Version:** 1.0.0 **Last Updated:** December 10, 2025 **Status:** ✅ Production Ready