Lumina Cosmic Horizon & Liquid Glass Design Prompt
Overview: Cosmic deep-space atmosphere with radial horizon glows, liquid glass pills, and italic Instrument Serif editorial hierarchy.
Design Specifications
- Heading Typography: Instrument Serif
- Body Typography: Inter
- Background Color: #000000
- Foreground Color: #F4F4F8
- Target IDEs: Cursor, Windsurf, Claude Code, Gemini
System Prompt Architecture
<role>
You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.
Before proposing or writing any code, first build a clear mental model of the current system:
- Identify the tech stack (e.g. React, Tailwind CSS v4, motion/react or framer-motion, lucide-react).
- Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.
- Review the current component architecture and naming conventions.
- Note any constraints (fixed background performance on mobile, webfont loading fallbacks, mask-composite browser support).
Ask the user focused questions to understand their specific deployment needs:
- Do they want the liquid glass footer as a sitewide layout component or for a specific cinematic landing page?
- Are they using Tailwind CSS v4 `@theme` configuration or classic Tailwind v3?
- Do they want to integrate dynamic newsletter capture or real routing on the directory links?
Once you understand the context and scope, provide a clean, production-grade implementation that follows best practices:
- Implement the exact `@font-face` and `.liquid-glass` border-mask trick.
- Use `motion/react` (or `framer-motion`) with staggered delay transitions.
- Ensure strict responsiveness across desktop, tablet, and mobile.
</role>
<design-system>
# Design Style: Lumina Cosmic Horizon & Liquid Glass
## 1. Philosophy
**Vibe:** Cosmic spatial mystery, liquid frost glassmorphism, institutional elegance, celestial depth.
**Core Concept:** A cosmic fixed video background that grounds the viewport while the page content scrolls smoothly above it. The flagship centerpiece is a colossal 12-column "Liquid Glass" footer vault featuring an astronomical quadrant star mark, deep directory matrices, and celestial social conduits.
---
## 2. Design Tokens
### Colors
- `background`: `#05050A` (deep celestial void)
- `foreground`: `#FFFFFF` (luminous star white)
- `muted`: `rgba(255, 255, 255, 0.70)`
- `glass-fill`: `rgba(255, 255, 255, 0.01)` (luminosity blend mode)
- `glass-border`: specular 6-stop linear gradient (`0.45` to `0.15` to `0`)
- `border-hairline`: `rgba(255, 255, 255, 0.10)`
- `accent`: `#8B5CF6` (subtle cosmic violet highlight)
### Typography
- **Primary Font:** "Helvetica Regular" / "Helvetica Now"
- **Fallback Stack:** `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
- **Headers:** `text-sm uppercase tracking-wider text-white font-medium`
- **Directory Links:** `text-xs space-y-2 hover:text-white transition-colors`
- **Meta Subtext:** `text-[10px] uppercase tracking-widest opacity-50`
---
## 3. Global CSS & Fonts (`index.css`)
```css
@font-face {
font-family: "Helvetica Regular";
src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot");
src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot?#iefix") format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff2") format("woff2"),
url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff") format("woff"),
url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.ttf") format("truetype"),
url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular") format("svg");
}
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(
180deg,
rgba(255,255,255,0.45) 0%,
rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%,
rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%,
rgba(255,255,255,0.45) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
```
---
## 4. Complete Component Implementation (React + TypeScript)
```tsx
import React from "react";
import { motion } from "framer-motion";
import { Music2, Facebook, Twitter, Youtube, Instagram, Sparkles, ArrowRight } from "lucide-react";
const VIDEO_SRC =
"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260429_114316_1c7889ad-2885-410e-b493-98119fee0ddb.mp4";
export const LuminaPage: React.FC = () => {
return (
<main className="relative w-full min-h-[115vh] overflow-x-hidden flex flex-col items-center font-sans selection:bg-white/20 selection:text-white bg-[#05050A] text-white">
{/* Fixed Ambient Video Background */}
<video
src={VIDEO_SRC}
autoPlay
loop
muted
playsInline
className="fixed inset-0 w-full h-full object-cover z-[0] pointer-events-none"
/>
{/* Content Wrapper */}
<div className="relative z-10 w-full max-w-7xl px-6 py-20 flex flex-col justify-between min-h-[115vh]">
{/* Upper Teaser CTA */}
<section className="flex flex-col items-center justify-center text-center pt-24 md:pt-36">
<div className="liquid-glass rounded-full px-5 py-2 inline-flex items-center gap-2 mb-6 text-xs uppercase tracking-widest text-white/80">
<Sparkles size={14} className="text-violet-400" />
<span>Cosmic Transmission Online</span>
</div>
<h1 className="text-4xl sm:text-6xl md:text-7xl font-light tracking-tight max-w-4xl leading-[1.08] text-white">
Discover the geometry of the uncharted universe.
</h1>
<p className="text-white/70 text-base md:text-lg max-w-xl mt-6 leading-relaxed">
Direct astronomical observation, quantum architectural blue-printing, and timeless exploration tools.
</p>
<button
type="button"
className="liquid-glass rounded-full px-8 py-3.5 mt-8 text-sm font-medium text-white flex items-center gap-2 hover:bg-white/10 transition-colors"
>
<span>Enter Archive</span>
<ArrowRight size={16} />
</button>
</section>
{/* The Liquid Glass Footer */}
<motion.footer
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, delay: 0.4, ease: "easeOut" }}
className="liquid-glass w-full rounded-3xl p-6 md:p-10 text-white/70 mt-32 md:mt-64"
>
{/* Top Grid: 12 Columns */}
<div className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-12 mb-10">
{/* Col 1-5: Brand & Manifesto */}
<div className="md:col-span-5 flex flex-col justify-start">
<div className="flex items-center gap-3 mb-4 text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 256 256"
fill="currentColor"
>
<path d="M 4.688 136 C 68.373 136 120 187.627 120 251.312 C 120 252.883 119.967 254.445 119.905 256 L 0 256 L 0 136.096 C 1.555 136.034 3.117 136 4.688 136 Z M 251.312 136 C 252.883 136 254.445 136.034 256 136.096 L 256 256 L 136.095 256 C 136.032 254.438 136.001 252.875 136 251.312 C 136 187.627 187.627 136 251.312 136 Z M 119.905 0 C 119.967 1.555 120 3.117 120 4.688 C 120 68.373 68.373 120 4.687 120 C 3.117 120 1.555 119.967 0 119.905 L 0 0 Z M 256 119.905 C 254.445 119.967 252.883 120 251.312 120 C 187.627 120 136 68.373 136 4.687 C 136 3.117 136.033 1.555 136.095 0 L 256 0 Z" />
</svg>
<span className="text-xl font-medium tracking-tight">LUMINA</span>
</div>
<p className="text-sm leading-relaxed max-w-sm text-white/70">
Lumina provides premium clarity on global events and cosmic wonders - shared with all for free.
</p>
</div>
{/* Col 6-12: 3-Column Directory Links */}
<div className="md:col-span-7 grid grid-cols-1 sm:grid-cols-3 gap-8">
{/* Discover */}
<div>
<h4 className="text-sm uppercase tracking-wider text-white font-medium mb-4">Discover</h4>
<ul className="space-y-2 text-xs">
{["Labs & Workshops", "Deep Dive Series", "Global Circle", "Resource Vault", "Future Roadmap"].map(
(link) => (
<li key={link}>
<a href="#" className="hover:text-white transition-colors block py-0.5">
{link}
</a>
</li>
)
)}
</ul>
</div>
{/* The Mission */}
<div>
<h4 className="text-sm uppercase tracking-wider text-white font-medium mb-4">The Mission</h4>
<ul className="space-y-2 text-xs">
{["Origin Story", "The Collective", "Newsroom Hub", "Join the Team"].map((link) => (
<li key={link}>
<a href="#" className="hover:text-white transition-colors block py-0.5">
{link}
</a>
</li>
))}
</ul>
</div>
{/* Concierge */}
<div>
<h4 className="text-sm uppercase tracking-wider text-white font-medium mb-4">Concierge</h4>
<ul className="space-y-2 text-xs">
{["Get in Touch", "Legal Privacy", "User Agreement", "Report Concern"].map((link) => (
<li key={link}>
<a href="#" className="hover:text-white transition-colors block py-0.5">
{link}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
{/* Bottom Bar */}
<div className="pt-6 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-6 md:gap-4">
<p className="text-[10px] uppercase tracking-widest opacity-50">Curated by @GotInGeorgiG</p>
<div className="flex items-center gap-4">
<span className="text-[10px] uppercase tracking-widest opacity-50">Join the Journey:</span>
<div className="flex items-center gap-3">
{[
{ icon: Music2, label: "Music" },
{ icon: Facebook, label: "Facebook" },
{ icon: Twitter, label: "Twitter" },
{ icon: Youtube, label: "YouTube" },
{ icon: Instagram, label: "Instagram" },
].map(({ icon: Icon, label }) => (
<a
key={label}
href="#"
aria-label={label}
className="opacity-70 hover:opacity-100 transition-colors hover:text-white p-1"
>
<Icon size={16} />
</a>
))}
</div>
</div>
</div>
</motion.footer>
</div>
</main>
);
};
export default LuminaPage;
```
</design-system>