Dark Mode Premium App

A premium dark-themed application landing page with refined shadows, subtle borders, and elegant contrast.

Preview of Dark Mode Premium App
Works with:ClaudeChatGPTv0CursorBolt
dark-modepremiumappmodernsleek

Prompt

Create a premium dark mode application landing page. The design should feel luxurious, refined, and modern — like a high-end fintech or developer tool.


Design Requirements

  • Background: Very dark (#09090b) with slightly lighter cards (#1c1c22)
  • Borders: Subtle 1px borders using rgba(255,255,255, 0.06) — barely visible but adds depth
  • Accents: Single accent color (#8b5cf6) used sparingly for CTAs, active states, and highlights
  • Shadows: No harsh shadows — use subtle dark shadows and inner glows
  • Typography: Inter, #fafafa for main text, gray-400 for secondary text

  • Sections to Include

  • Navbar — Logo, nav links, "Get Started" accent button, subtle bottom border
  • Hero — Bold headline, muted subtext, accent CTA, dark product screenshot with subtle glow behind it
  • Feature Showcase — Alternating left-right sections with screenshots and feature descriptions
  • Integration Grid — Grid of integration logos on dark cards with hover effects
  • Testimonials — Quote cards with subtle borders, company logos
  • Pricing — Dark cards, accent for highlighted plan, toggle for monthly/yearly
  • Footer — Multi-column links, dark on darker background

  • Technical Details

  • Dark color scale: at least 5 shades from near-black to dark-gray
  • Focus states use accent color outline
  • Smooth transitions on all interactive elements (200ms ease)
  • Responsive layout with max-width container
  • Related Prompts