Brand Mood Proposal · v3
Tight Palette
& Soft Frames 👑
The same direction distilled — 14 color tokens instead of 30+. Softer, more ornamental image framing. Every color earns its place.
The Full Palette — 14 Tokens
Every Color Has a Job
No light plum. No seven-step scales. Just the colors you actually use, each with a clear role.
Typography
Playfair Display & Lora
The Queen's Decree
A Bold Chapter Title
A Subheading with Purpose
An Italic Subheading for Flair
Labels & Caps
Montserrat · All Caps · Wide Tracking
A clean sans-serif for labels, nav, badges, and buttons — contrasts with the serif headings and body. Keeps the small text crisp and functional while the serifs do the decorating.
Image Frames
Softer & More Ornamental
Two frame styles — all CSS-only, no vectors. Soft and ornamental, like a real frame or a gilded edge.
Double Line
Two thin borders with a visible gap — a classic ornamental treatment. Elegant without heaviness.
Gilded
A thin amber border with soft rounded corners and a warm diffused glow. The gentlest option.
Components
The Royal Collection
Buttons
Badges / Tags
Content List
Callouts
🌹 Rose Callout — warm blush background. For tips and gentle asides.
👑 Amber Callout — golden background. For key takeaways.
🔥 Signature Callout — for "pay attention now" moments.
List with ⚜ Bullets
- Content Collections with Zod schemas for type safety
- OG image generation with Satori and Sharp
- RSS feeds per author — because the Queen deserves her own
- Tailwind CSS with a custom royal color palette
Blockquote
You were not a fool. You merely believed yourself in love. One should never apologize for that.
Lady Danbury, Bridgerton
Dark Section
The Queen's Chamber
Deep plum backgrounds for newsletter signups, featured content, or footers. Amber headings and cream text for contrast.
Amber on plum. Deep Orange as the spark. Not subtle, not sorry.
The Mood
Content List Variants
Pick Your List
Each variant shown twice — body font (Lora) then display font (Playfair). Plus a new flowing-text option.
A — Title · Date (Lora)
A — Title · Date (Playfair)
B — Title + Description (Lora)
B — Title + Description (Playfair)
C — Title Arrow + Tags (Lora)
C — Title Arrow + Tags (Playfair)
D — Fleur Bullet (Lora)
D — Fleur Bullet (Playfair)
E — Date Left (Lora)
E — Date Left (Playfair)
F — Flowing Text (title and date read as one, Lora)
F — Flowing Text (Playfair)
Blockquotes — The Fleur System
Short Centered, Long Left
One system, two modes. Short punchy quotes get centered with a fleur above. Longer quotes stay left-aligned with a fleur beside. Same family, different posture.
Short Quote — Centered ⚜
You were not a fool. You merely believed yourself in love.
Lady DanburyAnother Short
One should never apologize for that.
Lady DanburyLong Quote — Left ⚜
The thing about web design is that it rarely feels personal. We reach for the same Tailwind defaults, the same Inter font, the same slate-gray cards. But what if your website felt like you? What if it had a crown emoji for a favicon?
The MoodAnother Long
Just because something is not perfect does not make it any less worthy of love. Your CSS does not need to be pristine to ship. Your code does not need to be clever to work. Sometimes the bravest thing is to push to production and walk away.
Also applicable to CSSSide by Side — Same Post
Imagine these appearing in a single blog post. The short one pops as a pull-quote, the long one flows with the text.
My heart is, and always will be, yours.
Also me, to well-structured HTMLAnd then the narrative continues. More body text, more Lora, more thoughts about web development and the high seas. Eventually another longer quote appears:
Your color palette should feel like a wardrobe, not a spreadsheet. Each color has a role, a personality, a reason to exist. The plum is your backbone. The amber is your jewelry. The signature pop is your red lip.
The Color StrategyPutting It Together
Full Blog Post Feel
January 15, 2026
How I Bridgerton'd My Website
A tale of plum, amber, and the audacity to use serif fonts in 2026.
The thing about web design is that it rarely feels personal. We reach for the same Tailwind defaults, the same Inter font, the same slate-gray cards. But what if your website felt like you?
I wanted something that said "yes, I write JavaScript, and yes, I have opinions about table settings." Something Queen Charlotte would approve of.
Every great design starts with an even better story.
Lorinda MamoThe Color Strategy
The foundation is warm cream — not white, never white. On top of that:
- Deep plum for text — richer than black, more regal than gray, warmer than brown
- Amber accents for borders, highlights, and that satisfying glow on hover
- Dusty rose for softer moments — badges, callouts, the gentler side
- Deep Orange as the signature pop — every queen needs her crown jewel 🔥
👑 Key takeaway: Your color palette should feel like a wardrobe, not a spreadsheet. Each color has a role, a personality, a reason to exist.
And the typography? Playfair Display for headings because life is too short for sans-serif headlines. Lora for body text because your words deserve to be dressed well.
That's the direction. Shall we proceed with the coronation? 👑