Reference / Internal
This page is the living visual reference for every styled component in the La Jolla Mom / Cadence Travel design system. It is noindex,nofollow and unlisted from the main navigation.
On this page
- 1. Color palette
- 2. Typography
- 3. Links
- 4. Buttons
- 5. Separators
- 6. Lists
- 7. Blockquotes
- 8. Pull quotes
- 9. Tips from Katie callout
- 10. See Also pointer
- 11. Tables
- 12. Figures & captions
- 13. Cards
- 14. Badges
- 15. Room list
- 16. Stats
- 17. Pros / Cons
- 18. CTA blocks
- 19. Eyebrows
- 20. Splide slider
- 21. Hero patterns
- 22. Other useful components
- 23. Hotel review architecture
Section 1
Color palette
Every brand color, its hex, and its role. This palette is complete: 10 tokens plus white. If a color is not on this page, it is not a brand color. Two-tier gold is mandatory: #C4A265 is decoration only; use #8B6914 for gold that must read as text on white. Panels are warm-white, cards on panels are white, every hairline is #E8E2D9.
Retired shades (purged from the live stylesheet 2026-07-11 — do not reintroduce): #FBFAF7, #EEF6F5, #B8983F, #826A2C, #E8E0D2, #ECE6DA, #F2EFE9, #FDFCF8, #FCFBF8, #FAFCFB, #F4F8F6. If one of these appears in old markup or a mockup, replace it with the nearest canon token above.
This palette mirrors ~/Desktop/GP-Migration/design-system.md (the single canon; synced 2026-07-11). If canon changes, regenerate this section — do not hand-edit one without the other.
Section 2
Typography
Playfair Display for H1, H2, H3, H4 (always italic on the meaningful noun). Georgia for body text (18px / 1.6). Montserrat for eyebrows, captions, and buttons. No system sans for body content, ever.
San Diego Zoo guide
<h1> · Playfair Display 500 · clamp(36px, 4vw, 48px) · line 1.1 · italic accent on the meaningful noun.
Must-see highlights
<h2> · Playfair Display 500 · clamp(28px, 3vw, 36px) · line 1.15 · 64px top margin to create a real section break.
Hours, address & parking
<h3> · Playfair Display 500 · clamp(24px, 2.4vw, 28px) · line 1.25 · 48px top margin.
A smaller sub-section header
<h4> · Playfair Display 600 · 20px · line 1.3 · 32px top margin.
Body paragraph. Georgia 18px / line-height 1.6. This is the baseline reading text for the entire site. Two to four sentences per paragraph on mobile is the rule.
- Body list item. Georgia 17px / 1.55 with the gold chevron.
- Long list items wrap correctly, with the chevron staying anchored to the first line.
- One step smaller than body paragraphs to signal “list element.”
Eyebrow large · 11px Montserrat 600
Class hooks: native <h1>–<h4> inside .entry-content. Eyebrow: .lj-eyebrow on a paragraph. See specs/post-content-styling-spec.md §1b.
Section 3
In-content links
Sitewide default: charcoal text (#1A1A1A) with a 2px gold underline (#C4A265), 3px offset. On hover, text shifts to teal (#265B5F); the gold underline stays. Body link color is never gold text on white — that fails WCAG.
The Bower Coronado is a 27-room boutique hotel tucked behind the Hotel del Coronado. Read more about our advisory work, or browse our three service pillars. Hover any link to see the teal transition.
| Context | Rest state | Hover |
|---|---|---|
| In-content body link | Charcoal text, 2px gold underline | Teal text, gold underline stays |
| Card title link | Charcoal, no underline | Gold underline appears |
| Eyebrow link | Gold-text (#8B6914), no underline | Gold underline appears |
| Breadcrumb link | Gold-text, no underline | Gold underline appears |
| Footer utility | Plain teal, no underline | Slight opacity shift |
| Link on dark background | Warm-white text, gold underline | Gold text |
Class hook: the default rule fires on any <a> inside .entry-content, .post-content, .bio-content. Scoped exceptions override via :not() chain. See specs/post-content-styling-spec.md §1.
Section 4
Buttons
Three variants. Primary (filled dark teal) is THE action per section. Secondary (outline teal) is a supporting action. Text link with arrow (.guide-cta) is for inline cross-references inside body content.
Primary buttons go full-width on mobile by default. Opt out with .auto-width-mobile; force full-width on secondaries with .full-width-mobile.
Tertiary · text link with arrow
Read our full San Diego Zoo guide
Class hooks: WP Buttons block (.wp-block-button__link) for primary, add .is-style-outline for secondary. Wrap text-link CTAs in <p class="guide-cta">. See specs/post-content-styling-spec.md §8.
Section 5
Separators
Four variants. Default <hr> is the quiet warm-gray hairline. The diamond, short rule, and asterisks are opt-in via block style picker.
Default · quiet hairline
Variant A · .is-style-diamond
Variant B · .is-style-short
Variant C · .is-style-asterisks
Class hooks: WP Separator block, then pick style. See specs/post-content-styling-spec.md §6b.
Section 6
Lists
Unordered, ordered, and the quieter .plain-list opt-out. Browser default bullets and numbers are never used anywhere on the site.
Unordered · gold chevron (default)
- Crown Club benefits at Hotel del Coronado
- Hyatt Privé inclusions across Asia and Europe
- Four Seasons Preferred Partner amenity package
Unordered · gold dot opt-out (.plain-list)
- Use for long reference lists where chevrons feel heavy
- FAQ-style enumerations
Ordered · italic gold leading-zero numerals
- Send us your dates and rough budget
- We propose a rate plan with VIP inclusions
- You approve; we book and stay on the file through check-out
Class hooks: native <ul> / <ol> inside .entry-content. Add .plain-list for the quieter dot variant. .icon-list and .checklist are NOT in the system. See specs/post-content-styling-spec.md §2–§3.
Section 7
Blockquotes
The Crown Club add-on at The Del paid for our entire breakfast bill plus the kids’ s’mores at the firepit. Katie handled the whole rate comparison so we didn’t have to.
Sarah M., booked Hotel del Coronado
Class hook: WP Quote block. <p> for body, <cite> for attribution. See specs/post-content-styling-spec.md §4.
Section 8
Pull quotes
From Katie
The right hotel can make the difference between a trip your kids tolerate and a trip they remember for years.
Class hook: WP Quote block with .pullquote. Optional <span class="pullquote-eyebrow">. See specs/post-content-styling-spec.md §5.
Section 9
Tips from Katie callout
Gold variant (.tips-from-katie.gold)
Class hooks: Group block with tagName: "aside" and className tips-from-katie (or tips-from-katie gold). First child paragraph contains <span class="tips-eyebrow">Label</span>. See specs/post-content-styling-spec.md §5b.
Section 10
See Also pointer
You can also see sea lions in La Jolla on the way back from the Zoo.
Class hooks: Group block with className see-also, inner paragraph with className see-also-text. Optional <span class="see-also-icon"> child for an inline SVG. See specs/post-content-styling-spec.md §5c.
Section 11
Tables
| Hotel | Program | Typical inclusions | Booking lead time |
|---|---|---|---|
| Hotel del Coronado | Virtuoso + Crown Club | Breakfast, $100 credit, upgrade subject to availability | 30+ days |
| Four Seasons Hualalai | Four Seasons PP | Breakfast, $100 F&B credit, upgrade, early check-in | 60+ days |
| Andaz San Diego | Hyatt Privé | Breakfast, $100 credit, upgrade, late check-out | 14+ days |
Class hook: WP Table block, no additional class. For dense comparisons, wrap in .quick-ref — see Section 22. See specs/post-content-styling-spec.md §6.
Section 12
Figures & captions
Class hook: WP Image block. Caption styling fires on figcaption and .wp-element-caption inside .entry-content. See specs/post-content-styling-spec.md §1c.
Section 13
Cards
Five canonical card components: Editorial Summary, Editorial Balance, Booking Hub, Booking Card, Summary Callout.
Editorial Balance · What I Love / Good to Know
The Crown Club inclusions land in writing.
No mystery about what breakfast covers, whether the credit can be split across F&B and spa, or how upgrades are prioritized.
Crown Beach is gated and lifeguarded.
Reserved for resort guests with chair service. The wider public beach is steps away if you want the bigger scene.
Holiday rates run 2–3x off-peak.
Christmas week and Comic-Con are the two reliable spike windows. Book 90+ days out or pick adjacent dates.
The Victorian rooms are smaller.
Charming, but a tight squeeze for a family of four with luggage. The Cabana wing is the better family pick.
Class hook: .editorial-balance > two .editorial-balance-col with .love (teal) and .know (gold) modifiers. See specs/global-post-components.css §7b.
Booking Hub · top-of-post booking panel
How to Book Hotel del Coronado (With Added Benefits)
My clients receive Crown Club benefits that combine Virtuoso amenities with additional in-house privileges, regardless of which rate plan we book.
- Complimentary daily breakfast for two
- $100 resort credit per stay
- Room upgrade subject to availability
Send your dates and room preferences. I’ll send back a proposal with pricing and the full Crown Club inclusions.
Ready to start? I respond within 24 hours.
Bookings handled by Cadence Travel. No deposit required to request a quote.
Class hook: .booking-hub + named children. See specs/booking-hub-spec.md.
Booking Card · mid-post booking section
Main Resort (Victorian, Cabanas, Beach Village)
Book through Virtuoso for Crown Club VIP inclusions: breakfast, resort credit, room upgrade subject to availability, early check-in / late check-out.
Hilton Honors members can book direct for points and Diamond benefits; I’ll add VIP amenities on top.
Class hook: .booking-card + children. Stacks under the Booking Hub (no top border). See specs/booking-hub-spec.md.
Summary Callout · reusable block
Three variants live on staging at reusable block post 177957. Default (warm-white panel), --boxed, and --bare.
Reusable block ID: 177957. Insert via Gutenberg » Synced Patterns » “Summary Callout”. See BLOCKS-AND-PATTERNS-INVENTORY.md.
Section 14
Badges
Most Booked Book Quickly New Limited Sale VIP Only Editor’s Pick
Class hook: <span class="badge badge--MODIFIER"> inline. See specs/badge-spec.md.
Section 15
Room list
Original 1888 architecture. Charming, on the smaller side. Best for couples; tight for families.
The family pick. Direct beach access, two firepits per cluster, unlimited s’mores with the Ocean Club add-on.
Residential-style suite at the LXR Shore House wing. Books out 6–9 months ahead for summer weeks.
Class hook: .room-list > .room-list__entry (optionally with --highlighted or --book-quickly). NO background fill — gold/teal left rule carries the signal. See specs/room-list-spec.md.
Section 16
Stats
A small sample of the trust we’ve built since 2009.
Class hook: .stats > .stats__intro + .stats__cards > .stats__card. See specs/stats-spec.md.
Section 17
Pros / Cons
Pros
- Beachfront with gated guest-only Crown Beach
- Crown Club program stacks on top of Virtuoso amenities
- Walking distance to Coronado village restaurants
Cons
- Holiday rates 2–3x off-peak pricing
- Victorian rooms tight for families with luggage
- 30-minute drive from SAN airport
Class hooks: <ul class="pros-list"> gold + bullets, <ul class="cons-list"> sand − bullets. See specs/global-post-components.css §7.
Section 18
CTA blocks
Browse the full property list first
If you’re still narrowing down, our hotel directory lays out every program we book through with sample inclusions.
Class hooks: .cta-block base + .cta-teal or .cta-warm modifier. Children: .cta-eyebrow, .cta-heading, .cta-body.
Section 19
Eyebrows
Wellness
Spa & fitness
The canonical sitewide hook is .lj-eyebrow. On dark backgrounds use decoration gold #C4A265; on white use readable gold #8B6914.
Class hook: <p class="lj-eyebrow">Label</p> above an H2 or H3. Component eyebrows are scoped. See design-system.md > Eyebrow.
Section 20
Splide slider
Section 21
Hero patterns
Heroes live on individual templates, not as drop-in components. Category hero: full-bleed photo with H1 below on white (.cat-hero). Hotel review hero: the .editorial-summary / .booking-callout (see Section 23). Blog post hero: image-right split (.hero-split).
Class hooks: .cat-hero, .editorial-summary, .hero-split per page type. See specs/category-archive-chrome-spec.md.
Section 22
Other useful components
Advisor Intel (.lj-note)
Also Featured (.also-featured)
Quick Ref comparison table (.quick-ref)
| Method | Verdict | ||
|---|---|---|---|
| 01 | aRes Travel discount tickets via lajollamom.com | Best for most | |
| 02 | Park direct full price + processing fee | Safe fallback | |
| 03 | Costco bundled passes often sold-out | Hit or miss |
Class hooks: .lj-note + .lj-note__eyebrow; .also-featured wraps a wp-block-buttons group; .quick-ref wraps a <table> with cell classes .qn / .qt / .qs / .qv. See specs/quick-ref-table-spec.md.
Section 23
Hotel review architecture
The top of every hotel review uses one of two approved architectures. Both ship the SAME components (booking callout, Featured In line, editorial-balance pros/cons, Also Consider footer) — only the placement of the booking callout differs. A/B testable.
Pattern A · Trust-first (default for long-form reviews)
Booking callout sits MID-post, after the editorial trust-builders. Top of post is pure editorial. One small italic pointer near the top gives high-intent readers a jump link to the booking section below.
- Post hero (template-injected, 21:9 photo)
- H1 + byline (template)
- Intro paragraph (Katie voice, first-person)
- Inline pointer: “Ready to book? Skip to VIP Reservations at [Property] below…”
- Editorial-balance (What I Love / Good to Know, 3–7 items per column, hairlines between items) — the TRUST-BUILDER
- Body sections with H2s, inline photos, room slider, dining figures, internal links
- Booking callout (gold-outlined, mid-post placement)
- Featured In italic line right below the callout
- More body sections, conclusion paragraph
- Also Consider footer block
Use Pattern A when: the post is a long-form deep dive; most inbound traffic is from “[hotel name] review” Google searches (research intent); the property is less-known or the reader needs trust-building before any sell. Reference example: Pendry San Diego.
Pattern B · Booking-first (well-known marquee properties, shorter reviews)
Booking callout sits at the TOP, right after the intro paragraph. Editorial-balance follows below.
- Post hero (template)
- H1 + byline (template)
- Intro paragraph
- Booking callout (gold-outlined, top placement)
- Featured In italic line
- Editorial-balance (What I Love / Good to Know)
- Body sections
- Also Consider footer block
Use Pattern B when: the property is a well-known marquee (The Plaza, Hotel del Coronado, Four Seasons flagships); most inbound comes from your comparison/best-of guides (high conversion intent); shorter review.
Component specs (all pending Customizer push)
.booking-callout — the offer block
- White background, 1px gold (
#C4A265) border - Padding 40/44 desktop, 24/24 mobile
- Title: Playfair 30px, italic on property name. Pattern: “VIP Reservations at [Property]”
- Intro: “Reservations made through Cadence Travel include the following [Program] amenities, at no additional cost:”
- Benefits list: gold chevron bullets, 4–6 items
- CTA: filled teal button, “REQUEST RATES” copy
- Contact line: address · phone · website (single line, Montserrat 11px sand)
.featured-in — credibility uplink
- Italic Georgia 15px in sand (
#736758), charcoal + gold underline on links - One sentence: “Featured in our [Best Downtown SD Hotels] guide and our [Best SD Luxury Hotels] roundup.”
.also-consider — competitor/peer-set footer
- NO panel fill, NO border. Single hairline above (
#E8E2D9) - Eyebrow “ALSO CONSIDER IN [NEIGHBORHOOD]” + italic intro + outline-chip buttons (4–6 peer hotels)
.editorial-balance — existing, with one refinement
Same as Section 13, plus 1px #E8E2D9 hairlines between items in each column (last item has no rule). Variable item count: 3 per column for shorter reviews, 7+ for deep dives.
Visual reference: ~/Desktop/GP-Migration/screenshots/design-system/hotel-review-MOCK-CURRENT.png (full Pendry top-to-bottom mock, trust-first).
Maintenance
When a new component or pattern is added to the site: (1) add it to BLOCKS-AND-PATTERNS-INVENTORY.md; (2) add it to design-system.md; (3) add a live example section to this page; (4) update the “On this page” TOC at the top.
Canonical sources, in order: COLOR-NORTH-STAR.md (colors) » design-system.md (tokens, type) » BLOCKS-AND-PATTERNS-INVENTORY.md (which components exist) » specs/*.md » this page (visual reference).
