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 to start a new page:
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:
<!-- 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 lang="en" data-theme="dark">
📦 What's Included
Core CSS Files (4 files)
design-system-cursor.css - Design Tokens
- Colors (deep dark theme, purple accents)
- Typography (Inter font, refined scale)
- Spacing (4px grid system)
- Shadows, animations, breakpoints
layout-cursor.css - Layout System
- 56px header with breadcrumb & search
- 240px sidebar (collapsible to 60px)
- Responsive mobile breakpoints
components-cursor.css - Components
- Buttons, Cards, Forms, Tables
- Badges, Alerts, Modals, Tooltips
- Progress bars, Skeletons, Dropdowns
animations-cursor.css - Animations
- Fade, slide, scale animations
- Hover effects (lift, glow, scale)
- Loading states (spinners, dots)
Layout Components (2 files)
- header.html - Cursor-style header
- sidebar.html - Icon-first navigation
Updated Pages (3 files)
🎨 Design Tokens
Colors
/* 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
/* 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)
--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
/* 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
<!-- 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
<!-- 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
<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
<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
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success pill">Success</span>
<span class="badge badge-warning pill">Warning</span>
Alerts
<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
<!-- 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
<!-- 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
<!-- 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
<!-- 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
/* Good ✅ */
padding: var(--space-4);
color: var(--text-secondary);
/* Avoid ❌ */
padding: 16px;
color: #A0A0A0;
3. Use Component Classes
<!-- 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 - Detailed integration instructions
- Component Showcase - Visual reference
- Page Template - Quick-start template
🛠️ Customization
Override CSS variables in your page-specific 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"todata-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"
- ✅ Deep dark theme (
#0A0A0A- true black) - ✅ Purple accent (#8B5CF6 - distinctive)
- ✅ 200ms animations (fast, snappy)
- ✅ Flat + subtle depth (shadows for hierarchy)
- ✅ Generous spacing (breathable, not cramped)
- ✅ Hover lift (2px translateY)
- ✅ Inter typography (clean, modern)
- ✅ Icon-first nav (collapsible sidebar)
- ✅ Professional polish (attention to detail)
- ✅ Minimal borders (background colors for separation)
Version: 1.0.0 Last Updated: December 10, 2025 Status: ✅ Production Ready