WBN News Corp Inc.™
Style Guide
v3.2 · Robin Blue · Arial · Source Code Pro · Oswald · ENSOcast™ aligned · Cast OS™ v0.3 reference
v3.2 · 05-17-26
WBN Style Guide v3.2: Robin Blue confirmed · ENSOcast™ v4.1 reference implementation · Full component library · Admin standard backend locked · Cast OS™ v0.3 aligned · Ghost-ready · All 9 OS modules documented
Primary Palette — Robin Blue
Confirmed v3.1 · Unchanged v3.2
Robin Blue is the WBN anchor colour — consistent across all casts and modules. Do not substitute Robin Blue tokens with cast-specific accent colours.
Robin Blue
#59c2eb
Buttons, active states, accent
Robin Dark
#1f8db8
Hover, labels, status text ↑v3.1
Robin Deep
#1a7aaa
Pressed states, rule titles
Robin Dim
#b7dfef
Borders, dividers
Robin Faint
#eef9fe
Hover fills, notice BG
Robin Line
#c8ecfb
Section rules, panel borders
Shell & Panel Surfaces
v3.1 · Unchanged v3.2
BG Top
#dff5ff
Shell gradient start
BG Bottom
#c8ecfb
Shell gradient end
Panel 1
#ffffff
Panel gradient start
Panel 2
#eaf8fe
Panel gradient end ↑v3.1
Header Frost
rgba(255,255,255,.58)
Panel header background
Text
#123246
Primary text, headings
Status Colours — Contrast Safe
Updated v3.1 · Unchanged v3.2
All three status colours darkened in v3.1 to be text-safe on white. Old values (#1f9d63, #e6a23c, #d9534f) are retired — do not use.
Success
#13795b
Live, approved, earnings
Warning
#9a6700
Pending, caution
Danger
#a61b1b
Error, delete, alert, live pill
Success BG
#e8f7ee
Badge fill — success
Warning BG
#fff5e8
Badge fill — warning
Danger BG
#fdf0f0
Badge fill — danger
Cast Accent Tokens New v3.2
Cast-specific accent colours for warm/cool signal states. Override --cast-hot and --cast-cold per cast. Never override Robin Blue tokens for cast accents. ENSOcast uses hot:#d85a30 / cold:#185fa5.
Cast Hot
#d85a30
Warm signal, alert, El Niño
Cast Hot BG
#fdf0ea
Hot badge fill
Cast Cold
#185fa5
Cool signal, low state
Cast Cold BG
#e6f1fb
Cold badge fill
Sponsor Dark
#204961
Sponsor button gradient end
CSS Variable Reference — v3.2
/* Robin Blue Palette */ --robin: #59c2eb; /* primary accent, buttons */ --robin-dark: #1f8db8; /* hover, labels ↑v3.1 — not #2f8eb3 */ --robin-deep: #1a7aaa; /* pressed, rule titles */ --robin-dim: #b7dfef; /* borders, dividers */ --robin-faint: #eef9fe; /* hover fills, notice BG */ --robin-line: #c8ecfb; /* section rules */ /* Shell & Panels */ --bg1: #dff5ff; /* shell gradient top */ --bg2: #c8ecfb; /* shell gradient bottom */ --panel1: #ffffff; /* panel gradient start */ --panel2: #eaf8fe; /* panel gradient end ↑v3.1 */ --frost: rgba(255,255,255,.58); /* panel header */ /* Neutrals */ --text: #123246; --muted: #426679; /* Status — contrast-safe on white ↑v3.1 */ --success: #13795b; /* not #1f9d63 — retired */ --warning: #9a6700; /* not #e6a23c — retired */ --danger: #a61b1b; /* not #d9534f — retired */ --success-bg: #e8f7ee; --warning-bg: #fff5e8; --danger-bg: #fdf0f0; /* Cast accent slots — override per cast (v3.2) */ --cast-hot: #d85a30; /* warm/alert signal */ --cast-hot-bg: #fdf0ea; --cast-cold: #185fa5; /* cool/low signal */ --cast-cold-bg:#e6f1fb; /* Global */ --shadow: 0 10px 30px rgba(18,50,70,.08); --radius: 18px; /* panel radius */ --sponsor: #204961;
Font Stack — v3.1 Standard
Unchanged v3.2
Arial — primary UI and body font. Universal, no load required. Source Code Pro — monospaced metadata, tickers, timestamps, version stamps, code. Oswald — display headings only: mastheads, panel titles. Libre Franklin retired in v3.0.
Arial — Primary UI & Body
CAST NAME · Arial 700 · 26px · letter-spacing .04em
ENSOcast™
PANEL TITLE · Oswald 700 · 15px · uppercase · letter-spacing .06em
Global ENSO Impact Intelligence Map
BODY · Arial 400 · 13–14px · line-height 1.7 · color: muted
Pacific moisture transport systems are being closely monitored as El Niño conditions intensify across the Pacific Basin.
LABEL · Arial 700 · 11px · uppercase · letter-spacing .05em
SST Anomaly · Trade Winds · SOI Index · Thermocline
METRIC VALUE · Arial 800 · 28px
+1.2°C
Source Code Pro — Monospace
TICKER · Source Code Pro 700 · 13px
ENSOcast™: EL NIÑO ALERT · Pacific warming intensifies · BC atmospheric river risk elevated
FEED META · Source Code Pro 700 · 11px · robin-dark
Reuters Climate Desk · May 16 · Global
VERSION STAMP · Source Code Pro 400 · 11px · right-aligned · muted
ENSOcast™ v4.1 | WBN Cast OS™ v0.3 | 05-17-26 PST | Style Guide v3.2
KEYWORD PILL · Source Code Pro 700 · 11px
El Niño La Niña ENSO
Border Radius Scale — v3.1
Unchanged v3.2
24px
Outer shell
18px
Panels (--radius)
16px
Cards, feed cards, region desk
14px
Item cards, admin boxes, buttons large
12px
Buttons default, inputs
10px
Buttons small, region items, cast tabs
999px
Badges, pills, chips, keyword pills
Buttons
border-radius: 12px default · 10px small · 14px large
.os-btn · .os-btn.dark · .os-btn.secondary · .os-btn.success · .os-btn.warning-btn · .os-btn.danger · .os-btn.ghost · .os-btn.small · .os-btn.large · .os-btn.sponsor-btn
Badges & Pills
hot/cold new in v3.2
Default Success Warning Danger Hot Signal Cold Signal
LIVE
.os-badge · .os-badge.success · .os-badge.warning · .os-badge.danger · .os-badge.hot · .os-badge.cold · .os-live-pill
Metric Cards New v3.2
4px robin top-bar · 16px radius
SST Anomaly
+1.2°C
Niño 3.4 region
Trade Winds
−0.7
Easterly weakening
SOI Index
−8.4
Tahiti vs Darwin
Global Risk
72
Climate volatility index
.os-metric-card · .os-metric-label · .os-metric-value · .os-metric-value.hot · .os-metric-value.cold · .os-metric-sub
Keyword Bar + Pills New v3.2
El Niño La Niña ENSO Atmospheric River Pacific Warming
.os-keyword-bar · .os-keyword-pill · .os-keyword-pill.active
Phase / Probability Bar New v3.2
El Niño
62%
Neutral
28%
La Niña
10%
.os-phase-row · .os-phase-dot · .os-phase-label · .os-phase-bar-wrap · .os-phase-bar · .os-phase-pct
Feed Card Updated v3.2
Single CTA only — no secondary tracking buttons
Reuters Climate Desk · May 16 · Global
Pacific Ocean Heat Anomalies Continue Expanding Eastward
NOAA forecasters say warm oceanic conditions across the central Pacific continue strengthening seasonal ENSO probabilities.
Why It Matters — Higher Pacific heat anomalies can increase atmospheric river activity, alter storm tracks, and affect agriculture and insurance markets globally.
Read Full Story
.os-feed-card · .os-feed-meta · .os-feed-title · .os-feed-summary · .os-feed-why · .os-feed-actions
Content Grid Cards New v3.2
Walker Circulation
The atmospheric engine that breaks down during El Niño, reversing trade wind patterns globally.
Thermocline Depth
Boundary between warm surface water and cooler deep Pacific water. Shifts trigger ENSO events.
Teleconnections
How a Pacific warming event causes drought in India or floods in Ecuador via atmospheric linkages.
.os-grid · .os-grid-card · .os-grid-card-title · .os-grid-card-body
Regional Desk Sidebar New v3.2
Regional Desks
Global
British Columbia
California
Australia
India
.os-region-desk · .os-region-desk-title · .os-region-item · .os-region-item.active
Sponsor Bar Updated v3.2
Presented by
Mandatory on every cast. Admin-editable label + URL. Impression recorded on load via applySponsor(). Click tracked via event delegation.
.os-sponsor-bar · .os-sponsor-label · .os-btn.sponsor-btn
Admin Standard Backend Locked v3.2
Reference: ENSOcast™ v4.1 · Do not modify between casts
The ENSOcast v4.1 admin system is the definitive WBN Cast backend. Every future cast inherits this structure unchanged. Cast-specific content goes in the designated slot divs only.
Tab Structure
Marketing
All roles.
Ticker message editor + save.
Sponsor label + URL + save.
osCastMarketingSlot for cast additions.
Sponsorship
Super + Admin.
Live impressions / clicks / CTR.
Sponsor analytics report table.
Download Sponsor CSV.
Data
Super + Admin.
Edition Name + Tagline + Ticker.
Current edition display.
Download Data / Upload Data.
Danger Zone — Clear All (Super only).
osCastDataSlot for cast additions.
Permissions
Super Admin only.
Super Admin — red, full access.
Admin — warning/amber.
Editor — robin, marketing only.
Access matrix table.
Role Access Matrix
FeatureSuperAdminEditor
Content Management✅✅✅
Marketing / Ticker✅✅—
Sponsorship Analytics✅✅—
Data Backup / Restore✅✅—
Edition Settings✅✅—
Clear All Data✅——
Permissions✅——
Behaviour Rules
Login — "Open Admin" dark button reveals login panel. Password gate before any UI shown. Enter key triggers login.
Roles — Password determines role on login. Role save requires password + confirm match. 3s auto-clear on success messages.
Persistence — Admin open state persists in localStorage. Page reload re-opens admin if it was open. Full login required to re-resolve role.
Slots — osCastMarketingSlot and osCastDataSlot for cast-specific additions only.
Shell & Panel Pattern
Unchanged v3.2
/* Outer shell */ background: linear-gradient(180deg, #dff5ff, #c8ecfb); border: 1px solid #b7dfef; border-radius: 24px; box-shadow: 0 10px 30px rgba(18,50,70,.08); /* Panel */ background: linear-gradient(180deg, #ffffff, #eaf8fe); border: 1px solid #b7dfef; border-radius: 18px; /* --radius */ overflow: hidden; margin-bottom: 14px; /* Panel header (frosted) */ background: rgba(255,255,255,.58); border-bottom: 1px solid #b7dfef; padding: 14px 18px;
Feed Engine Layout New v3.2
/* Feed engine — 2-col: sidebar + feed cards */ .os-feed-engine { display: grid; grid-template-columns: 240px 1fr; gap: 18px; } /* Collapses to 1-col at 1080px */ @media (max-width: 1080px) { .os-feed-engine { grid-template-columns: 1fr; } } /* Metric card grid */ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px;
Cast Tab Navigation Pattern Updated v3.2
/* HTML structure */ <div class="os-cast-tabs" id="myCastTabNav"> <button class="os-cast-tab active" data-tab="sec-signals" type="button">Live Signals</button> <button class="os-cast-tab" data-tab="sec-guide" type="button">Guide</button> <a class="os-cast-tab tv-tab" href="https://..." target="_blank">📺 TV</a> </div> <div class="os-section-panel active" id="sec-signals">...</div> <div class="os-section-panel" id="sec-guide">...</div> /* JS — wire via initFrontTabs() in OS core */ /* data-tab value must match section panel id */
Version Stamp — Module 1.8
Right-aligned standard v3.2
/* HTML */ <div class="os-footer" id="osFooter">CastName™ v1.0 | WBN Cast OS™ v0.3 | MM-DD-YY PST</div> /* CSS */ font-family: 'Source Code Pro', monospace; font-size: 11px; color: var(--muted); text-align: right; /* v3.2 standard */ margin-top: 14px;
ENSOcast™ v4.1 | WBN Cast OS™ v0.3 | 05-17-26 PST | Style Guide v3.2
Do & Don't
✓ Do
Use Robin Blue (#59c2eb) as the primary interactive accent — buttons, active states, borders.
Use contrast-safe status colours — #13795b success, #9a6700 warning, #a61b1b danger.
Use Arial as the default UI and body font. Universal, no external load.
Use the frosted panel header: rgba(255,255,255,.58) with border-bottom on all panels.
Use .os-cast-tab for front navigation and .os-tab for admin navigation — keep them separate.
Use --cast-hot and --cast-cold slots for cast-specific accent overrides.
Use single "Read Full Story" CTA on feed cards — no secondary tracking buttons.
Right-align the version stamp footer. Source Code Pro, 11px, --muted.
Wrap all JS in an IIFE and bind all events via addEventListener.
Include sponsor bar on every cast. Record impressions on load, clicks on click.
✕ Don't
Don't use old status colours (#1f9d63, #e6a23c, #d9534f) — retired in v3.1, fail contrast.
Don't use inline onclick= handlers — fail silently in Ghost HTML blocks.
Don't override Robin Blue tokens for cast-specific accents — use --cast-hot / --cast-cold.
Don't put body copy in Oswald — display and panel headings only.
Don't use Libre Franklin — retired in v3.0. Arial handles all body copy.
Don't use dark backgrounds — the light gradient shell is the WBN standard.
Don't use sharp corners — the rounded standard is the WBN design language.
Don't modify the admin backend structure between casts — it is locked as of v3.2.
Don't add secondary tracking buttons to feed cards — one CTA only per card.
Don't skip the sponsor bar — it is mandatory on every cast per OS rules.
Ghost Compatibility Rules
Mandatory — all 8 rules apply to every cast
1
IIFE Wrapping
All cast JS wrapped in (function(){ 'use strict'; ... })(); — prevents global scope collisions between widgets on the same Ghost page.
2
No Inline onclick=
Never use inline onclick= handlers. Ghost's CSP blocks them silently. All binding via addEventListener. Dynamic lists use event delegation on the parent container.
3
Self-Contained
Every cast is fully self-contained within its wrapper div. No bleed, no shared CSS or JS. Copy-paste deployable into any Ghost HTML block.
4
localStorage Persistence
All editable data saved to localStorage. Always wrap read/write in try/catch. Namespaced per cast. Provide Download Data (export JSON) and Upload Data (import JSON) in admin.
5
Admin Access Pattern
Password gate on all admin panels. 3-role system: super / admin / editor. Login/logout state to localStorage. Admin hidden by default. Enter key via keydown listener. Change passwords on first deploy.
6
Sponsor / Advertising Widget
Every cast includes a sponsor bar. Default: generic "Sponsor" button. Admin-editable label + URL, persisted to localStorage. Impressions recorded on applySponsor(). Clicks tracked via event delegation.
7
Version Stamp
Footer: CastName™ vX.X | WBN Cast OS™ vX.X | MM-DD-YY PST — Source Code Pro · 11px · color: var(--muted) · right-aligned.
8
Responsive
All casts single-column on mobile. Feed engine and wide grids collapse at max-width: 1080px. Standard grid layouts collapse at 760px. No horizontal scroll.
Deployment Checklist — v3.2
All items required before ship
  • Self-contained — no bleed outside wrapper div
  • Ghost-compatible — clean HTML/CSS/JS, no framework dependencies
  • All JS in IIFE — no global namespace pollution
  • All event binding via addEventListener — no inline onclick=
  • Admin panel — working password login and logout with 3-role system
  • localStorage — export (Download) and import (Upload) included
  • Sponsor bar present and wired — impression on load, click tracked
  • Version stamp in footer — Source Code Pro, 11px, right-aligned, --muted
  • Responsive — single column on mobile, feed-engine collapses at 1080px
  • Robin Blue palette — v3.1 tokens applied, no retired values
  • Contrast-safe status colours — v3.1 values only
  • Rounded border-radius scale applied throughout
  • Cast accent tokens set — --cast-hot and --cast-cold defined per cast
  • Frosted panel headers — rgba(255,255,255,.58) on all os-panel-header elements
  • Admin backend unchanged — 4 tabs, 3 roles, access matrix intact
  • Feed cards have single CTA only — no secondary tracking buttons
  • Cast tabs use .os-cast-tab / .os-section-panel pattern
  • OS v0.3 namespace applied — localStorage keys prefixed per cast
WBN Style Guide v3.2 · ENSOcast™ v4.1 aligned · Cast OS™ v0.3 · 05-17-26 PST · WBN News Corp Inc.™