Electric Cobalt
#0004ebHeadlines, nav links, logo block fill, project category labels, section accents — the only chromatic voice in the system, treated at massive scale (wordmarks, 44–68px type) to dominate every surface it touches
Nakedcityfilms
nakedcityfilms.com
Website preview
The design language
Naked City Films operates as a high-contrast editorial production brand: a flat, shadowless canvas that swings between cool gray daylight and near-black midnight, anchored by a single electric blue (#0004eb) that functions as both voice and verb. Typography is the entire interface — an ultralight-to-medium neo-grotesque pairs against an italic display serif for category labels, creating a magazine-spread rhythm where giant 68px headlines sit beside 13px navigation in the same family. Layout is deliberately asymmetric, floating UI panels over full-bleed cinematic media, with generous negative space used as a compositional element rather than leftover. The system rejects decoration: no shadows, no gradients, no rounded corners — confidence comes from type weight contrast, color commitment, and scale.
Color palette
brand
neutral
Abyssal Ink
#050516Dark section canvases, primary body text on light surfaces, reversed logo lockup — near-black with a barely-perceptible blue cast that keeps it on-brand rather than neutral
Bone White
#ffffffLight section canvases, inverted text on dark and blue surfaces, floating card backgrounds over media
Concrete Mist
#e6e6e6Primary light-mode page canvas, muted text fills, ghost-surface panels — the cool gray ground that lets the blue detonate
Fog Gray
#979797Secondary text, meta labels, placeholders, scrolling ticker background, low-emphasis chrome
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
68px · 500 · 1 · -2.04px trackingThe quick brown fox jumps
heading
44px · 500 · 1.1 · -1.32px trackingThe quick brown fox jumps
heading-sm
26px · 500 · 1.11 · -0.39px trackingThe quick brown fox jumps
subheading
18px · 500 · 1.67 · -0.216px trackingThe quick brown fox jumps
body
16px · 500 · 1.67 · -0.16px trackingThe quick brown fox jumps
text-13
13px · 100 · 2.31The quick brown fox jumps
caption
12px · 500 · 1.67 · -0.12px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Haas Grotesk
- Weights
- 100, 500
- Sizes
- 12, 13, 16, 18, 26, 44, 68
- Line height
- 1.00, 1.10, 1.11, 1.20, 1.67, 2.31
- Letter spacing
- -0.0300em at 44–68px, -0.0150em at 26px, -0.0120em at 18px, -0.0100em at 12–16px
- Fallback
- Neue Haas Grotesk, Inter, Helvetica Neue
Primary type system for all UI, nav, body, and display. Weight 100 (ultralight) and weight 500 (medium) are used in deliberate tension — ultralight for ambient/nav/micro-copy, medium for headlines and emphasis. The ultralight is anti-convention; most brands use 500–700 for headlines, this system whispers and then SHOUTS with the same family
Additional typeface
TRJNDaVinci
- Weights
- 500 italic
- Sizes
- 26, 44, 68
- Line height
- 1.10, 1.20
- Letter spacing
- -0.0300em
- Fallback
- Playfair Display Italic, Tiempos Headline Italic, Lora Italic
Display italic serif for project category labels and editorial accent lines ('Basketball', 'New York Knicks', 'Prompt & Purpose') — the only non-grotesque voice in the system, used sparingly to create a cinematic-magazine credit-roll feel against the geometric body type
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 70px
- Card padding
- 20px
- Element gap
- 12px
Border radius
cards
0pxbadges
0pxbuttons
0pxlogoBlock
0pxSpacing scale
2px10px12px20px30px40px70px80px85pxGuidelines
Do
- Use Electric Cobalt (#0004eb) at large scale (26px+) for any primary headline or category label — it is a voice, not a highlight color
- Pair Haas Grotesk weight 100 (ambient) with weight 500 (emphasis) in the same block to create tension within a single family
- Apply tight tracking at scale: -2.04px at 68px, -1.32px at 44px, -0.39px at 26px — looser tracking at display sizes reads as weak
- Alternate between #e6e6e6 light canvas and #050516 dark canvas section-by-section; the swing is the rhythm
- Let media bleed to the viewport edge; overlay UI on top with white or dark cards, never inset imagery into containers
- Use TRJNDaVinci italic at 26px+ exclusively for project categories and editorial accent — never for body or UI labels
- Maintain zero radius on all surfaces, blocks, and cards — the system is architecturally sharp
Don’t
- Do not apply shadows, blurs, or any elevation effects — depth comes from surface contrast only
- Do not round corners on the blue logo block, cards, buttons, or images — the flatness is the identity
- Do not use Electric Cobalt (#0004eb) for small text below 16px — it loses authority at micro scale
- Do not mix the display serif (DaVinci) with body copy or navigation — it belongs only to editorial category labels
- Do not center content unless it is the hero card — the layout language is asymmetric, not balanced
- Do not add gradients, textures, or decorative backgrounds to the blue — it must read as a single flat ink
- Do not use #979797 for primary text or interactive states — it is reserved for meta labels, placeholders, and ticker backgrounds
Components
NKD Logo Lockup
Primary brand markCustom wordmark: 'NKD' in Haas Grotesk weight 500 in #050516 (light mode) or #ffffff (dark mode), followed by a superscripted blue (#0004eb) square accent. The full extended lockup pairs NKD with 'CITY' set in white weight 500 on an Electric Cobalt (#0004eb) rectangular block of equal cap-height. Zero radius on the blue block. Total lockup is the loudest element on every page.
Floating Navigation Bar
Primary site navigationTop-aligned nav with NKD center, link groups flanking left ('Talents¹³', 'Studio') and right ('About', 'Contact'). Links in Haas Grotesk weight 100 at 13px, color #0004eb on light canvas / #ffffff on dark canvas. Superscript count badge ('¹³') in weight 500 adds editorial detail. No background fill, no border — floats directly on canvas.
Editorial Headline Block
Primary content statementHaas Grotesk weight 500 at 44–68px, line-height 1.10–1.20, color #0004eb on light surfaces. Tight tracking (-1.32px to -2.04px) creates dense, magazine-cover compression. Often paired with a gray placeholder bar (#979797) for redacted/forthcoming content. Asymmetric placement — pushed to the right column, not centered.
Project Card (Dark Mode)
Work showcase entryFull-width card on #050516 canvas. Category label in DaVinci italic at 26px, #0004eb, leading the card. Project title in Haas Grotesk weight 500 at 18–26px, #ffffff, tracking -0.216 to -0.39px. No border, no shadow, no radius — content sits directly on dark surface with generous vertical gap (40–70px) between cards. Asymmetric grid placement, not uniform columns.
Hero Media Overlay Card
Hero section UIWhite (#ffffff) rectangular panel floating centered over full-bleed cinematic video. Contains the NKD CITY extended lockup at massive scale and bottom-edge scrolling ticker. No border, no radius, no shadow — the contrast with media is enough to separate it.
Scrolling Ticker
Scroll-prompt marqueeHorizontal repeating text band at the bottom of the hero card. 'scroll down ·' in Haas Grotesk weight 500 at 12–13px, #0004eb on #979797 background, or reversed. Letter-spacing tight (-0.12px), line-height 1.67. Continuous CSS scroll animation.
Tagline Strip
Brand micro-voiceSingle-line statement in Haas Grotesk weight 100 at 13px, color #0004eb, positioned bottom-left of light sections. 'Smart stories. Bold execution. No shortcuts.' — serves as a quiet editorial signature, not a CTA.
Placeholder/Redacted Text Bar
Forthcoming content indicatorSolid #979797 rectangle used to mask unreleased project names or statements. Sits inline with editorial headline blocks, same cap-height as surrounding type, creating a deliberate 'classified' or 'censored' visual gesture. This is a signature element, not an error state.
Surfaces & elevation
Level 1
Light Canvas
#e6e6e6Default page background for editorial sections, text-heavy zones, transition areas
Level 2
Floating Card
#ffffffWhite panels that float above media or sit on the light canvas for maximum contrast and content isolation
Level 3
Dark Mode Canvas
#050516Immersive project showcase sections, work reels, dark editorial spreads
Level 4
Full-Bleed Media
video/imageCinematic background footage with UI floating as overlay cards
The design system has zero shadows. Depth is created exclusively through surface contrast — light gray (#e6e6e6) against white (#ffffff), dark (#050516) against the electric blue (#0004eb), and media beneath floating cards. This flatness is a deliberate statement: the brand does not lift off the page, it commits to it. The absence of blur and ambient shadow is what gives the type its power.
Layout & imagery
Imagery
Full-bleed cinematic video and high-resolution photography dominate immersive sections — outdoor lifestyle footage (canoeing on a lake, people in nature) shot in warm golden-hour light, intentionally contrasting with the cool gray UI that floats on top. Imagery is never cropped to UI containers; it always bleeds to the viewport edge, with cards and text overlaid. No product screenshots, no illustrations, no abstract graphics. The visual language is pure documentary cinema: the people, the place, the story.
Design notes
Agent Guide
**Quick Color Reference** - text: #050516 (dark on light) / #ffffff (light on dark) - background: #e6e6e6 (light canvas) / #050516 (dark canvas) / #ffffff (floating card) - border: none (the system does not use borders) - accent: #0004eb (Electric Cobalt — headlines, links, category labels, logo block) - muted: #979797 (meta text, placeholders, ticker background) - primary action: no distinct CTA color **Example Component Prompts** 1. Create a hero section: full-bleed cinematic video background (16:9, outdoor documentary footage). Over it, a centered white (#ffffff) floating card with zero radius, no shadow. Inside the card, the NKD CITY lockup: 'NKD' in Haas Grotesk 500 at 120px in #050516, followed by 'CITY' in Haas Grotesk 500 at 120px white text on an #0004eb block of equal cap-height. Below the card, a scrolling ticker bar: #979797 background, 'scroll down · scroll down ·' in #0004eb Haas Grotesk 500 at 13px, letter-spacing -0.13px, animated left-scrolling. 2. Create an editorial headline section on #e6e6e6 canvas. Headline in Haas Grotesk 500 at 68px, #0004eb, line-height 1.00, letter-spacing -2.04px, positioned right-aligned at 60% page width. Below it, a #979797 solid rectangle bar (40% width, 20px height) as a redacted-content placeholder. Bottom-left corner: tagline in Haas Grotesk 100 at 13px, #0004eb, letter-spacing -0.13px. 3. Create a dark project grid on #050516 canvas. Project cards placed in an asymmetric layout (not uniform columns). Each card: category label in DaVinci italic 500 at 26px in #0004eb with letter-spacing -0.78px, followed by project title in Haas Grotesk 500 at 18px in #ffffff with letter-spacing -0.18px. 70px vertical gap between cards. No borders, no shadows, no backgrounds — text sits directly on the dark canvas. 4. Create a navigation bar: NKD logo center in Haas Grotesk 500 at 16px #050516, with a small #0004eb superscript square accent after the K. Left group: 'Talents¹³' and 'Studio' links in Haas Grotesk 100 at 13px #0004eb, letter-spacing -0.13px. Right group: 'About' and 'Contact' in same style. The '¹³' superscript in weight 500. No background, no border, sits directly on the #e6e6e6 canvas. 5. Create a scrolling marquee ticker: full-width bar, 28px height, #979797 background. Text: 'scroll down · ' repeated, in Haas Grotesk 500 at 12px #0004eb, letter-spacing -0.12px, animated with continuous left-scroll CSS animation, linear timing, no easing.
Motion & Interaction
The system is visually static but alive at edges: a continuous horizontal scroll ticker is the only persistent motion element. Scroll-triggered section reveals should be instant cuts (no fade, no slide) — the light-to-dark section alternation is the transition. Hover states on links and nav items: color shift to #0004eb if not already, or weight shift from 100 to 500. No parallax, no scroll-jacking, no decorative animation.
Similar brands
Buck
Same full-bleed cinematic media with minimal flat UI overlay, and commitment to a single saturated accent color against neutral canvas
Manual Creative
Asymmetric editorial layouts, ultralight-to-medium weight contrast within a single geometric sans, and zero-decoration flat surfaces
Giant Ant
Production company portfolio with dark immersive project sections alternating with light editorial canvas, tight typographic system
Studio Terri
Bold single-color accent (electric blue) used at massive type scale, sharp angular layout with no rounded corners or shadows
Pentagram
Editorial magazine-spread rhythm, display italic serif paired with neo-grotesque body, generous negative space used compositionally
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
