Deep Red Style
superdesignCC0-1.0Prompt onlyLanding · landingGradient · gradientLuxury · luxuryDark · darkMedium · mediumOrange · orangeVivid · vividSerif · serifGeneral · general
A deep red/orange atmospheric gradients, elegant serif typography, and complex scroll-triggered animations, with floating parallax cards and a dot-grid background. Category: Design Systems & Styles. Prompt author listed upstream: Jason Zhou.
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"Deep Red Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/deep-red-style-5b01cb @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/deep-red-style-5b01cb · 6c6090694520 · © Superdesign
Prompt
You are given a task to integrate the below html page into the current page.
~~~html
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acme | The Design Agent</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
<style>
:root {
--bg: #050505;
--accent: #FF4500;
--card: #111111;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg);
color: white;
margin: 0;
overflow-x: hidden;
}
.font-serif {
font-family: 'Playfair Display', serif;
}
/* Reveal Animation Styles */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* Custom Floating Animations */
@keyframes float-hand-left {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-20px) rotate(2deg); }
}
@keyframes float-hand-right {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(20px) rotate(-2deg); }
}
.animate-float-left {
animation: float-hand-left 12s ease-in-out infinite;
}
.animate-float-right {
animation: float-hand-right 14s ease-in-out infinite;
}
/* Noise Texture Overlay */
.noise-overlay {
position: fixed;
inset: 0;
z-index: 50;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
/* Parallax Container Effect */
.parallax-card-up {
transform: translateY(var(--scroll-offset-up, 0px));
}
.parallax-card-down {
transform: translateY(var(--scroll-offset-down, 0px));
}
</style>
</head>
<body>
<div class="min-h-screen bg-[#050505] selection:bg-[#FF4500] selection:text-white">
<!-- Global Noise Overlay -->
<div class="noise-overlay"></div>
<!-- Navigation -->
<nav id="main-nav" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 py-8">
<div class="container mx-auto px-6 flex items-center justify-between">
<a href="#" id="nav-logo-link" class="text-2xl font-bold tracking-tighter font-serif">
Acme.
</a>
<div class="hidden md:flex items-center space-x-8">
<a href="#expertise" id="nav-expertise-link" class="text-sm text-gray-400 hover:text-white transition-colors duration-300">Expertise</a>
<a href="#works" id="nav-works-link" class="text-sm text-gray-400 hover:text-white transition-colors duration-300">Selected Works</a>
<a href="#perspectives" id="nav-perspectives-link" class="text-sm text-gray-400 hover:text-white transition-colors duration-300">Perspectives</a>
</div>
<a href="#contact" id="nav-cta-link" class="inline-flex items-center justify-center px-6 py-3 rounded-full text-sm font-medium bg-white text-black hover:scale-105 hover:bg-gray-100 transition-all duration-300">
Start Project
</a>
</div>
</nav>
<!-- Hero Section -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-32 pb-20 bg-[#050505]">
<!-- Background Atmosphere -->
<div class="absolute inset-0 z-0 pointer-events-none select-none">
<div class="absolute top-0 left-0 w-full h-full opacity-60 mix-blend-screen">
<img src="https://placehold.co/1536x1024" alt="Atmosphere" class="w-full h-full object-cover object-center opacity-80">
</div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[#050505] z-10"></div>
</div>
<!-- Floating Surrealist Elements -->
<div class="absolute -left-[10%] top-[-10%] md:left-[-5%] md:top-[-15%] w-[50vw] md:w-[40vw] max-w-[800px] z-10 pointer-events-none mix-blend-hard-light opacity-80 animate-float-left">
<img src="https://placehold.co/1540x1320" alt="Hand Reaching" class="w-full h-auto object-contain">
</div>
<div class="absolute -right-[10%] bottom-[-10%] md:right-[-5%] md:bottom-[-5%] w-[45vw] md:w-[35vw] max-w-[700px] z-10 pointer-events-none mix-blend-hard-light opacity-80 animate-float-right">
<img src="https://placehold.co/1542x1002" alt="Hand Receiving" class="w-full h-auto object-contain">
</div>
<!-- Hero Content -->
<div class="container mx-auto px-6 relative z-20 text-center flex flex-col items-center justify-center h-full">
<div id="hero-content-wrapper" class="max-w-4xl mx-auto">
<div class="reveal">
<h1 class="text-5xl md:text-7xl font-medium leading-[1.1] tracking-tight mb-6 text-[#ffe0e0] mix-blend-overlay font-serif"
style="text-shadow: 0 0 12px rgba(255,255,255,0.71);">
Acme. <br />
<span class="italic font-light text-[#ffe0e0]">The design agent.</span>
</h1>
</div>
<div class="reveal" style="transition-delay: 200ms;">
<p class="text-base md:text-lg text-[#ffe0e0]/90 max-w-lg mx-auto mb-16 font-light tracking-wide leading-relaxed mix-blend-overlay"
style="text-shadow: 0 0 12px rgba(255,255,255,0.71);">
We turn the unseen into the unforgettable. A design agency for those who dare to disappear to be found.
</p>
</div>
<div class="reveal flex flex-col items-center gap-6" style="transition-delay: 400ms;">
<div class="relative group cursor-pointer">
<div class="absolute inset-0 bg-[#FF4500]/20 blur-xl rounded-full opacity-0 group-hover:opacity-50 transition-opacity duration-500"></div>
<div class="relative border border-white/20 bg-white/5 backdrop-blur-sm px-6 py-2 rounded-full flex items-center gap-3 text-xs md:text-sm text-white/80 uppercase tracking-widest hover:bg-white/10 transition-colors duration-300">
<span>Enter the Void</span>
</div>
</div>
<div class="flex items-center gap-4 text-[10px] md:text-xs text-white/40 uppercase tracking-widest mt-8 font-mono">
<span id="current-time">11:11 PM</span>
<span class="w-px h-3 bg-white/20"></span>
<span>NYC, USA</span>
</div>
</div>
</div>
</div>
</section>
<!-- Mission Section -->
<section id="expertise" class="py-32 relative">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto text-center reveal">
<h2 class="text-3xl md:text-5xl lg:text-6xl leading-tight text-white/90 mb-12 font-serif">
We design the negative space where your brand truly lives.
</h2>
<p class="text-xl md:text-2xl text-gray-500 leading-relaxed font-light">
Elegance is refusal. We remove the noise so your message resonates with absolute clarity.
</p>
</div>
<!-- Logo Grid -->
<div class="mt-32 grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-items-center opacity-40 grayscale hover:grayscale-0 transition-all duration-500">
<div class="reveal font-bold text-xl tracking-widest">VOGUE</div>
<div class="reveal font-bold text-xl tracking-widest" style="transition-delay: 100ms;">TESLA</div>
<div class="reveal font-bold text-xl tracking-widest" style="transition-delay: 200ms;">MOOMA</div>
<div class="reveal font-bold text-xl tracking-widest" style="transition-delay: 300ms;">AESOP</div>
</div>
</div>
</section>
<!-- Cards Section -->
<section id="works" class="py-40 relative overflow-hidden">
<div class="container mx-auto px-6 relative z-10">
<div class="reveal mb-32">
<h2 class="text-5xl md:text-7xl text-center font-serif">
Define your <br />
<span class="italic">digital presence</span>
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<!-- Card 1 - Red -->
<div class="parallax-card-down">
<div class="reveal bg-[#FF4500] rounded-3xl p-8 md:p-12 aspect-[4/5] flex flex-col justify-between shadow-2xl hover:shadow-[0_20px_50px_rgba(255,69,0,0.3)] transition-all duration-500 group cursor-pointer">
<div class="flex justify-between items-start">
<div class="w-12 h-12 rounded-full bg-black/10 flex items-center justify-center group-hover:rotate-45 transition-transform duration-500">
<iconify-icon icon="lucide:star" class="text-black text-2xl"></iconify-icon>
</div>
<span class="text-black font-medium text-sm border border-black/20 px-3 py-1 rounded-full">01</span>
</div>
<div>
<h3 class="text-4xl md:text-5xl text-black mb-4 leading-none tracking-tight font-serif">
Emerging <br />Talent
</h3>
<p class="text-black/70 text-lg leading-snug">
You have the spark. We provide the atmosphere for it to ignite into a blazing reality.
</p>
</div>
<div class="w-full h-px bg-black/10 mt-8"></div>
</div>
</div>
<!-- Card 2 - Black -->
<div class="parallax-card-up md:mt-24">
<div class="reveal bg-[#111] border border-white/10 rounded-3xl p-8 md:p-12 aspect-[4/5] flex flex-col justify-between shadow-2xl group cursor-pointer hover:border-[#FF4500]/50 transition-all duration-500" style="transition-delay: 150ms;">
<div class="flex justify-between items-start">
<div class="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
<iconify-icon icon="lucide:arrow-right" class="text-white text-2xl -rotate-45"></iconify-icon>
</div>
<span class="text-white/50 font-medium text-sm border border-white/10 px-3 py-1 rounded-full">02</span>
</div>
<div>
<h3 class="text-4xl md:text-5xl text-white mb-4 leading-none tracking-tight font-serif">
Evolving <br />Legacy
</h3>
<p class="text-gray-400 text-lg leading-snug">
You've arrived. Now let's make sure you never leave their minds. Permanence is our craft.
</p>
</div>
<div class="w-full h-px bg-white/10 mt-8"></div>
</div>
</div>
</div>
</div>
<!-- Background Pattern -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] opacity-10 pointer-events-none"
style="background-image: radial-gradient(circle, #333 1px, transparent 1px); background-size: 40px 40px;">
</div>
</section>
<!-- Footer -->
<footer class="py-20 border-t border-white/5 bg-[#050505] relative overflow-hidden">
<div class="container mx-auto px-6 relative z-10">
<div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-12">
<div class="w-full md:w-auto">
<h2 class="text-[10vw] leading-[0.8] tracking-tighter text-white/10 font-bold select-none pointer-events-none">
ACME.
</h2>
</div>
<div class="flex flex-col gap-8 text-right">
<div class="flex flex-col gap-4 text-gray-400">
<a href="#" id="footer-ig-link" class="hover:text-white transition-colors">Instagram</a>
<a href="#" id="footer-tw-link" class="hover:text-white transition-colors">Twitter</a>
<a href="#" id="footer-li-link" class="hover:text-white transition-colors">LinkedIn</a>
</div>
<p class="text-sm text-gray-600">© 2024 Acme. All rights reserved.</p>
</div>
</div>
</div>
</footer>
</div>
<script>
// 1. Reveal Elements on Scroll using Intersection Observer
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
});
document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
// 2. Navbar Scroll Effect
const nav = document.getElementById('main-nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
nav.classList.add('py-4', 'bg-[#050505]/80', 'backdrop-blur-md', 'border-b', 'border-white/5');
nav.classList.remove('py-8', 'bg-transparent');
} else {
nav.classList.remove('py-4', 'bg-[#050505]/80', 'backdrop-blur-md', 'border-b', 'border-white/5');
nav.classList.add('py-8', 'bg-transparent');
}
});
// 3. Simple Parallax Logic
window.addEventListener('scroll', () => {
const scrolled = window.scrollY;
// Move cards in opposite directions slightly for depth
document.querySelectorAll('.parallax-card-up').forEach(el => {
el.style.setProperty('--scroll-offset-up', `${scrolled * -0.05}px`);
});
document.querySelectorAll('.parallax-card-down').forEach(el => {
el.style.setProperty('--scroll-offset-down', `${scrolled * 0.05}px`);
});
});
// 4. Update Time Clock
function updateTime() {
const clockEl = document.getElementById('current-time');
const now = new Date();
let hours = now.getHours();
const minutes = now.getMinutes().toString().padStart(2, '0');
const ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
clockEl.textContent = `${hours}:${minutes} ${ampm}`;
}
setInterval(updateTime, 60000);
updateTime();
// 5. Hero Content Parallax
const heroWrapper = document.getElementById('hero-content-wrapper');
window.addEventListener('scroll', () => {
const scrolled = window.scrollY;
if (scrolled < 1000) {
heroWrapper.style.transform = `translateY(${scrolled * 0.4}px)`;
heroWrapper.style.opacity = Math.max(0, 1 - scrolled / 600);
}
});
</script>
</body>
</html>
~~~
---
"Deep Red Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/deep-red-style-5b01cb @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Deep Red Style. \"Deep Red Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/deep-red-style-5b01cb @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-deep-red-style-5b01cb",
"license": "CC0-1.0",
"attribution": "\"Deep Red Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/deep-red-style-5b01cb @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#050505"
},
"foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"card": {
"$type": "color",
"$value": "#050505"
},
"card-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"primary": {
"$type": "color",
"$value": "#ff4500"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#111111"
},
"secondary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"accent": {
"$type": "color",
"$value": "#ffe0e0"
},
"accent-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"muted": {
"$type": "color",
"$value": "#141414"
},
"muted-foreground": {
"$type": "color",
"$value": "#a3a3a2"
},
"border": {
"$type": "color",
"$value": "#282828"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#ff4500"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"sans-serif"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "1rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "Deep Red Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/deep-red-style-5b01cb @ 6c6090694520. */
:root {
--background: #050505;
--foreground: #fafaf9;
--card: #050505;
--card-foreground: #fafaf9;
--primary: #ff4500;
--primary-foreground: #fafaf9;
--secondary: #111111;
--secondary-foreground: #fafaf9;
--accent: #ffe0e0;
--accent-foreground: #1c1917;
--muted: #141414;
--muted-foreground: #a3a3a2;
--border: #282828;
--destructive: #dc2626;
--ring: #ff4500;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "Deep Red Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/deep-red-style-5b01cb @ 6c6090694520. */
/** Tailwind theme extend for Deep Red Style (superdesign-deep-red-style-5b01cb) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#050505",
"foreground": "#fafaf9",
"card": "#050505",
"primary": "#ff4500",
"primary-foreground": "#fafaf9",
"secondary": "#111111",
"accent": "#ffe0e0",
"muted": "#141414",
"border": "#282828",
"destructive": "#dc2626",
"ring": "#ff4500"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"sans-serif"
],
"serif": [
"ui-serif",
"Georgia",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "Deep Red Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/deep-red-style-5b01cb @ 6c6090694520. */
@layer base {
:root {
--background: #050505;
--foreground: #fafaf9;
--card: #050505;
--card-foreground: #fafaf9;
--primary: #ff4500;
--primary-foreground: #fafaf9;
--secondary: #111111;
--secondary-foreground: #fafaf9;
--accent: #ffe0e0;
--accent-foreground: #1c1917;
--muted: #141414;
--muted-foreground: #a3a3a2;
--border: #282828;
--destructive: #dc2626;
--ring: #ff4500;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}