Lunar Candy Glass Launch

/lunarCandyGlassLaunch
A cinematic, friendly dark design system featuring deep lunar backgrounds, frosted glass layers, polished UI, and candy-toned gradients—perfect for premium, approachable product launches with rich depth, softness, and modern visual clarity.
Jul 24, 2026
Design System Content
# Lunar Candy Glass Launch Design System

A dramatic, friendly dark design language for polished consumer product launches with cinematic depth, soft glass surfaces, and candy-toned gradient moments.

---

## Philosophy

> "Darkness creates the stage; softness makes it approachable."

Lunar Candy Glass Launch blends lunar-black atmospheres with consumer-friendly polish. It should feel cinematic without becoming severe, futuristic without becoming cold, and premium without becoming sterile. The interface is built around deep space-like backgrounds, frosted glass layers, warm readable typography, and vivid blue-pink-purple gradient product showcases.

### Core Beliefs

1. **Depth first, softness second** — The background should feel expansive and cinematic, while components remain rounded, tactile, and friendly.
2. **The product is the light source** — Phone mockups, screenshots, and UI tiles should appear to glow gently within the dark environment.
3. **Glass creates intimacy** — Frosted navbars, glass cards, translucent panels, and soft borders prevent the interface from feeling flat.
4. **Candy gradients are used as stages, not decoration** — Vibrant blue-pink-purple gradients should frame screenshots and key visuals, never overwhelm text-heavy areas.
5. **Whitespace is luxury** — Large vertical rhythm, centered hero composition, and airy feature rows make the dark aesthetic feel refined.
6. **Monochrome CTAs feel confident** — Buttons use graphite, blackberry, ink plum, and warm white rather than loud saturated colors.
7. **Nature adds scale** — Full-bleed nature photography under a dark veil provides cinematic contrast and emotional depth.

### Strict Rules

* **No pure black surfaces for cards** — Use lunar black and blue-charcoal values with subtle warmth and depth.
* **No neon glow overload** — Glows must be diffused, subtle, and reserved for gradient tiles or product mockups.
* **No sharp corporate rectangles** — Use generous radii across navbars, cards, buttons, mockups, and visual tiles.
* **No colorful text paragraphs** — Body copy remains smoke gray, lavender mist, or warm white.
* **No heavy hard shadows** — Depth comes from layered translucency, soft blur, borders, and atmospheric gradients.
* **No busy hero layouts** — The hero must remain centered, stacked, and spacious.
* **No tiny unreadable body copy** — Descriptions should stay around 17–18px for launch pages.
* **No saturated rainbow palettes** — The system uses restrained lunar neutrals with controlled blue-pink-purple gradients.

---

## Color Palette

### Core Color System

The palette moves from lunar black through blue-charcoal and muted violet into smoke gray, lavender mist, and warm white. Accent moments come from soft candy gradients and dark monochrome CTAs.

```css
:root {
  /* Lunar Base */
  --lunar-black: #07070b;
  --eclipse-black: #0b0b12;
  --blue-charcoal: #111827;
  --deep-charcoal: #15151f;
  --soft-navy-glass: #1a2030;

  /* Violet Depth */
  --ink-plum: #17111f;
  --blackberry: #24162e;
  --muted-violet: #5f4b7a;
  --dusty-amethyst: #7c6898;
  --violet-smoke: #b7a9ca;

  /* Grays & Whites */
  --smoke-gray: #9ca3af;
  --dim-smoke: #6b7280;
  --lavender-mist: #ded7ec;
  --moon-fog: #f0edf7;
  --warm-white: #fffaf2;

  /* Candy Gradient Stops */
  --candy-blue: #4f8cff;
  --candy-pink: #f472b6;
  --candy-purple: #9b5cff;
  --soft-lilac: #c7a8ff;
  --electric-periwinkle: #7aa7ff;

  /* Glass & Borders */
  --glass-white-04: rgba(255, 255, 255, 0.04);
  --glass-white-06: rgba(255, 255, 255, 0.06);
  --glass-white-08: rgba(255, 255, 255, 0.08);
  --glass-white-10: rgba(255, 255, 255, 0.10);
  --glass-white-14: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-strong: rgba(255, 255, 255, 0.20);
}
```

---

## Tailwind-Oriented Color Tokens

### Backgrounds

```css
bg-[#07070b]            /* Lunar black: primary page canvas */
bg-[#0b0b12]            /* Eclipse black: secondary background sections */
bg-[#111827]            /* Blue-charcoal: rich elevated sections */
bg-[#15151f]            /* Deep charcoal: cards and dense panels */
bg-[#17111f]            /* Ink plum: dark CTA and footer surfaces */
bg-[#24162e]            /* Blackberry: CTA hover and active panels */
bg-white/[0.04]         /* Soft glass cards */
bg-white/[0.06]         /* Default glass containers */
bg-white/[0.08]         /* Hover glass fill */
bg-white/[0.10]         /* Active glass fill */
bg-[#fffaf2]            /* Warm white: strongest text and light button fill */
```

### Text

```css
text-[#fffaf2]          /* Primary headings on dark backgrounds */
text-[#f0edf7]          /* Soft headline secondary text */
text-[#ded7ec]          /* Lavender mist: subtitles and emphasized body */
text-[#b7a9ca]          /* Violet smoke: secondary descriptions */
text-[#9ca3af]          /* Smoke gray: body copy and nav labels */
text-[#6b7280]          /* Dim smoke: helper text and metadata */
text-white/90           /* Main readable foreground */
text-white/70           /* Secondary body text */
text-white/50           /* Muted navigation and inactive items */
text-white/35           /* Disabled labels and low-priority metadata */
```

### Borders

```css
border-white/[0.08]     /* Very soft structural boundaries */
border-white/[0.12]     /* Default glass card borders */
border-white/[0.16]     /* Navbar and highlighted panels */
border-white/[0.20]     /* Hover and active state borders */
border-[#5f4b7a]/40     /* Muted violet atmospheric border */
border-[#ded7ec]/20     /* Lavender mist soft divider */
```

### CTA Colors

```css
/* Graphite CTA */
bg-[#1f2028]
hover:bg-[#2a2b35]
text-[#fffaf2]
border-white/[0.12]

/* Blackberry CTA */
bg-[#24162e]
hover:bg-[#321f40]
text-[#fffaf2]
border-[#b7a9ca]/20

/* Ink Plum CTA */
bg-[#17111f]
hover:bg-[#21172d]
text-[#fffaf2]
border-white/[0.14]

/* Warm White CTA */
bg-[#fffaf2]
hover:bg-[#f0edf7]
text-[#07070b]
border-transparent
```

### Gradient Tokens

```css
/* Primary Product Tile Gradient */
bg-[linear-gradient(135deg,#4f8cff_0%,#9b5cff_48%,#f472b6_100%)]

/* Soft Candy Orb */
bg-[radial-gradient(circle_at_35%_30%,rgba(244,114,182,0.55),transparent_35%),radial-gradient(circle_at_70%_65%,rgba(79,140,255,0.45),transparent_40%),#17111f]

/* Hero Atmospheric Glow */
bg-[radial-gradient(circle_at_50%_0%,rgba(155,92,255,0.22),transparent_42%),radial-gradient(circle_at_80%_20%,rgba(244,114,182,0.14),transparent_34%),#07070b]

/* Section Veil */
bg-[linear-gradient(180deg,rgba(7,7,11,0.35)_0%,rgba(7,7,11,0.82)_70%,rgba(7,7,11,1)_100%)]
```

---

## Typography

Lunar Candy Glass Launch uses highly legible modern sans-serif typography with a polished consumer feel. Headings use **Inter Semibold** for clarity and confidence. Body copy uses **DM Sans** or **Satoshi** for softness, openness, and friendly readability.

### Font Families

```css
font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
font-body: "DM Sans", "Satoshi", ui-sans-serif, system-ui, sans-serif;
font-ui: "Inter", "DM Sans", ui-sans-serif, system-ui, sans-serif;
```

### Font Usage Rules

```css
font-semibold     /* Required for headings and hero headline */
font-medium       /* Buttons, nav labels, pills, tabs */
font-normal       /* Body paragraphs, descriptions, helper text */
font-light        /* Optional for oversized decorative numerals only */
font-bold         /* Avoid for most UI; use semibold and scale instead */
```

### Type Scale

```css
text-[11px]       /* Tiny metadata, legal labels, dense product annotations */
text-xs           /* Micro labels, eyebrow text, compact badges */
text-sm           /* Navigation labels, button text, secondary card labels */
text-[15px]       /* Dense UI body, feature card body */
text-base         /* Standard paragraph text and card copy */
text-[17px]       /* Launch descriptions, hero subcopy minimum */
text-lg           /* Hero descriptions and important feature descriptions */
text-xl           /* Small card titles and compact callouts */
text-2xl          /* Mobile section titles, prominent card titles */
text-3xl          /* Section titles on smaller screens */
text-[32px]       /* Standard section title minimum */
text-4xl          /* Centered hero headline target size */
text-[36px]       /* Larger section title target */
text-5xl          /* Large desktop hero headline optional */
```

### Primary Typography Targets

| Element | Size | Weight | Font | Color | Tracking | Line Height |
| --- | --- | --- | --- | --- | --- | --- |
| Hero Headline | `text-4xl` | semibold | Inter | warm white | `tracking-[-0.035em]` | `leading-[1.05]` |
| Hero Description | `text-[17px]`–`text-lg` | normal | DM Sans / Satoshi | violet smoke | normal | `leading-8` |
| Navbar Labels | `text-sm` | medium | Inter | white/60 | normal | `leading-none` |
| Section Titles | `text-[32px]`–`text-[36px]` | semibold | Inter | warm white | `tracking-[-0.03em]` | `leading-[1.08]` |
| Feature Card Title | `text-xl`–`text-2xl` | semibold | Inter | warm white | `tracking-[-0.02em]` | `leading-tight` |
| Body Copy | `text-base`–`text-[17px]` | normal | DM Sans / Satoshi | smoke gray | normal | `leading-7` |
| Button Labels | `text-sm` | medium | Inter | varies | normal | `leading-none` |
| Eyebrow Labels | `text-xs` | medium | Inter | lavender mist/70 | `tracking-[0.16em]` | `leading-none` |

### Letter Spacing

```css
tracking-[-0.04em]      /* Oversized launch headlines */
tracking-[-0.035em]     /* Hero headline */
tracking-[-0.03em]      /* Section titles */
tracking-[-0.02em]      /* Card titles */
tracking-normal         /* Body copy and descriptions */
tracking-wide           /* Compact UI labels */
tracking-[0.16em]       /* Eyebrows and small uppercase indicators */
```

### Line Height

```css
leading-none        /* Buttons, nav labels, pills */
leading-tight       /* Card titles and compact headings */
leading-[1.05]      /* Hero headline */
leading-[1.08]      /* Large section titles */
leading-7           /* Body copy */
leading-8           /* Hero and feature descriptions */
```

---

## Layout System

### Page Structure

The launch page follows a clear vertical story:

1. Frosted rounded navbar
2. Centered hero stack
3. Paired CTAs
4. Phone mockup directly below hero
5. Feature rows alternating copy and UI visuals
6. Glass-card proof or benefits section
7. Full-bleed nature image section under dark veil
8. Final CTA section
9. Minimal dark footer

### Container Widths

```css
max-w-7xl       /* Main page container */
max-w-6xl       /* Feature rows and large product sections */
max-w-5xl       /* Hero phone mockup and large visual modules */
max-w-3xl       /* Hero text stack */
max-w-2xl       /* Section headers and centered descriptions */
max-w-xl        /* Feature copy columns */
```

### Spacing Scale

```css
px-4 sm:px-6 lg:px-8          /* Page horizontal padding */
py-16                         /* Compact mobile sections */
py-20                         /* Standard section spacing */
py-24                         /* Large section spacing */
py-28                         /* Premium launch spacing */
pt-32 sm:pt-40                /* Hero top spacing under navbar */
pb-16 sm:pb-24                /* Hero bottom spacing */
gap-4                         /* Button groups and compact cards */
gap-6                         /* Cards and feature internals */
gap-8                         /* Feature row spacing */
gap-12                        /* Major row separation */
gap-16                        /* Large desktop feature spacing */
```

### Grid Rules

```css
grid-cols-1                   /* Mobile default */
md:grid-cols-2                /* Feature rows and split sections */
lg:grid-cols-3                /* Benefit cards, pricing cards, bento support */
items-center                  /* Required for feature copy/visual rows */
gap-10 lg:gap-16              /* Feature row standard */
```

### Alignment Rules

* Hero content is always centered.
* Feature sections can use left-aligned copy, but each row must feel balanced.
* Phone mockup sits directly beneath the hero CTA group.
* CTA pairs are centered in hero and final CTA sections.
* Gradient screenshot tiles should align visually with copy baselines.
* Do not place floating cards too close to viewport edges.

---

## Background System

### Primary Page Background

Use layered radial gradients over lunar black for cinematic depth.

```tsx
<div className="min-h-screen bg-[#07070b] text-[#fffaf2] relative overflow-hidden">
  <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(155,92,255,0.22),transparent_42%),radial-gradient(circle_at_80%_20%,rgba(244,114,182,0.14),transparent_34%),radial-gradient(circle_at_20%_30%,rgba(79,140,255,0.12),transparent_38%)]" />
</div>
```

### Atmospheric Top Glow

Used behind the hero headline and phone mockup.

```css
absolute left-1/2 top-0 h-[520px] w-[900px] -translate-x-1/2 rounded-full
bg-[radial-gradient(circle,rgba(155,92,255,0.22)_0%,rgba(244,114,182,0.10)_36%,transparent_70%)]
blur-3xl
```

### Section Divider Fade

Used between large dark sections.

```css
h-32 bg-gradient-to-b from-[#07070b] via-[#0b0b12] to-[#07070b]
```

### Subtle Noise Layer

Adds cinematic texture without reducing legibility.

```css
pointer-events-none absolute inset-0 opacity-[0.035] mix-blend-soft-light
bg-[url('/noise.png')]
```

---

## Animation System

### Core Philosophy: Soft Cinematic Reveal

Elements enter with quiet depth: slight vertical movement, blur-to-clear transitions, and gentle opacity fades. Nothing should bounce aggressively or move too fast.

### Page Entry

```tsx
initial={{ opacity: 0, filter: "blur(10px)", y: 16 }}
animate={{ opacity: 1, filter: "blur(0px)", y: 0 }}
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
```

### Hero Stagger

```tsx
const container = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.09,
      delayChildren: 0.08,
    },
  },
};

const item = {
  hidden: { opacity: 0, y: 14, filter: "blur(8px)" },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] },
  },
};
```

### Glass Hover Lift

```tsx
whileHover={{
  y: -4,
  scale: 1.01,
  transition: { duration: 0.22, ease: "easeOut" },
}}
```

### Phone Mockup Float

```tsx
animate={{ y: [0, -8, 0] }}
transition={{
  duration: 6,
  repeat: Infinity,
  ease: "easeInOut",
}}
```

### Gradient Tile Glow Shift

```tsx
animate={{
  backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
}}
transition={{
  duration: 12,
  repeat: Infinity,
  ease: "linear",
}}
```

### Scroll Fade Reveal

```tsx
initial={{ opacity: 0, y: 24, filter: "blur(10px)" }}
whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
viewport={{ once: true, margin: "-120px" }}
transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
```

---

## UI Components

## Frosted Rounded Navbar

A floating glass navbar with rounded-pill geometry. It should sit centered near the top of the viewport and remain compact.

### Structure

```tsx
<nav className="fixed left-1/2 top-4 z-50 w-[calc(100%-2rem)] max-w-5xl -translate-x-1/2">
  <div className="flex h-14 items-center justify-between rounded-full border border-white/[0.12] bg-[#111827]/55 px-4 shadow-[0_18px_60px_rgba(0,0,0,0.28)] backdrop-blur-2xl">
    <a className="flex items-center gap-2 text-sm font-semibold text-[#fffaf2]">
      <span className="h-7 w-7 rounded-full bg-[#fffaf2]" />
      Lunar
    </a>

    <div className="hidden items-center gap-6 md:flex">
      <a className="text-sm font-medium text-white/55 transition-colors hover:text-white/90">Product</a>
      <a className="text-sm font-medium text-white/55 transition-colors hover:text-white/90">Features</a>
      <a className="text-sm font-medium text-white/55 transition-colors hover:text-white/90">Stories</a>
      <a className="text-sm font-medium text-white/55 transition-colors hover:text-white/90">Pricing</a>
    </div>

    <a className="rounded-full bg-[#fffaf2] px-4 py-2 text-sm font-medium text-[#07070b] transition-colors hover:bg-[#f0edf7]">
      Get started
    </a>
  </div>
</nav>
```

### Navbar Rules

* Height should remain between `52px` and `60px`.
* Border radius must be fully pill-shaped.
* Use `backdrop-blur-xl` or `backdrop-blur-2xl`.
* Nav labels should be compact, `text-sm`, and medium weight.
* Avoid large logo locks or oversized nav buttons.
* Mobile navigation can collapse to a pill icon button.

---

## Hero Section

The hero is centered, spacious, and stacked. It creates immediate impact without clutter.

### Layout

```tsx
<section className="relative overflow-hidden px-4 pt-32 pb-16 sm:px-6 sm:pt-40 sm:pb-24 lg:px-8">
  <div className="absolute left-1/2 top-0 h-[520px] w-[900px] -translate-x-1/2 rounded-full bg-[radial-gradient(circle,rgba(155,92,255,0.22)_0%,rgba(244,114,182,0.10)_36%,transparent_70%)] blur-3xl" />

  <div className="relative mx-auto flex max-w-3xl flex-col items-center text-center">
    <div className="mb-6 rounded-full border border-white/[0.12] bg-white/[0.06] px-4 py-2 text-xs font-medium uppercase tracking-[0.16em] text-[#ded7ec]/80 backdrop-blur-xl">
      Lunar Candy Glass Launch
    </div>

    <h1 className="font-heading text-4xl font-semibold leading-[1.05] tracking-[-0.035em] text-[#fffaf2] sm:text-5xl">
      A softer way to launch something powerful.
    </h1>

    <p className="mt-6 max-w-2xl font-body text-[17px] leading-8 text-[#b7a9ca] sm:text-lg">
      Build cinematic product pages with frosted surfaces, polished UI previews, and deep lunar contrast.
    </p>

    <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
      <a className="rounded-full bg-[#fffaf2] px-6 py-3 text-sm font-medium text-[#07070b] shadow-[0_16px_50px_rgba(255,250,242,0.10)] transition-all hover:bg-[#f0edf7]">
        Start building
      </a>
      <a className="rounded-full border border-white/[0.14] bg-[#17111f]/80 px-6 py-3 text-sm font-medium text-[#fffaf2] backdrop-blur-xl transition-all hover:border-white/[0.22] hover:bg-[#24162e]">
        View demo
      </a>
    </div>
  </div>
</section>
```

### Hero Rules

* Headline should sit around `text-4xl` by default.
* Hero description should be `17–18px`.
* Headline must use Inter Semibold.
* Body copy must use DM Sans or Satoshi.
* Hero content must be center-aligned.
* CTA group must be paired and horizontally aligned on desktop.
* Phone mockup must appear directly below the CTA group.
* Avoid placing more than one visual object above the headline.

---

## Paired CTA System

CTAs use monochrome pill styles with graphite, blackberry, ink plum, or warm white. Gradients are not used directly on primary buttons.

### Primary Warm White CTA

```tsx
<a className="inline-flex h-12 items-center justify-center rounded-full bg-[#fffaf2] px-6 text-sm font-medium text-[#07070b] shadow-[0_18px_60px_rgba(255,250,242,0.12)] transition-all hover:bg-[#f0edf7] hover:shadow-[0_22px_70px_rgba(255,250,242,0.16)]">
  Start building
</a>
```

### Graphite CTA

```tsx
<a className="inline-flex h-12 items-center justify-center rounded-full border border-white/[0.12] bg-[#1f2028] px-6 text-sm font-medium text-[#fffaf2] transition-all hover:border-white/[0.20] hover:bg-[#2a2b35]">
  Learn more
</a>
```

### Blackberry CTA

```tsx
<a className="inline-flex h-12 items-center justify-center rounded-full border border-[#b7a9ca]/20 bg-[#24162e] px-6 text-sm font-medium text-[#fffaf2] transition-all hover:bg-[#321f40]">
  View preview
</a>
```

### Ink Plum CTA

```tsx
<a className="inline-flex h-12 items-center justify-center rounded-full border border-white/[0.14] bg-[#17111f] px-6 text-sm font-medium text-[#fffaf2] backdrop-blur-xl transition-all hover:bg-[#21172d]">
  Explore
</a>
```

### CTA Rules

* Use rounded-full buttons.
* Use `text-sm font-medium`.
* Primary pairs should include one warm white CTA and one dark CTA.
* CTAs should be `h-11` to `h-12`.
* Do not use saturated gradient fills for CTA buttons.
* Add only soft shadows; no hard black drop shadows.

---

## Phone Mockup

The phone mockup is the primary product object. It should sit directly below the hero CTA group and appear softly illuminated.

### Phone Mockup Container

```tsx
<div className="relative mx-auto mt-14 max-w-sm sm:max-w-md">
  <div className="absolute inset-0 rounded-[3rem] bg-[linear-gradient(135deg,rgba(79,140,255,0.45),rgba(155,92,255,0.35),rgba(244,114,182,0.35))] blur-3xl" />

  <div className="relative rounded-[3rem] border border-white/[0.18] bg-[#111827] p-3 shadow-[0_40px_120px_rgba(0,0,0,0.55)]">
    <div className="rounded-[2.4rem] border border-white/[0.10] bg-[#07070b] p-2">
      <div className="overflow-hidden rounded-[2rem] bg-[#0b0b12]">
        <img
          src="/app-screen.png"
          alt=""
          className="h-auto w-full"
        />
      </div>
    </div>
  </div>
</div>
```

### Phone Details

```css
rounded-[3rem]                  /* Outer device shell */
rounded-[2.4rem]                /* Inner bezel */
rounded-[2rem]                  /* Screen mask */
border-white/[0.18]             /* Outer edge highlight */
shadow-[0_40px_120px_rgba(0,0,0,0.55)]
```

### Phone Rules

* Must appear beneath hero CTAs.
* Should be centered.
* Should include a soft gradient glow behind it.
* Device shell should use dark charcoal or lunar black.
* Screenshot must be masked with large rounded corners.
* Avoid harsh metallic reflections.
* Avoid tilting the phone more than `3deg`; this aesthetic favors calm polish.

---

## Glass Cards

Glass cards are translucent panels with soft borders and subtle blur. They should feel touchable but not overly glossy.

### Standard Glass Card

```tsx
<div className="rounded-3xl border border-white/[0.12] bg-white/[0.05] p-6 backdrop-blur-xl transition-all duration-300 hover:border-white/[0.20] hover:bg-white/[0.08]">
  <h3 className="font-heading text-xl font-semibold tracking-[-0.02em] text-[#fffaf2]">
    Soft glass surface
  </h3>
  <p className="mt-3 font-body text-base leading-7 text-[#9ca3af]">
    A translucent card for feature summaries, highlights, and launch modules.
  </p>
</div>
```

### Elevated Glass Card

```tsx
<div className="rounded-[2rem] border border-white/[0.14] bg-[#111827]/55 p-8 shadow-[0_24px_80px_rgba(0,0,0,0.32)] backdrop-blur-2xl">
  ...
</div>
```

### Compact Glass Card

```tsx
<div className="rounded-2xl border border-white/[0.10] bg-white/[0.04] p-4 backdrop-blur-xl">
  ...
</div>
```

### Glass Card Rules

* Use `rounded-2xl`, `rounded-3xl`, or `rounded-[2rem]`.
* Use translucent backgrounds from `white/[0.04]` to `white/[0.08]`.
* Borders should stay between `white/[0.10]` and `white/[0.20]`.
* Use `backdrop-blur-xl` or stronger.
* Hover state may increase border visibility and background opacity.
* Do not use flat opaque gray cards unless required for device shells.

---

## Feature Rows

Feature rows alternate copy and UI visuals. Copy and visual modules should feel equally important.

### Standard Feature Row

```tsx
<section className="px-4 py-24 sm:px-6 lg:px-8">
  <div className="mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2 lg:gap-16">
    <div className="max-w-xl">
      <div className="mb-5 inline-flex rounded-full border border-white/[0.12] bg-white/[0.05] px-3 py-1.5 text-xs font-medium uppercase tracking-[0.16em] text-[#ded7ec]/75 backdrop-blur-xl">
        Feature
      </div>

      <h2 className="font-heading text-[32px] font-semibold leading-[1.08] tracking-[-0.03em] text-[#fffaf2] sm:text-[36px]">
        Cinematic visuals with soft consumer polish.
      </h2>

      <p className="mt-5 font-body text-[17px] leading-8 text-[#9ca3af]">
        Pair deep lunar surfaces with vibrant product tiles that keep screenshots readable and visually memorable.
      </p>
    </div>

    <GradientScreenshotTile>
      <img src="/feature-screen.png" alt="" />
    </GradientScreenshotTile>
  </div>
</section>
```

### Alternating Row Direction

```tsx
<div className="mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2 lg:gap-16">
  <div className="order-2 lg:order-1">
    <GradientScreenshotTile />
  </div>

  <div className="order-1 max-w-xl lg:order-2">
    ...
  </div>
</div>
```

### Feature Row Rules

* Alternate copy and visuals from row to row.
* Use `gap-10` minimum, `lg:gap-16` preferred.
* Section titles should be `32–36px`.
* Descriptions should be `17px` where possible.
* Screenshots must sit inside padded rounded gradient tiles.
* Do not place raw screenshots directly on the lunar background.
* Use scroll fade reveals for each row.

---

## Gradient Screenshot Tiles

These are the signature product-display components. Screenshots are padded inside vibrant blue-pink-purple rounded gradient containers.

### Primary Gradient Tile

```tsx
<div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#4f8cff_0%,#9b5cff_48%,#f472b6_100%)] p-3 shadow-[0_30px_100px_rgba(79,140,255,0.20)]">
  <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_15%,rgba(255,255,255,0.35),transparent_28%),radial-gradient(circle_at_85%_80%,rgba(255,255,255,0.20),transparent_32%)]" />

  <div className="relative overflow-hidden rounded-[1.5rem] border border-white/[0.22] bg-[#07070b]/80 shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]">
    <img
      src="/screenshot.png"
      alt=""
      className="w-full"
    />
  </div>
</div>
```

### Large Visual Tile

```tsx
<div className="rounded-[2.5rem] bg-[linear-gradient(135deg,#4f8cff,#9b5cff_50%,#f472b6)] p-4 shadow-[0_40px_120px_rgba(155,92,255,0.25)]">
  <div className="overflow-hidden rounded-[2rem] bg-[#0b0b12]">
    ...
  </div>
</div>
```

### Tile Rules

* Gradient must include blue, purple, and pink.
* Tile padding should be `p-3` or `p-4`.
* Corners must be large: `rounded-[2rem]` or more.
* Screenshots inside should be rounded at least `rounded-[1.5rem]`.
* Add a subtle white overlay or inner highlight for polish.
* Avoid text-heavy gradients behind body copy.
* Do not use gradient borders around every card; reserve for product visuals.

---

## Full-Bleed Nature Image Section

A cinematic full-width nature image appears under a dark veil. It should create contrast and scale without breaking the dark system.

### Structure

```tsx
<section className="relative min-h-[620px] overflow-hidden">
  <img
    src="/nature.jpg"
    alt=""
    className="absolute inset-0 h-full w-full object-cover"
  />

  <div className="absolute inset-0 bg-[#07070b]/55" />
  <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(7,7,11,0.95)_0%,rgba(7,7,11,0.36)_38%,rgba(7,7,11,0.88)_100%)]" />
  <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_40%,rgba(155,92,255,0.16),transparent_45%)]" />

  <div className="relative mx-auto flex min-h-[620px] max-w-4xl flex-col items-center justify-center px-4 text-center sm:px-6 lg:px-8">
    <h2 className="font-heading text-[32px] font-semibold leading-[1.08] tracking-[-0.03em] text-[#fffaf2] sm:text-[36px]">
      Built for moments that need atmosphere.
    </h2>
    <p className="mt-5 max-w-2xl font-body text-[17px] leading-8 text-[#ded7ec]/80">
      A full-bleed visual break that keeps the product world cinematic, calm, and immersive.
    </p>
  </div>
</section>
```

### Nature Section Rules

* Image must be full bleed.
* Use a dark veil with at least `rgba(7,7,11,0.55)`.
* Add top and bottom gradient fades into lunar black.
* Text should remain centered.
* Avoid bright image areas behind text.
* Do not use colorful overlays that obscure the natural scene.
* The section should feel cinematic, not decorative.

---

## Scroll Fade System

Scroll fades soften long sections and prevent abrupt visual endings.

### Top Fade

```tsx
<div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-[#07070b] to-transparent" />
```

### Bottom Fade

```tsx
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-[#07070b] to-transparent" />
```

### Card Basin Fade

```tsx
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-[#111827] via-[#111827]/80 to-transparent" />
```

### Fade Rules

* Use fades at section boundaries, scrollable card lists, and image transitions.
* Fades should use the actual surrounding background color.
* Avoid pure black fades unless the section background is lunar black.
* Do not place fades over essential UI controls.

---

## Component Catalog

## Cards

### Feature Glass Card

```tsx
<div className="rounded-3xl border border-white/[0.12] bg-white/[0.05] p-6 backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 hover:border-white/[0.20] hover:bg-white/[0.08]">
  <div className="mb-5 h-10 w-10 rounded-2xl bg-[#fffaf2]/10 ring-1 ring-white/[0.12]" />
  <h3 className="font-heading text-xl font-semibold tracking-[-0.02em] text-[#fffaf2]">
    Polished launch surfaces
  </h3>
  <p className="mt-3 font-body text-base leading-7 text-[#9ca3af]">
    Soft translucent containers designed for dark consumer product pages.
  </p>
</div>
```

### Bento Glass Card

```tsx
<div className="relative overflow-hidden rounded-[2rem] border border-white/[0.12] bg-[#111827]/50 p-8 shadow-[0_28px_90px_rgba(0,0,0,0.30)] backdrop-blur-2xl">
  <div className="absolute right-0 top-0 h-40 w-40 translate-x-1/3 -translate-y-1/3 rounded-full bg-[#9b5cff]/20 blur-3xl" />
  <div className="relative">
    ...
  </div>
</div>
```

### Stat Card

```tsx
<div className="rounded-3xl border border-white/[0.10] bg-white/[0.04] p-6 backdrop-blur-xl">
  <div className="font-heading text-4xl font-semibold tracking-[-0.04em] text-[#fffaf2]">
    92%
  </div>
  <div className="mt-2 text-sm font-medium text-[#9ca3af]">
    Engagement lift
  </div>
</div>
```

---

## Buttons

### Primary Button

```tsx
"inline-flex h-12 items-center justify-center rounded-full bg-[#fffaf2] px-6 text-sm font-medium text-[#07070b] shadow-[0_18px_60px_rgba(255,250,242,0.12)] transition-all hover:bg-[#f0edf7] hover:shadow-[0_22px_70px_rgba(255,250,242,0.16)]"
```

### Secondary Button

```tsx
"inline-flex h-12 items-center justify-center rounded-full border border-white/[0.14] bg-[#17111f]/80 px-6 text-sm font-medium text-[#fffaf2] backdrop-blur-xl transition-all hover:border-white/[0.22] hover:bg-[#24162e]"
```

### Ghost Glass Button

```tsx
"inline-flex h-11 items-center justify-center rounded-full border border-white/[0.10] bg-white/[0.04] px-5 text-sm font-medium text-white/75 backdrop-blur-xl transition-all hover:border-white/[0.18] hover:bg-white/[0.08] hover:text-white"
```

### Icon Button

```tsx
"inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/[0.12] bg-white/[0.05] text-white/65 backdrop-blur-xl transition-all hover:border-white/[0.20] hover:bg-white/[0.08] hover:text-white"
```

---

## Inputs

### Standard Dark Glass Input

```tsx
<input
  className="h-12 w-full rounded-full border border-white/[0.12] bg-white/[0.05] px-5 font-body text-base text-[#fffaf2] placeholder:text-white/35 backdrop-blur-xl outline-none transition-all focus:border-[#ded7ec]/40 focus:bg-white/[0.08] focus:ring-4 focus:ring-[#9b5cff]/10"
/>
```

### Textarea

```tsx
<textarea
  className="min-h-32 w-full resize-none rounded-3xl border border-white/[0.12] bg-white/[0.05] px-5 py-4 font-body text-base leading-7 text-[#fffaf2] placeholder:text-white/35 backdrop-blur-xl outline-none transition-all focus:border-[#ded7ec]/40 focus:bg-white/[0.08] focus:ring-4 focus:ring-[#9b5cff]/10"
/>
```

### Input Rules

* Inputs should use rounded-full when single-line.
* Textareas should use `rounded-3xl`.
* Placeholder text should be low contrast.
* Focus rings should be violet-tinted and soft.
* Avoid bright blue default browser focus states.

---

## Badges & Pills

### Eyebrow Pill

```tsx
<div className="inline-flex rounded-full border border-white/[0.12] bg-white/[0.05] px-3 py-1.5 text-xs font-medium uppercase tracking-[0.16em] text-[#ded7ec]/75 backdrop-blur-xl">
  New release
</div>
```

### Soft Status Pill

```tsx
<div className="inline-flex items-center rounded-full border border-white/[0.10] bg-white/[0.04] px-3 py-1 text-xs font-medium text-white/65 backdrop-blur-xl">
  Live preview
</div>
```

### Violet Pill

```tsx
<div className="inline-flex items-center rounded-full border border-[#b7a9ca]/20 bg-[#24162e]/70 px-3 py-1 text-xs font-medium text-[#ded7ec] backdrop-blur-xl">
  Glass mode
</div>
```

### Badge Rules

* Use pill geometry.
* Use small text: `text-xs`.
* Uppercase only for eyebrow labels.
* Keep badge backgrounds translucent.
* Avoid bright semantic colors.

---

## Tabs

### Glass Pill Tabs

```tsx
<div className="inline-flex rounded-full border border-white/[0.12] bg-white/[0.05] p-1 backdrop-blur-xl">
  <button className="rounded-full bg-[#fffaf2] px-4 py-2 text-sm font-medium text-[#07070b]">
    Overview
  </button>
  <button className="rounded-full px-4 py-2 text-sm font-medium text-white/55 transition-colors hover:text-white">
    Details
  </button>
  <button className="rounded-full px-4 py-2 text-sm font-medium text-white/55 transition-colors hover:text-white">
    Preview
  </button>
</div>
```

### Tab Rules

* Tabs should sit inside a glass pill container.
* Active state should use warm white or a slightly brighter glass fill.
* Inactive labels should be white/55.
* Use sliding pill animation for active state.
* Avoid underlined tab styles in primary launch pages.

---

## Modal & Overlay System

### Glass Modal

```tsx
<div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07070b]/70 px-4 backdrop-blur-xl">
  <div className="w-full max-w-lg rounded-[2rem] border border-white/[0.14] bg-[#111827]/75 p-6 shadow-[0_40px_140px_rgba(0,0,0,0.60)] backdrop-blur-2xl">
    ...
  </div>
</div>
```

### Modal Rules

* Overlay must blur the background.
* Modal should use `rounded-[2rem]`.
* Use blue-charcoal or deep charcoal glass.
* Border should remain soft.
* Avoid opaque black overlays above `80%`.

---

## Pricing Cards

Pricing cards should be dark, glassy, and spacious. The featured plan may use a candy gradient outer wrapper with an inner dark panel.

### Standard Pricing Card

```tsx
<div className="rounded-[2rem] border border-white/[0.12] bg-white/[0.05] p-7 backdrop-blur-xl">
  <h3 className="font-heading text-xl font-semibold tracking-[-0.02em] text-[#fffaf2]">
    Starter
  </h3>
  <div className="mt-5 flex items-end gap-1">
    <span className="font-heading text-4xl font-semibold tracking-[-0.04em] text-[#fffaf2]">$19</span>
    <span className="pb-1 text-sm text-[#9ca3af]">/mo</span>
  </div>
</div>
```

### Featured Pricing Card

```tsx
<div className="rounded-[2.25rem] bg-[linear-gradient(135deg,#4f8cff,#9b5cff_50%,#f472b6)] p-[1px] shadow-[0_30px_100px_rgba(155,92,255,0.22)]">
  <div className="rounded-[2.2rem] bg-[#111827]/90 p-7 backdrop-blur-2xl">
    ...
  </div>
</div>
```

### Pricing Rules

* Use generous padding: `p-7` or `p-8`.
* Keep plan names `text-xl`.
* Prices can be `text-4xl`.
* Featured pricing uses gradient border, not full gradient body.
* CTA buttons remain monochrome.

---

## Data Visualization

Data visualization should be minimal, rounded, and softly luminous.

### Progress Bar

```tsx
<div className="h-2 overflow-hidden rounded-full bg-white/[0.08]">
  <div className="h-full rounded-full bg-[linear-gradient(90deg,#4f8cff,#9b5cff,#f472b6)]" style={{ width: "72%" }} />
</div>
```

### Mini Chart Line

```tsx
<svg className="h-24 w-full text-[#9b5cff]" viewBox="0 0 320 96">
  <path
    d="M0 70 C45 40 75 54 110 35 C150 12 190 52 225 30 C260 8 285 22 320 10"
    fill="none"
    stroke="currentColor"
    strokeWidth="3"
    strokeLinecap="round"
  />
</svg>
```

### Data Rules

* Use rounded bars and soft gradient fills.
* Avoid dense gridlines.
* Avoid high-saturation semantic chart colors.
* Use lavender and smoke gray for labels.
* Keep data cards glassy and spacious.

---

## Iconography

### Style

```css
stroke-width: 1.75px;
stroke-linecap: round;
stroke-linejoin: round;
```

### Icon Containers

```tsx
<div className="flex h-11 w-11 items-center justify-center rounded-2xl border border-white/[0.12] bg-white/[0.05] text-[#ded7ec] backdrop-blur-xl">
  <Icon className="h-5 w-5" />
</div>
```

### Icon Rules

* Use outline icons.
* Icons should feel soft and precise.
* Use lavender mist or warm white.
* Avoid filled colorful icons.
* Avoid overly technical icon sets with sharp geometry.

---

## Shadows & Depth

Depth should feel atmospheric and cinematic, not heavy or muddy.

### Shadow Tokens

```css
shadow-glass-sm:
0 12px 36px rgba(0, 0, 0, 0.22);

shadow-glass-md:
0 24px 80px rgba(0, 0, 0, 0.32);

shadow-glass-lg:
0 40px 120px rgba(0, 0, 0, 0.50);

shadow-candy-blue:
0 30px 100px rgba(79, 140, 255, 0.20);

shadow-candy-purple:
0 30px 100px rgba(155, 92, 255, 0.24);

shadow-warm-white:
0 18px 60px rgba(255, 250, 242, 0.12);
```

### Depth Rules

* Use large blur radii with low opacity.
* Prefer layered glows behind visual objects.
* Use borders and glass blur for card separation.
* Avoid small harsh shadows under every component.
* Use candy shadows only for product visuals and key launch moments.

---

## Border Radius System

Rounded geometry is essential to the friendly polish of the system.

```css
rounded-lg         /* Small controls only */
rounded-xl         /* Compact pills and tiny cards */
rounded-2xl        /* Icon containers, compact cards */
rounded-3xl        /* Default cards */
rounded-[2rem]     /* Large cards and visual tiles */
rounded-[2.5rem]   /* Large screenshot modules */
rounded-[3rem]     /* Phone mockups and hero objects */
rounded-full       /* Navbars, buttons, badges, tabs */
```

### Radius Rules

* Buttons, navbars, badges, and tabs should be `rounded-full`.
* Cards should rarely be less than `rounded-2xl`.
* Product visuals should use oversized radii.
* Avoid sharp corners entirely.

---

## Example Page Skeleton

```tsx
<main className="min-h-screen overflow-hidden bg-[#07070b] text-[#fffaf2]">
  <FrostedNavbar />

  <section className="relative px-4 pt-32 pb-20 sm:px-6 sm:pt-40 lg:px-8">
    <HeroGlow />
    <div className="relative mx-auto max-w-3xl text-center">
      <EyebrowPill>Lunar Candy Glass Launch</EyebrowPill>
      <h1 className="mt-6 font-heading text-4xl font-semibold leading-[1.05] tracking-[-0.035em] text-[#fffaf2] sm:text-5xl">
        Launch pages with cinematic softness.
      </h1>
      <p className="mx-auto mt-6 max-w-2xl font-body text-[17px] leading-8 text-[#b7a9ca] sm:text-lg">
        A dark glass system for polished product storytelling and vibrant UI previews.
      </p>
      <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
        <PrimaryButton>Start building</PrimaryButton>
        <SecondaryButton>View demo</SecondaryButton>
      </div>
    </div>

    <PhoneMockup className="mt-14" />
  </section>

  <FeatureRow
    title="Soft glass cards meet vivid product moments."
    visual={<GradientScreenshotTile />}
  />

  <FeatureRow
    reverse
    title="Every screenshot gets its own cinematic stage."
    visual={<GradientScreenshotTile />}
  />

  <GlassCardGrid />

  <NatureImageSection />

  <FinalCTA />

  <Footer />
</main>
```

---

## Quality Checklist

* [ ] Does the page background use lunar black or eclipse black rather than pure flat black?
* [ ] Are headings set in Inter Semibold?
* [ ] Is body copy set in DM Sans or Satoshi?
* [ ] Is the hero headline centered and around `text-4xl`?
* [ ] Are hero and feature descriptions around `17–18px`?
* [ ] Are navbar labels compact and `text-sm`?
* [ ] Are section titles between `32px` and `36px`?
* [ ] Is the navbar frosted, rounded, and floating?
* [ ] Are CTAs paired in the hero?
* [ ] Are CTA buttons monochrome rather than gradient-filled?
* [ ] Is the phone mockup directly below the hero CTA group?
* [ ] Do feature rows alternate copy and visuals?
* [ ] Are screenshots padded inside rounded blue-pink-purple gradient tiles?
* [ ] Do glass cards use translucent backgrounds and soft borders?
* [ ] Are scroll fades used at long section boundaries?
* [ ] Is the full-bleed nature image covered by a dark veil?
* [ ] Is whitespace generous throughout the layout?
* [ ] Are glows subtle and atmospheric rather than neon?
* [ ] Are all corners soft and rounded?

---

## Allowed vs Not Allowed

### Allowed

* Lunar black, blue-charcoal, ink plum, and blackberry backgrounds.
* Warm white headings and lavender mist secondary text.
* Inter Semibold headings.
* DM Sans or Satoshi body copy.
* Frosted rounded navbars.
* Centered hero stacks.
* Monochrome pill CTAs.
* Phone mockups beneath hero CTAs.
* Soft glass cards with translucent borders.
* Blue-pink-purple gradient screenshot tiles.
* Alternating feature rows.
* Subtle scroll fades.
* Full-bleed nature photography under a dark veil.
* Large rounded corners.
* Diffused atmospheric glows.

### Not Allowed

* Flat corporate black-and-white layouts.
* Neon gradients applied everywhere.
* Gradient-filled CTA buttons.
* Sharp rectangular cards.
* Dense navigation.
* Raw screenshots placed directly on the dark background.
* Tiny body text below readable launch-page sizing.
* Heavy, hard-edged shadows.
* Bright semantic badge systems.
* Busy hero sections with multiple competing visuals.
* Opaque modal overlays with no blur.
* Overly saturated rainbow palettes.
Preview