Velvet Neon Screenshot Gallery

/velvetNeonScreenshotGallery
A premium dark UI system where product visuals glow as centerpieces atop vibrant gradients, set against velvety-black canvases with sculptural typography, breathing room, and gallery-inspired minimalism.
Jul 24, 2026
Design System Content
# Velvet Neon Screenshot Gallery

A design language for premium, dark-themed product presentation interfaces.

---

## Philosophy

> "The canvas must be quiet for the art to speak."

This system creates interfaces that feel like a high-end, contemporary digital art gallery. The surrounding UI is intentionally subdued, treating product screenshots and mockups as luminous, glowing centerpieces against a rich, velvet-dark backdrop. The design relies on centering, spaciousness, and deliberate atmospheric contrast rather than cluttered UI elements.

### Core Beliefs

1. **The Product is the Light Source** — The interface itself remains dark and recessive. All vibrancy and color saturation emanate from the product screenshots, which sit on glowing gradient plinths.
2. **Sculptural Typography** — Headings are polished and commanding, utilizing semi-bold weights to anchor the floating dark sections. 
3. **Centered and Stately** — Layouts prioritize a mobile-first, centered rhythm that guides the eye straight down the page with effortless momentum.
4. **Subdued Affordances** — Buttons and interactive elements do not scream for attention with primary colors. They use sophisticated, deep monochrome hues (aubergines and cherries) to invite confident interaction.
5. **Breathing Room** — Bento grids and alternating rows must feel overwhelmingly spacious. Cramped elements destroy the gallery illusion.

### Strict Rules

* **No Bright UI Containers** — Backgrounds remain strictly in the velvet black to blue-black spectrum. 
* **Pill-Shaped CTAs Only** — All primary action buttons must be fully rounded (`rounded-full`). No harsh corners on interactive touchpoints.
* **Headings are Semibold** — Never use black, ultra-bold, or light weights for headings. Inter or Neue Haas Grotesk in Semibold is the mandatory standard.
* **Gradients are for Plinths, Not Backgrounds** — Vibrant gradients are strictly reserved for the atmospheric glows behind screenshots and mockups. The base page background remains solid and quiet.

---

## Color Palette

### The Velvet & Neon Scale

The palette relies on profound, rich darks to absorb light, warm whites for stark legibility, and deeply saturated, muted dark-jewel tones for interactions.

```css
/* Backgrounds (Deepest to Lightest) */
bg-velvet-950         /* Main canvas background, absolute foundation (#0a0a0c) */
bg-blueblack-900      /* Secondary wrapping sections, alternating row bases (#0d1117) */
bg-raisin-800         /* Spacious bento card containers, FAQ backgrounds (#1c1a20) */
bg-raisin-700         /* Subtle card hover states, active input backgrounds */
bg-violet-900/40      /* Smoked violet overlays, subtle glowing atmospheric borders */

/* Borders */
border-white/5        /* Ultra-subtle divider lines for minimalist FAQs */
border-raisin-700     /* Default structural card boundaries */
border-violet-500/20  /* Hover states for interactive bento cards */

/* Typography */
text-warmwhite        /* Primary text, hero headlines, active nav (#fdfbf7) */
text-softgray         /* Body copy, paragraph text, secondary labels (#a1a1aa) */
text-softgray/50      /* Muted metadata, footer links, disabled states */

/* Monochrome CTAs (Fully Rounded Buttons) */
bg-aubergine-900      /* Deep Aubergine CTA (#2b1b38) */
bg-cherry-950         /* Black Cherry CTA (#311019) */
bg-graphite-800       /* Graphite CTA for secondary actions (#27272a) */

/* The Gallery Plinth (Reserved for Screenshot Backdrops Only) */
bg-gradient-to-tr from-fuchsia-600 via-violet-600 to-cyan-500 /* Vibrant Neon glow */
```

### Destructive Actions

```css
hover:bg-red-950/50
hover:text-red-400
hover:border-red-900/30
```

---

## Typography

A strict dual-font system. Inter (or Neue Haas Grotesk) handles structural headers with structural precision, while DM Sans provides warm, highly readable paragraph text.

### Font Families

```css
font-sans          /* Inter or Neue Haas Grotesk — exclusively for headings and nav */
font-body          /* DM Sans — exclusively for paragraphs and secondary copy */
```

### Font Size & Weight Scale

```css
/* Body & Nav (DM Sans) */
text-xs font-medium      /* Small nav labels, footer links (12px) */
text-[17px] font-normal  /* Core paragraph text, FAQ answers, bento descriptions */

/* Headings (Inter / Neue Haas Grotesk) */
text-xl font-semibold    /* Bento card titles, subsection headers (20px) */
text-[32px] md:text-[38px] font-semibold /* Section headings, alternating row titles */
text-4xl font-semibold   /* Hero headline (mobile & desktop base) */
```

### Letter Spacing & Transforms

```css
tracking-tight     /* Hero headlines and section titles */
tracking-normal    /* 17px body copy for optimal reading rhythm */
tracking-wide      /* Small nav labels */
capitalize         /* Button labels */
```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Inter | 4xl | semibold | warmwhite | tight |
| Section Title | Inter | 32-38px | semibold | warmwhite | tight |
| Body Text | DM Sans | 17px | normal | softgray | normal |
| Nav Labels | Inter | xs | medium | softgray | wide |
| CTA Button | Inter | 17px | semibold | warmwhite | normal |

---

## Animation System

### Core Philosophy: The Slow Illumination

Screenshots do not simply load; they power on. Text fades in gently as if stepping out of the shadows.

### Page Transitions (Fade & Float)

```tsx
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
```

### The Neon Plinth Pulse

The vibrant gradient behind the phone mockup features a slow, breathing opacity shift to mimic a neon tube's ambient glow.

```tsx
animate={{ opacity: [0.6, 0.8, 0.6] }}
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
```

---

## UI Components

### The Gallery Plinth & Phone Mockup

The signature component. A centralized phone mockup resting in front of a heavily blurred, vibrant neon gradient.

```tsx
<div className="relative flex justify-center items-center w-full mt-12">
  {/* Vibrant Gradient Plinth */}
  <div className="absolute w-[280px] h-[500px] bg-gradient-to-tr from-fuchsia-600 via-violet-600 to-cyan-500 blur-[80px] opacity-70" />
  
  {/* Phone Mockup Container */}
  <div className="relative z-10 rounded-[2.5rem] border-[6px] border-velvet-950 shadow-2xl overflow-hidden bg-velvet-950">
    <img src="/app-screenshot.png" alt="Product UI" className="w-[280px] h-auto" />
  </div>
</div>
```

### Spacious Bento Cards

Used for features. Massive internal padding, resting on a Raisin Charcoal base.

```tsx
<div className="bg-raisin-800 border border-raisin-700 rounded-3xl p-10 md:p-14 hover:border-violet-500/20 transition-colors duration-500 flex flex-col justify-between">
  <h3 className="text-xl font-semibold text-warmwhite font-sans mb-3">Silent Sync</h3>
  <p className="text-[17px] font-normal text-softgray font-body">
    Data moves in the background without interrupting your flow.
  </p>
</div>
```

### Minimalist FAQs

Stripped of heavy boxes or icons. Relies on simple hairline dividers and smooth expansions.

```tsx
<div className="border-b border-white/5 py-6">
  <button className="w-full flex justify-between items-center text-left">
    <span className="text-[17px] text-warmwhite font-semibold font-sans">How is data encrypted?</span>
    <span className="text-softgray text-xl transition-transform duration-300 group-open:rotate-45">+</span>
  </button>
  <div className="pt-4 text-[17px] text-softgray font-body">
    All payloads are secured with AES-256 before leaving the device.
  </div>
</div>
```

---

## Component Catalog

### Buttons & CTAs

Strictly pill-shaped, using the deep monochrome palette. 

```tsx
// Primary CTA (Deep Aubergine)
"bg-aubergine-900 text-warmwhite font-sans font-semibold text-[17px] rounded-full px-8 py-4 hover:bg-aubergine-800 transition-colors duration-300"

// Secondary CTA (Graphite)
"bg-graphite-800 text-warmwhite font-sans font-semibold text-[17px] rounded-full px-8 py-4 hover:bg-raisin-700 transition-colors duration-300"
```

### Alternating Feature Rows

Designed for centered, mobile-first reading that expands beautifully on desktop.

```tsx
<section className="flex flex-col md:flex-row md:even:flex-row-reverse items-center gap-12 md:gap-24 py-20">
  <div className="flex-1 text-center md:text-left">
    <h2 className="text-[32px] md:text-[38px] font-semibold text-warmwhite font-sans tracking-tight mb-6">
      Luminous Analytics
    </h2>
    <p className="text-[17px] text-softgray font-body">
      View your performance metrics in a completely new light.
    </p>
  </div>
  <div className="flex-1 flex justify-center">
     {/* Insert Gallery Plinth & Mockup here */}
  </div>
</section>
```

### Small Nav Labels

```tsx
<nav className="flex items-center gap-6">
  <a href="#" className="text-xs font-medium text-softgray font-sans tracking-wide hover:text-warmwhite transition-colors">FEATURES</a>
  <a href="#" className="text-xs font-medium text-softgray font-sans tracking-wide hover:text-warmwhite transition-colors">PRICING</a>
</nav>
```

---

## Quality Checklist

* [ ] Are all headings explicitly set to Inter/Neue Haas Grotesk `semibold`?
* [ ] Is all paragraph text exactly `17px` (`text-[17px]`) using DM Sans?
* [ ] Are all primary and secondary buttons fully rounded (`rounded-full`)?
* [ ] Do buttons use the deep monochrome palette (Aubergine, Cherry, Graphite) rather than bright primary colors?
* [ ] Is the vibrant gradient strictly restricted to the background glow behind product screenshots?
* [ ] Do the bento cards have massive internal padding to maintain the gallery breathing room?
* [ ] Does the hero section follow a centered, mobile-first layout containing a phone mockup directly beneath the text?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Velvet black (`bg-velvet-950`) for the primary structural background.
* High-intensity, multi-color neon gradients placed *only* behind product imagery.
* Alternating layout rows for feature storytelling.
* Subtle, smoked violet borders on hover states.
* Generous, expansive padding within bento cards.

### ✗ Not Allowed

* White or light gray backgrounds for any structural sections.
* `font-bold`, `font-black`, or `font-light` for headings (stick to `semibold`).
* Square or slightly rounded buttons (`rounded-md`, `rounded-lg`). All CTAs must be `rounded-full`.
* Gradients used as text fills, button backgrounds, or full-page backgrounds.
* Harsh, high-contrast borders (e.g., solid white lines). Keep dividers soft (`border-white/5`).
Preview