| # 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 `<head>` CSS imports: | |
| ```html | |
| <!-- OLD CSS (Remove) --> | |
| <link rel="stylesheet" href="/static/shared/css/design-system.css"> | |
| <link rel="stylesheet" href="/static/shared/css/global.css"> | |
| <link rel="stylesheet" href="/static/shared/css/components.css"> | |
| <link rel="stylesheet" href="/static/shared/css/layout.css"> | |
| <!-- NEW Cursor Design System (Add) --> | |
| <link rel="stylesheet" href="/static/shared/css/design-system-cursor.css"> | |
| <link rel="stylesheet" href="/static/shared/css/layout-cursor.css"> | |
| <link rel="stylesheet" href="/static/shared/css/components-cursor.css"> | |
| <link rel="stylesheet" href="/static/shared/css/animations-cursor.css"> | |
| ``` | |
| Change theme to dark: | |
| ```html | |
| <html lang="en" data-theme="dark"> | |
| ``` | |
| --- | |
| ## 📦 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 | |
| <!-- Primary Button (Purple Gradient) --> | |
| <button class="btn btn-primary">Primary Action</button> | |
| <!-- Secondary Button (Flat) --> | |
| <button class="btn btn-secondary">Secondary Action</button> | |
| <!-- Ghost Button --> | |
| <button class="btn btn-ghost">Cancel</button> | |
| <!-- Sizes --> | |
| <button class="btn btn-primary btn-sm">Small</button> | |
| <button class="btn btn-primary">Default</button> | |
| <button class="btn btn-primary btn-lg">Large</button> | |
| <!-- Icon Button --> | |
| <button class="btn btn-icon btn-primary"> | |
| <svg width="20" height="20">...</svg> | |
| </button> | |
| ``` | |
| ### Cards | |
| ```html | |
| <!-- Basic Card --> | |
| <div class="card"> | |
| <h3>Card Title</h3> | |
| <p>Card content goes here.</p> | |
| </div> | |
| <!-- Card with Header --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Title</h3> | |
| <button class="btn btn-ghost btn-sm">Action</button> | |
| </div> | |
| <div class="card-body"> | |
| Content... | |
| </div> | |
| <div class="card-footer"> | |
| <button class="btn btn-secondary">Cancel</button> | |
| <button class="btn btn-primary">Save</button> | |
| </div> | |
| </div> | |
| <!-- Stat Card --> | |
| <div class="stat-card"> | |
| <div class="stat-icon"> | |
| <svg>...</svg> | |
| </div> | |
| <div class="stat-value">$12,345</div> | |
| <div class="stat-label">Total Volume</div> | |
| <div class="stat-change positive">↑ +12.5%</div> | |
| </div> | |
| ``` | |
| ### Forms | |
| ```html | |
| <div class="input-group"> | |
| <label class="input-label">Email Address</label> | |
| <input type="email" class="input" placeholder="[email protected]" /> | |
| <span class="input-hint">We'll never share your email.</span> | |
| </div> | |
| <select class="select"> | |
| <option>Choose an option</option> | |
| <option>Option 1</option> | |
| </select> | |
| <textarea class="textarea" placeholder="Enter message..."></textarea> | |
| ``` | |
| ### Tables | |
| ```html | |
| <div class="table-container"> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Price</th> | |
| <th class="text-right">Change</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Bitcoin</td> | |
| <td>$45,123</td> | |
| <td class="text-right" style="color: var(--color-success);">+5.2%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| ``` | |
| ### Badges | |
| ```html | |
| <span class="badge badge-primary">Primary</span> | |
| <span class="badge badge-success pill">Success</span> | |
| <span class="badge badge-warning pill">Warning</span> | |
| ``` | |
| ### Alerts | |
| ```html | |
| <div class="alert alert-info"> | |
| <svg class="alert-icon" width="20" height="20">...</svg> | |
| <div class="alert-content"> | |
| <div class="alert-title">Information</div> | |
| <div class="alert-message">This is an informational message.</div> | |
| </div> | |
| </div> | |
| ``` | |
| --- | |
| ## ✨ Animations | |
| ### Entrance Animations | |
| ```html | |
| <!-- Fade In --> | |
| <div class="animate-fade-in">Content</div> | |
| <!-- Fade In Up --> | |
| <div class="animate-fade-in-up">Content</div> | |
| <!-- Stagger Children --> | |
| <div class="stagger-fade-in"> | |
| <div>Item 1 (0ms delay)</div> | |
| <div>Item 2 (50ms delay)</div> | |
| <div>Item 3 (100ms delay)</div> | |
| </div> | |
| ``` | |
| ### Hover Effects | |
| ```html | |
| <!-- Lift 2px on Hover --> | |
| <div class="card hover-lift">Hover me</div> | |
| <!-- Scale to 102% on Hover --> | |
| <div class="card hover-scale">Hover me</div> | |
| <!-- Purple Glow on Hover --> | |
| <div class="card hover-glow">Hover me</div> | |
| ``` | |
| ### Loading States | |
| ```html | |
| <!-- Spinner --> | |
| <div class="spinner"></div> | |
| <div class="spinner spinner-lg"></div> | |
| <!-- Dots Loader --> | |
| <div class="dots-loader"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <!-- Skeleton --> | |
| <div class="skeleton skeleton-text" style="width: 200px;"></div> | |
| ``` | |
| --- | |
| ## 📱 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 | |
| <!-- Correct Order --> | |
| <link rel="stylesheet" href="...design-system-cursor.css"> | |
| <link rel="stylesheet" href="...layout-cursor.css"> | |
| <link rel="stylesheet" href="...components-cursor.css"> | |
| <link rel="stylesheet" href="...animations-cursor.css"> | |
| ``` | |
| ### 2. Use CSS Variables | |
| ```css | |
| /* Good ✅ */ | |
| padding: var(--space-4); | |
| color: var(--text-secondary); | |
| /* Avoid ❌ */ | |
| padding: 16px; | |
| color: #A0A0A0; | |
| ``` | |
| ### 3. Use Component Classes | |
| ```html | |
| <!-- Good ✅ --> | |
| <button class="btn btn-primary">Click me</button> | |
| <!-- Avoid ❌ --> | |
| <button style="background: purple; padding: 10px;">Click me</button> | |
| ``` | |
| ### 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 | |