Dark Editorial is a moody, magazine-inspired web design aesthetic that merges the structural sophistication of print editorial layouts with the atmospheric intensity of dark-themed digital interfaces. It draws directly from the traditions of high-end fashion magazines, art publications, and literary journals – translating their meticulous attention to typographic hierarchy, dramatic photography, and deliberate white space into a screen-first experience built on deep, near-black backgrounds. The result is a web design language that feels like paging through a premium publication in a dimly lit room: every element is intentional, every contrast carefully controlled, and every image treated as a visual event.
The aesthetic relies on a tenebrism-inspired approach to contrast, where light-colored typography and carefully exposed photography emerge from dark surroundings with dramatic visual weight. Rather than the flat uniformity of standard dark mode, Dark Editorial uses layered shades of near-black, charcoal, and deep warm neutrals to create depth and spatial hierarchy without requiring explicit borders or shadow effects. Photography is treated as a first-class design element – full-bleed hero images, cinematic aspect ratios, and desaturated or high-contrast treatments give imagery the gravitas of gallery prints rather than web thumbnails.
Typography is the structural backbone. Dark Editorial favors refined serif typefaces for display headings, evoking the authority of masthead titles, paired with clean sans-serifs for body text that maintains readability against dark backgrounds. Generous letter-spacing on uppercase labels, pull quotes set in italic serifs, and strict vertical rhythm create the cadence of a well-designed magazine spread. Font sizes tend toward the large and confident, with display headings often dominating the viewport.
The color palette is deliberately restrained: deep blacks, warm charcoals, muted golds, and the occasional accent of burgundy or ivory. Color is used sparingly and purposefully, as a compositional tool rather than decoration. This restraint, combined with asymmetric grid layouts, generous negative space, and scroll-triggered content reveals, produces an experience that is simultaneously luxurious and austere – inviting prolonged, immersive reading rather than hurried scanning. By 2026, Dark Editorial has become the design language of choice for fashion brands, photography portfolios, cultural magazines, luxury e-commerce, and any digital context where content deserves to be experienced rather than merely consumed.
#000000 is avoided in favor of warm or cool dark tones that prevent visual flatness and maintain subtlety between surface layersDark Editorial relies on a restrained palette of warm and cool near-blacks, muted metallics, and carefully selected accent tones. The foundation is built from layered dark backgrounds – never pure black, but warm charcoals and cool slate tones that create depth through subtle variation. Accent colors are used with the precision of a magazine art director: a thread of gold through a layout, a single burgundy rule beneath a pull quote, ivory text that glows against darkness.
| Swatch | Hex | Role/Usage |
|---|---|---|
| Obsidian | #0C0C0E |
Primary page background; deepest surface layer |
| Dark Graphite | #141416 |
Secondary background; article body containers |
| Charcoal Warm | #1C1B1F |
Card backgrounds; elevated surfaces |
| Slate Dark | #242428 |
Tertiary surface; sidebar and aside panels |
| Smoke | #2E2E34 |
Hover states on dark surfaces; subtle elevation |
| Pewter | #6B6B76 |
Muted metadata; disabled states; tertiary text |
| Silver Prose | #9E9EA8 |
Secondary body text; captions; bylines |
| Parchment | #E8E4DF |
Primary body text on dark backgrounds |
| Ivory | #F5F2ED |
Display heading text; high-emphasis content |
| Pure White | #FFFFFF |
Maximum emphasis; hero titles over dark images |
| Antique Gold | #C9A84C |
Primary accent; links, rules, category labels |
| Burnished Brass | #A8872A |
Secondary accent; hover state for gold elements |
| Deep Burgundy | #6B1D2A |
Tertiary accent; feature highlights, pull-quote borders |
| Wine | #8C2F3E |
Hover state for burgundy elements; active links |
| Muted Sage | #4A5D4A |
Optional nature-editorial accent; success states |
:root {
--de-obsidian: #0C0C0E;
--de-graphite: #141416;
--de-charcoal: #1C1B1F;
--de-slate: #242428;
--de-smoke: #2E2E34;
--de-pewter: #6B6B76;
--de-silver: #9E9EA8;
--de-parchment: #E8E4DF;
--de-ivory: #F5F2ED;
--de-white: #FFFFFF;
--de-gold: #C9A84C;
--de-brass: #A8872A;
--de-burgundy: #6B1D2A;
--de-wine: #8C2F3E;
--de-sage: #4A5D4A;
}
Dark Editorial typography is rooted in the traditions of print magazine design, where the interplay between a commanding serif headline and a clean, legible sans-serif body creates the visual cadence of a well-paced article. Display headings use high-contrast serifs with pronounced thick-thin stroke variation – typefaces that reference Bodoni, Didot, and other modern-classification serifs historically used in fashion and literary mastheads. Body text shifts to humanist or geometric sans-serifs that offer excellent screen readability at smaller sizes against dark backgrounds, since sans-serifs maintain cleaner rendering with less stroke detail competing against low-luminance surfaces.
| Font | Weight(s) | Usage | Link |
|---|---|---|---|
| Playfair Display | 400, 500, 600, 700, 800, 900 | Display headings; hero titles; masthead-style typography | Playfair Display |
| Cormorant Garamond | 300, 400, 500, 600, 700 | Pull quotes; subheadings; elegant editorial accent | Cormorant Garamond |
| Bodoni Moda | 400, 500, 600, 700, 800, 900 | Alternative display serif; high-contrast Didone style | Bodoni Moda |
| Source Sans 3 | 300, 400, 500, 600, 700 | Body text; UI labels; excellent readability on screens | Source Sans 3 |
| Inter | 300, 400, 500, 600, 700 | Alternative body text; metadata; captions; navigation | Inter |
| Heading | Body | Vibe |
|---|---|---|
| Playfair Display 700 | Source Sans 3 400 | Classic luxury editorial; fashion magazine |
| Bodoni Moda 600 | Inter 400 | High-contrast Didone; modern art publication |
| Cormorant Garamond 600 | Source Sans 3 400 | Refined literary journal; elegant long-form |
| Playfair Display 800 | Inter 400 | Bold masthead energy; cultural magazine cover |
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
font-size: 1.05rem;
line-height: 1.8;
color: #E8E4DF;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 {
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
font-weight: 700;
color: #F5F2ED;
line-height: 1.15;
}
h1 {
font-size: clamp(2.8rem, 6vw, 5.5rem);
letter-spacing: -0.02em;
}
h2 {
font-size: clamp(1.6rem, 3.5vw, 2.8rem);
letter-spacing: -0.01em;
}
h3 {
font-size: clamp(1.2rem, 2vw, 1.6rem);
letter-spacing: 0;
}
.editorial-label {
font-family: 'Source Sans 3', sans-serif;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #C9A84C;
}
.pull-quote {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.4rem, 3vw, 2.2rem);
font-style: italic;
font-weight: 400;
color: #F5F2ED;
line-height: 1.5;
}
.de-card {
background: var(--de-charcoal);
border: none;
border-radius: 0;
padding: 0;
overflow: hidden;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.de-card:hover {
transform: translateY(-4px);
}
.de-card .card-image {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
filter: grayscale(20%) contrast(1.05);
transition: filter 0.6s ease, transform 0.6s ease;
}
.de-card:hover .card-image {
filter: grayscale(0%) contrast(1.1);
transform: scale(1.03);
}
.de-card .card-image-wrapper {
overflow: hidden;
}
.de-card .card-body {
padding: 28px 24px 32px;
}
.de-card .card-category {
font-family: 'Source Sans 3', sans-serif;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--de-gold);
margin-bottom: 12px;
display: block;
}
.de-card .card-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.35rem;
font-weight: 700;
color: var(--de-ivory);
line-height: 1.3;
margin-bottom: 12px;
}
.de-card .card-excerpt {
font-family: 'Source Sans 3', sans-serif;
font-size: 0.95rem;
color: var(--de-silver);
line-height: 1.7;
}
.de-card .card-meta {
font-family: 'Source Sans 3', sans-serif;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--de-pewter);
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.de-button {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
color: var(--de-ivory);
border: 1px solid var(--de-gold);
border-radius: 0;
padding: 14px 36px;
font-family: 'Source Sans 3', sans-serif;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
}
.de-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--de-gold);
transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: -1;
}
.de-button:hover {
color: var(--de-obsidian);
border-color: var(--de-gold);
}
.de-button:hover::before {
width: 100%;
}
.de-button--filled {
background: var(--de-gold);
color: var(--de-obsidian);
border-color: var(--de-gold);
}
.de-button--filled:hover {
background: var(--de-brass);
border-color: var(--de-brass);
color: var(--de-obsidian);
}
.de-button--text {
border: none;
padding: 14px 0;
color: var(--de-gold);
letter-spacing: 0.12em;
}
.de-button--text::after {
content: '';
display: inline-block;
width: 24px;
height: 1px;
background: var(--de-gold);
vertical-align: middle;
margin-left: 12px;
transition: width 0.3s ease;
}
.de-button--text:hover::after {
width: 40px;
}
.de-button--text::before {
display: none;
}
.de-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 48px;
height: 60px;
background: rgba(12, 12, 14, 0.85);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background 0.4s ease, border-color 0.4s ease;
}
.de-nav.scrolled {
background: rgba(12, 12, 14, 0.96);
border-bottom-color: rgba(201, 168, 76, 0.15);
}
.de-nav .masthead {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.3rem;
font-weight: 700;
color: var(--de-ivory);
text-decoration: none;
letter-spacing: 0.02em;
}
.de-nav .nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.de-nav .nav-links a {
font-family: 'Source Sans 3', sans-serif;
font-size: 0.72rem;
font-weight: 600;
color: var(--de-silver);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 6px 0;
position: relative;
transition: color 0.3s ease;
}
.de-nav .nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--de-gold);
transition: width 0.3s ease;
}
.de-nav .nav-links a:hover {
color: var(--de-ivory);
}
.de-nav .nav-links a:hover::after {
width: 100%;
}
.de-nav .nav-links a.active {
color: var(--de-gold);
}
.de-nav .nav-links a.active::after {
width: 100%;
}
.de-hero {
position: relative;
height: 100vh;
min-height: 600px;
display: flex;
align-items: flex-end;
justify-content: flex-start;
overflow: hidden;
padding: 80px 64px;
}
.de-hero .hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.4) contrast(1.1) saturate(0.8);
transition: transform 8s ease;
}
.de-hero:hover .hero-image {
transform: scale(1.03);
}
.de-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(12, 12, 14, 0.95) 0%,
rgba(12, 12, 14, 0.6) 35%,
rgba(12, 12, 14, 0.2) 60%,
transparent 100%
);
pointer-events: none;
}
.de-hero .hero-content {
position: relative;
z-index: 10;
max-width: 720px;
}
.de-hero .hero-label {
font-family: 'Source Sans 3', sans-serif;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--de-gold);
margin-bottom: 20px;
display: block;
}
.de-hero h1 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2.8rem, 6vw, 5.5rem);
font-weight: 700;
color: var(--de-white);
line-height: 1.08;
letter-spacing: -0.02em;
margin-bottom: 24px;
}
.de-hero .hero-subtitle {
font-family: 'Source Sans 3', sans-serif;
font-size: 1.1rem;
color: var(--de-parchment);
line-height: 1.7;
max-width: 520px;
margin-bottom: 36px;
}
.de-hero .hero-meta {
font-family: 'Source Sans 3', sans-serif;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--de-pewter);
}
.de-hero .hero-meta span {
color: var(--de-gold);
}
.de-pull-quote {
position: relative;
max-width: 680px;
margin: 80px auto;
padding: 48px 0;
text-align: center;
border-top: 1px solid var(--de-gold);
border-bottom: 1px solid var(--de-gold);
}
.de-pull-quote blockquote {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.5rem, 3vw, 2.4rem);
font-style: italic;
font-weight: 400;
color: var(--de-ivory);
line-height: 1.5;
margin: 0;
}
.de-pull-quote cite {
display: block;
margin-top: 24px;
font-family: 'Source Sans 3', sans-serif;
font-size: 0.75rem;
font-style: normal;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--de-gold);
}
.de-drop-cap::first-letter {
font-family: 'Playfair Display', Georgia, serif;
font-size: 4.2em;
font-weight: 700;
float: left;
line-height: 0.8;
margin-right: 12px;
margin-top: 6px;
color: var(--de-ivory);
}
.de-article-body {
font-family: 'Source Sans 3', sans-serif;
font-size: 1.05rem;
line-height: 1.85;
color: var(--de-parchment);
max-width: 680px;
}
.de-article-body p {
margin-bottom: 1.6em;
}
.de-article-body a {
color: var(--de-gold);
text-decoration: none;
border-bottom: 1px solid rgba(201, 168, 76, 0.3);
transition: border-color 0.3s ease;
}
.de-article-body a:hover {
border-bottom-color: var(--de-gold);
}
.de-gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 4px;
margin: 80px 0;
}
.de-gallery .gallery-item {
overflow: hidden;
position: relative;
}
.de-gallery .gallery-item--wide {
grid-column: span 8;
}
.de-gallery .gallery-item--narrow {
grid-column: span 4;
}
.de-gallery .gallery-item--half {
grid-column: span 6;
}
.de-gallery .gallery-item--full {
grid-column: span 12;
}
.de-gallery .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(15%) contrast(1.05);
transition: filter 0.6s ease, transform 0.8s ease;
}
.de-gallery .gallery-item:hover img {
filter: grayscale(0%) contrast(1.1);
transform: scale(1.04);
}
.de-gallery .gallery-item .caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px 20px;
background: linear-gradient(to top, rgba(12, 12, 14, 0.85), transparent);
font-family: 'Source Sans 3', sans-serif;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--de-parchment);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.de-gallery .gallery-item:hover .caption {
opacity: 1;
transform: translateY(0);
}
.de-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.de-reveal.visible {
opacity: 1;
transform: translateY(0);
}
.de-reveal.delay-1 { transition-delay: 0.1s; }
.de-reveal.delay-2 { transition-delay: 0.2s; }
.de-reveal.delay-3 { transition-delay: 0.3s; }
.de-reveal.delay-4 { transition-delay: 0.4s; }
.de-reveal.from-left {
transform: translateX(-40px);
}
.de-reveal.from-left.visible {
transform: translateX(0);
}
.de-reveal.from-right {
transform: translateX(40px);
}
.de-reveal.from-right.visible {
transform: translateX(0);
}
font-display: swap, subset fonts to needed character ranges, and preload critical weights| Aesthetic | Relationship |
|---|---|
| Dark Mode / Dark UI | Shares the dark background foundation, but Dark Editorial adds print-inspired typography, editorial grid layouts, and restrained metallic accents that elevate it from functional dark UI to luxurious publication design |
| Minimalist | Both prize negative space, restraint, and typographic clarity; Dark Editorial adds the warmth of serif typography, photographic drama, and magazine-inspired asymmetry that pure minimalism often strips away |
| Swiss / International Typographic | Shares the grid-based, typography-first approach, but Dark Editorial favors serif display type and asymmetric layouts over the rigid sans-serif grids of Swiss style |
| Luxury / Premium | Overlaps heavily in tone and intent; both convey exclusivity through restraint, quality materials (typefaces, imagery), and generous space; Dark Editorial is essentially the publication-focused branch of luxury web design |
| Brutalist | Both use bold typography and minimal decoration, but Brutalism embraces rawness and intentional roughness, while Dark Editorial pursues refinement, polish, and controlled elegance |
| Glassmorphism | Both can appear over dark backgrounds, but Glassmorphism uses frosted translucent panels that introduce a digital materiality at odds with the flat, print-referencing surfaces of editorial design |
| Art Deco | Shares the appreciation for luxury, geometric precision, and gold accents, but Art Deco adds ornamental patterns, symmetric compositions, and period-specific motifs that Dark Editorial avoids |
| Typographic Poster | Both place oversized typography as the dominant visual element; Typographic Poster pushes this to extremes with experimental layouts, while Dark Editorial maintains the readable structure of a publication |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Editorial Layout</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--de-obsidian: #0C0C0E;
--de-graphite: #141416;
--de-charcoal: #1C1B1F;
--de-slate: #242428;
--de-smoke: #2E2E34;
--de-pewter: #6B6B76;
--de-silver: #9E9EA8;
--de-parchment: #E8E4DF;
--de-ivory: #F5F2ED;
--de-white: #FFFFFF;
--de-gold: #C9A84C;
--de-brass: #A8872A;
--de-burgundy: #6B1D2A;
--de-wine: #8C2F3E;
--de-sage: #4A5D4A;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
font-size: 1.05rem;
line-height: 1.8;
color: var(--de-parchment);
background: var(--de-obsidian);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--de-gold);
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
/* ── Navigation ── */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 48px;
height: 60px;
background: rgba(12, 12, 14, 0.85);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background 0.4s ease;
}
.nav.scrolled {
background: rgba(12, 12, 14, 0.96);
border-bottom-color: rgba(201, 168, 76, 0.15);
}
.nav .masthead {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.3rem;
font-weight: 700;
color: var(--de-ivory);
text-decoration: none;
letter-spacing: 0.02em;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.nav-links a {
font-family: 'Source Sans 3', sans-serif;
font-size: 0.72rem;
font-weight: 600;
color: var(--de-silver);
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 6px 0;
position: relative;
transition: color 0.3s ease;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--de-gold);
transition: width 0.3s ease;
}
.nav-links a:hover {
color: var(--de-ivory);
}
.nav-links a:hover::after {
width: 100%;
}
/* ── Hero ── */
.hero {
position: relative;
height: 100vh;
min-height: 600px;
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding: 80px 64px;
overflow: hidden;
background: var(--de-graphite);
}
.hero-bg {
position: absolute;
inset: 0;
background: url('https://images.unsplash.com/photo-1509023464722-18d996393ca8?w=1920&q=80') center/cover no-repeat;
filter: brightness(0.35) contrast(1.1) saturate(0.7);
transition: transform 8s ease;
}
.hero:hover .hero-bg {
transform: scale(1.03);
}
.hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(12, 12, 14, 0.95) 0%,
rgba(12, 12, 14, 0.5) 40%,
transparent 100%
);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 10;
max-width: 720px;
}
.hero-label {
font-family: 'Source Sans 3', sans-serif;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--de-gold);
margin-bottom: 20px;
display: block;
}
.hero h1 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2.8rem, 6vw, 5.5rem);
font-weight: 700;
color: var(--de-white);
line-height: 1.08;
letter-spacing: -0.02em;
margin-bottom: 24px;
}
.hero-subtitle {
font-family: 'Source Sans 3', sans-serif;
font-size: 1.1rem;
color: var(--de-parchment);
line-height: 1.7;
max-width: 520px;
margin-bottom: 36px;
}
.hero-meta {
font-family: 'Source Sans 3', sans-serif;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--de-pewter);
}
.hero-meta span {
color: var(--de-gold);
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
color: var(--de-ivory);
border: 1px solid var(--de-gold);
border-radius: 0;
padding: 14px 36px;
font-family: 'Source Sans 3', sans-serif;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
cursor: pointer;
position: relative;
overflow: hidden;
transition: color 0.4s ease;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--de-gold);
transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: -1;
}
.btn:hover {
color: var(--de-obsidian);
}
.btn:hover::before {
width: 100%;
}
.btn--text {
border: none;
padding: 14px 0;
color: var(--de-gold);
}
.btn--text::before {
display: none;
}
.btn--text::after {
content: '\2192';
display: inline-block;
transition: transform 0.3s ease;
}
.btn--text:hover {
color: var(--de-ivory);
}
.btn--text:hover::after {
transform: translateX(4px);
}
/* ── Section Layout ── */
.section {
padding: 120px 64px;
}
.section--dark {
background: var(--de-obsidian);
}
.section--elevated {
background: var(--de-graphite);
}
.section-label {
font-family: 'Source Sans 3', sans-serif;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--de-gold);
margin-bottom: 16px;
}
.section-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 700;
color: var(--de-ivory);
line-height: 1.15;
margin-bottom: 24px;
}
.section-intro {
max-width: 600px;
color: var(--de-silver);
line-height: 1.8;
margin-bottom: 64px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.container--narrow {
max-width: 680px;
}
/* ── Editorial Grid ── */
.editorial-grid {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 48px;
align-items: center;
}
.editorial-grid--reverse {
grid-template-columns: 7fr 5fr;
}
.editorial-grid .text-block {
padding: 40px 0;
}
.editorial-grid .image-block img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
filter: grayscale(15%) contrast(1.05);
}
/* ── Article Cards ── */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.card {
background: var(--de-charcoal);
overflow: hidden;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover {
transform: translateY(-4px);
}
.card .card-img-wrap {
overflow: hidden;
aspect-ratio: 16 / 10;
}
.card .card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(20%) contrast(1.05);
transition: filter 0.6s ease, transform 0.6s ease;
}
.card:hover .card-img-wrap img {
filter: grayscale(0%) contrast(1.1);
transform: scale(1.03);
}
.card-body {
padding: 28px 24px 32px;
}
.card-category {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--de-gold);
margin-bottom: 12px;
display: block;
}
.card-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.35rem;
font-weight: 700;
color: var(--de-ivory);
line-height: 1.3;
margin-bottom: 12px;
}
.card-excerpt {
font-size: 0.95rem;
color: var(--de-silver);
line-height: 1.7;
}
.card-meta {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--de-pewter);
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* ── Pull Quote ── */
.pull-quote {
max-width: 680px;
margin: 80px auto;
padding: 48px 0;
text-align: center;
border-top: 1px solid var(--de-gold);
border-bottom: 1px solid var(--de-gold);
}
.pull-quote blockquote {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.5rem, 3vw, 2.4rem);
font-style: italic;
font-weight: 400;
color: var(--de-ivory);
line-height: 1.5;
}
.pull-quote cite {
display: block;
margin-top: 24px;
font-family: 'Source Sans 3', sans-serif;
font-size: 0.75rem;
font-style: normal;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--de-gold);
}
/* ── Article Body ── */
.article-body {
max-width: 680px;
margin: 0 auto;
}
.article-body p {
margin-bottom: 1.6em;
}
.article-body .drop-cap::first-letter {
font-family: 'Playfair Display', Georgia, serif;
font-size: 4.2em;
font-weight: 700;
float: left;
line-height: 0.8;
margin-right: 12px;
margin-top: 6px;
color: var(--de-ivory);
}
/* ── Divider ── */
.divider {
border: none;
height: 1px;
background: rgba(201, 168, 76, 0.2);
margin: 0;
}
/* ── Image Feature ── */
.image-feature {
width: 100%;
aspect-ratio: 21 / 9;
object-fit: cover;
filter: grayscale(10%) contrast(1.05) saturate(0.85);
}
/* ── Footer ── */
.footer {
padding: 64px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
justify-content: space-between;
align-items: center;
}
.footer .footer-masthead {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--de-ivory);
}
.footer-links {
display: flex;
gap: 28px;
list-style: none;
}
.footer-links a {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--de-pewter);
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--de-gold);
}
.footer-copy {
font-size: 0.75rem;
color: var(--de-pewter);
}
/* ── Scroll Reveal ── */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
/* ── Responsive ── */
@media (max-width: 768px) {
.nav { padding: 0 24px; }
.nav-links { display: none; }
.hero { padding: 60px 24px; }
.hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
.section { padding: 80px 24px; }
.editorial-grid,
.editorial-grid--reverse {
grid-template-columns: 1fr;
gap: 32px;
}
.card-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.footer {
flex-direction: column;
gap: 24px;
text-align: center;
padding: 48px 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
.hero-bg {
transition: none;
}
.card, .card .card-img-wrap img {
transition: none;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav" id="nav">
<a href="#" class="masthead">The Chronicle</a>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#stories">Stories</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<!-- Hero -->
<header class="hero">
<div class="hero-bg" role="img" aria-label="Dramatic landscape photography"></div>
<div class="hero-content">
<span class="hero-label">Featured Story</span>
<h1>The Silence Between Frames</h1>
<p class="hero-subtitle">An exploration of negative space in contemporary photography and the stories told by what remains unseen.</p>
<p class="hero-meta">By <span>Eleanor Voss</span> — March 2026 — 12 min read</p>
</div>
</header>
<!-- Article Section -->
<section class="section section--dark" id="features">
<div class="container container--narrow">
<div class="article-body reveal">
<p class="drop-cap">There is a moment in every photograph where the visible yields to the invisible. It is in this threshold that meaning gathers, not in the subject itself but in the space that surrounds it. The great editorial photographers understood this instinctively: the frame is not a boundary but a conversation between presence and absence.</p>
<p>Modern editorial design carries this same philosophy into the digital realm. The dark background is not empty -- it is charged with potential, a visual silence that amplifies every element placed within it. Typography gains weight. Photography gains drama. The reader's eye, uncluttered by noise, finds its way to what matters.</p>
</div>
</div>
</section>
<!-- Pull Quote -->
<section class="section section--elevated">
<div class="pull-quote reveal">
<blockquote>"The most powerful element in any composition is the space you choose to leave empty."</blockquote>
<cite>Alexei Brodovitch, Art Director</cite>
</div>
</section>
<!-- Feature Image -->
<section>
<img class="image-feature" src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1920&q=80" alt="Cinematic landscape in muted tones">
</section>
<!-- Editorial Grid Section -->
<section class="section section--dark" id="stories">
<div class="container">
<div class="editorial-grid reveal">
<div class="text-block">
<p class="section-label">Visual Essay</p>
<h2 class="section-title">Architecture of Light</h2>
<p class="section-intro" style="margin-bottom: 28px;">How contemporary architects are designing spaces where natural light becomes the primary material -- structures that transform throughout the day as shadows migrate across concrete and glass.</p>
<a href="#" class="btn--text btn">Read the Essay</a>
</div>
<div class="image-block">
<img src="https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=960&q=80" alt="Architectural photography with dramatic light">
</div>
</div>
</div>
</section>
<hr class="divider">
<!-- Cards Section -->
<section class="section section--dark">
<div class="container">
<p class="section-label reveal">Latest Stories</p>
<h2 class="section-title reveal">From the Archive</h2>
<div class="card-grid">
<article class="card reveal delay-1">
<div class="card-img-wrap">
<img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=640&q=80" alt="Concert photography">
</div>
<div class="card-body">
<span class="card-category">Culture</span>
<h3 class="card-title">The Last Analog Stage</h3>
<p class="card-excerpt">Inside the vanishing world of film photography at live music events, where grain and blur capture what digital precision cannot.</p>
<p class="card-meta">November 2025 · 8 min</p>
</div>
</article>
<article class="card reveal delay-2">
<div class="card-img-wrap">
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=640&q=80" alt="Fashion editorial">
</div>
<div class="card-body">
<span class="card-category">Fashion</span>
<h3 class="card-title">Threads of Restraint</h3>
<p class="card-excerpt">The quiet revolution in fashion design where reduction, not addition, defines the most compelling collections of the season.</p>
<p class="card-meta">January 2026 · 10 min</p>
</div>
</article>
<article class="card reveal delay-3">
<div class="card-img-wrap">
<img src="https://images.unsplash.com/photo-1504805572947-34fad45aed93?w=640&q=80" alt="Typography close-up">
</div>
<div class="card-body">
<span class="card-category">Design</span>
<h3 class="card-title">Weight and Whisper</h3>
<p class="card-excerpt">How the revival of Didone serif typefaces is reshaping digital editorial design and restoring typographic authority to the screen.</p>
<p class="card-meta">February 2026 · 6 min</p>
</div>
</article>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<span class="footer-masthead">The Chronicle</span>
<ul class="footer-links">
<li><a href="#">Features</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p class="footer-copy">© 2026 The Chronicle. All rights reserved.</p>
</footer>
<script>
// Scroll-triggered reveal
const revealElements = document.querySelectorAll('.reveal');
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
revealObserver.unobserve(entry.target);
}
});
}, { threshold: 0.15 });
revealElements.forEach(el => revealObserver.observe(el));
// Nav scroll state
const nav = document.getElementById('nav');
window.addEventListener('scroll', () => {
nav.classList.toggle('scrolled', window.scrollY > 60);
}, { passive: true });
</script>
</body>
</html>
<link rel="preload" href="..." as="font" type="font/woff2" crossorigin> for the primary heading weight, and set font-display: swap to show fallback text immediately while the webfont loadsclamp() for responsive display typography: Editorial headings need to scale dramatically between mobile and desktop; font-size: clamp(2.8rem, 6vw, 5.5rem) provides fluid scaling with hard minimum and maximum bounds, eliminating the need for breakpoint-based font-size overridesfilter: grayscale(15%) contrast(1.05) saturate(0.85) on images to achieve the muted, editorial tone without modifying source files; this keeps original images intact and allows hover states that transition to full color#000000 as a background; instead, use tones like #0C0C0E or #141416 that contain just enough warmth or coolness to prevent the harsh, flat appearance of pure black, and layer 3-4 dark tones to create depth between surfacesIntersectionObserver for scroll reveals: Use a single observer instance with a threshold of 0.1-0.2 to trigger .visible class additions on elements entering the viewport; this is more performant than scroll-event listeners and delivers the page-turning reveal that defines the editorial reading experienceprefers-reduced-motion at the system level: Wrap all transition and animation styles in a @media (prefers-reduced-motion: no-preference) block, or reset them to none within a prefers-reduced-motion: reduce query; editorial design should be accessible to users with vestibular sensitivities&subset=latin to Google Fonts URLs and using unicode-range in @font-face declarations can reduce font payload by 40-60%, which is significant when loading multiple serif weights#0C0C0E vs #141416) can appear identical on low-quality or poorly calibrated displays; verify that your layered dark palette produces visible differentiation on laptop screens, budget monitors, and mobile devices in both bright and dim ambient lighting