TechnicalCollectible prompt
Dark cinematic design system for your website
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete dark cinematic design system. Keep every page, route, component and line of content; change only the visual layer, through shared tokens in the current styling system. Read the existing styles first and tell me what you'll replace. Our brand colors are {{brand_colors}}: map them onto the roles below where they fit, and if they fight the style, keep one as the accent and use the pack's neutrals.
Type: Archivo 700 at its widest width, uppercase at +0.04em, for titles; Inter 400 and 500 for text at 17px, line height 1.6. Scale 1.333: 17, 23, 30, 40, 54, 72, and 104px for the title card.
Palette: background #0A0A0B, surface #141416, raised #1C1C1F, text #EDEBE6, muted #A3A09A, border #26262A, accent tungsten amber #E8A33D (hover #F2B85C) for calls to action and one detail per scene.
Shape: radius 4px; 1px borders; no shadows. Depth comes from light: vignettes and dark fades at image edges.
Grid: 12 columns, 24px gutters at 1280px; hero media letterboxed at 2.39:1; 8 columns at 768px; 4 at 360px with 16px margins; section padding 80px mobile, 160px desktop.
Imagery: stills or footage in one grade: rich blacks, warm highlights, film grain at 4%. Hero video muted, under 4MB, with a poster image and a visible pause button, and a still image with reduced motion.
Motion: slow and deliberate. 600ms crossfades between scenes, 300ms for UI; no parallax on text.
Signature details: a title-card hero with wide tracking; sections labeled like scenes (01, 02, 03); a credits-style footer listing the real team, partners or services; subtitle-style captions under key images.
Do: one image per screen, short high-contrast text, and the call to action as the only warm color.
Avoid: gray text below 4.5:1 on black, sound that plays on its own, heavy video on phones, teal-and-orange grading, lens flares.
Check: text contrast of at least 4.5:1, visible focus, 44px touch targets, no horizontal scroll at 360px, reduced motion respected. Finish with a short change list and the reason for each decision.
Technicalnvoka.com/library/nvoka-dark-cinematic-design-system-for-your-websiteScan to open
Technical
Dark cinematic design system for your website
Letterboxed heroes, wide title type and one warm accent on near-black, like a film's opening titles.
Curated by Nvoka
Lovablev0CursorClaude Code
Make it yours
Fill in the blanks and change any word. Only your copy changes, never the card.
Fill in the blanks
0 of 3 filledYour prompt
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete dark cinematic design system. Keep every page, route, component and line of content; change only the visual layer, through shared tokens in the current styling system. Read the existing styles first and tell me what you'll replace. Our brand colors are {{brand_colors}}: map them onto the roles below where they fit, and if they fight the style, keep one as the accent and use the pack's neutrals.
Type: Archivo 700 at its widest width, uppercase at +0.04em, for titles; Inter 400 and 500 for text at 17px, line height 1.6. Scale 1.333: 17, 23, 30, 40, 54, 72, and 104px for the title card.
Palette: background #0A0A0B, surface #141416, raised #1C1C1F, text #EDEBE6, muted #A3A09A, border #26262A, accent tungsten amber #E8A33D (hover #F2B85C) for calls to action and one detail per scene.
Shape: radius 4px; 1px borders; no shadows. Depth comes from light: vignettes and dark fades at image edges.
Grid: 12 columns, 24px gutters at 1280px; hero media letterboxed at 2.39:1; 8 columns at 768px; 4 at 360px with 16px margins; section padding 80px mobile, 160px desktop.
Imagery: stills or footage in one grade: rich blacks, warm highlights, film grain at 4%. Hero video muted, under 4MB, with a poster image and a visible pause button, and a still image with reduced motion.
Motion: slow and deliberate. 600ms crossfades between scenes, 300ms for UI; no parallax on text.
Signature details: a title-card hero with wide tracking; sections labeled like scenes (01, 02, 03); a credits-style footer listing the real team, partners or services; subtitle-style captions under key images.
Do: one image per screen, short high-contrast text, and the call to action as the only warm color.
Avoid: gray text below 4.5:1 on black, sound that plays on its own, heavy video on phones, teal-and-orange grading, lens flares.
Check: text contrast of at least 4.5:1, visible focus, 44px touch targets, no horizontal scroll at 360px, reduced motion respected. Finish with a short change list and the reason for each decision.