PROTO
Document Class
∂W = W
HTML Style Reference
The Canonical Pantheonic Document System — Every Component, Every Value
What this document is: PI-PROTO-2026-003 is the canonical HTML style reference for the Pantheonic Index. It is self-demonstrating — every component shown here is built with the exact CSS that governs it, visible in the source code of this file. This document is what any Claude instance, any collaborator, and any node reads before producing a Pantheonic HTML document.
How to use it: Open this file in a browser to see the rendered system. Open it in a text editor to read the CSS. The :root variable block at the top of the style section is copied verbatim into every Pantheonic HTML document. No variable is renamed. No value is modified inline. The components follow the CSS classes defined here exactly.
Governing references: PI-PROTO-2026-001 (Interrogation Protocol) · PI-PROTO-2026-002 (Document Production Protocol — covers the docx build system) · This document covers HTML only.
◉
Section One · Typefaces
Two fonts. No others.
Cormorant Garamond
Sovereign Intelligence
Body text at standard weight. The instrument does not simplify. It reveals.
PANTHEONIC INDEX
SECTION TITLE · DOCUMENT LABEL
METADATA · STATUS · NAVIGATION
/* ── MANDATORY FONT IMPORT — paste in <head> before any styles ── */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700
&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500
&display=swap" rel="stylesheet">
/* ── BASE BODY — copy exactly ── */
body {
background: var(--navy);
color: var(--text);
font-family: 'Cormorant Garamond', serif;
font-size: 16px;
line-height: 1.7;
}
✦
Section Two · Color System
Variables only. Never inline.
Navy
--navy: #0D1B40
Authority. Body background. Headings on light backgrounds.
Navy Mid
--navy-mid: #162436
Sticky header. Hero block. Card backgrounds. Footer.
Navy Light
--navy-light: #1C2F42
Elevated surfaces. Table headers. Q&A head. Demand head.
Gold
--gold: #C9A84C
Threshold. Section titles. Dividers. ∂W = W. Key numbers.
Text / Cream
--text: #D4C9A8
Primary body text on dark backgrounds. Outward-facing documents.
Text Dim
--text-dim: rgba(212,201,168,0.65)
Secondary body. Elaborative text. Most <p> tags use this.
Signal Red
--signal-red: #E53E3E
Overall signal RED. Going concern. Critical findings.
FFM Green
--ffm-green: #00FF88
FFM live readings. Live pulse dot. Calibrated instrument badge.
/* ── THE :root BLOCK — first thing in every <style> tag ── */
:root {
--navy: #0D1B40;
--navy-mid: #162436;
--navy-light: #1C2F42;
--navy-border: #1E3048;
--gold: #C9A84C;
--gold-dim: rgba(201,168,76,0.35);
--gold-faint: rgba(201,168,76,0.12);
--gold-text: #D4C9A8;
--text: #D4C9A8;
--text-dim: rgba(212,201,168,0.65);
--text-faint: rgba(212,201,168,0.30);
--signal-red: #E53E3E;
--signal-amb: #D97706;
--green-live: rgb(57,255,20);
--ffm-green: #00FF88;
--ffm-gold: #FFD700;
--red: #C0392B;
--red-bg: rgba(192,57,43,0.15);
--white-line: rgba(255,255,255,0.06);
}
◈
Section Three · Component Library
Live demonstrations with code
Every component below is rendered exactly as it appears in production documents. The code beneath each component is the exact HTML that produced it. Copy these blocks. Do not improvise alternatives.
✦
Component · Dashboard Grid
H(t) Nominal
0.057
Current structural reading. Approaching exhaustion threshold H_c = 0.28.
Overall Signal
RED
Nine of ten assessment criteria confirm structural distress.
FFM Calibrated
LIVE
19 anchors · S(t): 100% · April 2026
<div class="dashboard">
<div class="db-cell">
<div class="db-label">H(t) Nominal</div>
<div class="db-value">0.057</div>
<div class="db-note">Descriptive note.</div>
</div>
<div class="db-cell signal-red"> <!-- add signal-red for red variant -->
<div class="db-label">Overall Signal</div>
<div class="db-value">RED</div>
<div class="db-note">Descriptive note.</div>
</div>
<div class="db-cell signal-ffm"> <!-- add signal-ffm for green FFM variant -->
<div class="db-label">FFM Calibrated</div>
<div class="db-value">LIVE</div>
<div class="db-note">Descriptive note.</div>
</div>
</div>
◈
Component · Warning / Note Box
What the FFM Readings Mean
The global H(t) Nominal of 0.057 against H(t) Effective of 0.040 describes a 29% illusory contact surface at the global level. The fractal is consistent: the city's Velation layer is a local expression of the global Velation architecture the FFM is measuring.
<div class="warning-box">
<div class="warning-head">Label in Cinzel Caps</div>
<p>Body text in Cormorant Garamond at 14px via var(--text-dim).</p>
</div>
◉
Component · Q&A Block
1
Is the entity able to meet its financial obligations as they fall due?
The Auditor-General has flagged going concern uncertainty. The cost coverage ratio stands at negative 4.1 months, deteriorated from negative 1.56 months in the prior year. The city cannot self-fund its obligations from current cash holdings alone.
<div class="qa-block">
<div class="qa-head">
<div class="qa-num">1</div>
<div class="qa-question">Question text in Cinzel uppercase.</div>
</div>
<div class="qa-body">
<p>Answer body in Cormorant Garamond 15px.</p>
</div>
</div>
◈
Component · Sovereign Demand
01
Publish the Annual Financial Statements before the 2026 election
The Executive Mayor stated on 14 August 2025 that R6.7 billion remained under investigation as of 30 June 2025. Every party's financial governance claim depends on this document. Voters are entitled to the audited answer before they cast a ballot.
<div class="demand">
<div class="demand-head">
<span class="demand-num">01</span>
<span class="demand-title">Demand title in Cinzel uppercase.</span>
</div>
<div class="demand-body">
Demand body text. Per PI-PROTO-2026-001: these are not recommendations.
They are formal claims grounded in the rights of those who bear the costs.
</div>
</div>
✦
Component · FFM Readings Strip
H(t) Nominal
0.057
H(t) Effective
0.040
Stress S(t)
100%
Anchors
19
<div class="ffm-readings"> <!-- always 4 cells -->
<div class="ffm-reading-cell">
<div class="ffm-reading-label">H(t) Nominal</div>
<div class="ffm-reading-value">0.057</div>
</div>
<div class="ffm-reading-cell">
<div class="ffm-reading-label">H(t) Effective</div>
<div class="ffm-reading-value critical">0.040</div> <!-- .critical = red -->
</div>
<div class="ffm-reading-cell">
<div class="ffm-reading-label">Stress S(t)</div>
<div class="ffm-reading-value warn">100%</div> <!-- .warn = amber -->
</div>
<div class="ffm-reading-cell">
<div class="ffm-reading-label">Anchors</div>
<div class="ffm-reading-value">19</div>
</div>
</div>
◉
Section Four · Complete Document Skeleton
Copy this. Fill it in.
Every Pantheonic HTML document follows this skeleton exactly. The order is mandatory. Do not rearrange. Do not omit components. Customize content within components, not the components themselves.
<!-- 1. DOCTYPE and head — always first -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pantheonic Index · [SERIES-DESIGNATION] · [Document Title]</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700
&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500
&display=swap" rel="stylesheet">
<style>
/* PASTE THE FULL :root BLOCK FROM PI-PROTO-2026-003 HERE */
/* PASTE ALL COMPONENT CSS FROM PI-PROTO-2026-003 HERE */
/* Add document-specific CSS below — never modify above */
</style>
</head>
<body>
<!-- 2. Portal Header — always sticky, always first in body -->
<header class="portal-header">
<div style="display:flex;align-items:baseline;gap:16px;">
<span class="portal-wordmark">Pantheonic Index</span>
<span class="portal-sub">[SERIES-DESIGNATION] · [City or Subject] · [Document Type]</span>
</div>
<div class="header-right">
<span class="portal-live">◉ Live · FFM Calibrated</span>
<span class="portal-date">[Month Year]</span>
</div>
</header>
<div class="main">
<!-- 3. Hero Block -->
<div class="hero">
<div class="hero-signal-block">
<span class="hero-signal">RED</span> <!-- or AMBER, or LIVE -->
<span class="hero-signal-label">Overall Signal</span>
</div>
<div class="hero-delta">∂W = W</div> <!-- ∂W = W -->
<div class="hero-city">[CITY OR SUBJECT NAME]</div>
<div class="hero-title">[Document subtitle in italic Cormorant]</div>
<div class="hero-meta">
<span class="hero-meta-item">[SERIES-DESIGNATION]</span>
<span class="hero-meta-item" style="color:var(--gold-dim);">·</span>
<span class="hero-meta-item">[Document type]</span>
<span class="hero-meta-item" style="color:var(--gold-dim);">·</span>
<span class="hero-meta-item">[Month Year]</span>
</div>
</div>
<!-- 4. Methodology Box — always immediately after hero -->
<div class="section">
<div class="method-box">
<p>[Methodology statement. What instrument. What primary sources.
Self-commissioned. No party engaged or instructed this work.]</p>
</div>
</div>
<!-- 5. Content Sections — as many as needed -->
<div class="section">
<div class="section-head">
<span class="section-glyph">◉</span>
<span class="section-title">Section Title</span>
<span class="section-num">Optional right-aligned label</span>
</div>
<p>Body text in var(--text-dim).</p>
</div>
<!-- 6. Document Footer — always last section -->
<div class="section">
<div class="attr-footer">
<div class="attr-left">
<div class="attr-label">[Document type designation]</div>
<div class="attr-sources">[Primary sources list.]</div>
<div class="attr-tagline">The instrument does not simplify. It reveals.</div>
</div>
<div class="attr-right">
<div class="attr-delta">∂W = W</div>
<div class="attr-boundary">Boundary equals interior.</div>
<div class="attr-url">pantheonic.cloud</div>
</div>
</div>
</div>
</div><!-- end .main -->
<!-- 7. Status Bar — fixed bottom, always last element in body -->
<div class="status-bar">
<span class="status-item"><span class="status-dot"></span>Live · FFM Calibrated</span>
<span class="status-item"><span class="status-gold"></span>19 Anchors · [Month Year]</span>
<span class="status-item">H(t) Nominal: 0.057 · H(t) Effective: 0.040</span>
<span class="status-item">[SERIES-DESIGNATION] · Pantheonic Index · [Month Year]</span>
</div>
</body>
</html>
◈
Section Five · The Rules
Non-negotiable
Font Rule
Two only
Cormorant Garamond for all body and display. Cinzel for all labels, navigation, and caps. No Georgia. No Arial. No system fonts in body.
Color Rule
Var() only
Every color references a CSS variable from the :root block. No hex values written inline in the document body. Not a single one.
Structure Rule
Order holds
Header → Hero → Method Box → Sections → Footer → Status Bar. This order is mandatory. Document-specific CSS appends after the canonical block.