Neural Noir Interface Style
superdesignCC0-1.0Prompt onlyLanding · landingGlassmorphism · glassmorphismFuturistic · futuristicLuxury · luxuryDark · darkLow (display) · lowOrange · orangeMedium · mediumSerif · serifGeneral · general
The Neural Noir Interface Style is a high-end, futuristic aesthetic characterized by a 'tech-noir' atmosphere. It blends deep dark backgrounds (#0a0a0a) with sophisticated gold and bronze accents (#a78b71, #e8d5b7) and editorial typography. Key features include glassmorphism, neural network-inspired SVG connection lines, and a bento-grid layout. This style is optimized for premium AI platforms, creative design engines, high-end SaaS, and editorial-driven tech portfolios. It utilizes a combination of sleek sans-serif (Inter) for functional elements and elegant serif italics (Playfair Display) for headlines, creating a contrast between high-tech performance and classic sophistication. Categor…
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
"Neural Noir Interface Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/neural-noir-interface-style @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/neural-noir-interface-style · 6c6090694520 · © Superdesign
Prompt
{
"summary": "A sophisticated dark-mode interface featuring neural network connectivity, glassmorphism, and a luxury gold-on-black color palette designed for high-end AI and creative tools.",
"style": {
"description": "The design uses a monochromatic dark base (#0a0a0a) accented by a gradient of golds and bronzes. Typography pairings include 'Playfair Display' (Italic) for an editorial feel and 'Inter' for UI precision. Visual interest is driven by a 'bg-dots' radial pattern and blurred glassmorphism layers (rgba 255,255,255, 0.03) with high-radius corners (24px-48px).",
"prompt": "Create a design system with a background of #0a0a0a and a radial dot grid overlay (32px spacing, white at 8% opacity). Use 'Playfair Display' (Italic) for headings and 'Inter' (300-700 weight) for body text. Accent color palette: Base Gold #a78b71, Light Gold #c9b8a0, and Hover Gold #e8d5b7. Implement 'glassmorphism' for all cards: background rgba(255,255,255, 0.03), backdrop-filter blur(10px), and border 1px solid rgba(255,255,255, 0.1). Animations should use 'cubic-bezier(0.4, 0, 0.2, 1)' for transitions and 'power4.out' for entrance reveals. Include a central glow effect using box-shadow: 0 0 100px rgba(167, 139, 113, 0.2)."
},
"layout_and_structure": {
"description": "A vertically structured single-page layout that transitions from a complex, interactive hero section into clean, grid-based content blocks.",
"prompts": [
{
"part": "Navigation",
"prompt": "Fixed top navbar, 100% width, px-6 to px-12 padding. Features a text logo in 'Playfair Display' (Bold Italic), center-aligned links in 'Inter' (11px, uppercase, tracking-wide), and a 'Start Free Trial' pill button (white background, black text, rounded-full)."
},
{
"part": "Hero Section",
"prompt": "A central interactive node (16:9 aspect ratio glass card) surrounded by floating satellite cards connected via dynamic SVG bezier curves. The curves should have a 'pulsing-branch' animation. The headline uses 'Playfair Display Italic' at clamp(2.5rem, 8vw, 6rem) with specific words highlighted in #a78b71. Below the headline, a dual-button CTA group: one bordered and one solid white."
},
{
"part": "Features Grid",
"prompt": "A 4-column grid of glassmorphic cards. Each card has a 48px square icon container with a #a78b71/10 background. On hover, the icon scales 1.1x and the card border brightens. Titles are Inter Bold 20px, body is Inter 14px in gray-400."
},
{
"part": "Pricing Section",
"prompt": "Three-tiered layout. The center 'Pro' card is highlighted with a 1px border of #a78b71/40 and a top-centered 'Most Popular' badge. Prices are displayed in 48px bold font. Toggle between monthly/annual using a pill-shaped switch with a white active state."
},
{
"part": "Team Section",
"prompt": "Two-column layout featuring large cards with 4:5 aspect ratio images. Images are grayscale by default and transition to color on hover. Captions include large Serif names and ultra-thin, wide-tracked uppercase roles in gold."
},
{
"part": "Footer",
"prompt": "Multi-column layout (5 columns on desktop). Left column features the logo and social icons in circular bordered containers. Far right column includes a 'Join Digest' input field: a low-opacity search bar with a circular arrow-submit button."
}
]
},
"special_ui_components": [
{
"component": "Neural Connection Lines",
"description": "SVG paths that dynamically connect UI elements to a central point.",
"prompt": "Render SVG paths with class 'node-line'. Apply stroke-width: 2.5 and a linear-gradient stroke from #c9b8a0 (90%) to #a78b71 (10%). Add a 'pulsing-branch' keyframe animation that varies opacity from 0.4 to 0.7. Overlap secondary dashed lines with stroke-dasharray: 5 15 for 'flow' effects."
},
{
"component": "Satellite Media Cards",
"description": "Floating preview cards that interact with the mouse and central node.",
"prompt": "Glass cards (width 220px-340px) containing grayscale images with rounded-20px corners. On hover: scale(1.05), transition grayscale to color over 0.7s, and apply box-shadow: 0 0 60px rgba(167, 139, 113, 0.3)."
},
{
"component": "Live Notification Pill",
"description": "A floating status indicator with a breathing animation.",
"prompt": "Pill-shaped glass card with a 1px border-white/10. Contains a 8px green-400 circle with 'animate-pulse'. Text follows: 'LIVE' (green, bold, 8px) then status text (white, 12px)."
}
],
"special_notes": "MUST: Maintain a high level of contrast between the #0a0a0a background and white/gold elements. MUST NOT: Use standard blue/purple gradients common in tech; stick strictly to the gold/bronze spectrum. MUST: Use heavy letter-spacing on small uppercase text (labels, roles) to maintain the premium feel. MUST: Apply backdrop-filter: blur(10px) to all overlapping layers to prevent visual clutter."
}
---
"Neural Noir Interface Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/neural-noir-interface-style @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Neural Noir Interface Style. \"Neural Noir Interface Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/neural-noir-interface-style @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-neural-noir-interface-style",
"license": "CC0-1.0",
"attribution": "\"Neural Noir Interface Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/neural-noir-interface-style @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#0a0a0a"
},
"foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"card": {
"$type": "color",
"$value": "#0a0a0a"
},
"card-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"primary": {
"$type": "color",
"$value": "#a78b71"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#c9b8a0"
},
"secondary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"accent": {
"$type": "color",
"$value": "#c9b8a0"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#191919"
},
"muted-foreground": {
"$type": "color",
"$value": "#a3a3a2"
},
"border": {
"$type": "color",
"$value": "#2c2c2c"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#a78b71"
}
},
"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 */
/* "Neural Noir Interface Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/neural-noir-interface-style @ 6c6090694520. */
:root {
--background: #0a0a0a;
--foreground: #fafaf9;
--card: #0a0a0a;
--card-foreground: #fafaf9;
--primary: #a78b71;
--primary-foreground: #fafaf9;
--secondary: #c9b8a0;
--secondary-foreground: #fafaf9;
--accent: #c9b8a0;
--accent-foreground: #fafaf9;
--muted: #191919;
--muted-foreground: #a3a3a2;
--border: #2c2c2c;
--destructive: #dc2626;
--ring: #a78b71;
--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 */
/* "Neural Noir Interface Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/neural-noir-interface-style @ 6c6090694520. */
/** Tailwind theme extend for Neural Noir Interface Style (superdesign-neural-noir-interface-style) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#0a0a0a",
"foreground": "#fafaf9",
"card": "#0a0a0a",
"primary": "#a78b71",
"primary-foreground": "#fafaf9",
"secondary": "#c9b8a0",
"accent": "#c9b8a0",
"muted": "#191919",
"border": "#2c2c2c",
"destructive": "#dc2626",
"ring": "#a78b71"
},
"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 */
/* "Neural Noir Interface Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/neural-noir-interface-style @ 6c6090694520. */
@layer base {
:root {
--background: #0a0a0a;
--foreground: #fafaf9;
--card: #0a0a0a;
--card-foreground: #fafaf9;
--primary: #a78b71;
--primary-foreground: #fafaf9;
--secondary: #c9b8a0;
--secondary-foreground: #fafaf9;
--accent: #c9b8a0;
--accent-foreground: #fafaf9;
--muted: #191919;
--muted-foreground: #a3a3a2;
--border: #2c2c2c;
--destructive: #dc2626;
--ring: #a78b71;
--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);
}
}