Spaces:

Really-amin
/

Datasourceforcryptocurrency

Paused

File size: 11,780 Bytes

b190b45

# 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