| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PixelPulse Design System</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
| <style> |
| :root { |
| |
| --color-primary: 159, 122, 234; |
| --color-secondary: 255, 107, 165; |
| --color-accent: 85, 230, 193; |
| --color-dark: 17, 17, 17; |
| --color-darker: 10, 10, 10; |
| --color-light: 245, 245, 247; |
| --color-surface-dark: 30, 30, 32; |
| --color-surface-light: 255, 255, 255; |
| |
| |
| --text-xs: 0.75rem; |
| --text-sm: 0.875rem; |
| --text-base: 1rem; |
| --text-lg: 1.125rem; |
| --text-xl: 1.25rem; |
| --text-2xl: 1.5rem; |
| --text-3xl: 1.875rem; |
| --text-4xl: 2.25rem; |
| --text-5xl: 3rem; |
| --text-6xl: 3.75rem; |
| |
| |
| --space-xxs: 0.125rem; |
| --space-xs: 0.25rem; |
| --space-sm: 0.5rem; |
| --space-md: 1rem; |
| --space-lg: 1.5rem; |
| --space-xl: 2rem; |
| --space-2xl: 3rem; |
| --space-3xl: 4rem; |
| |
| |
| --blur-xs: blur(4px); |
| --blur-sm: blur(8px); |
| --blur-md: blur(16px); |
| --blur-lg: blur(24px); |
| --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); |
| --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); |
| --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.25); |
| --shadow-xl: 0 12px 50px rgba(0, 0, 0, 0.3); |
| |
| |
| --radius-xs: 4px; |
| --radius-sm: 8px; |
| --radius-md: 12px; |
| --radius-lg: 16px; |
| --radius-xl: 24px; |
| --radius-2xl: 32px; |
| --radius-full: 9999px; |
| |
| |
| --transition-fast: 150ms; |
| --transition-normal: 300ms; |
| --transition-slow: 500ms; |
| --ease-default: cubic-bezier(0.4, 0, 0.2, 1); |
| --ease-elastic: cubic-bezier(0.5, 1.25, 0.5, 1); |
| } |
| |
| .vanta-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.15; |
| } |
| |
| .glass-card { |
| backdrop-filter: var(--blur-md); |
| background: rgba(var(--color-surface-dark), 0.6); |
| border-radius: var(--radius-xl); |
| border: 1px solid rgba(var(--color-light), 0.08); |
| box-shadow: var(--shadow-lg); |
| transition: all var(--transition-normal) var(--ease-default); |
| } |
| |
| .glass-card:hover { |
| background: rgba(var(--color-surface-dark), 0.7); |
| border-color: rgba(var(--color-light), 0.12); |
| } |
| |
| body { |
| background-color: rgb(var(--color-dark)); |
| color: rgba(var(--color-light), 0.9); |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; |
| line-height: 1.6; |
| letter-spacing: 0.01em; |
| } |
| |
| .text-glow { |
| text-shadow: 0 0 12px rgba(var(--color-primary), 0.4); |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, |
| rgba(var(--color-primary), 1) 0%, |
| rgba(var(--color-secondary), 1) 100%); |
| border: none; |
| box-shadow: 0 4px 20px rgba(var(--color-primary), 0.3); |
| transition: transform var(--transition-fast) var(--ease-default), |
| box-shadow var(--transition-fast) var(--ease-default), |
| filter var(--transition-fast) var(--ease-default); |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 24px rgba(var(--color-primary), 0.4); |
| filter: brightness(1.05); |
| } |
| |
| .input-field { |
| background: rgba(var(--color-surface-dark), 0.7); |
| border: 1px solid rgba(var(--color-light), 0.1); |
| backdrop-filter: var(--blur-sm); |
| transition: all var(--transition-normal) var(--ease-default); |
| } |
| |
| .input-field:focus { |
| border-color: rgba(var(--color-primary), 0.5); |
| box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.1); |
| } |
| |
| |
| .token-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: var(--space-md); |
| } |
| |
| .token-card { |
| border-radius: var(--radius-md); |
| overflow: hidden; |
| } |
| |
| .token-preview { |
| height: 100px; |
| display: flex; |
| align-items: flex-end; |
| padding: var(--space-md); |
| } |
| |
| .token-info { |
| padding: var(--space-md); |
| background: rgba(var(--color-darker), 0.7); |
| } |
| |
| |
| .color-swatch { |
| width: 100%; |
| height: 80px; |
| border-radius: var(--radius-sm); |
| display: flex; |
| align-items: flex-end; |
| justify-content: space-between; |
| padding: var(--space-sm); |
| transition: transform var(--transition-fast) var(--ease-default); |
| } |
| |
| .color-swatch:hover { |
| transform: scale(1.02); |
| } |
| |
| |
| .typography-sample { |
| display: flex; |
| flex-direction: column; |
| gap: var(--space-xs); |
| padding: var(--space-md); |
| border-radius: var(--radius-md); |
| background: rgba(var(--color-surface-dark), 0.5); |
| margin-bottom: var(--space-md); |
| } |
| |
| |
| .elevation-sample { |
| width: 120px; |
| height: 120px; |
| border-radius: var(--radius-md); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: rgba(var(--color-surface-dark), 0.8); |
| } |
| |
| |
| @media (max-width: 768px) { |
| .token-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| <div id="vanta-bg" class="vanta-bg"></div> |
| |
| <header class="py-6 px-6 md:px-12 sticky top-0 backdrop-filter backdrop-blur-md bg-opacity-80 bg-[rgba(var(--color-darker),0.8)] border-b border-white border-opacity-10 z-50"> |
| <div class="container mx-auto flex justify-between items-center max-w-7xl"> |
| <h1 class="text-2xl font-bold tracking-tight"> |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-500">PixelPulse</span> Design System |
| </h1> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#colors" class="text-base font-medium hover:text-purple-300 transition-all duration-300">Colors</a> |
| <a href="#typography" class="text-base font-medium hover:text-purple-300 transition-all duration-300">Typography</a> |
| <a href="#tokens" class="text-base font-medium hover:text-purple-300 transition-all duration-300">Tokens</a> |
| <a href="#components" class="text-base font-medium hover:text-purple-300 transition-all duration-300">Components</a> |
| <a href="design-tokens.json" class="text-base font-medium hover:text-purple-300 transition-all duration-300">Download Tokens</a> |
| </nav> |
| <button class="md:hidden p-2 rounded-lg bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm"> |
| <i data-feather="menu" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </header> |
|
|
| <main class="container mx-auto px-6 py-12 max-w-7xl"> |
| <section id="overview" class="mb-20"> |
| <div class="glass-card p-8 md:p-12 mb-12"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Design System Foundation</h2> |
| <p class="text-xl opacity-90 max-w-3xl leading-relaxed"> |
| PixelPulse is a comprehensive design system built for creating premium, futuristic interfaces |
| with glassmorphism, depth effects, and micro-interactions. |
| </p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"> |
| <div class="glass-card p-6"> |
| <i data-feather="droplet" class="w-8 h-8 mb-4 text-purple-400"></i> |
| <h3 class="text-xl font-bold mb-2">Color System</h3> |
| <p class="opacity-80">Adaptive palette with semantic tokens for dark/light modes</p> |
| </div> |
| <div class="glass-card p-6"> |
| <i data-feather="type" class="w-8 h-8 mb-4 text-pink-400"></i> |
| <h3 class="text-xl font-bold mb-2">Typography</h3> |
| <p class="opacity-80">Perfectly balanced type scale with responsive sizing</p> |
| </div> |
| <div class="glass-card p-6"> |
| <i data-feather="box" class="w-8 h-8 mb-4 text-accent-400"></i> |
| <h3 class="text-xl font-bold mb-2">Components</h3> |
| <p class="opacity-80">63+ reusable components with variants and states</p> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="colors" class="mb-20"> |
| <h2 class="text-3xl font-bold mb-8 flex items-center"> |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-300 to-pink-400">Color Palette</span> |
| <span class="ml-4 text-sm font-medium px-3 py-1 rounded-full bg-white bg-opacity-10">Core</span> |
| </h2> |
|
|
| <div class="token-grid mb-12"> |
| |
| <div class="token-card glass-card"> |
| <div class="token-preview bg-gradient-to-r from-purple-500 to-pink-500"> |
| <span class="font-medium">Primary Gradient</span> |
| </div> |
| <div class="token-info"> |
| <h4 class="font-bold mb-1">Brand Primary</h4> |
| <p class="text-sm opacity-80">159, 122, 234 to 255, 107, 165</p> |
| <div class="flex mt-2 space-x-1"> |
| <span class="text-xs px-2 py-1 rounded bg-white bg-opacity-10">--color-primary</span> |
| <span class="text-xs px-2 py-1 rounded bg-white bg-opacity-10">--color-secondary</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="token-card glass-card"> |
| <div class="token-preview bg-[#55E6C1]"> |
| <span class="font-medium text-gray-900">Accent</span> |
| </div> |
| <div class="token-info"> |
| <h4 class="font-bold mb-1">Accent</h4> |
| <p class="text-sm opacity-80">85, 230, 193</p> |
| <div class="flex mt-2"> |
| <span class="text-xs px-2 py-1 rounded bg-white bg-opacity-10">--color-accent</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="token-card glass-card"> |
| <div class="token-preview bg-[#111111]"> |
| <span class="font-medium">Base Dark</span> |
| </div> |
| <div class="token-info"> |
| <h4 class="font-bold mb-1">Dark</h4> |
| <p class="text-sm opacity-80">17, 17, 17</p> |
| <div class="flex mt-2 space-x-1"> |
| <span class="text-xs px-2 py-1 rounded bg-white bg-opacity-10">--color-dark</span> |
| <span class="text-xs px-2 py-1 rounded bg-white bg-opacity-10">--color-darker</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="token-card glass-card"> |
| <div class="token-preview bg-[#F5F5F7]"> |
| <span class="font-medium text-gray-900">Light</span> |
| </div> |
| <div class="token-info"> |
| <h4 class="font-bold mb-1">Light</h4> |
| <p class="text-sm opacity-80">245, 245, 247</p> |
| <div class="flex mt-2"> |
| <span class="text-xs px-2 py-1 rounded bg-white bg-opacity-10">--color-light</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <h3 class="text-xl font-bold mb-6">Extended Palette</h3> |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-10 gap-4 mb-12"> |
| |
| <div class="flex flex-col items-center"> |
| <div class="color-swatch bg-purple-900 mb-2"></div> |
| <span class="text-xs">900</span> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="color-swatch bg-purple-800 mb-2"></div> |
| <span class="text-xs">800</span> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="color-swatch bg-purple-700 mb-2"></div> |
| <span class="text-xs">700</span> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="color-swatch bg-purple-600 mb-2"></div> |
| <span class="text-xs">600</span> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="color-swatch bg-purple-500 mb-2"></div> |
| <span class="text-xs">500</span> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="color-swatch bg-purple-400 mb-2"></div> |
| <span class="text-xs">400</span> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="color-swatch bg-purple-300 mb-2"></div> |
| <span class="text-xs">300</span> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="color-swatch bg-purple-200 mb-2"></div> |
| <span class="text-xs">200</span> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="color-swatch bg-purple-100 mb-2"></div> |
| <span class="text-xs">100</span> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="color-swatch bg-purple-50 mb-2"></div> |
| <span class="text-xs">50</span> |
| </div> |
| </div> |
|
|
| <div class="glass-card p-6 mb-12"> |
| <h4 class="font-bold mb-4">Usage Guidelines</h4> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <h5 class="font-medium mb-2">Primary Colors</h5> |
| <p class="text-sm opacity-90 mb-4"> |
| Use the primary gradient for interactive elements like buttons and important CTAs. |
| Reserve solid primary for supporting elements. |
| </p> |
| <div class="flex space-x-4"> |
| <button class="btn-primary px-6 py-3 rounded-full font-medium">Primary Button</button> |
| <button class="px-6 py-3 rounded-full font-medium border border-purple-500 border-opacity-30">Secondary</button> |
| </div> |
| </div> |
| <div> |
| <h5 class="font-medium mb-2">Accent Colors</h5> |
| <p class="text-sm opacity-90 mb-4"> |
| Use accent colors for success states, positive actions, and to draw attention to key information. |
| </p> |
| <div class="flex space-x-4"> |
| <button class="px-6 py-3 rounded-full font-medium bg-[rgba(var(--color-accent),0.9)] text-gray-900">Accent Button</button> |
| <div class="px-4 py-2 rounded-lg bg-[rgba(var(--color-accent),0.1)] border border-[rgba(var(--color-accent),0.3)]"> |
| <span class="text-[rgba(var(--color-accent),0.9)]">Info Alert</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="typography" class="mb-20"> |
| <h2 class="text-3xl font-bold mb-8 flex items-center"> |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-300 to-pink-400">Typography</span> |
| <span class="ml-4 text-sm font-medium px-3 py-1 rounded-full bg-white bg-opacity-10">Core</span> |
| </h2> |
|
|
| <div class="glass-card p-6 mb-8"> |
| <div class="typography-sample"> |
| <h1 class="text-5xl font-bold">Heading 1</h1> |
| <p class="text-sm opacity-80">var(--text-5xl) • 3rem • 48px</p> |
| </div> |
| <div class="typography-sample"> |
| <h2 class="text-4xl font-bold">Heading 2</h2> |
| <p class="text-sm opacity-80">var(--text-4xl) • 2.25rem • 36px</p> |
| </div> |
| <div class="typography-sample"> |
| <h3 class="text-3xl font-bold">Heading 3</h3> |
| <p class="text-sm opacity-80">var(--text-3xl) • 1.875rem • 30px</p> |
| </div> |
| <div class="typography-sample"> |
| <h4 class="text-2xl font-bold">Heading 4</h4> |
| <p class="text-sm opacity-80">var(--text-2xl) • 1.5rem • 24px</p> |
| </div> |
| <div class="typography-sample"> |
| <h5 class="text-xl font-bold">Heading 5</h5> |
| <p class="text-sm opacity-80">var(--text-xl) • 1.25rem • 20px</p> |
| </div> |
| <div class="typography-sample"> |
| <p class="text-lg">Paragraph Large</p> |
| <p class="text-sm opacity-80">var(--text-lg) • 1.125rem • 18px</p> |
| </div> |
| <div class="typography-sample"> |
| <p class="text-base">Paragraph Regular</p> |
| <p class="text-sm opacity-80">var(--text-base) • 1rem • 16px</p> |
| </div> |
| <div class="typography-sample"> |
| <p class="text-sm">Paragraph Small</p> |
| <p class="text-sm opacity-80">var(--text-sm) • 0.875rem • 14px</p> |
| </div> |
| <div class="typography-sample"> |
| <p class="text-xs">Caption</p> |
| <p class="text-sm opacity-80">var(--text-xs) • 0.75rem • 12px</p> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12"> |
| <div class="glass-card p-6"> |
| <h3 class="text-xl font-bold mb-4">Font Family</h3> |
| <p class="text-lg font-medium mb-2">System UI Stack</p> |
| <p class="text-sm opacity-90 mb-4"> |
| -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif |
| </p> |
| <p class="text-sm opacity-80"> |
| Uses the native system font stack for maximum performance and familiarity across platforms. |
| </p> |
| </div> |
| <div class="glass-card p-6"> |
| <h3 class="text-xl font-bold mb-4">Line Height & Spacing</h3> |
| <p class="text-lg font-medium mb-2">1.6 (Body) • 1.2 (Headings)</p> |
| <p class="text-sm opacity-90 mb-4"> |
| Letter-spacing: 0.01em (tight) for headings, normal for body |
| </p> |
| <p class="text-sm opacity-80"> |
| Optimized for readability in both light and dark modes with subtle letter-spacing adjustments. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="tokens" class="mb-20"> |
| <h2 class="text-3xl font-bold mb-8 flex items-center"> |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-300 to-pink-400">Design Tokens</span> |
| <span class="ml-4 text-sm font-medium px-3 py-1 rounded-full bg-white bg-opacity-10">Core</span> |
| </h2> |
|
|
| <div class="mb-12"> |
| <h3 class="text-xl font-bold mb-6">Spacing Scale</h3> |
| <div class="glass-card p-6"> |
| <div class="grid grid-cols-3 md:grid-cols-7 gap-4 mb-6"> |
| <div> |
| <div class="h-12 w-12 bg-purple-500 rounded-md mb-2 flex items-center justify-center">xxs</div> |
| <p class="text-xs text-center">var(--space-xxs)</p> |
| </div> |
| <div> |
| <div class="h-12 w-16 bg-purple-500 rounded-md mb-2 flex items-center justify-center">xs</div> |
| <p class="text-xs text-center">var(--space-xs)</p> |
| </div> |
| <div> |
| <div class="h-12 w-20 bg-purple-500 rounded-md mb-2 flex items-center justify-center">sm</div> |
| <p class="text-xs text-center">var(--space-sm)</p> |
| </div> |
| <div> |
| <div class="h-12 w-24 bg-purple-500 rounded-md mb-2 flex items-center justify-center">md</div> |
| <p class="text-xs text-center">var(--space-md)</p> |
| </div> |
| <div> |
| <div class="h-12 w-28 bg-purple-500 rounded-md mb-2 flex items-center justify-center">lg</div> |
| <p class="text-xs text-center">var(--space-lg)</p> |
| </div> |
| <div> |
| <div class="h-12 w-32 bg-purple-500 rounded-md mb-2 flex items-center justify-center">xl</div> |
| <p class="text-xs text-center">var(--space-xl)</p> |
| </div> |
| <div> |
| <div class="h-12 w-36 bg-purple-500 rounded-md mb-2 flex items-center justify-center">2xl</div> |
| <p class="text-xs text-center">var(--space-2xl)</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mb-12"> |
| <h3 class="text-xl font-bold mb-6">Border Radius</h3> |
| <div class="glass-card p-6"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> |
| <div> |
| <div class="h-20 bg-white bg-opacity-10 rounded-xs mb-2"></div> |
| <p class="text-xs">var(--radius-xs) • 4px</p> |
| </div> |
| <div> |
| <div class="h-20 bg-white bg-opacity-10 rounded-sm mb-2"></div> |
| <p class="text-xs">var(--radius-sm) • 8px</p> |
| </div> |
| <div> |
| <div class="h-20 bg-white bg-opacity-10 rounded-md mb-2"></div> |
| <p class="text-xs">var(--radius-md) • 12px</p> |
| </div> |
| <div> |
| <div class="h-20 bg-white bg-opacity-10 rounded-lg mb-2"></div> |
| <p class="text-xs">var(--radius-lg) • 16px</p> |
| </div> |
| <div> |
| <div class="h-20 bg-white bg-opacity-10 rounded-xl mb-2"></div> |
| <p class="text-xs">var(--radius-xl) • 24px</p> |
| </div> |
| <div> |
| <div class="h-20 bg-white bg-opacity-10 rounded-2xl mb-2"></div> |
| <p class="text-xs">var(--radius-2xl) • 32px</p> |
| </div> |
| <div> |
| <div class="h-20 bg-white bg-opacity-10 rounded-full mb-2"></div> |
| <p class="text-xs">var(--radius-full) • 9999px</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mb-12"> |
| <h3 class="text-xl font-bold mb-6">Elevation & Shadows</h3> |
| <div class="glass-card p-6"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="flex flex-col items-center"> |
| <div class="elevation-sample shadow-xs mb-4"></div> |
| <p class="text-xs">var(--shadow-xs)</p> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="elevation-sample shadow-sm mb-4"></div> |
| <p class="text-xs">var(--shadow-sm)</p> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="elevation-sample shadow-md mb-4"></div> |
| <p class="text-xs">var(--shadow-md)</p> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="elevation-sample shadow-lg mb-4"></div> |
| <p class="text-xs">var(--shadow-lg)</p> |
| </div> |
| <div class="flex flex-col items-center"> |
| <div class="elevation-sample shadow-xl mb-4"></div> |
| <p class="text-xs">var(--shadow-xl)</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mb-12"> |
| <h3 class="text-xl font-bold mb-6">Blur Levels</h3> |
| <div class="glass-card p-6"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> |
| <div class="relative h-32 bg-white bg-opacity-5 rounded-lg"> |
| <div class="absolute inset-0 backdrop-filter blur-xs bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg"></div> |
| <div class="absolute bottom-2 left-2 right-2 p-2 bg-black bg-opacity-30 rounded text-center"> |
| <p class="text-xs">var(--blur-xs)</p> |
| </div> |
| </div> |
| <div class="relative h-32 bg-white bg-opacity-5 rounded-lg"> |
| <div class="absolute inset-0 backdrop-filter blur-sm bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg"></div> |
| <div class="absolute bottom-2 left-2 right-2 p-2 bg-black bg-opacity-30 rounded text-center"> |
| <p class="text-xs">var(--blur-sm)</p> |
| </div> |
| </div> |
| <div class="relative h-32 bg-white bg-opacity-5 rounded-lg"> |
| <div class="absolute inset-0 backdrop-filter blur-md bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg"></div> |
| <div class="absolute bottom-2 left-2 right-2 p-2 bg-black bg-opacity-30 rounded text-center"> |
| <p class="text-xs">var(--blur-md)</p> |
| </div> |
| </div> |
| <div class="relative h-32 bg-white bg-opacity-5 rounded-lg"> |
| <div class="absolute inset-0 backdrop-filter blur-lg bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg"></div> |
| <div class="absolute bottom-2 left-2 right-2 p-2 bg-black bg-opacity-30 rounded text-center"> |
| <p class="text-xs">var(--blur-lg)</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="components" class="mb-20"> |
| <h2 class="text-3xl font-bold mb-8 flex items-center"> |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-300 to-pink-400">Components</span> |
| <span class="ml-4 text-sm font-medium px-3 py-1 rounded-full bg-white bg-opacity-10">Preview</span> |
| </h2> |
|
|
| <div class="glass-card p-6 mb-12"> |
| <h3 class="text-xl font-bold mb-6">Buttons</h3> |
| <div class="flex flex-wrap gap-4 mb-8"> |
| <button class="btn-primary px-6 py-3 rounded-full font-medium">Primary</button> |
| <button class="px-6 py-3 rounded-full font-medium bg-white bg-opacity-10 hover:bg-opacity-20">Secondary</button> |
| <button class="px-6 py-3 rounded-full font-medium border border-white border-opacity-20 hover:border-opacity-40">Outline</button> |
| <button class="px-6 py-3 rounded-full font-medium bg-[rgba(var(--color-accent),0.9)] text-gray-900">Accent</button> |
| <button class="px-6 py-3 rounded-full font-medium bg-white bg-opacity-90 text-gray-900 hover:bg-opacity-100">Light</button> |
| <button class="px-6 py-3 rounded-full font-medium bg-[rgba(var(--color-dark),0.9)] border border-white border-opacity-10">Dark</button> |
| </div> |
|
|
| <h4 class="font-medium mb-4">Button Sizes</h4> |
| <div class="flex flex-wrap items-center gap-4 mb-8"> |
| <button class="btn-primary px-3 py-1 text-sm rounded-full">Small</button> |
| <button class="btn-primary px-4 py-2 rounded-full">Medium</button> |
| <button class="btn-primary px-6 py-3 rounded-full">Large</button> |
| <button class="btn-primary px-8 py-4 text-lg rounded-full">X-Large</button> |
| </div> |
|
|
| <h4 class="font-medium mb-4">Icon Buttons</h4> |
| <div class="flex flex-wrap gap-4"> |
| <button class="btn-primary p-4 rounded-full"> |
| <i data-feather="send" class="w-5 h-5"></i> |
| </button> |
| <button class="p-4 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20"> |
| <i data-feather="heart" class="w-5 h-5"></i> |
| </button> |
| <button class="p-4 rounded-full border border-white border-opacity-20 hover:border-opacity-40"> |
| <i data-feather="share-2" class="w-5 h-5"></i> |
| </button> |
| <button class="p-4 rounded-full bg-[rgba(var(--color-accent),0.9)] text-gray-900"> |
| <i data-feather="plus" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="glass-card p-6 mb-12"> |
| <h3 class="text-xl font-bold mb-6">Cards</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| <div class="glass-card p-6"> |
| <div class="h-40 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg mb-4"></div> |
| <h4 class="text-lg font-bold mb-2">Glass Card</h4> |
| <p class="text-sm opacity-90 mb-4">With subtle blur effect and border</p> |
| <button class="btn-primary px-4 py-2 text-sm rounded-full w-full">Explore</button> |
| </div> |
| <div class="glass-card p-6 border border-white border-opacity-20 hover:border-opacity-40 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 mr-3"></div> |
| <div> |
| <h4 class="font-bold">User Card</h4> |
| <p class="text-xs opacity-80">@username</p> |
| </div> |
| </div> |
| <p class="text-sm opacity-90 mb-4">This is a user profile card with glass effect and hover state.</p> |
| <div class="flex justify-between text-xs opacity-80"> |
| <span>24 Followers</span> |
| <span>12 Posts</span> |
| </div> |
| </div> |
| <div class="glass-card p-6 bg-gradient-to-br from-[rgba(var(--color-primary),0.15)] to-[rgba(var(--color-secondary),0.15)]"> |
| <div class="flex items-start mb-4"> |
| <i data-feather="star" class="w-5 h-5 mr-2 mt-0.5 text-yellow-400"></i> |
| <div> |
| <h4 class="font-bold">Premium Card</h4> |
| <p class="text-xs opacity-90">Exclusive content</p> |
| </div> |
| </div> |
| <p class="text-sm opacity-90 mb-4">Special gradient background with subtle glow effect.</p> |
| <button class="px-4 py-2 text-sm rounded-full w-full bg-[rgba(var(--color-accent),0.9)] text-gray-900">Upgrade</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="glass-card p-6 mb-12"> |
| <h3 class="text-xl font-bold mb-6">Forms & Inputs</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <h4 class="font-medium mb-4">Text Inputs</h4> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium mb-2">Full Name</label> |
| <input type="text" class="input-field w-full rounded-lg py-3 px-4 placeholder-gray-400 focus:outline-none" placeholder="Enter your name"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-2">Email</label> |
| <input type="email" class="input-field w-full rounded-lg py-3 px-4 placeholder-gray-400 focus:outline-none" placeholder="your@email.com"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-2">Password</label> |
| <input type="password" class="input-field w-full rounded-lg py-3 px-4 placeholder-gray-400 focus:outline-none" placeholder="••••••••"> |
| </div> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-medium mb-4">Select & Checkbox</h4> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium mb-2">Country</label> |
| <select class="input-field w-full rounded-lg py-3 px-4 focus:outline-none"> |
| <option>Select country</option> |
| <option>United States</option> |
| <option>Canada</option> |
| <option>United Kingdom</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-2">Preferences</label> |
| <div class="space-y-2"> |
| <label class="flex items-center space-x-2"> |
| <input type="checkbox" class="rounded bg-white bg-opacity-10 border border-white border-opacity-20 text-purple-500 focus:ring-purple-500"> |
| <span class="text-sm">Receive newsletter</span> |
| </label> |
| <label class="flex items-center space-x-2"> |
| <input type="checkbox" class="rounded bg-white bg-opacity-10 border border-white border-opacity-20 text-purple-500 focus:ring-purple-500"> |
| <span class="text-sm">Dark mode preference</span> |
| </label> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <footer class="py-8 px-6 text-center border-t border-white border-opacity-10"> |
| <div class="container mx-auto max-w-7xl"> |
| <p class="text-sm text-gray-400"> |
| © 2023 PixelPulse Design System. All rights reserved. |
| <span class="inline-flex items-center ml-1"> |
| Version 1.0.0 |
| </span> |
| </p> |
| </div> |
| </footer> |
|
|
| <script> |
| feather.replace(); |
| VANTA.NET({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x9f7aea, |
| backgroundColor: 0x111111, |
| points: 12.00, |
| maxDistance: 24.00, |
| spacing: 18.00 |
| }); |
| </script> |
| </body> |
| </html> |
