Download design-system.html from memarzade-dev/pixelpulse-ui-wizardry: direct link, hf CLI and curl.
- Browser
- Download file 38.9 kB
-
https://huggingface.co/spaces/memarzade-dev/pixelpulse-ui-wizardry/resolve/main/design-system.html
- Command line
-
hf download hf://spaces/memarzade-dev/pixelpulse-ui-wizardry/design-system.html
-
curl -L -o design-system.html https://huggingface.co/spaces/memarzade-dev/pixelpulse-ui-wizardry/resolve/main/design-system.html
38.9 kB
| <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 System */ | |
| --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; | |
| /* Typography */ | |
| --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; | |
| /* Spacing */ | |
| --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; | |
| /* Effects */ | |
| --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); | |
| /* Border Radius */ | |
| --radius-xs: 4px; | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-xl: 24px; | |
| --radius-2xl: 32px; | |
| --radius-full: 9999px; | |
| /* Animation */ | |
| --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); | |
| } | |
| /* Design System Grid */ | |
| .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 Swatches */ | |
| .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 Scale */ | |
| .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 Samples */ | |
| .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); | |
| } | |
| /* Responsive Grid */ | |
| @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"> | |
| <!-- Primary Colors --> | |
| <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> | |
| <!-- Accent Color --> | |
| <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> | |
| <!-- Dark Colors --> | |
| <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> | |
| <!-- Light Colors --> | |
| <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"> | |
| <!-- Purple --> | |
| <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> |