Styledex
← Index

Red Noir Style

superdesignCC0-1.0Prompt onlyLanding · landingGlassmorphism · glassmorphismFuturistic · futuristicLight · lightLow (display) · lowRed · redVivid · vividSerif · serifGeneral · general

A bold, dark-themed landing page featuring high-contrast red accents, glassmorphism, and smooth scroll animations. Designed for AI and tech products with a futuristic aesthetic. Category: Design Systems & Styles. Prompt author listed upstream: Jason Zhou.

NNorthwind
Product · Pricing
Specimen
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

"Red Noir Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-noir-style @ 6c6090694520.

https://github.com/superdesigndev/superdesign-prompts · prompts/red-noir-style · 6c6090694520 · © Superdesign

Prompt

This is a reference implementation of red noir style
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acme AI | Design Intelligence</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=Manrope:wght@200;400;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --accent-red: #ef233c;
            --accent-red-glow: rgba(239, 35, 60, 0.5);
        }
        /* Custom Animations */
        @keyframes fade-in-up {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes border-spin {
            from { --gradient-angle: 0deg; }
            to { --gradient-angle: 360deg; }
        }
        @keyframes shimmer {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        @keyframes animStar {
            from { transform: translateY(0px); }
            to { transform: translateY(-2000px); }
        }
        @property --gradient-angle {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }
        .animate-fade-up {
            animation: fade-in-up 0.8s ease-out forwards;
        }
        .font-manrope { font-family: 'Manrope', sans-serif; }
        .font-inter { font-family: 'Inter', sans-serif; }
        /* Shiny CTA Button */
        .shiny-cta {
            --gradient-angle: 0deg;
            position: relative;
            overflow: hidden;
            border-radius: 9999px;
            padding: 1rem 2.5rem;
            background: linear-gradient(#000000, #000000) padding-box,
            conic-gradient(from var(--gradient-angle), transparent 0%, #ef233c 5%, #ef233c 15%, #ef233c 30%, transparent 40%, transparent 100%) border-box;
            border: 2px solid transparent;
            cursor: pointer;
            isolation: isolate;
            animation: border-spin 2.5s linear infinite;
        }
        .shiny-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 50%, white 0.5px, transparent 0);
            background-size: 4px 4px;
            opacity: 0.1;
            z-index: 0;
        }
        /* Parallax Stars */
        .stars-1 { box-shadow: 234px 124px #fff, 654px 345px #fff, 876px 12px #fff, 1200px 800px #fff, 400px 1500px #fff, 1800px 200px #fff, 100px 1000px #fff, 900px 1900px #fff, 500px 600px #fff, 1400px 100px #fff, 300px 400px #fff, 1600px 1200px #fff; }
        .stars-2 { box-shadow: 123px 456px #fff, 789px 234px #fff, 456px 890px #fff, 1100px 300px #fff, 200px 1200px #fff, 1500px 500px #fff, 600px 1700px #fff, 1300px 900px #fff; }
        .gradient-blur {
            position: fixed;
            z-index: 40;
            inset: 0 0 auto 0;
            height: 120px;
            pointer-events: none;
            background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
            backdrop-filter: blur(8px);
            mask-image: linear-gradient(to bottom, black, transparent);
        }
        .selection-red::selection {
            background: #ef233c;
            color: white;
        }
        .text-stroke {
            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
            color: transparent;
        }
    </style>
</head>
<body class="selection-red">
    <div class="min-h-screen bg-black text-white font-inter relative overflow-x-hidden">
        <!-- Global Background -->
        <div class="fixed inset-0 z-0 pointer-events-none">
            <div class="absolute inset-0 bg-gradient-to-b from-[#1a0505] to-black"></div>
            <div class="absolute top-0 left-0 w-[1px] h-[1px] bg-transparent stars-1 animate-[animStar_50s_linear_infinite]"></div>
            <div class="absolute top-0 left-0 w-[2px] h-[2px] bg-transparent stars-2 animate-[animStar_80s_linear_infinite]"></div>
            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-red-600/5 rounded-full blur-[120px]"></div>
            <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(circle_at_center,black_40%,transparent_80%)]"></div>
        </div>
        <!-- Top Blur Header -->
        <div class="gradient-blur"></div>
        <!-- Navbar -->
        <header class="fixed top-0 left-0 w-full z-50 pt-6 px-4">
            <nav class="max-w-5xl mx-auto flex items-center justify-between bg-black/60 backdrop-blur-xl border border-white/10 rounded-full px-6 py-3 shadow-2xl">
                <div class="flex items-center gap-2">
                    <div class="w-5 h-5 bg-[#ef233c] rounded-sm rotate-45"></div>
                    <span class="text-lg font-bold font-manrope tracking-tight">Acme</span>
                </div>
                <div class="hidden md:flex items-center gap-8">
                    <a href="#" id="nav-product-link" class="text-sm font-medium text-zinc-400 hover:text-white transition-colors">Product</a>
                    <a href="#" id="nav-solutions-link" class="text-sm font-medium text-zinc-400 hover:text-white transition-colors">Solutions</a>
                    <a href="#" id="nav-resources-link" class="text-sm font-medium text-zinc-400 hover:text-white transition-colors">Resources</a>
                    <a href="#" id="nav-pricing-link" class="text-sm font-medium text-zinc-400 hover:text-white transition-colors">Pricing</a>
                </div>
                <div class="flex items-center gap-4">
                    <a href="#" id="nav-login-link" class="hidden md:block text-sm font-medium text-zinc-300 hover:text-white">Log In</a>
                    <button id="nav-get-access-btn" class="group relative inline-flex items-center justify-center overflow-hidden rounded-full bg-white/5 px-6 py-2 transition-transform active:scale-95">
                        <span class="absolute inset-0 border border-white/10 rounded-full"></span>
                        <span class="absolute inset-[-100%] animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,transparent_75%,#ef233c_100%)] opacity-0 group-hover:opacity-100 transition-opacity"></span>
                        <span class="absolute inset-[1px] rounded-full bg-black"></span>
                        <span class="relative z-10 flex items-center gap-2 text-xs font-bold uppercase tracking-wider">
                            Get Access <iconify-icon icon="lucide:arrow-right" class="w-3 h-3 group-hover:translate-x-0.5 transition-transform"></iconify-icon>
                        </span>
                    </button>
                </div>
            </nav>
        </header>
        <main class="relative z-10">
            <!-- Hero Section -->
            <section class="min-h-screen flex flex-col items-center justify-center pt-32 pb-20 px-6">
                <div class="text-center max-w-5xl mx-auto">
                    <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-8 animate-fade-up" style="animation-delay: 0.1s;">
                        <span class="relative flex h-2 w-2">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-2 w-2 bg-[#ef233c]"></span>
                        </span>
                        <span class="text-xs font-medium text-red-100/90 tracking-wide font-manrope">
                            Acme AI 2.0 is now live
                        </span>
                        <iconify-icon icon="lucide:arrow-right" class="w-3 h-3 text-red-400"></iconify-icon>
                    </div>
                    <h1 class="text-6xl md:text-8xl font-semibold tracking-tighter font-manrope leading-[1.1] mb-8 animate-fade-up" style="animation-delay: 0.2s;">
                        <span class="block text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-white/40">Design Intelligence</span>
                        <span class="block text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-white/40">
                            for the <span class="text-[#ef233c] inline-block relative">
                                Future
                                <svg class="absolute w-full h-3 -bottom-2 left-0 text-[#ef233c] opacity-60" viewBox="0 0 100 10" preserveAspectRatio="none">
                                    <path d="M0 5 Q 50 10 100 5" stroke="currentColor" stroke-width="2" fill="none" />
                                </svg>
                            </span>
                        </span>
                    </h1>
                    <p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-12 leading-relaxed animate-fade-up" style="animation-delay: 0.3s;">
                        Acme blends advanced generative algorithms with human creativity to ship world-class products 10x faster.
                    </p>
                    <div class="flex flex-col md:flex-row items-center justify-center gap-6 animate-fade-up" style="animation-delay: 0.4s;">
                        <button id="hero-cta-btn" class="shiny-cta group">
                            <span class="relative z-10 flex items-center gap-2 text-white font-medium">
                                Start Creating <iconify-icon icon="lucide:arrow-right" class="transition-transform group-hover:translate-x-1"></iconify-icon>
                            </span>
                        </button>
                        <button id="hero-github-btn" class="group px-8 py-4 rounded-full bg-zinc-900 border border-zinc-800 text-zinc-300 font-medium hover:text-white hover:bg-zinc-800 transition-all flex items-center gap-2">
                            <iconify-icon icon="lucide:github" class="w-5 h-5"></iconify-icon>
                            View on GitHub
                        </button>
                    </div>
                </div>
                <!-- Logo Strip -->
                <div class="w-full mt-32 border-y border-white/5 bg-white/[0.02] backdrop-blur-sm py-10 opacity-60 hover:opacity-100 transition-opacity">
                    <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center gap-8 md:gap-16">
                        <p class="text-sm font-bold tracking-widest text-zinc-500 uppercase shrink-0">Integrated with:</p>
                        <div class="flex flex-wrap justify-center gap-8 md:gap-16 items-center w-full">
                            <div class="flex items-center gap-2 font-manrope font-semibold"><div class="w-6 h-6 bg-white/20 rounded-full"></div>OpenAI</div>
                            <div class="flex items-center gap-2 font-manrope font-semibold"><div class="w-6 h-6 bg-white/20 rounded-full"></div>Figma</div>
                            <div class="flex items-center gap-2 font-manrope font-semibold"><div class="w-6 h-6 bg-white/20 rounded-full"></div>React</div>
                            <div class="flex items-center gap-2 font-manrope font-semibold"><div class="w-6 h-6 bg-white/20 rounded-full"></div>Vercel</div>
                            <div class="flex items-center gap-2 font-manrope font-semibold"><div class="w-6 h-6 bg-white/20 rounded-full"></div>Stripe</div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Features Bento Grid -->
            <section class="py-32 px-6">
                <div class="max-w-7xl mx-auto">
                    <div class="mb-20 text-center max-w-3xl mx-auto animate-fade-up">
                        <h2 class="text-4xl md:text-5xl font-semibold text-white tracking-tight font-manrope mb-6">
                            The Operating System for <br />
                            <span class="text-[#ef233c]">Modern Design Teams</span>
                        </h2>
                        <p class="text-lg text-zinc-400 font-light">
                            Replace your fragmented toolset with one cohesive platform driven by AI.
                        </p>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 h-auto lg:h-[700px]">
                        <!-- Main Feature Card -->
                        <div class="lg:col-span-2 lg:row-span-2 group relative overflow-hidden p-8 border border-white/10 bg-gradient-to-b from-zinc-900/50 to-black hover:border-white/20 transition-all rounded-xl">
                            <div class="relative z-10 h-full flex flex-col">
                                <div class="mb-6 inline-flex p-3 rounded-lg bg-white/5 border border-white/10 text-[#ef233c]">
                                    <iconify-icon icon="lucide:bot" class="w-6 h-6"></iconify-icon>
                                </div>
                                <h3 class="text-3xl font-semibold text-white font-manrope mb-4 tracking-tight">Generative UI Systems</h3>
                                <p class="text-zinc-400 text-lg leading-relaxed">Instantly generate comprehensive design systems from a single prompt. Colors, typography, and components are automatically created and documented with industry standards in mind.</p>
                                <div class="mt-auto flex items-center justify-between opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
                                    <span class="text-xs font-mono text-[#ef233c]">EXPLORE FEATURE</span>
                                    <iconify-icon icon="lucide:arrow-right" class="w-4 h-4 text-[#ef233c]"></iconify-icon>
                                </div>
                            </div>
                            <div class="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity pointer-events-none" style="background: radial-gradient(circle at top right, #ef233c, transparent 70%);"></div>
                        </div>
                        <!-- Feature 2 -->
                        <div class="lg:col-span-2 group relative overflow-hidden p-8 border border-white/10 bg-black hover:border-white/20 transition-all rounded-xl">
                            <div class="relative z-10 flex flex-col h-full">
                                <div class="mb-4 inline-flex p-3 rounded-lg bg-white/5 border border-white/10 text-blue-400">
                                    <iconify-icon icon="lucide:code" class="w-6 h-6"></iconify-icon>
                                </div>
                                <h3 class="text-2xl font-semibold text-white font-manrope mb-2">Code Export</h3>
                                <p class="text-zinc-400">Production-ready React & Tailwind code, shipped directly to your repo with zero friction.</p>
                            </div>
                            <div class="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity pointer-events-none" style="background: radial-gradient(circle at top right, #3b82f6, transparent 70%);"></div>
                        </div>
                        <!-- Feature 3 -->
                        <div class="group relative overflow-hidden p-8 border border-white/10 bg-black hover:border-white/20 transition-all rounded-xl">
                            <div class="relative z-10">
                                <div class="mb-4 inline-flex p-3 rounded-lg bg-white/5 border border-white/10 text-yellow-400">
                                    <iconify-icon icon="lucide:zap" class="w-6 h-6"></iconify-icon>
                                </div>
                                <h3 class="text-xl font-semibold text-white font-manrope mb-2">Smart Iteration</h3>
                                <p class="text-sm text-zinc-400">A/B test variations generated by AI based on real user data.</p>
                            </div>
                        </div>
                        <!-- Feature 4 -->
                        <div class="group relative overflow-hidden p-8 border border-white/10 bg-black hover:border-white/20 transition-all rounded-xl">
                            <div class="relative z-10">
                                <div class="mb-4 inline-flex p-3 rounded-lg bg-white/5 border border-white/10 text-purple-400">
                                    <iconify-icon icon="lucide:layers" class="w-6 h-6"></iconify-icon>
                                </div>
                                <h3 class="text-xl font-semibold text-white font-manrope mb-2">Team Sync</h3>
                                <p class="text-sm text-zinc-400">Real-time collaboration with automated version control.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Testimonial Banner -->
            <div class="w-full bg-[#ef233c] py-20 px-6">
                <div class="max-w-4xl mx-auto text-center">
                    <div class="flex justify-center gap-1 text-black mb-6">
                        <iconify-icon icon="lucide:star" class="w-6 h-6" fill="currentColor"></iconify-icon>
                        <iconify-icon icon="lucide:star" class="w-6 h-6" fill="currentColor"></iconify-icon>
                        <iconify-icon icon="lucide:star" class="w-6 h-6" fill="currentColor"></iconify-icon>
                        <iconify-icon icon="lucide:star" class="w-6 h-6" fill="currentColor"></iconify-icon>
                        <iconify-icon icon="lucide:star" class="w-6 h-6" fill="currentColor"></iconify-icon>
                    </div>
                    <h3 class="text-3xl md:text-5xl font-bold text-black font-manrope leading-tight mb-8">
                        "Acme has completely transformed how we ship products. What used to take weeks now takes hours."
                    </h3>
                    <div class="flex items-center justify-center gap-4">
                        <div class="w-12 h-12 bg-black rounded-full overflow-hidden flex items-center justify-center">
                            <iconify-icon icon="lucide:user" class="text-white w-6 h-6"></iconify-icon>
                        </div>
                        <div class="text-left">
                            <div class="text-black font-bold text-lg">Alex Morgan</div>
                            <div class="text-black/70 font-medium">CPO at TechFlow</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Pricing -->
            <section class="py-32 px-6 bg-black relative border-t border-white/5">
                <div class="max-w-7xl mx-auto">
                    <div class="text-center mb-20">
                        <h2 class="text-4xl md:text-5xl font-semibold text-white font-manrope mb-4">Simple, Transparent Pricing</h2>
                        <p class="text-zinc-400">Start for free, scale as you grow.</p>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <!-- Starter -->
                        <div class="p-8 border border-zinc-800 bg-black hover:border-zinc-700 transition-all rounded-xl flex flex-col">
                            <h3 class="text-xl font-bold font-manrope…

---
"Red Noir Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-noir-style @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Red Noir Style. \"Red Noir Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-noir-style @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-red-noir-style",
      "license": "CC0-1.0",
      "attribution": "\"Red Noir Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-noir-style @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "card": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "primary": {
      "$type": "color",
      "$value": "#ef233c"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#000000"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "accent": {
      "$type": "color",
      "$value": "#1a0505"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#f0f0f0"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#595959"
    },
    "border": {
      "$type": "color",
      "$value": "#dbdbdb"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#ef233c"
    }
  },
  "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 */
/* "Red Noir Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-noir-style @ 6c6090694520. */
:root {
  --background: #ffffff;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --primary: #ef233c;
  --primary-foreground: #fafaf9;
  --secondary: #000000;
  --secondary-foreground: #000000;
  --accent: #1a0505;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #595959;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #ef233c;
  --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 */
/* "Red Noir Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-noir-style @ 6c6090694520. */
/** Tailwind theme extend for Red Noir Style (superdesign-red-noir-style) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#ffffff",
        "foreground": "#000000",
        "card": "#ffffff",
        "primary": "#ef233c",
        "primary-foreground": "#fafaf9",
        "secondary": "#000000",
        "accent": "#1a0505",
        "muted": "#f0f0f0",
        "border": "#dbdbdb",
        "destructive": "#dc2626",
        "ring": "#ef233c"
      },
      "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 */
/* "Red Noir Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/red-noir-style @ 6c6090694520. */
@layer base {
:root {
  --background: #ffffff;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --primary: #ef233c;
  --primary-foreground: #fafaf9;
  --secondary: #000000;
  --secondary-foreground: #000000;
  --accent: #1a0505;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #595959;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #ef233c;
  --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);
}
}