Your Page Title

# Cursor-Inspired UI Integration Guide ## 🎨 Overview This guide explains how to integrate the new Cursor-inspired flat+modern design system into your crypto trading platform pages. --- ## 📦 New CSS Files Created ### Core Design System 1. **`/static/shared/css/design-system-cursor.css`** (Required - Load First) - Design tokens (colors, typography, spacing, shadows) - Base reset and typography - CSS variables for the entire system - Inter font family loading 2. **`/static/shared/css/layout-cursor.css`** (Required) - App container structure - Sidebar navigation (240px, collapsible to 60px) - Header (56px sleek design) - Main content area - Mobile responsive breakpoints 3. **`/static/shared/css/components-cursor.css`** (Required) - Buttons (primary, secondary, ghost, danger, success) - Cards (with hover lift effect) - Forms (inputs, selects, textareas) - Tables (clean, minimal borders) - Badges, pills, alerts - Modals, tooltips, dropdowns - Skeleton loaders, progress bars 4. **`/static/shared/css/animations-cursor.css`** (Optional but Recommended) - Keyframe animations (fade, slide, scale) - Hover effects (lift, scale, glow) - Loading states (spinners, dots) - Page transitions - Scroll reveal animations - Utility animation classes --- ## 🚀 Quick Start - Update Your Pages ### Step 1: Update HTML `` Section Replace your existing CSS imports with the new Cursor design system: ```html Your Page Title - Crypto Monitor ``` ### Step 2: Update HTML Structure Use the new layout structure: ```html

``` ### Step 3: Load Header and Sidebar If using the LayoutManager (recommended): ```javascript import { LayoutManager } from '/static/shared/js/core/layout-manager.js'; // Initialize layout with header and sidebar await LayoutManager.init('yourPageName'); ``` Or manually inject: ```javascript // Load sidebar const sidebarResponse = await fetch('/static/shared/layouts/sidebar.html'); const sidebarHtml = await sidebarResponse.text(); document.getElementById('sidebar-container').innerHTML = sidebarHtml; // Load header const headerResponse = await fetch('/static/shared/layouts/header.html'); const headerHtml = await headerResponse.text(); document.getElementById('header-container').innerHTML = headerHtml; ``` --- ## 🎨 Design System Reference ### Color Palette **Backgrounds:** - `--bg-primary: #0A0A0A` - Deep dark background - `--bg-secondary: #121212` - Secondary background - `--bg-tertiary: #1A1A1A` - Tertiary background **Surfaces (Cards, Panels):** - `--surface-primary: #1E1E1E` - Primary surface - `--surface-secondary: #252525` - Secondary surface - `--surface-tertiary: #2A2A2A` - Tertiary surface **Text:** - `--text-primary: #EFEFEF` - Primary text (high contrast) - `--text-secondary: #A0A0A0` - Secondary text - `--text-tertiary: #666666` - Tertiary text (muted) **Accent Colors:** - `--accent-purple: #8B5CF6` - Primary accent (Cursor-style) - `--accent-purple-gradient: linear-gradient(135deg, #8B5CF6, #6D28D9)` - `--accent-blue: #3B82F6` - Secondary accent - `--color-success: #10B981` - Success green - `--color-warning: #F59E0B` - Warning amber - `--color-danger: #EF4444` - Danger red - `--color-info: #06B6D4` - Info cyan ### Typography **Font Stack:** - Primary: `'Inter', -apple-system, system-ui, sans-serif` - Monospace: `'JetBrains Mono', 'Fira Code', Consolas` **Font Sizes:** ```css --text-xs: 11px /* Labels, captions */ --text-sm: 13px /* Small text */ --text-base: 15px /* Body text (default) */ --text-lg: 17px /* Emphasized */ --text-xl: 20px /* H3 */ --text-2xl: 24px /* H2 */ --text-3xl: 30px /* H1 */ --text-4xl: 36px /* Hero */ ``` **Font Weights:** ```css --weight-normal: 400 --weight-medium: 500 --weight-semibold: 600 --weight-bold: 700 ``` ### Spacing 4px base grid system: ```css --space-1: 4px --space-2: 8px --space-3: 12px --space-4: 16px --space-5: 20px --space-6: 24px /* Standard card padding */ --space-8: 32px --space-12: 48px --space-16: 64px /* Section spacing */ ``` ### Border Radius ```css --radius-sm: 6px /* Subtle */ --radius-md: 8px /* Standard buttons, inputs */ --radius-lg: 12px /* Cards */ --radius-xl: 16px /* Large cards */ --radius-full: 9999px /* Perfect circles */ ``` ### Shadows ```css --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12) /* Subtle */ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1) /* Default */ --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15) /* Elevated */ --shadow-purple: 0 4px 12px rgba(139, 92, 246, 0.3) /* Purple glow */ ``` ### Animations ```css --duration-fast: 150ms /* Quick interactions */ --duration-normal: 200ms /* Default (Cursor-style) */ --duration-medium: 300ms /* Slower transitions */ --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 here...

$12,345

Total Volume

↑ +12.5%

``` ### Form Inputs ```html

Email Address We'll never share your email.

Password Password must be at least 8 characters.

``` ### Tables ```html

Name	Price	24h Change
Bitcoin	$45,123	+5.2%
Ethereum	$2,345	-2.1%

``` ### Badges ```html New Active Pending Error Info Live ``` ### Alerts ```html

Information

This is an informational message.

``` ### Modal ```html ``` --- ## 🎭 Animation Classes ### Entrance Animations ```html

Content fades in

Content slides up and fades in

Content scales in

Item 1 (delay: 0ms)

Item 2 (delay: 50ms)

Item 3 (delay: 100ms)

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

Lifts up 2px on hover

Scales to 102% on hover

Glows with purple shadow on hover

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

``` --- ## 📱 Mobile Responsive The design system is mobile-first and responsive: ### Breakpoints - **Mobile**: < 768px - **Tablet**: 768px - 1024px - **Desktop**: > 1024px ### Automatic Responsive Behavior - **Sidebar**: Slides in as overlay on mobile (<1024px) - **Header Search**: Hidden on mobile (<1024px) - **Cards**: Full-width with reduced padding on mobile - **Tables**: Horizontal scroll on mobile ### Mobile-Specific Classes ```html

Card 1

Card 2

Card 3

``` --- ## ✅ Migration Checklist When updating an existing page: - [ ] Replace CSS imports with new Cursor design system files - [ ] Update `` tag: Add `data-theme="dark"` attribute - [ ] Wrap content in `.app-container` → `.main-content` → `.page-content` - [ ] Replace old button classes with `.btn .btn-primary` etc. - [ ] Replace old card classes with `.card` - [ ] Update form inputs to use `.input`, `.select`, `.textarea` - [ ] Replace old table wrappers with `.table-container .table` - [ ] Add animation classes where appropriate - [ ] Test mobile responsiveness (< 768px) - [ ] Verify sidebar collapse/expand works - [ ] Check theme toggle functionality --- ## 🎯 Best Practices 1. **Always load CSS in order:** ``` design-system-cursor.css → layout-cursor.css → components-cursor.css → animations-cursor.css ``` 2. **Use CSS variables for consistency:** ```css /* Good */ padding: var(--space-4); color: var(--text-secondary); /* Avoid */ padding: 16px; color: #A0A0A0; ``` 3. **Use animation classes instead of custom CSS:** ```html

``` 4. **Follow the 200ms animation standard:** - All transitions should use `--duration-normal: 200ms` - This matches Cursor's snappy feel 5. **Maintain dark theme by default:** - Use `data-theme="dark"` on `` - Support light theme with theme toggle --- ## 🔧 Customization To customize the design system, override CSS variables in your page-specific CSS: ```css /* your-page.css */ :root { /* Change primary accent from purple to blue */ --accent-purple: #3B82F6; --accent-purple-gradient: linear-gradient(135deg, #3B82F6, #1E40AF); /* Adjust spacing */ --space-6: 32px; /* Increase card padding */ /* Custom durations */ --duration-normal: 250ms; /* Slightly slower */ } ``` --- ## 📞 Support For issues or questions: 1. Check the design system CSS files for available classes 2. Review this integration guide 3. Test in both desktop and mobile viewports 4. Verify all CSS files are loaded in correct order --- ## 🚀 Quick Links - [Design System CSS](./shared/css/design-system-cursor.css) - [Layout CSS](./shared/css/layout-cursor.css) - [Components CSS](./shared/css/components-cursor.css) - [Animations CSS](./shared/css/animations-cursor.css) - [Header Layout](./shared/layouts/header.html) - [Sidebar Layout](./shared/layouts/sidebar.html) --- **Last Updated:** 2025-12-10 **Version:** 1.0.0 **Design System:** Cursor-Inspired Flat + Modern

Card Title

Title

Modal Title