Moonlit Gradient App Corridor

/moonlitGradientAppCorridor
A premium, cinematic design system for dark-themed, mobile-first app interfaces. Utilizes deep shadows, luminous gradients as backlighting, and strict typographic and color rules for an immersive, gallery-like experience.
Jul 24, 2026
Design System Content
# Moonlit Gradient App Corridor Design System

A design language for premium, cinematic, dark-themed app launch interfaces.

---

## Philosophy

> "The interface is a quiet theater; the product is the sole performer."

This system creates a digital environment that feels like walking down a calm, dimly lit cinematic corridor toward a brilliantly illuminated gallery piece. The design exudes premium restraint, heavily utilizing a mobile-first narrow structural pacing, deep shadows, and stark glass panels. Vibrancy is strictly controlled—deployed only as dramatic backlighting for product mockups. 

### Core Beliefs

1. **The Mobile-First Stage** — Desktop layouts are narrow, centered, and rhythmically paced downward. We frame the web as an extended canvas for the mobile experience.
2. **Backlit Brilliance** — Gradients (blue, magenta, violet) are strictly reserved as luminous backplates behind screenshots. They are the stage lights; the UI itself remains in the shadows.
3. **Cinematic Contrast** — We combine vast, deep ink navies and midnight graphites with crisp, moon-white typography to create a sense of vast space and premium exclusivity.
4. **Restrained Elegance** — CTAs are not screaming primary colors. They are monochromatic plum-charcoal—confident, grounded, and demanding intent rather than begging for clicks.
5. **Depth through Luminous Geometry** — Thin luminous dividers and soft glass panels create subtle layers in the darkness without muddying the visual field.

### Strict Rules

* **No UI Gradients** — Blue, magenta, and violet gradients are *only* permitted as padded backplates for screenshots and bento staging. Buttons, text, and cards must remain flat or subtly glassy.
* **Narrow Containers Only** — Maximum reading width must mimic a scaled-up mobile view, centering the user's eye and enforcing a vertical storytelling pace.
* **Typographic Separation** — Inter is exclusively for headings to provide crisp, structural authority. Satoshi (or DM Sans) is strictly for supporting text to offer geometric warmth.
* **Rounded Interactivity** — All interactive elements (buttons, inputs) utilize fully rounded (pill) radiuses to contrast with the sharp cinematic framing.
* **Phone Mockup Staging** — The hero section must always resolve downward into a staged, centered phone mockup.

---

## Color Palette

### Monochromatic & Staging Scale

The UI palette is grounded in extreme darks, utilizing subtle color temperature shifts between midnight graphite and ink navy to establish depth.

```css
/* Backgrounds (Darkest to Lightest UI layers) */
bg-midnight-graphite  /* Primary canvas, absolute base (#09090b) */
bg-ink-navy           /* Secondary canvas, subtle cool depth (#0f172a) */
bg-ink-navy/50        /* Soft glass panels, bento card bases (backdrop-blur-md) */
bg-white/5            /* Hover states for secondary interactive elements */
bg-white/10           /* Active states, focused structural panels */

/* Luminous Dividers */
border-white/10       /* Base structural borders */
border-white/20       /* Hovered boundaries, luminous divider peaks */
border-slate-700/50   /* Technical section separators */

/* Call to Action: Monochrome Plum-Charcoal */
bg-plum-charcoal      /* Primary buttons (#2d2633) - dark, muted, confident */
hover:bg-plum-600     /* Subtle lift on hover (#3f3546) */
border-plum-800       /* Focus rings for primary actions */

/* Typography Scale */
text-moon-white       /* Primary headings, high-contrast values (#f8fafc) */
text-silver-mist      /* Body copy, supporting paragraphs (#94a3b8) */
text-slate-400        /* Muted metadata, small nav links */
text-slate-500        /* System hints, disabled text, bottom-tier labels */

```

### The Stage Lights (Backplates Only)

```css
/* Strictly for use behind product screenshots and bento mockups */
bg-gradient-to-br from-blue-500 via-violet-500 to-magenta-500
bg-gradient-to-tr from-cyan-400 via-blue-600 to-violet-600

```

---

## Typography

A strict dual-font system. Inter provides architectural crispness for headings, while Satoshi (or DM Sans) offers a smooth, highly readable texture for body copy.

### Font Families & Weights

```css
font-inter       /* Headings, section titles, hero text (Restrained, structural) */
font-satoshi     /* Body copy, navigation, buttons, metadata (Smooth, legible) */

font-medium      /* Default for Inter headings and Satoshi body copy */
font-semibold    /* Section titles, strong CTAs, navigational emphasis */
font-bold        /* Extremely rare — reserved for specific data highlights */

```

### Strict Font Size Scale

```css
text-xs          /* Small nav typography, footer links (12px) */
text-sm          /* Eyebrow text, secondary actions, timestamp metadata (14px) */
text-[17px]      /* MANDATORY body copy size — perfect for reading against dark backgrounds */
text-xl          /* Subtitles, secondary bento headings (20px) */
text-2xl         /* Highlighted feature stats (24px) */
text-[34px]      /* MANDATORY section titles — confident, restrained */
text-[38px]      /* Alternate Hero Headline (Dense configurations) */
text-[42px]      /* MANDATORY Hero Headline — centered, perfectly balanced */

```

### Hierarchy Examples

| Element | Size | Family | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 42px | Inter | Semibold | text-moon-white | tight |
| Section Titles | 34px | Inter | Semibold | text-moon-white | normal |
| Body Copy | 17px | Satoshi | Medium | text-silver-mist | normal |
| Nav Typography | 12px | Satoshi | Medium | text-slate-400 | wide |
| Primary CTA | 15px | Satoshi | Semibold | text-moon-white | normal |

---

## Animation System

### Core Philosophy: Scroll-Depth Fade-Ins

Elements do not bounce or slide aggressively. They emerge slowly from the midnight graphite background as the user scrolls, echoing lights turning on in a corridor.

### Scroll-Depth Fade-Ins

```tsx
initial={{ opacity: 0, y: 20, scale: 0.98 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}

```

### Luminous Divider Shimmer

Dividers aren't just solid lines; they catch an invisible light that passes over them.

```tsx
<div className="h-[1px] w-full bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-50" />

```

---

## UI Components

### Padded Screenshot Backplate (The Stage)

The only place vibrant color is permitted. The gradient forms a rich, glowing cushion behind a stark, borderless app screenshot.

```tsx
<div className="p-8 rounded-3xl bg-gradient-to-br from-blue-500 via-violet-500 to-magenta-500 shadow-2xl shadow-violet-900/20">
  <img src="/app-mockup.png" className="rounded-xl shadow-lg border border-white/10" alt="App UI" />
</div>

```

### Nature Overlay Full-Bleed Section

Used to break up the technical dark interface. A deep, high-resolution nature image (like dark ocean waves or nighttime mountain ridges) overlaid heavily with midnight graphite.

```tsx
<section className="relative w-full h-[600px]">
  <div className="absolute inset-0 bg-[url('/nature-dark.jpg')] bg-cover bg-center" />
  <div className="absolute inset-0 bg-midnight-graphite/80 backdrop-blur-[2px]" />
  <div className="relative z-10 flex flex-col items-center justify-center h-full">
    {/* Content */}
  </div>
</section>

```

### Soft Glass Panel (Bento/Feature Cards)

Used for alternating feature rows. Extremely subtle, relying on blur and thin borders rather than bright fills.

```tsx
className="bg-ink-navy/40 backdrop-blur-md border border-white/5 rounded-2xl p-8 hover:bg-ink-navy/60 transition-colors duration-500"

```

---

## Component Catalog

### Buttons

Always rounded (pill shape) to contrast the rigid vertical layout of the corridor.

```tsx
// Primary Plum-Charcoal Button
"bg-plum-charcoal text-moon-white font-satoshi font-semibold text-[15px] rounded-full px-6 py-3 hover:bg-plum-600 transition-all shadow-inner shadow-white/5"

// Secondary Ghost Button
"bg-transparent border border-white/10 text-silver-mist font-satoshi text-[15px] rounded-full px-6 py-3 hover:bg-white/5 hover:text-moon-white transition-all"

```

### Layout Elements

```tsx
// Narrow Centered Container (Mobile-First Desktop)
"max-w-2xl mx-auto px-6 w-full flex flex-col items-center text-center"

// Alternating Feature Row (Left Text, Right Image)
"grid grid-cols-1 md:grid-cols-2 gap-12 items-center py-24 max-w-4xl mx-auto"

```

### The Hero Sequence

Must follow a strict vertical stacking order:

```tsx
<header className="flex flex-col items-center pt-32 pb-16 px-6 text-center">
  <h1 className="text-[42px] font-inter font-semibold tracking-tight text-moon-white max-w-xl">
    <!-- Hero Headline -->
  </h1>
  <p className="text-[17px] font-satoshi text-silver-mist mt-6 max-w-md">
    <!-- Body Copy -->
  </p>
  <div className="mt-10">
    <!-- Plum-Charcoal CTA -->
  </div>
  <div className="mt-20 w-full max-w-md relative z-10">
    <!-- Centered Phone Mockup -->
    <img src="/phone-stage.png" className="w-full h-auto drop-shadow-2xl" />
  </div>
</header>
```

---

## Quality Checklist

* [ ] Is the desktop layout strictly using narrow, centered constraints mimicking a mobile-first flow?
* [ ] Is the hero headline exactly 38px or 42px using the `Inter` font?
* [ ] Is the body text exactly 17px using the `Satoshi` (or DM Sans) font?
* [ ] Are bright gradients (blue, magenta, violet) restricted *only* to the padding/background of screenshot backplates?
* [ ] Are all CTAs completely monochromatic (Plum-Charcoal) and fully rounded (pill shape)?
* [ ] Does the hero section definitively end with a staged phone mockup sitting below the text and button?
* [ ] Does the full-bleed nature section use a translucent dark overlay to maintain the midnight graphite aesthetic?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Deep, immersive midnight and ink-navy backgrounds.
* Luminous, fading thin lines for dividers and structural borders.
* Slow, elegant scroll-depth fade-ins for all structural elements.
* Rich, highly saturated gradients *behind* images and mockups to create a backlit glow.
* Alternating zig-zag feature rows within a constrained maximum width.

### ✗ Not Allowed

* Gradients used in text, buttons, or icons.
* Wide, edge-to-edge text blocks or overly horizontal desktop layouts.
* Primary buttons using bright colors (e.g., standard bright blue or neon green).
* Square or slightly-rounded corners on buttons (must be fully rounded/pill).
* Fast, snappy, or bouncy spring animations.
* Flat, unlayered pure black (`#000000`) without glassy textures or ink-navy temperature shifts.
Preview