TechnicalCollectible prompt

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.

Lovablev0Cursor

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

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.

Nvoka logo

Curated by Nvoka

Lovablev0CursorClaude Code
Add to my library

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 filled

Your 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.
See all