Hub

Dark Palette Study

MIDNIGHT NOIR

Deep black as canvas. Rose copper as the only voice. Every element earns its place through restraint, not decoration.

Contrast is not about brightness.
It is about knowing where to place
the single point of warmth.

Midnight Noir works by creating depth through near-black layers. The background is not flat black but a composition of surfaces: #080808, #101010, #181818 — each a half-step lighter, building subtle dimension. The accent arrives sparingly: a single rose copper tone on borders, numerals, and typographic emphasis. When prompting for this style, avoid the word "luxury." Instead, specify the components: deep layered blacks, a single rose copper accent, serif headlines with generous tracking, and cinematic negative space.

Color System
Void
#050505
Midnight
#080808
Surface
#101010
Elevated
#181818
Border
#252525
Dim Copper
#7A6544
Copper
#B8956A
Typography
Display Title
Cormorant Garamond 700
clamp(2rem, 4.5vw, 3.2rem)
tracking 0.06em
Italic Emphasis
Cormorant Garamond 600i
1.4rem · lh 1.4
Body text set in Syne — geometric and clean
Syne 400
0.88rem · lh 1.85
Label / Section Marker
Syne 500 uppercase
0.65rem · tracking 0.3em

Design Constraints

01 Background is never flat black. Use 3+ layered near-black surfaces with 1px borders for separation.
02 One accent color only: warm rose copper (#c49e78). No secondary accents, no gradients on the accent.
03 No rounded corners. No border-radius. Sharp edges reinforce the architectural mood.
04 No glow, no text-shadow, no box-shadow. Depth comes from surface layering, not effects.
05 Animations are slow rises (0.8s ease). No bounce, no spring. Motion should feel like a curtain lifting.
06 Film grain overlay at 2.5% opacity. Barely visible — felt more than seen.

AI Request Prompt

Design a landing page in Midnight Noir style — rose copper accents on pure black layers, cinematic restraint.

COLOR TOKENS:
--bg: #080808
--surface: #101010
--surface-2: #181818
--border: #252525
--border-warm: #2a2520
--accent: #c49e78
--accent-dim: #8a7058
--text: #d8d0c4
--text-muted: #6e6a64
Background: solid var(--bg). Subtle radial glow of accent at 12% opacity near top center.
No other colors. No gradients on accent elements.

TYPOGRAPHY:
Display: Cormorant Garamond 700, clamp(3.2rem, 9vw, 7.5rem), tracking 0.06em, lh 0.85
Headline: Cormorant Garamond 600, 1.1-1.6rem, lh 1.3
Quote: Cormorant Garamond 400 italic, clamp(1.5rem, 3.2vw, 2.2rem), lh 1.4
Body: Syne 400, 0.82-0.88rem, lh 1.85
Labels: Syne 500, 0.65-0.7rem, uppercase, tracking 0.3em
Drop cap: Cormorant Garamond 700, 3rem, accent color

UI:
- All panels: border 1px solid var(--border), background var(--surface), no border-radius, no box-shadow
- Hero: centered, padding 48-100px, subtle radial gradient glow from top
- Hero title: "MIDNIGHT" in solid text + "NOIR" in transparent text with -webkit-text-stroke 1.5px accent
- Editorial: 2-column grid (1fr + 300px sidebar)
- Sidebar principles: stacked cards with 1px border separation, no gap
- Accent line: 48px wide, 1px height, 60% opacity on hero
- Pull quote: left border 2px solid accent, padding-left 20-32px, italic serif

LAYOUT:
Content max-width: min(1040px, 92vw)
Page padding: 30px 20px 80px
Section gaps: clamp(40px, 6vw, 72px)
Thin rules: 1px, linear-gradient transparent → border → transparent

MOTION:
Entrance: translateY(12px) → 0, opacity 0 → 1, 800ms ease, stagger 150ms
Gradient stops: flex transition 0.4s on hover
No glow, no text-shadow animations.
Respect prefers-reduced-motion.

RESPONSIVE:
768px: editorial → single column, sidebar wraps horizontal, swatches 4-col
480px: sidebar stacks vertical, swatches 4-col

FORBIDDEN:
- Pure #000 background (too flat)
- Rounded corners / border-radius on any element
- Box-shadow, text-shadow, or glow effects
- High-saturation or neon colors
- More than one accent color
- Decorative ornaments (art deco patterns, chevrons, sunbursts)
- Sans-serif headings

OUTPUT:
1) Color + typography tokens as CSS custom properties
2) Hero / Editorial (story + sidebar) / Color System / Type Showcase / Design Rules
3) Semantic HTML + CSS with responsive support and film grain overlay