OpenWriterControle/.opencode/context/ui/web/design/guides/premium-dark-ui-quick-start.md

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)

/* 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

// PremiumSection.tsx
export function PremiumSection({ children, withGlow = true }) {
  return (
    <section className="relative py-24 px-4 bg-[#0a0f0d] overflow-hidden">
      {withGlow && (
        <div 
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] pointer-events-none"
          style={{
            background: 'radial-gradient(circle, rgba(128, 204, 165, 0.15) 0%, transparent 70%)',
            opacity: 0.15
          }}
        />
      )}
      <div className="max-w-7xl mx-auto relative z-10">
        {children}
      </div>
    </section>
  )
}

B. Glass Card

// PremiumCard.tsx
export function PremiumCard({ children, className = "" }) {
  return (
    <div className={`
      p-8 rounded-2xl 
      bg-white/[0.02] 
      border border-white/10 
      backdrop-blur-xl 
      shadow-2xl 
      transition-all duration-300
      hover:bg-white/[0.04] 
      hover:border-[#80cca5]/30
      ${className}
    `}>
      {children}
    </div>
  )
}

C. Heading

// PremiumHeading.tsx
export function PremiumHeading({ children, accent, as: Tag = 'h2' }) {
  return (
    <Tag className="text-3xl md:text-5xl font-bold text-white mb-6">
      {children}
      {accent && <span className="text-[#80cca5]"> {accent}</span>}
    </Tag>
  )
}

D. Radial Glow

// RadialGlow.tsx
export function RadialGlow({ className = "" }) {
  return (
    <div 
      className={`absolute -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] pointer-events-none ${className}`}
      style={{
        background: 'radial-gradient(circle, rgba(128, 204, 165, 0.15) 0%, transparent 70%)',
        opacity: 0.15
      }}
    />
  )
}

---

3. SPACING SYSTEM

/* 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).

---

4. TYPOGRAPHY SCALE

// Page Title (H1)
<h1 className="text-4xl md:text-6xl font-bold text-white mb-8">
  Page Title
</h1>

// Section Title (H2)
<h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
  Section Title <span className="text-[#80cca5]">Accent</span>
</h2>

// Subsection (H3)
<h3 className="text-2xl md:text-4xl font-bold text-white mb-4">
  Subsection
</h3>

// Body Text
<p className="text-lg text-slate-300 mb-4">
  Body text goes here
</p>

// Muted Text
<p className="text-sm text-slate-400">
  Secondary information
</p>

// Accent Text
<p className="text-lg font-semibold text-[#80cca5]">
  Call to action text
</p>

---

5. BUTTONS & LINKS

// Primary CTA Button
<button className="
  px-8 py-4 
  rounded-full 
  bg-[#80cca5] 
  hover:bg-[#6bb890] 
  text-white 
  font-semibold 
  transition-all 
  shadow-lg 
  hover:shadow-xl
">
  Primary Action
</button>

// Secondary Button
<button className="
  px-6 py-3 
  rounded-full 
  bg-white/[0.02] 
  border border-white/10 
  hover:border-[#80cca5]/30 
  text-white 
  font-medium 
  transition-all
">
  Secondary Action
</button>

// Link
<a href="#" className="text-[#80cca5] hover:text-[#6bb890] transition-colors">
  Link Text
</a>

---

6. FORM INPUTS

// Text Input
<input 
  type="text"
  className="
    w-full 
    px-4 py-3 
    rounded-lg 
    border border-[#80cca5]/20 
    bg-slate-900/50 
    text-white 
    placeholder:text-slate-500 
    focus:ring-2 
    focus:ring-[#80cca5] 
    focus:border-transparent
  "
  placeholder="Enter text"
/>

// Textarea
<textarea 
  className="
    w-full 
    px-4 py-3 
    rounded-lg 
    border border-[#80cca5]/20 
    bg-slate-900/50 
    text-white 
    placeholder:text-slate-500 
    focus:ring-2 
    focus:ring-[#80cca5] 
    focus:border-transparent 
    resize-none
  "
  rows={4}
/>

// Label
<label className="text-slate-200 font-medium mb-2 block">
  Field Label
</label>

---

7. COMMON LAYOUTS

Hero Section

<PremiumSection>
  <div className="max-w-4xl mx-auto text-center">
    <PremiumHeading as="h1" accent="AI">
      Build Production
    </PremiumHeading>
    <p className="text-xl text-slate-300 mb-8">
      Your subtitle goes here
    </p>
    <button className="px-8 py-4 rounded-full bg-[#80cca5] hover:bg-[#6bb890] text-white font-semibold transition-all shadow-lg">
      Get Started
    </button>
  </div>
</PremiumSection>

Feature Grid

<PremiumSection>
  <div className="text-center mb-16">
    <PremiumHeading accent="Features">
      Powerful
    </PremiumHeading>
  </div>
  <div className="grid md:grid-cols-3 gap-8">
    {features.map((feature) => (
      <PremiumCard key={feature.id}>
        <Icon className="size-12 text-[#80cca5] mb-4" />
        <h3 className="text-xl font-bold text-white mb-2">
          {feature.title}
        </h3>
        <p className="text-slate-300">
          {feature.description}
        </p>
      </PremiumCard>
    ))}
  </div>
</PremiumSection>

CTA Section

<PremiumSection>
  <div className="max-w-3xl mx-auto">
    <div className="text-center mb-12">
      <PremiumHeading accent="Started">
        Get
      </PremiumHeading>
      <p className="text-xl text-slate-300">
        Join thousands of users
      </p>
    </div>
    <PremiumCard className="p-8 md:p-12">
      <form className="space-y-6">
        <input 
          type="email"
          placeholder="you@example.com"
          className="w-full px-4 py-3 rounded-lg border border-[#80cca5]/20 bg-slate-900/50 text-white placeholder:text-slate-500 focus:ring-2 focus:ring-[#80cca5] focus:border-transparent"
        />
        <button className="w-full px-8 py-4 rounded-full bg-[#80cca5] hover:bg-[#6bb890] text-white font-semibold transition-all">
          Sign Up
        </button>
      </form>
    </PremiumCard>
  </div>
</PremiumSection>

---

8. GLASSMORPHISM RULES

✅ DO:

• Use bg-white/[0.02] for card backgrounds
• Add backdrop-blur-xl for blur effect
• Use border-white/10 for subtle borders
• Keep opacity LOW (0.02 to 0.04)
• Layer multiple glass surfaces

❌ DON'T:

• Use high opacity (breaks glass effect)
• Skip backdrop blur (looks flat)
• Use on light backgrounds (invisible)
• Overuse (reserve for cards/panels)

Example:

<div className="bg-white/[0.02] border border-white/10 backdrop-blur-xl">
  Glass content
</div>

---

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:

// Centered
<RadialGlow className="top-1/2 left-1/2" />

// Top-left
<RadialGlow className="top-0 left-0" />

// Bottom-right
<RadialGlow className="bottom-0 right-0" />

---

10. RESPONSIVE DESIGN

// Mobile: Stack, Desktop: Grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  {/* Items */}
</div>

// Mobile: Full width, Desktop: Constrained
<div className="w-full lg:max-w-4xl mx-auto">
  {/* Content */}
</div>

// Mobile: Small text, Desktop: Large text
<h2 className="text-3xl md:text-5xl">
  Responsive Heading
</h2>

// Mobile: Center, Desktop: Left
<div className="text-center lg:text-left">
  {/* Content */}
</div>

Breakpoints:

• sm: 640px (tablets)
• md: 768px (tablets/small laptops)
• lg: 1024px (laptops)
• xl: 1280px (desktops)

---

11. ANIMATIONS

Hover Effects

// Card hover
<div className="transition-all duration-300 hover:scale-[1.02]">
  Card content
</div>

// Button hover
<button className="transition-colors duration-200 hover:bg-[#6bb890]">
  Button
</button>

// Image hover
<img className="transition-transform duration-700 hover:scale-105" />

Scroll Reveal (Optional)

// Install: npm install react-intersection-observer
import { useInView } from 'react-intersection-observer'

function Component() {
  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.1 })
  
  return (
    <div 
      ref={ref}
      className={`transition-all duration-700 ${
        inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
      }`}
    >
      Content
    </div>
  )
}

---

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:

<button className="focus:ring-2 focus:ring-[#80cca5] focus:outline-none">
  Button
</button>

✅ Semantic HTML:

<nav>
  <ul>
    <li><a href="#">Link</a></li>
  </ul>
</nav>

✅ Alt Text:

<img src="..." alt="Descriptive text" />

---

13. 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

---

14. COMMON MISTAKES TO AVOID

❌ 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

---

15. COPY-PASTE STARTER TEMPLATE

import React from 'react'

// 1. Copy the 4 core components (Section A-D above)
// 2. Use this page structure:
export default function Page() {
  return (
    <div className="min-h-screen bg-[#0a0f0d]">
      {/* Hero */}
      <PremiumSection>
        <div className="max-w-4xl mx-auto text-center">
          <PremiumHeading as="h1" accent="Premium">
            Your
          </PremiumHeading>
          <p className="text-xl text-slate-300 mb-8">
            Subtitle goes here
          </p>
          <button className="px-8 py-4 rounded-full bg-[#80cca5] hover:bg-[#6bb890] text-white font-semibold transition-all shadow-lg">
            Get Started
          </button>
        </div>
      </PremiumSection>

      {/* Features */}
      <PremiumSection>
        <div className="text-center mb-16">
          <PremiumHeading accent="Features">
            Amazing
          </PremiumHeading>
        </div>
        <div className="grid md:grid-cols-3 gap-8">
          <PremiumCard>
            <h3 className="text-xl font-bold text-white mb-2">Feature 1</h3>
            <p className="text-slate-300">Description</p>
          </PremiumCard>
          <PremiumCard>
            <h3 className="text-xl font-bold text-white mb-2">Feature 2</h3>
            <p className="text-slate-300">Description</p>
          </PremiumCard>
          <PremiumCard>
            <h3 className="text-xl font-bold text-white mb-2">Feature 3</h3>
            <p className="text-slate-300">Description</p>
          </PremiumCard>
        </div>
      </PremiumSection>

      {/* CTA */}
      <PremiumSection>
        <div className="max-w-3xl mx-auto text-center">
          <PremiumHeading accent="Started">
            Get
          </PremiumHeading>
          <PremiumCard className="p-8 md:p-12">
            <form className="space-y-6">
              <input 
                type="email"
                placeholder="you@example.com"
                className="w-full px-4 py-3 rounded-lg border border-[#80cca5]/20 bg-slate-900/50 text-white placeholder:text-slate-500 focus:ring-2 focus:ring-[#80cca5] focus:border-transparent"
              />
              <button className="w-full px-8 py-4 rounded-full bg-[#80cca5] hover:bg-[#6bb890] text-white font-semibold transition-all">
                Sign Up
              </button>
            </form>
          </PremiumCard>
        </div>
      </PremiumSection>
    </div>
  )
}

---

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