Brand Mood Proposal
The Royal
Redesign 👑
A Bridgerton-inspired design direction for queen.raae.codes — regal, warm, and bold with your signature orangered edge.
Color Palette
The Royal Court
Rich plums and deep golds as the foundation, with your signature orangered as the crown jewel. More saturated pops than typical Bridgerton — this is Queen Charlotte, not a pastel wallflower.
Backgrounds
Plum Scale (replaces brown & teal)
Gold Scale (replaces amber)
Dusty Rose
Amber Scale (warmer & more orange than gold)
Signature Pop 🔥
Typography
Playfair Display & Lora
High-contrast, dramatic serif for headings. The flourish is in the letterforms — no ornament needed. Heavy weights feel powerful; the italic has a beautiful swash quality.
Heading Hierarchy
The Queen's Decree
A Bold Chapter Title
A Subheading with Purpose
An Italic Subheading for Flair
Heading Weights
Playfair 400 — Light & Elegant
Playfair 700 — Bold Statement
Playfair 900 — Maximum Drama
Playfair 700 Italic — Royal Flair
Body Text: Lora
A well-balanced serif for body text. Readable at small sizes, elegant at large. Has both roman and italic styles with good weight range.
The Viscount was not prepared for what he found. A web developer, of all things, aboard his ship — armed with nothing but a laptop and an unreasonable confidence in CSS Grid. "You dare challenge the cascade?" he whispered.
Labels & Caps
Playfair Display · All Caps · Wide Tracking
Great for section labels, dates, badge text — adds regal structure. Notice how the ampersand is particularly lovely in Playfair.
Components
The Royal Collection
Buttons
Badges / Tags
Content List
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
Images & Figures
Bold Borders, Not Ornament
Images get a strong plum border with a gold offset shadow — bold and graphic without fussiness. Three styles to choose from.
Primary — Plum Border & Amber Shadow
Alternate — Amber Border & Plum Shadow
Minimal — Soft Border, No Shadow
Callouts & Quotes
Royal Decrees
Instead of alternating cream/gold stripes, use colored callout boxes to add variety and visual interest within sections.
🌹 Rose Callout — Perfect for tips, gentle reminders, or "nice to know" asides.
This replaces the alternating stripe pattern with intentional color moments.
👑 Amber Callout — For important highlights, key takeaways, or featured content.
Warm and present without shouting.
⚜ Plum Callout — For technical notes, code context, or deeper dives.
The deeper color signals depth.
🔥 Signature Callout — For warnings, breaking changes, or "pay attention now" moments.
Your orangered makes these impossible to miss.
Blockquotes (Redesigned)
Bolder treatment — thick gold border, golden cream background, a large typographic opening quote in Playfair, and the attribution in caps. The serif does the decorating.
You were not a fool. You merely believed yourself in love. One should never apologize for that.
Lady Danbury, Bridgerton
Just because something is not perfect does not make it any less worthy of love.
Also applicable to CSS
For Comparison: Old Notice Style
⚠️ This is the current .notice style — dashed amber border on cream. It works, but the new callout
system gives you more expressive range.
Dark Section
The Queen's Chamber
Deep plum backgrounds for newsletter signups, featured content, or footers. Gold headings and cream text for contrast.
Gold on plum. This is the Queen Charlotte energy — not subtle, not sorry.
The Mood
Alternative Background
Rose Section
Instead of the striped alternation, you can use rose as an occasional accent section background. Softer than plum, warmer than cream.
This works well for testimonials, featured quotes, or breaking up long content pages.
Putting It Together
Full Blog Post Feel
January 15, 2026
How I Bridgerton'd My Website
A tale of plum, gold, 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.
My heart is, and always will be, yours.
Also me, to well-structured HTML
The Color Strategy
The foundation is warm cream — not white, never white. White is for people who don't have a crown emoji as their favicon. On top of that:
- Deep plum for text and interactive elements — richer than black, more regal than gray
- Gold accents for borders, highlights, and that satisfying glow on hover
- Dusty rose for softer moments — badges, callouts, the gentler side
- Orangered stays 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. What do you think — shall we proceed with the coronation? 👑
Signature Pop Variants
Pick Your Crown Jewel 🔥
The pop color is what makes everything sing — header border, hover states, call-to-action buttons. Here are some options beyond the current orangered.