The Most Magical Blog — Website Style Guide
Single-column layout. Toggle Desktop / Tablet / Mobile to see specimen tables. Values pulled from live site scan.
Brand Colors
Primary surfaces, text, and accents used across the site.
Primary Link Blue
Links & icons
#07A5C3
Links & icons
#07A5C3
Primary Pink
Primary CTA
#F63664
Primary CTA
#F63664
Gold Accent
Search button / highlights
#F4C430
Search button / highlights
#F4C430
Text
Body & headings
#303030
Body & headings
#303030
Dark Gray
Alt surfaces / footer
#424242
Alt surfaces / footer
#424242
White
Background
#FFFFFF
Background
#FFFFFF
Subtle Gray
Alternate background
#F2F5F7
Alternate background
#F2F5F7
Orange Accent
Occasional highlight
#ED7900
Occasional highlight
#ED7900
Type Overview — Stacked Specimens
Quick visual of H1, H2, H3, and Body using the same sentence.
H1 — Hero/Top Title
The quick brown fox jumps over the lazy dog.
H2 — Section Title
The quick brown fox jumps over the lazy dog.
H3 — Subheading / Card Title
The quick brown fox jumps over the lazy dog.
Body — Paragraph Text
The quick brown fox jumps over the lazy dog.
H1 — Hero / Page Title
Largest headline, usually on light background.
Ultimate Disney Tips & Expert Insights
| Property | Value (Desktop) |
|---|---|
| Font Family | Montserrat, sans-serif |
| Font Size | 25px |
| Font Weight | 600 |
| Line Height | 32.5px |
| Letter Spacing | normal |
| Text Color | #303030 (on light) / #ffffff (on dark) |
| Same as Desktop |
| Same as Desktop |
H2 — Section Title (assumed)
Primary section headline. H2 wasn’t detected directly; this reflects current visual rhythm.
Planning Guides
| Property | Value (Desktop) |
|---|---|
| H2 Font | Montserrat · 20px · 600 · 28px · normal · Left |
| Same as Desktop (update if theme adds rules) |
| Same as Desktop |
H3 — Subheading / Card Title
Used for smaller sub-sections or post cards.
Latest Posts
| Property | Value (Desktop) |
|---|---|
| Font Family | Montserrat Alternates, sans-serif |
| Font Size | 18px |
| Font Weight | 600 |
| Line Height | 23.4px |
| Letter Spacing | normal |
| Align / Color | Left · #303030 |
| Same as Desktop |
| Same as Desktop |
Body — Paragraph
Standard post/content copy.
From Genie+ to Mobile Order, we keep Disney planning practical and magical.
| Property | Value (Desktop) |
|---|---|
| Font Family | Montserrat, sans-serif |
| Font Size | 15px |
| Font Weight | 400 |
| Line Height | 25.5px |
| Letter Spacing | normal |
| Text Color | #303030 |
| Same as Desktop |
| Same as Desktop |
Buttons — Search / Primary
CTAs from the scan (Search and Subscribe).
| Variant | Property | Value |
|---|---|---|
| Search | Font / Size / Weight | Montserrat · 15px · 400 |
| Padding / Radius | 10.5px 15px · 30px | |
| Background / Text | #F4C430 · #000000 | |
| Primary | Font / Size / Weight | Montserrat · 14px · 700 |
| Padding / Radius | 10px 10px · 4px | |
| Background / Text | #F63664 · #FFFFFF |
| Same as Desktop |
| Same as Desktop |
Spacing Scale
Theme block gap and common section rhythm (adjust if you adopt Astra container tokens).
8px — tight inline spacing
12px — compact block spacing
16px — inner padding
24px —
--wp--style--block-gap (detected)32px — section content spacing
48px — section top/bottom (mobile)
64px — section top/bottom (desktop)
Links & States
Interactive states and accessibility for text links.
Example: Read a guide or subscribe for updates.
| State | Spec |
|---|---|
| Default | Color: #07A5C3 · no underline |
| Hover | Underline shown · underline-offset: 3px |
| Active | Color: #0586A1 |
| Visited | Color: #5A8FA4 (sample) |
| Focus | 2px solid #07A5C3 focus ring · offset 2px · rounded 4px |
| Same as Desktop |
| Same as Desktop |
Form Fields
Inputs, selects, textareas, help text, validation.
First & last name.
Looks good.
Please enter a message.
| Element | Spec |
|---|---|
| Labels | Montserrat Alternates 600 · 14px · #111827 |
| Inputs | Montserrat 16px · #222 on #fff · Border 1px rgba(0,0,0,.2) · Radius 8px · Padding 10/12 |
| Focus | Border #07A5C3 + Shadow 0 0 0 3px rgba(7,165,195,.18) |
| Help | 12px · #6b7280 |
| Error | Border #b91c1c · Shadow 0 0 0 3px rgba(185,28,28,.15) · Help #b91c1c |
| Success | Border #0f766e · Shadow 0 0 0 3px rgba(15,118,110,.15) · Help #0f766e |
Cards & Surfaces
Container treatments. Detected: flat, square corners, minimal elevation.
Plain Surface
Border 1px rgba(0,0,0,.08), radius 0px, shadow none
Elevated Card
Currently none — theme favors flat surfaces
On-Dark Surface
Text uses #ffffff. Buttons: prefer outline or pink primary for contrast.
Brand Voice & Microcopy
Tone aligned with Disney-savvy, family-friendly guidance.
Voice: Warm, practical, upbeat, and “park-pro helpful.” Explain features (Genie+, Virtual Queues) with friendly clarity.
CTAs: “Search blog” · “Subscribe” · “Read more” · “Plan your visit”.
Do: Use step-by-step tips (“Open MDE → Tap Mobile Order → Choose pickup window”).
Don’t: Over-promise or rely on insider jargon without definitions.