-
-
-
-
-
-```
-
-**Categories Available**:
-- nature, landscape, mountains, ocean, forest
-- technology, computer, code, workspace
-- people, portrait, business, team
-- food, coffee, restaurant
-- architecture, building, interior
-- travel, city, street
-- abstract, pattern, texture
-
-**Specific Images**:
-```html
-
-
-```
-
-#### Placehold.co
-
-**Simple Placeholders**:
-```html
-
-
-
-
-```
-
-#### Picsum Photos
-
-**Random Photos**:
-```html
-
-
-
-
-
-
-
-
-
-
- Featured
-
-```
-
----
-
-## Font Loading
-
-### Google Fonts (Recommended)
-
-**Loading**:
-```html
-
-
-
-
-
-
-
-
-
-```
-
-**Usage**:
-```css
-body {
- font-family: 'Inter', sans-serif;
-}
-
-code, pre {
- font-family: 'JetBrains Mono', monospace;
-}
-```
-
-**Popular Font Combinations**:
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### Font Loading Strategies
-
-```html
-
-
-
-
-
-
-
-
-```
-
----
-
-## CDN Resources
-
-### CSS Frameworks
-
-```html
-
-
-
-
-
-
-
-
-
-
-```
-
-### JavaScript Libraries
-
-```html
-
-
-
-
-
-
-
-
-```
-
-### Utility Libraries
-
-```html
-
-
-
-
-
-
-```
-
----
-
-## SVG Assets
-
-### Inline SVG
-
-```html
-
-
-
-
-
-```
-
-### SVG Backgrounds
-
-```html
-
-
-```
-
----
-
-## Video Assets
-
-### Placeholder Videos
-
-```html
-
-
-
-
-
-```
-
----
-
-## Asset Organization
-
-### File Structure
-
-```
-design_iterations/
-├── theme_1.css
-├── ui_1.html
-├── ui_1_1.html (iteration)
-├── ui_1_2.html (iteration)
-├── dashboard_1.html
-└── assets/
- ├── images/
- ├── icons/
- └── fonts/
-```
-
-### Naming Conventions
-
-**Design Files**:
-- Initial: `{design_name}_1.html` (e.g., `table_1.html`)
-- Iterations: `{design_name}_1_1.html`, `{design_name}_1_2.html`
-- Theme files: `theme_1.css`, `theme_2.css`
-
-**Asset Files**:
-- Images: `hero-image.jpg`, `product-1.png`
-- Icons: `logo.svg`, `icon-menu.svg`
-- Fonts: `inter-var.woff2`, `jetbrains-mono.woff2`
-
----
-
-## Performance Optimization
-
-### Image Optimization
-
-```html
-
-
-
-
-
-
-```
-
-### Font Optimization
-
-```html
-
-
-
-
-
-```
-
-### CDN Best Practices
-
-```html
-
-
-
-
-
-```
-
----
-
-## Best Practices
-
-### Do's ✅
-
-- Use established placeholder services (Unsplash, placehold.co)
-- Always provide alt text for images
-- Use Lucide as default icon library
-- Load fonts from Google Fonts
-- Use lazy loading for images
-- Provide responsive image srcsets
-- Use semantic SVG with accessible labels
-- Specify CDN versions for stability
-- Optimize images before deployment
-- Use modern image formats (WebP, AVIF)
-
-### Don'ts ❌
-
-- Don't make up image URLs
-- Don't use images without alt text
-- Don't load unnecessary icon libraries
-- Don't use too many font families (2-3 max)
-- Don't skip lazy loading
-- Don't use unoptimized images
-- Don't forget ARIA labels for icon buttons
-- Don't use latest CDN versions in production
-- Don't load fonts synchronously
-- Don't use decorative images in content
-
----
-
-## Accessibility
-
-### Image Accessibility
-
-```html
-
-
-
-
-
-
-
-
-
+ Card content
+
+
+// Button hover
+
+
+// Image hover
+
+ Content
+
+ )
+}
+```
+
+---
+
+## Accessibility
+
+### Color Contrast
+
+- White on `#0a0f0d`: 21:1 (AAA) ✅
+- `slate-300` on `#0a0f0d`: 12.6:1 (AAA) ✅
+- `#80cca5` on `#0a0f0d`: 7.8:1 (AAA) ✅
+
+### Focus States
+
+```tsx
+
+```
+
+### Semantic HTML
+
+```tsx
+
+```
+
+---
+
+## Quick Wins (Instant Premium Feel)
+
+1. Replace all backgrounds with `#0a0f0d`
+2. Use only white and slate-300 for text
+3. Make all CTAs `#80cca5` green
+4. Add backdrop-blur-xl to all cards
+5. Use rounded-2xl for cards, rounded-full for buttons
+6. Add one radial glow to hero section
+7. Increase padding (py-24 for sections, p-8 for cards)
+8. Add hover effects to all interactive elements
+
+---
+
+## Common Mistakes
+
+❌ **DON'T**:
+- Use light backgrounds (`bg-white`, `bg-slate-100`)
+- Use `dark:` variants (this is dark-only)
+- Mix multiple accent colors
+- Use high-opacity glass (`bg-white/50`)
+- Skip backdrop blur on glass elements
+- Use small padding (looks cramped)
+- Forget hover states
+- Ignore mobile layout
+
+✅ **DO**:
+- Stick to the color palette
+- Use consistent spacing (multiples of 4)
+- Add subtle animations
+- Test on mobile first
+- Keep glass opacity low
+- Use radial glows sparingly
+- Maintain high contrast for text
+
+---
+
+## Final Checklist
+
+Before launching, verify:
+
+- [ ] All backgrounds are `#0a0f0d` or `black`
+- [ ] All headings are `text-white`
+- [ ] All body text is `text-slate-300`
+- [ ] All CTAs are `#80cca5` green
+- [ ] All cards have `backdrop-blur-xl`
+- [ ] All cards use `bg-white/[0.02]`
+- [ ] All buttons have hover states
+- [ ] All forms have focus states
+- [ ] Spacing uses multiples of 4
+- [ ] Mobile layout tested
+- [ ] Radial glows are subtle (not overwhelming)
+- [ ] No light mode variants (`dark:`)
+- [ ] Contrast ratios meet WCAG AA minimum
+
+---
+
+**Time to premium**: 30-60 minutes
+**Maintenance**: Easy (4 components, 1 color palette)
+**Scalability**: High (reusable components)
+
+---
+
+## Related Files
+
+- [Colors & Typography](./premium-dark-ui-colors.md)
+- [Components](./premium-dark-ui-components.md)
+- [Layouts](./premium-dark-ui-layouts.md)
+- [Full System Guide](./premium-dark-ui-system.md)
diff --git a/.opencode/context/ui/web/design/guides/premium-dark-ui-colors.md b/.opencode/context/ui/web/design/guides/premium-dark-ui-colors.md
new file mode 100644
index 0000000..f31e5f2
--- /dev/null
+++ b/.opencode/context/ui/web/design/guides/premium-dark-ui-colors.md
@@ -0,0 +1,164 @@
+# Premium Dark UI - Colors & Typography
+
+Quick reference for colors, spacing, and typography in premium dark UI.
+
+---
+
+## Color Palette
+
+```css
+/* Backgrounds */
+--bg-deep-dark: #0a0f0d; /* Main background */
+--bg-black: #000000; /* Alternate sections */
+
+/* Text */
+--text-heading: #ffffff; /* Headings */
+--text-body: #cbd5e1; /* Body (slate-300) */
+--text-muted: #94a3b8; /* Muted (slate-400) */
+
+/* Accent */
+--accent: #80cca5; /* Green - CTAs, links, highlights */
+--accent-hover: #6bb890; /* Hover state */
+
+/* Glass */
+--glass-bg: rgba(255, 255, 255, 0.02);
+--glass-border: rgba(255, 255, 255, 0.1);
+```
+
+**Rule**: Use ONLY these colors. No exceptions.
+
+---
+
+## Spacing System
+
+```css
+/* Use these values ONLY */
+py-4 /* 16px - Small spacing */
+py-8 /* 32px - Medium spacing */
+py-12 /* 48px - Large spacing */
+py-24 /* 96px - Section spacing */
+
+px-4 /* 16px - Mobile padding */
+px-8 /* 32px - Card padding */
+px-12 /* 48px - Large card padding */
+
+gap-4 /* 16px - Small gaps */
+gap-8 /* 32px - Medium gaps */
+gap-12 /* 48px - Large gaps */
+
+mb-4 /* 16px - Small margin bottom */
+mb-6 /* 24px - Medium margin bottom */
+mb-8 /* 32px - Large margin bottom */
+mb-16 /* 64px - Section margin bottom */
+```
+
+**Rule**: Stick to multiples of 4 (4, 8, 12, 16, 24, 32, 48, 64, 96).
+
+---
+
+## Typography Scale
+
+```tsx
+// Page Title (H1)
++ Page Title +
+ +// Section Title (H2) ++ Section Title Accent +
+ +// Subsection (H3) ++ Subsection +
+ +// Body Text ++ Body text goes here +
+ +// Muted Text ++ Secondary information +
+ +// Accent Text ++ Call to action text +
+``` + +--- + +## Buttons & Links + +```tsx +// Primary CTA Button + + +// Secondary Button + + +// Link + + Link Text + +``` + +--- + +## Form Inputs + +```tsx +// Text Input + + +// Label + +``` + +--- + +## Related Files + +- [Components](./premium-dark-ui-components.md) +- [Layouts](./premium-dark-ui-layouts.md) +- [Advanced](./premium-dark-ui-advanced.md) diff --git a/.opencode/context/ui/web/design/guides/premium-dark-ui-components.md b/.opencode/context/ui/web/design/guides/premium-dark-ui-components.md new file mode 100644 index 0000000..02ed6a3 --- /dev/null +++ b/.opencode/context/ui/web/design/guides/premium-dark-ui-components.md @@ -0,0 +1,142 @@ +# Premium Dark UI - Core Components + +The 4 building blocks for premium dark UI. + +--- + +## A. Section Wrapper + +```tsx +// PremiumSection.tsx +export function PremiumSection({ children, withGlow = true }) { + return ( +
+ {children}
+
+
+ {children}
+
+ )
+}
+```
+
+---
+
+## C. Heading
+
+```tsx
+// PremiumHeading.tsx
+export function PremiumHeading({ children, accent, as: Tag = 'h2' }) {
+ return (
+
+
+ Build Production
+
+
++ Your subtitle goes here +
+ +
+
+ Powerful
+
+
+
+ {features.map((feature) => (
+
+
+ ))}
+
++ {feature.title} +
++ {feature.description} +
+
+
+
+
+
+
+
+ Get
+
+
+ + Join thousands of users +
+
+ {/* Items */}
+
+
+// Mobile: Full width, Desktop: Constrained
+
+ {/* Content */}
+
+
+// Mobile: Small text, Desktop: Large text
++ Responsive Heading +
+ +// Mobile: Center, Desktop: Left +
+ {/* Content */}
+
+```
+
+**Breakpoints**:
+- `sm`: 640px (tablets)
+- `md`: 768px (tablets/small laptops)
+- `lg`: 1024px (laptops)
+- `xl`: 1280px (desktops)
+
+---
+
+## Starter Template
+
+```tsx
+export default function Page() {
+ return (
+
+ {/* Hero */}
+
+
+
+ {/* Features */}
+
+
+
+ {/* CTA */}
+
+
+
+ )
+}
+```
+
+---
+
+## Related Files
+
+- [Colors & Typography](./premium-dark-ui-colors.md)
+- [Components](./premium-dark-ui-components.md)
+- [Advanced](./premium-dark-ui-advanced.md)
diff --git a/.opencode/context/ui/web/design/guides/premium-dark-ui-quick-start.md b/.opencode/context/ui/web/design/guides/premium-dark-ui-quick-start.md
deleted file mode 100644
index 1d67a0c..0000000
--- a/.opencode/context/ui/web/design/guides/premium-dark-ui-quick-start.md
+++ /dev/null
@@ -1,638 +0,0 @@
-# Premium Dark UI - Quick Start Guide
-
-**Goal**: Create a sophisticated, modern dark website with glassmorphism and depth.
-
-**Time to implement**: 30-60 minutes
-
----
-
-## 1. COLOR PALETTE (Copy This)
-
-```css
-/* Backgrounds */
---bg-deep-dark: #0a0f0d; /* Main background */
---bg-black: #000000; /* Alternate sections */
-
-/* Text */
---text-heading: #ffffff; /* Headings */
---text-body: #cbd5e1; /* Body (slate-300) */
---text-muted: #94a3b8; /* Muted (slate-400) */
-
-/* Accent */
---accent: #80cca5; /* Green - CTAs, links, highlights */
---accent-hover: #6bb890; /* Hover state */
-
-/* Glass */
---glass-bg: rgba(255, 255, 255, 0.02);
---glass-border: rgba(255, 255, 255, 0.1);
-```
-
-**Rule**: Use ONLY these colors. No exceptions.
-
----
-
-## 2. CORE COMPONENTS (4 Building Blocks)
-
-### A. Section Wrapper
-
-```tsx
-// PremiumSection.tsx
-export function PremiumSection({ children, withGlow = true }) {
- return (
-
+
+ Your
+
+
+ Subtitle here
+ +
+ Amazing
+
+
+
+
+ {/* More cards */}
+
+ Feature 1
+Description
+
+ Get
+
+
+
+
+
- {children}
-
-
- {children}
-
- )
-}
-```
-
-### C. Heading
-
-```tsx
-// PremiumHeading.tsx
-export function PremiumHeading({ children, accent, as: Tag = 'h2' }) {
- return (
- - Page Title -
- -// Section Title (H2) -- Section Title Accent -
- -// Subsection (H3) -- Subsection -
- -// Body Text -- Body text goes here -
- -// Muted Text -- Secondary information -
- -// Accent Text -- Call to action text -
-``` - ---- - -## 5. BUTTONS & LINKS - -```tsx -// Primary CTA Button - - -// Secondary Button - - -// Link - - Link Text - -``` - ---- - -## 6. FORM INPUTS - -```tsx -// Text Input - - -// Textarea - - -// Label - -``` - ---- - -## 7. COMMON LAYOUTS - -### Hero Section - -```tsx -
-
- Build Production
-
-
-- Your subtitle goes here -
- -
-
- Powerful
-
-
-
- {features.map((feature) => (
-
-
- ))}
-
-- {feature.title} -
-- {feature.description} -
-
-
-
-
-
-
-
- Get
-
-
- - Join thousands of users -
-
- Glass content
-
-```
-
----
-
-## 9. RADIAL GLOW USAGE
-
-### When to Use:
-- ✅ Hero sections (large, centered)
-- ✅ Important CTAs (behind forms)
-- ✅ Section breaks (corner glows)
-- ❌ Every section (overwhelming)
-- ❌ Small components (too subtle)
-
-### Sizes:
-- **Small**: 400px (subtle accent)
-- **Medium**: 600px (default)
-- **Large**: 800px (hero sections)
-
-### Positioning:
-```tsx
-// Centered
-
- {/* Items */}
-
-
-// Mobile: Full width, Desktop: Constrained
-
- {/* Content */}
-
-
-// Mobile: Small text, Desktop: Large text
-- Responsive Heading -
- -// Mobile: Center, Desktop: Left -
- {/* Content */}
-
-```
-
-**Breakpoints**:
-- `sm`: 640px (tablets)
-- `md`: 768px (tablets/small laptops)
-- `lg`: 1024px (laptops)
-- `xl`: 1280px (desktops)
-
----
-
-## 11. ANIMATIONS
-
-### Hover Effects
-
-```tsx
-// Card hover
-
- Card content
-
-
-// Button hover
-
-
-// Image hover
-
- Content
-
- )
-}
-```
-
----
-
-## 12. ACCESSIBILITY CHECKLIST
-
-✅ **Color Contrast**:
-- White on `#0a0f0d`: 21:1 (AAA) ✅
-- `slate-300` on `#0a0f0d`: 12.6:1 (AAA) ✅
-- `#80cca5` on `#0a0f0d`: 7.8:1 (AAA) ✅
-
-✅ **Focus States**:
-```tsx
-
-```
-
-✅ **Semantic HTML**:
-```tsx
-
-```
-
-✅ **Alt Text**:
-```tsx
-
- {/* Hero */}
-
-
-
- {/* Features */}
-
-
-
- {/* CTA */}
-
-
-
- )
-}
-```
-
----
-
-## 16. FINAL CHECKLIST
-
-Before launching, verify:
-
-- [ ] All backgrounds are `#0a0f0d` or `black`
-- [ ] All headings are `text-white`
-- [ ] All body text is `text-slate-300`
-- [ ] All CTAs are `#80cca5` green
-- [ ] All cards have `backdrop-blur-xl`
-- [ ] All cards use `bg-white/[0.02]`
-- [ ] All buttons have hover states
-- [ ] All forms have focus states
-- [ ] Spacing uses multiples of 4
-- [ ] Mobile layout tested
-- [ ] Radial glows are subtle (not overwhelming)
-- [ ] No light mode variants (`dark:`)
-- [ ] Contrast ratios meet WCAG AA minimum
-
----
-
-## DONE! 🎉
-
-You now have everything needed to create a premium dark UI.
-
-**Time to premium**: 30-60 minutes
-**Maintenance**: Easy (4 components, 1 color palette)
-**Scalability**: High (reusable components)
-
-**Questions?** Reference the full guide: `.opencode/context/ui/web/design/guides/premium-dark-ui-system.md`
diff --git a/.opencode/context/ui/web/fonts-guide.md b/.opencode/context/ui/web/fonts-guide.md
new file mode 100644
index 0000000..7e5fa3d
--- /dev/null
+++ b/.opencode/context/ui/web/fonts-guide.md
@@ -0,0 +1,118 @@
+
+# Font Loading
+
+**Purpose**: Guidelines for loading and using web fonts
+
+---
+
+## Quick Reference
+
+**Recommended**: Google Fonts with preconnect
+
+```html
+
+
+
+```
+
+---
+
+## Google Fonts (Recommended)
+
+### Basic Loading
+```html
+
+
+
+```
+
+### Multiple Fonts
+```html
+
+```
+
+### CSS Usage
+```css
+body {
+ font-family: 'Inter', sans-serif;
+}
+
+code, pre {
+ font-family: 'JetBrains Mono', monospace;
+}
+```
+
+---
+
+## Popular Font Combinations
+
+### Modern UI
+```html
+
+```
+
+### Professional
+```html
+
+```
+
+### Editorial
+```html
+
+```
+
+### Friendly
+```html
+
+```
+
+---
+
+## Performance Optimization
+
+### Subset Fonts
+```html
+
+
+```
+
+### Preload Critical Fonts
+```html
+
+```
+
+### Self-Hosted Fonts
+```html
+
+```
+
+---
+
+## Best Practices
+
+**Do ✅:**
+- Use `font-display: swap` (included in Google Fonts URL)
+- Preconnect to font servers
+- Limit to 2-3 font families
+- Subset when possible
+- Preload critical fonts
+
+**Don't ❌:**
+- Load too many font weights
+- Use fonts synchronously (blocking)
+- Load fonts you don't need
+
+---
+
+## Related
+
+- `images-guide.md` - Image guidelines
+- `icons-guide.md` - Icon systems
+- `cdn-resources.md` - CDN libraries
diff --git a/.opencode/context/ui/web/icons-guide.md b/.opencode/context/ui/web/icons-guide.md
new file mode 100644
index 0000000..c6fa040
--- /dev/null
+++ b/.opencode/context/ui/web/icons-guide.md
@@ -0,0 +1,144 @@
+
+# Icon Systems
+
+**Purpose**: Guidelines for using icon libraries
+
+---
+
+## Quick Reference
+
+| Library | Loading | Recommended For |
+|---------|---------|-----------------|
+| Lucide | CDN script | Default choice |
+| Heroicons | Inline SVG | Tailwind projects |
+| Font Awesome | CDN CSS | Brand icons |
+
+---
+
+## Lucide Icons (Recommended Default)
+
+### Loading
+```html
+
+
+
+```
+
+### Usage
+```html
+
+
+
+
+
+
+```
+
+### Common Icons
+```
+Navigation: home, menu, x, chevron-down, arrow-left, arrow-right
+User: user, user-plus, users, user-check
+Actions: edit, trash, save, download, upload, share, copy
+Communication: mail, message-circle, phone, send
+Media: image, video, music, file, folder
+UI: search, settings, bell, heart, star, bookmark
+Status: check, x, alert-circle, info, help-circle
+```
+
+---
+
+## Heroicons
+
+### Usage (Inline SVG)
+```html
+
+
+
+
+
+```
+
+---
+
+## Font Awesome
+
+### Loading
+```html
+
+```
+
+### Usage
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+## Accessibility Best Practices
+
+```html
+
+
+
+
+
+
+
+
-
- Your
-
-
- - Subtitle goes here -
- -
-
- Amazing
-
-
-
-
-
-
-
-
-
-
- Feature 1
-Description
-Feature 2
-Description
-Feature 3
-Description
-
-
- Get
-
-
-
-
-
-
+
+ Featured
+
+
+
+
+```
+
+---
+
+## Custom SVG
+
+```html
+
+
+
+
+
+```
+
+---
+
+## Related
+
+- `images-guide.md` - Image guidelines
+- `fonts-guide.md` - Font loading
+- `cdn-resources.md` - CDN libraries
diff --git a/.opencode/context/ui/web/images-guide.md b/.opencode/context/ui/web/images-guide.md
new file mode 100644
index 0000000..925600d
--- /dev/null
+++ b/.opencode/context/ui/web/images-guide.md
@@ -0,0 +1,127 @@
+
+# Image Guidelines
+
+**Purpose**: Guidelines for placeholder and responsive images
+
+---
+
+## Quick Reference
+
+**Rule**: NEVER make up image URLs. Always use known placeholder services.
+
+| Service | Best For | URL Pattern |
+|---------|----------|-------------|
+| Unsplash | Real photos | `source.unsplash.com/random/WxH/?category` |
+| Placehold.co | Simple placeholders | `placehold.co/WxH` |
+| Picsum | Random photos | `picsum.photos/W/H` |
+
+---
+
+## Unsplash (Recommended)
+
+### Random Images
+```html
+
+
+
+```
+
+### Categories
+- nature, landscape, mountains, ocean, forest
+- technology, computer, code, workspace
+- people, portrait, business, team
+- food, coffee, restaurant
+- architecture, building, interior
+- travel, city, street
+- abstract, pattern, texture
+
+### Specific Images
+```html
+
+```
+
+---
+
+## Placehold.co
+
+```html
+
+
+```
+
+---
+
+## Picsum Photos
+
+```html
+
+
+
+
+
+
+
+