Regencycore is a design aesthetic inspired by the English Regency era (1811-1820), popularized in modern culture by the Netflix series Bridgerton and the broader resurgence of interest in Regency-period romance novels. Rather than a strict historical recreation, Regencycore reinterprets the period’s elegance through a contemporary lens, blending the classical proportions and restraint of Neoclassicism with the ornamental richness of late Georgian decorative arts. The style centers on empire waistlines, soft pastels, gold filigree, damask patterns, and an overarching sense of refined aristocratic grace.
In web and digital design, Regencycore translates into layouts governed by classical symmetry and generous whitespace, evoking the proportioned harmony of a Regency-era drawing room. Typography leans on high-contrast serif faces reminiscent of Didone typefaces popular in the early 19th century, paired with delicate calligraphic scripts for decorative accents. Color palettes draw from the period’s documented preferences: soft celestial blues, maiden blush pinks, apple greens, and cream whites, punctuated by deeper jewel tones like emerald, sapphire, and ruby for dramatic contrast. Gold appears throughout as filigree borders, ornamental dividers, and metallic accent details, referencing the gilt plasterwork, gilded mirrors, and ormolu that defined Regency interiors.
The aesthetic distinguishes itself from related styles like Cottagecore (which is rustic and pastoral) and Rococo (which is more exuberant and asymmetric) by maintaining a Neoclassical sense of order and proportion. Regencycore is formal without being cold, ornamental without being chaotic, and romantic without losing structural clarity. It draws on Greco-Roman design principles filtered through the English sensibility of architects like John Nash and designers like Thomas Hope, who championed clean lines enriched by carefully placed decorative elements. Key motifs include laurel wreaths, acanthus scrollwork, urns, columns, medallions, and the characteristic Regency stripe. In digital application, Regencycore is ideal for luxury branding, editorial layouts, event invitations, lifestyle platforms, and any context that calls for cultivated, timeless elegance.
The Regency-era palette was documented extensively in period pattern books and fabric samples. Fashionable colors included soft muslin whites, celestial blues, maiden blush pinks, and apple greens for daytime, with richer jewel tones reserved for evening and formal occasions. Gold appeared throughout in gilded furniture, ormolu mounts, and decorative plasterwork. This digital palette translates those historical references into a cohesive system for web design.
| Swatch | Hex | Role/Usage |
|---|---|---|
| Ivory Muslin | #FAF6F0 |
Primary page background, evoking unbleached muslin fabric |
| Parchment Cream | #F0E6D4 |
Secondary background, card surfaces, content panels |
| Maiden Blush | #F2C6C2 |
Soft pink accent, decorative highlights, hover states |
| Celestial Blue | #B8D4E3 |
Primary accent color, links, interactive elements |
| Apple Green | #C5D5A3 |
Secondary accent, success states, botanical elements |
| Wisteria Lavender | #C4B1D4 |
Tertiary accent, tags, decorative accents |
| Regency Gold | #C5A55A |
Filigree borders, ornamental details, premium accents |
| Gilt Bronze | #D4A843 |
Hover state for gold elements, active accents |
| Emerald Jewel | #2E6E4E |
Deep accent for contrast, evening-tone elements |
| Sapphire Depth | #2B4570 |
Dark accent, deep headers, dramatic text |
| Burgundy Velvet | #6E2142 |
Rich accent, call-to-action, important highlights |
| Mahogany Dark | #3E2223 |
Primary text color, headings, high-contrast type |
| Slate Charcoal | #4A4A4A |
Body text, secondary type, subtle UI elements |
| Damask Rose | #D4838F |
Mid-tone pink, buttons, featured elements |
| Toile Blue | #7BA0B8 |
Mid-tone blue, secondary links, informational accents |
:root {
--regency-ivory: #FAF6F0;
--regency-parchment: #F0E6D4;
--regency-blush: #F2C6C2;
--regency-blue: #B8D4E3;
--regency-green: #C5D5A3;
--regency-lavender: #C4B1D4;
--regency-gold: #C5A55A;
--regency-gilt: #D4A843;
--regency-emerald: #2E6E4E;
--regency-sapphire: #2B4570;
--regency-burgundy: #6E2142;
--regency-mahogany: #3E2223;
--regency-slate: #4A4A4A;
--regency-damask-rose: #D4838F;
--regency-toile-blue: #7BA0B8;
}
Regency-era printed matter was dominated by Didone typefaces, characterized by extreme contrast between thick and thin strokes, unbracketed hairline serifs, and a vertical stress axis. These typefaces, developed by Firmin Didot and Giambattista Bodoni, perfectly captured the era’s taste for refined elegance. For digital Regencycore design, high-contrast serif fonts paired with elegant calligraphic scripts create the essential typographic character.
| Font | Weight(s) | Usage | Link |
|---|---|---|---|
| Playfair Display | 400, 500, 700, 900 | Primary heading font with Didone-inspired high contrast and elegant proportions | Playfair Display |
| Cormorant Garamond | 300, 400, 500, 600, 700 | Refined body serif with classical proportions and excellent readability | Cormorant Garamond |
| Cinzel | 400, 500, 600, 700, 900 | Display font inspired by Roman inscriptions, ideal for aristocratic headings | Cinzel |
| Cinzel Decorative | 400, 700, 900 | Ornamental display variant for hero titles and monograms | Cinzel Decorative |
| Great Vibes | 400 | Calligraphic script for decorative labels, invitations, and flourish accents | Great Vibes |
| EB Garamond | 400, 500, 600, 700 | Classical Garamond for long-form body text with period-appropriate character | EB Garamond |
| Heading | Body | Mood |
|---|---|---|
| Playfair Display 700 | Cormorant Garamond 400 | Bridgerton editorial: dramatic contrast meets classical refinement |
| Cinzel 600 | EB Garamond 400 | Formal aristocratic: Roman grandeur with Renaissance readability |
| Cinzel Decorative 700 | Cormorant Garamond 300 | Grand ballroom: ornamental display with light, airy body text |
| Playfair Display 500 italic | EB Garamond 400 | Romantic correspondence: intimate yet structured |
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Cinzel:wght@400;600;700;900&family=Great+Vibes&display=swap');
body {
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-size: 1.125rem;
line-height: 1.85;
color: var(--regency-mahogany);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--regency-mahogany);
}
h1 {
font-size: 3rem;
line-height: 1.2;
}
h2 {
font-size: 2rem;
line-height: 1.3;
}
h3 {
font-size: 1.4rem;
line-height: 1.4;
}
.display-title {
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.script-accent {
font-family: 'Great Vibes', cursive;
font-size: 2rem;
color: var(--regency-gold);
}
.small-caps {
font-family: 'Cinzel', serif;
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--regency-slate);
}
.regency-card {
background: var(--regency-parchment);
border: 1px solid rgba(197, 165, 90, 0.35);
border-radius: 4px;
padding: 40px;
position: relative;
box-shadow:
0 2px 12px rgba(62, 34, 35, 0.06),
0 1px 3px rgba(62, 34, 35, 0.04);
}
/* Gold filigree corner accents */
.regency-card::before,
.regency-card::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
border-color: var(--regency-gold);
border-style: solid;
}
.regency-card::before {
top: 8px;
left: 8px;
border-width: 2px 0 0 2px;
}
.regency-card::after {
bottom: 8px;
right: 8px;
border-width: 0 2px 2px 0;
}
.regency-card h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1.3rem;
color: var(--regency-mahogany);
margin-bottom: 12px;
}
.regency-card p {
color: var(--regency-slate);
line-height: 1.85;
}
.regency-button {
display: inline-block;
background: var(--regency-burgundy);
color: var(--regency-ivory);
border: 1px solid var(--regency-burgundy);
border-radius: 2px;
padding: 14px 40px;
font-family: 'Cinzel', serif;
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.regency-button:hover {
background: var(--regency-mahogany);
border-color: var(--regency-mahogany);
box-shadow: 0 4px 16px rgba(110, 33, 66, 0.25);
}
/* Gold-outlined variant */
.regency-button--outline {
background: transparent;
color: var(--regency-gold);
border: 1px solid var(--regency-gold);
}
.regency-button--outline:hover {
background: var(--regency-gold);
color: var(--regency-ivory);
box-shadow: 0 4px 16px rgba(197, 165, 90, 0.25);
}
.regency-nav {
background: var(--regency-ivory);
border-bottom: 1px solid rgba(197, 165, 90, 0.30);
padding: 0 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 48px;
position: relative;
}
/* Gold filigree border along the bottom */
.regency-nav::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
to right,
transparent 0%,
var(--regency-gold) 20%,
var(--regency-gold) 80%,
transparent 100%
);
}
.regency-nav__logo {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 1.2rem;
letter-spacing: 0.12em;
color: var(--regency-mahogany);
text-transform: uppercase;
padding: 24px 0;
}
.regency-nav__links {
display: flex;
align-items: center;
gap: 36px;
list-style: none;
}
.regency-nav__links a {
color: var(--regency-slate);
font-family: 'Cormorant Garamond', serif;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
padding: 24px 0;
position: relative;
transition: color 0.3s ease;
}
.regency-nav__links a:hover {
color: var(--regency-gold);
}
.regency-nav__links a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--regency-gold);
transition: width 0.3s ease;
}
.regency-nav__links a:hover::after {
width: 100%;
}
.regency-hero {
background: linear-gradient(
180deg,
var(--regency-parchment) 0%,
var(--regency-ivory) 100%
);
text-align: center;
padding: 120px 40px;
position: relative;
overflow: hidden;
}
/* Subtle damask texture overlay */
.regency-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-conic-gradient(
rgba(197, 165, 90, 0.03) 0% 25%,
transparent 0% 50%
) 0 0 / 40px 40px;
pointer-events: none;
}
/* Decorative gold border frame */
.regency-hero::after {
content: '';
position: absolute;
top: 24px;
left: 24px;
right: 24px;
bottom: 24px;
border: 1px solid rgba(197, 165, 90, 0.25);
pointer-events: none;
}
.regency-hero .script-label {
font-family: 'Great Vibes', cursive;
font-size: 1.8rem;
color: var(--regency-gold);
display: block;
margin-bottom: 8px;
position: relative;
}
.regency-hero h1 {
font-family: 'Cinzel', serif;
font-size: 3.5rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--regency-mahogany);
text-transform: uppercase;
position: relative;
}
.regency-hero p {
max-width: 600px;
margin: 20px auto 0;
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
font-weight: 300;
color: var(--regency-slate);
line-height: 1.8;
position: relative;
}
.regency-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 64px 0;
}
.regency-divider::before,
.regency-divider::after {
content: '';
width: 120px;
height: 1px;
background: linear-gradient(
to right,
transparent,
var(--regency-gold),
transparent
);
}
/* Central ornament */
.regency-divider span {
width: 12px;
height: 12px;
border: 1px solid var(--regency-gold);
transform: rotate(45deg);
position: relative;
}
.regency-divider span::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
background: var(--regency-gold);
}
.regency-damask-bg {
background-color: var(--regency-ivory);
background-image:
radial-gradient(
ellipse at 25% 25%,
rgba(197, 165, 90, 0.04) 0%,
transparent 50%
),
radial-gradient(
ellipse at 75% 75%,
rgba(197, 165, 90, 0.04) 0%,
transparent 50%
);
background-size: 80px 80px;
}
.regency-medallion {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--regency-gold);
box-shadow:
0 0 0 6px var(--regency-ivory),
0 0 0 8px rgba(197, 165, 90, 0.3),
0 8px 24px rgba(62, 34, 35, 0.12);
margin: 0 auto;
}
.regency-medallion img {
width: 100%;
height: 100%;
object-fit: cover;
filter: sepia(10%) saturate(90%);
}
.regency-stripe {
background: repeating-linear-gradient(
90deg,
var(--regency-ivory) 0px,
var(--regency-ivory) 12px,
var(--regency-blue) 12px,
var(--regency-blue) 14px
);
padding: 40px;
border-top: 1px solid var(--regency-gold);
border-bottom: 1px solid var(--regency-gold);
}
| Aesthetic | Relationship |
|---|---|
| Empire Style | Direct historical sibling; Empire Style shares the Neoclassical foundation, empire-line proportions, and Napoleonic-era design vocabulary |
| Baroque | Shares ornamental opulence and gilded details, but Baroque is heavier, darker, and more dramatically theatrical |
| Rococo | Both employ pastels, gold, and decorative flourish; Rococo is more playful, asymmetric, and exuberant where Regencycore is structured |
| Coquette | Overlaps in soft pastels and feminine ornament; Coquette is more modern, pink-dominant, and focused on bows and lace |
| Dark Academia | Both reference historical periods and classical typography; Dark Academia is moody and scholarly where Regencycore is light and aristocratic |
| Cottagecore | Both celebrate Englishness and romantic nostalgia; Cottagecore is rustic and pastoral, Regencycore is urban and formal |
| Grandmillennial | Shares appreciation for traditional patterns like damask, chintz, and antique furniture, with a more eclectic contemporary twist |
| Art Nouveau | Both use organic ornamentation and decorative elegance; Art Nouveau is more botanical and curvilinear |
| Gustavian | Shares the Neoclassical foundation and soft pastel palette; Gustavian is more specifically Scandinavian and pared-back |
| Hollywood Regency | A mid-century glamour reinterpretation of Regency style with bolder contrasts and more metallic surfaces |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regencycore Layout</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Cinzel:wght@400;600;700;900&family=Great+Vibes&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--regency-ivory: #FAF6F0;
--regency-parchment: #F0E6D4;
--regency-blush: #F2C6C2;
--regency-blue: #B8D4E3;
--regency-green: #C5D5A3;
--regency-lavender: #C4B1D4;
--regency-gold: #C5A55A;
--regency-gilt: #D4A843;
--regency-emerald: #2E6E4E;
--regency-sapphire: #2B4570;
--regency-burgundy: #6E2142;
--regency-mahogany: #3E2223;
--regency-slate: #4A4A4A;
--regency-damask-rose: #D4838F;
--regency-toile-blue: #7BA0B8;
}
body {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.125rem;
line-height: 1.85;
color: var(--regency-mahogany);
background: var(--regency-ivory);
min-height: 100vh;
}
/* Navigation */
.nav {
background: var(--regency-ivory);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 60px;
position: relative;
border-bottom: 1px solid rgba(197,165,90,0.25);
}
.nav::after {
content: '';
position: absolute;
bottom: -1px;
left: 10%; right: 10%;
height: 1px;
background: linear-gradient(to right, transparent, var(--regency-gold), transparent);
}
.nav-logo {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0.12em;
color: var(--regency-mahogany);
text-transform: uppercase;
text-decoration: none;
padding: 24px 0;
}
.nav-links {
display: flex;
align-items: center;
gap: 36px;
list-style: none;
}
.nav-links a {
color: var(--regency-slate);
font-family: 'Cormorant Garamond', serif;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
padding: 24px 0;
position: relative;
transition: color 0.3s ease;
}
.nav-links a:hover { color: var(--regency-gold); }
.nav-links a::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 0; height: 2px;
background: var(--regency-gold);
transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
/* Hero */
.hero {
background: linear-gradient(180deg, var(--regency-parchment) 0%, var(--regency-ivory) 100%);
text-align: center;
padding: 120px 40px 100px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(ellipse at 30% 40%, rgba(197,165,90,0.05) 0%, transparent 50%),
radial-gradient(ellipse at 70% 60%, rgba(242,198,194,0.06) 0%, transparent 50%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
top: 28px; left: 28px; right: 28px; bottom: 28px;
border: 1px solid rgba(197,165,90,0.2);
pointer-events: none;
}
.hero-script {
font-family: 'Great Vibes', cursive;
font-size: 1.8rem;
color: var(--regency-gold);
display: block;
margin-bottom: 8px;
position: relative;
}
.hero h1 {
font-family: 'Cinzel', serif;
font-size: 3.2rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--regency-mahogany);
text-transform: uppercase;
position: relative;
margin-bottom: 20px;
}
.hero p {
max-width: 580px;
margin: 0 auto 32px;
font-size: 1.2rem;
font-weight: 300;
color: var(--regency-slate);
line-height: 1.8;
position: relative;
}
.hero .btn { position: relative; }
/* Buttons */
.btn {
display: inline-block;
background: var(--regency-burgundy);
color: var(--regency-ivory);
border: 1px solid var(--regency-burgundy);
border-radius: 2px;
padding: 14px 40px;
font-family: 'Cinzel', serif;
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
background: var(--regency-mahogany);
border-color: var(--regency-mahogany);
box-shadow: 0 4px 16px rgba(110,33,66,0.25);
}
.btn--outline {
background: transparent;
color: var(--regency-gold);
border-color: var(--regency-gold);
}
.btn--outline:hover {
background: var(--regency-gold);
color: var(--regency-ivory);
}
/* Divider */
.divider {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 64px auto;
max-width: 400px;
}
.divider::before, .divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, var(--regency-gold), transparent);
}
.divider span {
width: 10px; height: 10px;
border: 1px solid var(--regency-gold);
transform: rotate(45deg);
position: relative;
}
.divider span::before {
content: '';
position: absolute;
top: 2px; left: 2px; right: 2px; bottom: 2px;
background: var(--regency-gold);
}
/* Section */
.section {
max-width: 960px;
margin: 0 auto;
padding: 0 40px;
}
.section-title {
text-align: center;
margin-bottom: 48px;
}
.section-title h2 {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
font-weight: 700;
color: var(--regency-mahogany);
margin-bottom: 8px;
}
.section-title p {
font-size: 1.1rem;
font-weight: 300;
color: var(--regency-slate);
}
/* Cards */
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.card {
background: var(--regency-parchment);
border: 1px solid rgba(197,165,90,0.3);
border-radius: 4px;
padding: 36px;
position: relative;
box-shadow: 0 2px 12px rgba(62,34,35,0.05);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 6px 24px rgba(62,34,35,0.08);
}
.card::before, .card::after {
content: '';
position: absolute;
width: 20px; height: 20px;
border-color: var(--regency-gold);
border-style: solid;
}
.card::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.card::after { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }
.card-icon {
font-size: 1.8rem;
margin-bottom: 16px;
display: block;
color: var(--regency-gold);
}
.card h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1.25rem;
color: var(--regency-mahogany);
margin-bottom: 12px;
}
.card p { color: var(--regency-slate); font-size: 1rem; line-height: 1.8; }
/* Feature */
.feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin: 80px auto;
max-width: 960px;
padding: 0 40px;
}
.feature-image {
width: 100%;
aspect-ratio: 4/5;
background: linear-gradient(135deg, var(--regency-blush) 0%, var(--regency-blue) 100%);
border: 1px solid rgba(197,165,90,0.3);
border-radius: 4px;
}
.feature-text h2 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 700;
color: var(--regency-mahogany);
margin-bottom: 16px;
}
.feature-text p { color: var(--regency-slate); margin-bottom: 24px; line-height: 1.85; }
/* Quote */
.quote-section {
background: var(--regency-parchment);
padding: 80px 40px;
text-align: center;
position: relative;
border-top: 1px solid rgba(197,165,90,0.2);
border-bottom: 1px solid rgba(197,165,90,0.2);
}
.quote-section::before {
content: '\201C';
font-family: 'Playfair Display', serif;
font-size: 6rem;
color: var(--regency-gold);
opacity: 0.3;
position: absolute;
top: 20px; left: 50%; transform: translateX(-50%); line-height: 1;
}
.quote-section blockquote {
max-width: 640px; margin: 0 auto;
font-family: 'Playfair Display', serif;
font-size: 1.5rem; font-style: italic;
color: var(--regency-mahogany); line-height: 1.6;
}
.quote-section cite {
display: block; margin-top: 20px;
font-size: 1rem; font-style: normal; color: var(--regency-slate);
}
/* Stripe Banner */
.stripe-banner {
background: repeating-linear-gradient(
90deg, var(--regency-ivory) 0px, var(--regency-ivory) 14px,
var(--regency-blue) 14px, var(--regency-blue) 16px
);
padding: 48px 40px;
text-align: center;
border-top: 1px solid var(--regency-gold);
border-bottom: 1px solid var(--regency-gold);
}
.stripe-banner h2 {
font-family: 'Cinzel', serif;
font-size: 1.6rem; font-weight: 600;
letter-spacing: 0.1em; color: var(--regency-mahogany);
text-transform: uppercase; margin-bottom: 12px;
}
.stripe-banner p {
font-size: 1.1rem; color: var(--regency-slate);
max-width: 500px; margin: 0 auto 24px;
}
/* Footer */
.footer {
background: var(--regency-mahogany);
color: var(--regency-parchment);
text-align: center;
padding: 48px 40px;
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(to right, transparent, var(--regency-gold), transparent);
}
.footer-logo {
font-family: 'Cinzel', serif; font-weight: 700; font-size: 1rem;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--regency-gold); margin-bottom: 12px;
}
.footer p { font-size: 0.9rem; color: rgba(240,230,212,0.6); }
.footer-links {
display: flex; justify-content: center; gap: 24px;
list-style: none; margin-top: 16px;
}
.footer-links a {
color: rgba(240,230,212,0.5); font-size: 0.85rem;
text-decoration: none; transition: color 0.3s ease;
}
.footer-links a:hover { color: var(--regency-gold); }
/* Responsive */
@media (max-width: 768px) {
.nav { flex-direction: column; padding: 16px 24px; gap: 12px; }
.nav-links { gap: 20px; }
.hero { padding: 80px 24px 60px; }
.hero h1 { font-size: 2.2rem; letter-spacing: 0.06em; }
.hero::after { top: 16px; left: 16px; right: 16px; bottom: 16px; }
.cards { grid-template-columns: 1fr; gap: 24px; }
.feature { grid-template-columns: 1fr; gap: 32px; padding: 0 24px; }
.section { padding: 0 24px; }
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<a href="#" class="nav-logo">Thornfield</a>
<ul class="nav-links">
<li><a href="#">Society</a></li>
<li><a href="#">Collection</a></li>
<li><a href="#">Promenade</a></li>
<li><a href="#">Correspondence</a></li>
</ul>
</nav>
<!-- Hero -->
<header class="hero">
<span class="hero-script">The Season Awaits</span>
<h1>Regencycore</h1>
<p>Bridgerton-era elegance translated into digital design.
Empire proportions, soft pastels, gold filigree, and the
refined grace of classical symmetry.</p>
<a href="#" class="btn">Enter the Ballroom</a>
</header>
<div class="divider"><span></span></div>
<!-- Cards -->
<section class="section">
<div class="section-title">
<h2>The Pillars of Regency Design</h2>
<p>Classical proportion, restrained ornament, and cultivated elegance</p>
</div>
<div class="cards">
<div class="card">
<span class="card-icon">♢</span>
<h3>Classical Symmetry</h3>
<p>Every composition is governed by balanced proportions
drawn from Neoclassical architecture and the golden ratio.</p>
</div>
<div class="card">
<span class="card-icon">✿</span>
<h3>Damask & Toile</h3>
<p>Period-authentic patterns grace backgrounds and accent
panels, adding texture without overwhelming content.</p>
</div>
<div class="card">
<span class="card-icon">★</span>
<h3>Gold Filigree</h3>
<p>Gilt borders, ornamental corners, and metallic accents
reference the ormolu and gilded plasterwork of the era.</p>
</div>
</div>
</section>
<div class="divider"><span></span></div>
<!-- Feature -->
<section class="feature">
<div class="feature-image"></div>
<div class="feature-text">
<h2>An Evening at the Assembly</h2>
<p>The Regency ballroom was a masterclass in proportioned elegance:
crystal chandeliers casting warm candlelight across damask walls,
empire-waisted gowns in maiden blush and celestial blue, and
gilded moldings framing every architectural detail.</p>
<p>This same principle of structured beauty guides digital
Regencycore: warmth, symmetry, and deliberate ornament creating
an atmosphere of cultivated grace.</p>
<a href="#" class="btn--outline btn">Discover More</a>
</div>
</section>
<!-- Quote -->
<section class="quote-section">
<blockquote>
Elegance is not about being noticed, it is about being remembered.
</blockquote>
<cite>-- Attributed to the Regency sensibility</cite>
</section>
<div class="divider"><span></span></div>
<!-- Stripe Banner -->
<section class="stripe-banner">
<h2>The Promenade Collection</h2>
<p>Seasonal pieces crafted with the refined proportions
and soft palette of the English Regency.</p>
<a href="#" class="btn">View Collection</a>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-logo">Thornfield</div>
<p>Bridgerton-era elegance for the digital age</p>
<ul class="footer-links">
<li><a href="#">Society</a></li>
<li><a href="#">Collection</a></li>
<li><a href="#">Correspondence</a></li>
<li><a href="#">Gazette</a></li>
</ul>
</footer>
</body>
</html>