--- name: curv-design-system description: Apply the complete CURV Tools design system to all visual outputs - dashboards, reports, HTML artifacts, and data visualizations. Includes exact colors from production tools (rgb(3, 12, 27) dark background, rgb(157, 78, 221) purple accent), glassmorphic effects, gradient borders, header/footer templates, and animation patterns used in GL Decoder and SQPR Analyser. --- # CURV Design System - Complete Production Specification ## Core Brand Colors (Exact from Production) **Primary Palette:** ```css --bg-primary: rgb(3, 12, 27); /* Main background - deep space blue */ --bg-header: linear-gradient(180deg, rgb(18, 11, 41) 0%, rgb(13, 18, 41) 40%, rgb(4, 16, 32) 70%, rgb(3, 12, 27) 100%); /* Header gradient */ --bg-panel: linear-gradient(135deg, rgb(18, 11, 41), rgb(13, 18, 41)); /* Panel gradient */ --accent: rgb(157, 78, 221); /* CURV Purple - primary accent */ --accent-alpha: rgba(157, 78, 221, 0.3); /* Transparent purple */ --accent-border: rgba(157, 78, 221, 0.5); /* Purple borders */ --accent-light: #c084fc; /* Light purple for gradients */ --text-primary: #ffffff; /* Primary text - pure white */ --text-muted: rgba(255, 255, 255, 0.7); /* Secondary text */ --text-secondary: rgba(255, 255, 255, 0.8); /* Subtitle text */ ``` **Supporting Colors (from PDP Analyser):** ```css --curv-primary: #2563eb; /* Blue for primary actions */ --curv-secondary: #64748b; /* Gray for secondary actions */ --curv-success: #10b981; /* Green for success states */ --curv-warning: #f59e0b; /* Orange for warnings */ --curv-error: #ef4444; /* Red for errors */ ``` **Dark Mode Neutrals:** ```css --dark-950: #020617; --dark-900: #0f172a; --dark-800: #1e293b; --dark-700: #334155; --dark-600: #475569; ``` ## Typography System **Font Stack (Production):** ```css font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; ``` **Font Sizes (Production Scale):** ```css --text-xs: 11px; /* Footer credits */ --text-sm: 12px; /* Footer subtitle */ --text-base: 14px; /* Body text, buttons */ --text-md: 16px; /* Subheadings, footer title */ --text-lg: 20px; /* Subtitles */ --text-xl: 24px; /* Section headers */ --text-2xl: 32px; /* Page headers */ --text-3xl: 72px; /* Hero titles (SQPR Analyser style) */ ``` **Font Weights:** ```css --font-normal: 400; /* Body text */ --font-medium: 500; /* Buttons, emphasis */ --font-semibold: 600; /* Headers */ --font-bold: 700; /* Hero titles */ ``` **Letter Spacing:** ```css --tracking-tight: -2px; /* Hero titles */ --tracking-normal: 0; /* Body text */ --tracking-wide: 0.05em; /* Buttons, labels */ --tracking-wider: 0.5px; /* Footer credits */ --tracking-widest: 1px; /* Stage info */ ``` ## Complete HTML Template (Production Standard) ```html [Tool Name] - CURV Tools

Tool Name

Tool description and purpose

Content Section

Your content here

``` ## Component Library ### 1. Hero Header (SQPR Analyser Style) Use for main application headers with high visual impact: ```html

[Tool Name]

[Tool Description]

``` **Features:** - 72px hero title with glow effect - Rotating purple radial gradient background - Glassmorphic effect with backdrop blur - Purple border with 1.5px thickness ### 2. Standard Header (PDP Analyser Style) Use for simpler header layouts: ```html

[Tool Name]

[Brief description]

CURV Tools - [Tool Category]

``` ### 3. Navigation Tabs Production-ready tab system with active states: ```html

``` ### 4. Cards & Panels **Glassmorphic Panel:** ```html

Panel Title

Panel content with blur effect

``` **Standard Card:** ```html

Card Title

Card content

``` **Gradient Border Card:** ```html

Premium Feature

Content with purple gradient border

``` ### 5. Metric Cards Production pattern from SQPR Analyser: ```html

Total Revenue

$125,000

↑ 15% from last month

``` ### 6. Buttons **Primary (Gradient):** ```html ``` **Secondary (Outline):** ```html ``` ### 7. Tables Production table styling: ```html

Column 1	Column 2
Data 1	Data 2

``` ### 8. Footer (Standard Format) ```html ``` ## Effects & Animations ### Purple Glow ```css box-shadow: 0 0 20px rgba(157, 78, 221, 0.4), 0 0 40px rgba(157, 78, 221, 0.2); ``` ### Hover Lift ```css transition: all 300ms ease-in-out; transform: translateY(-4px); box-shadow: 0 12px 40px rgba(157, 78, 221, 0.3); ``` ### Gradient Border ```css background: linear-gradient(rgb(3, 12, 27), rgb(3, 12, 27)) padding-box, linear-gradient(135deg, rgb(157, 78, 221) 0%, #c084fc 100%) border-box; border: 2px solid transparent; ``` ### Fade In ```css animation: fadeIn 500ms ease-in-out; ``` ## Grid Layouts **8-Column Grid (SQPR Style):** ```html

``` **Metric Grid:** ```html

``` ## Usage Rules ### ALWAYS Apply When Creating: - Dashboards and analytics tools - Data visualization interfaces - HTML artifacts for CURV Tools - Reports and presentations - Interactive demos - Admin interfaces ### Color Priorities: 1. **Background:** `rgb(3, 12, 27)` - Always 2. **Accent:** `rgb(157, 78, 221)` - For highlights, CTAs, borders 3. **Text:** `#ffffff` or `rgba(255, 255, 255, 0.7)` - High contrast 4. **Panels:** Glassmorphic or gradient backgrounds 5. **Interactive elements:** Purple glow on hover ### Typography Priorities: 1. System font stack (production standard) 2. 72px for hero titles with letter-spacing: -2px 3. 20px for subtitles 4. 14px for body and buttons 5. UPPERCASE + letter-spacing for labels/badges ### Effect Priorities: 1. Glassmorphic blur on panels 2. Gradient borders for premium features 3. Purple glow on hover states 4. Smooth 300ms transitions 5. Rotate animation for hero backgrounds ## Integration with Existing Skills Works seamlessly with: - **concise-execution-mode** - Build CURV designs efficiently - **mcp-response-optimization** - Token-efficient + on-brand - **curv-mermaid-diagrams** - Consistent diagram styling ## Footer Template (Required for All Tools) ```html ``` ## Success Checklist CURV Design System is correctly applied when outputs have: - ✅ Background: `rgb(3, 12, 27)` - ✅ Accent: `rgb(157, 78, 221)` used for highlights - ✅ Hero header with rotating gradient animation (if applicable) - ✅ Glassmorphic panels with backdrop blur - ✅ Gradient buttons with purple glow - ✅ System font stack - ✅ Proper footer with credits - ✅ 300ms smooth transitions - ✅ Purple border accents: `rgba(157, 78, 221, 0.5)` - ✅ Responsive grid layout