Hyper-feminine Rococo romanticism reinterpreted through soft-focus luxury — satin bows, lace trims, pearl accents, and the delicate opulence of whispered elegance.
The core design language of Coquette is built on softness, ornamentation, and an intimate sense of dreamy romance.
Decorative bow shapes used as dividers, icons, and ornamental accents throughout the design.
Delicate lace-pattern overlays and filigree borders framing content panels and images.
A palette anchored in soft pinks, rose, and champagne tones with cream and ivory neutrals.
Small circular pearl-like elements, cameo shapes, and gemstone-inspired decorative dots.
Gaussian blur, vignetting, and diffused lighting that create a dreamy, romantic atmosphere.
Generous border-radius values, rounded cards, and organic bubble-like containers.
Guiding philosophies that keep every Coquette creation feeling intentional and enchanting.
Ten carefully chosen hues that form the tonal foundation of every Coquette composition.
:root {
--coquette-blush: #F4C2C2;
--coquette-rose: #E8A0BF;
--coquette-champagne: #F7E7CE;
--coquette-ivory: #FFFDF7;
--coquette-pearl: #FDEEF4;
--coquette-mauve: #C9A0A0;
--coquette-french-pink: #FD6C9E;
--coquette-lavender: #E6D7F1;
--coquette-gold: #D4AF37;
--coquette-deep-rose: #8E4162;
}
A curated family of five Google Fonts that speak the language of Coquette with grace and charm.
Spatial guidelines that preserve the intimate, breathable quality that defines Coquette composition.
Content blocks stay narrow (600–800px max-width) and centered, creating an intimate reading experience akin to a personal letter.
Ample spacing between sections (60–100px) lets the soft palette breathe and prevents the layout from feeling crowded.
Cards and panels use multiple layers of soft shadows and translucent pink overlays to build gentle depth without weight.
Decorative flourishes, small bow icons, and pearl-dot dividers fill the space between content sections gracefully.
All images feel soft-focus with rounded corners, subtle pink-tinted overlays, or vignette borders that maintain the dreamy quality.
On mobile, maintain generous padding and the single-column intimate feel. Scale down ornaments gracefully rather than removing them.
Live interactive demonstrations of the core CSS patterns that bring Coquette interfaces to life.
Pearl-white backgrounds with translucent rose borders, multi-layered soft shadows, and a gradient accent line. Hover to see the gentle lift effect.
Layers of blush satin and scattered pearls create an atmosphere of whispered feminine luxury.
.coquette-card {
background: var(--coquette-pearl);
border: 1px solid rgba(232, 160, 191, 0.35);
border-radius: 24px;
padding: 40px;
box-shadow:
0 4px 24px rgba(244, 194, 194, 0.25),
0 1px 4px rgba(142, 65, 98, 0.06);
}
Gradient-filled pill buttons with pink glow shadows. Three variants: primary, outline, and gold metallic accent.
.coquette-button {
background: linear-gradient(135deg, var(--coquette-rose), var(--coquette-french-pink));
border-radius: 50px;
padding: 14px 36px;
box-shadow: 0 4px 16px rgba(253, 108, 158, 0.30);
transition: all 0.3s ease;
}
.coquette-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(253, 108, 158, 0.45);
}
Gradient fade lines flanking softly glowing pearl dots. A signature decorative element between content sections.
.coquette-divider::before,
.coquette-divider::after {
content: '';
width: 80px;
height: 1px;
background: linear-gradient(to right, transparent, var(--coquette-rose), transparent);
}
.coquette-divider span {
width: 8px;
height: 8px;
background: var(--coquette-rose);
border-radius: 50%;
box-shadow: 0 0 6px rgba(232, 160, 191, 0.5);
}
A delicate repeating dot pattern along the bottom edge of the navigation bar mimics the look of lace trim.
.coquette-nav::after {
content: '';
position: absolute;
bottom: -4px;
left: 0; right: 0;
height: 4px;
background: repeating-linear-gradient(
90deg, transparent 0px, transparent 6px,
var(--coquette-blush) 6px, var(--coquette-blush) 8px
);
}
A pearl-to-ivory gradient background with a large radial blush glow overlay creates the signature soft-focus atmosphere.
.coquette-hero {
background: linear-gradient(180deg, var(--coquette-pearl) 0%, var(--coquette-ivory) 100%);
padding: 100px 40px;
overflow: hidden;
}
.coquette-hero::before {
background: radial-gradient(
ellipse at 50% 30%,
rgba(244, 194, 194, 0.25) 0%,
transparent 60%
);
}
Essential guidelines to keep your Coquette designs feeling authentic and refined.
Kindred design movements that share sensibilities with Coquette while diverging in tone and temperament.