Design Reference v4

The Confirmed
Design System

Two fonts. Fourteen colors. One crown. Everything decided, nothing wasted.

Typography

Two Fonts, Every Role

Font Role Sample
Montserrat Headings (h1โ€“h4), labels, nav, badges, buttons, dates The Queen's Decree
Lora Body text, paragraphs, lists The thing about web design is that it rarely feels personal.
Lora italic Short blockquotes (large), long blockquotes (normal size) You were not a fool. You merely believed yourself in love.
Heading Scale โ€” Montserrat

h1 ยท The Queen's Decree

h2 ยท A Bold Chapter Title

h3 ยท A Subheading with Purpose

h4 ยท A Smaller Heading

Body Text โ€” Lora

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 warmth, personality, and just a touch of drama?

Short Blockquote โ€” Italic Lora, larger (1.4rem)

You were not a fool. You merely believed yourself in love.

Lady Whistledown
Long Blockquote โ€” Italic Lora, body size (1rem), fleur aligned with first line (top: 0.15rem)

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 warmth, personality, and just a touch of drama?

That's what this redesign is about. Not following trends โ€” but building something that feels unmistakably yours.

Queen Raae

In Context

Blog Post Mockup

The full system working together in a realistic post layout.

How I Bridgerton'd My Website
A tale of plum, amber, and the audacity to use serif fonts in 2026.
CSS Design Astro

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?

Every great design starts with an even better story.

Lorinda Mamo

The 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
  • Amber accents for borders, highlights, and that satisfying hover glow
  • Dusty rose for softer moments โ€” badges, callouts

๐Ÿ‘‘ Key takeaway: Your color palette should feel like a wardrobe, not a spreadsheet.

Typography Matters

Montserrat headings feel bold and readable. Lora body text stays warm and literary. The contrast between geometric sans-serif and organic serif creates that "playful meets royal" tension.

I wanted something that felt like me โ€” not another developer portfolio in dark mode. The plum is your backbone. The amber is your jewelry. The signature pop is your red lip. Everything else is just the cream that holds it all together.

Queen Raae

The Two-Font Approach

Fewer fonts means faster loads, simpler CSS, and a tighter visual identity. Montserrat handles everything structural โ€” headings, labels, navigation. Lora handles everything narrative โ€” body text, quotes, the words that matter.

My heart is, and always will be, yours.

Me, to well-structured HTML

That's the system. Clean enough to maintain, warm enough to feel personal.

Summary

All Confirmed Choices

Fonts Confirmed

Montserrat + Lora (two fonts only)

Montserrat: headings, labels, nav ยท Lora: body, italic for quotes

Color Palette Confirmed

14 tokens

Blockquotes Confirmed

Short (centered, italic Lora 1.4rem) / Long (left-aligned, italic Lora 1rem)

Short: fleur above, punchy ยท Long: fleur beside, flowing

Decorative System Confirmed

Fleur-de-lis bullets, โšœ ๐Ÿ‘‘ โšœ dividers

Ornamental without being heavy

Image Frames Confirmed

Double-line + Gilded

CSS-only, soft ornamental framing