Cinematic Style
superdesignCC0-1.0Prompt onlyLanding · landingGlassmorphism · glassmorphismGradient · gradientFuturistic · futuristicLuxury · luxuryLight · lightLow (display) · lowCyan · cyanVivid · vividSerif · serifGeneral · general
A high-end 'Cinematic' design system characterized by deep-space dark backgrounds, sophisticated 3D CSS transforms, and bold editorial typography. Optimized for premium portfolios, creative agencies, fintech, and high-tech SaaS. It features a signature 3D rolodex/cube hero section, glassmorphism elements, and smooth GSAP-driven scroll parallax. Key aesthetics include 'mix-blend-difference' navigation, vibrant neon gradients (cyan to pink), and a monochromatic 'Aspekta' font foundation with heavy weights and tight tracking. 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
"Cinematic Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/cinematic-style @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/cinematic-style · 6c6090694520 · © Superdesign
Prompt
{
"summary": "The 'Cinematic Style' is an immersive, dark-mode design system using 3D spatial depth and high-contrast typography to create a theatrical user experience. It blends brutalist layout structures (heavy borders, massive text) with fluid, high-tech motion.",
"style": {
"description": "The style utilizes a base of #050505 for depth. Typography is centered around 'Aspekta' (weights 300, 500, 700, 900), prioritizing font-weight: 900 for hero headings and font-weight: 700 with wide tracking (0.2em) for secondary labels. Color accents are minimal but punchy: a gradient from cyan (#06B6D4) to pink (#EC4899) for primary buttons, and a purple glow (#7C3AED) for functional sections. Interactive elements use backdrop-filter: blur(8px) and border: 1px solid rgba(255, 255, 255, 0.1).",
"prompt": "Theme: Cinematic Dark Mode.\n- Colors: Background: #050505; Card Surface: #111111; Text Primary: #FFFFFF; Text Secondary: #999999; Accent Gradient: linear-gradient(to right, #06B6D4, #EC4899).\n- Typography: Primary font 'Aspekta'. Hero Headings: size 12vw, weight 900, tracking-tighter. Section Headers: size 10vw, weight 900. Body: size 1.125rem, weight 300.\n- Effects: Perspective: 2000px; Backdrop Blur: 8px; Glassmorphism borders: 1px solid rgba(255,255,255,0.1).\n- Interactions: Button scale 1.02 on hover; Link transition 0.2s duration; Image grayscale 100% to 0% on hover."
},
"layout_and_structure": {
"description": "The layout follows a modular vertical stack with a fixed, blend-mode-enabled navigation. It transitions from a 3D immersive hero to a bento-style project grid, then into a high-contrast pricing section with deep glow effects, concluding with a massive-scale editorial footer.",
"prompts": [
{
"part": "Sticky Navigation",
"prompt": "Fixed header at top-0. padding: 1.5rem 2rem. Elements: Logo (left), Nav Links (center, hidden on mobile), CTA Button (right). Essential: Apply 'mix-blend-difference' to the entire nav container. Use a red-500 pulsing dot next to the logo for 'live' status feel."
},
{
"part": "3D Rolodex Hero",
"prompt": "Full viewport height (100vh). Background: Massive background text (#FFFFFF, opacity 0.3 on scroll) centered. Foreground: A 3D Cube wrapper using 'transform-style: preserve-3d'. Dimensions: 50vh x 50vh. Four faces (Front, Bottom, Back, Top) each rotated 90 degrees on X-axis and translated 30vh (Z-axis). Each face contains a high-quality object-fit image and centered uppercase title (tracking 0.2em). Smooth infinite rotation animation on X-axis."
},
{
"part": "Case Studies Grid",
"prompt": "Container max-width 90rem. Header: Large 10vw tracking-tighter text. Layout: Featured project spans full width (aspect-video) with macOS-style traffic light window controls (Red, Yellow, Green dots). Sub-projects follow in a 2-column grid (aspect-4/3). Styling: Images start at grayscale(1) and transition to color on hover. Borders: 1px solid rgba(255,255,255,0.1)."
},
{
"part": "Pricing Section",
"prompt": "Background: #0B0216 with a central purple glow (#7C3AED blur 100px). Feature: Three-tier card system. Growth card (center) should be scaled 1.05 with a white background and dark text (#111111). Side cards use glassmorphism (#FFFFFF/5 opacity, backdrop-blur). Footer: A calculator component with a dark purple container (#1A0B2E) and a white custom range slider."
}
]
},
"special_ui_components": [
{
"component": "3D Transform Cube",
"description": "A rotating 4-sided prism used for feature displays.",
"prompt": "Create a container with perspective: 2000px. Inner 'cube-wrapper' must have transform-style: preserve-3d. Define four 'cube-face' elements. Front: rotateX(0deg) translateZ(30vh). Bottom: rotateX(-90deg) translateZ(30vh). Back: rotateX(-180deg) translateZ(30vh). Top: rotateX(90deg) translateZ(30vh). Apply a constant GSAP or CSS animation: to { transform: rotateX(360deg); }."
},
{
"component": "Glass-morphism Price Calculator",
"description": "A custom range input for interactive price estimation.",
"prompt": "Container: #1A0B2E background, 32px border-radius. Slider: appearance-none, height 8px, background #374151. Thumb: 24px diameter, solid white, shadow 0 0 0 4px rgba(124, 58, 237, 0.5). Display: Large text ($ price) that updates dynamically via JavaScript based on slider value (e.g., value * 125)."
}
],
"special_notes": "MUST maintain the perspective: 2000px on the hero container for 3D depth. DO NOT use standard shadows; use border-white/10 and backdrop-blur for depth. MUST use 'mix-blend-difference' on the header to ensure visibility over shifting background colors. Typography must be uppercase for all headings to maintain the cinematic editorial feel."
}
---
"Cinematic Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/cinematic-style @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Cinematic Style. \"Cinematic Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/cinematic-style @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-cinematic-style",
"license": "CC0-1.0",
"attribution": "\"Cinematic Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/cinematic-style @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#ffffff"
},
"foreground": {
"$type": "color",
"$value": "#050505"
},
"card": {
"$type": "color",
"$value": "#ffffff"
},
"card-foreground": {
"$type": "color",
"$value": "#050505"
},
"primary": {
"$type": "color",
"$value": "#06b6d4"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#050505"
},
"secondary-foreground": {
"$type": "color",
"$value": "#050505"
},
"accent": {
"$type": "color",
"$value": "#ec4899"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#f0f0f0"
},
"muted-foreground": {
"$type": "color",
"$value": "#5d5d5d"
},
"border": {
"$type": "color",
"$value": "#dbdbdb"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#06b6d4"
}
},
"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 */
/* "Cinematic Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/cinematic-style @ 6c6090694520. */
:root {
--background: #ffffff;
--foreground: #050505;
--card: #ffffff;
--card-foreground: #050505;
--primary: #06b6d4;
--primary-foreground: #fafaf9;
--secondary: #050505;
--secondary-foreground: #050505;
--accent: #ec4899;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #5d5d5d;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #06b6d4;
--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 */
/* "Cinematic Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/cinematic-style @ 6c6090694520. */
/** Tailwind theme extend for Cinematic Style (superdesign-cinematic-style) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#ffffff",
"foreground": "#050505",
"card": "#ffffff",
"primary": "#06b6d4",
"primary-foreground": "#fafaf9",
"secondary": "#050505",
"accent": "#ec4899",
"muted": "#f0f0f0",
"border": "#dbdbdb",
"destructive": "#dc2626",
"ring": "#06b6d4"
},
"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 */
/* "Cinematic Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/cinematic-style @ 6c6090694520. */
@layer base {
:root {
--background: #ffffff;
--foreground: #050505;
--card: #ffffff;
--card-foreground: #050505;
--primary: #06b6d4;
--primary-foreground: #fafaf9;
--secondary: #050505;
--secondary-foreground: #050505;
--accent: #ec4899;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #5d5d5d;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #06b6d4;
--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);
}
}