html-economist-style

name

html-economist-style

description

The Economist Editorial genre — measured analytical register. Use when: research report, analysis, findings, study, survey, market/competitive landscape, benchmark, due diligence, briefing, executive summary, intelligence brief, policy/regulatory/compliance/risk analysis. Trigger: research / report / analysis / findings / study / market analysis / competitive / benchmark / briefing / executive summary / digest / policy / regulatory / audit / 研究 / 分析 / 简报 / 对标 / 竞品. Inherits typography-system. NOT for: warm guides (document), board decks (mckinsey).

---

name: html-economist-style description: "Use when generating a standalone HTML deliverable for evidence-based argumentation: research report, briefing, market analysis, competitive landscape, due diligence, assessment, evaluation. NOT for guides, proposals, or whitepapers (use html-document-style)." combo-tags: [html-rendering]

HTML Document Style -- The Economist Editorial

Typography base (inherited): this skill composes ON TOP of the shared typography-system foundation — link/inline tokens/typography.css FIRST, then layer this skill for color + accent + brand font-family ONLY. Never re-declare the type scale, vertical rhythm, measure, page frame, or CJK rules; keep mixed CJK+Latin stacks Latin-first. Verify: python3 scripts/audit-genre-typography.py.

This is the editorial report style for research reports, briefings, market analyses, and data-driven investigative documents. It implements a design language inspired by The Economist magazine: authoritative, flat, typographically-driven, with surgical use of color.

Apply this style when generating single-file HTML deliverables of type: research report, briefing, market analysis, competitive landscape, due diligence, policy analysis, technology assessment, or any document whose primary function is evidence-based argumentation.

For documentation, guides, proposals, kickoffs, and whitepapers, use html-document-style (Claude warm academic humanism) instead.

Universal Layout Frame (MUST inject before any other CSS)

Non-negotiable. Satisfies pre-tool-style-router-gate.py dual-verify (identifier + canonical token signature --economist-) AND prevents the hero/body misalignment bug at wide viewports by sharing one reference frame across cover and body.

:root{
  --economist-page-max:1040px;          /* narrow editorial column */
  --economist-page-gutter-total:clamp(32px,6vw,96px);
}
.frame{
  width:min(var(--economist-page-max),calc(100% - var(--economist-page-gutter-total)));
  margin-inline:auto;
}
.masthead, .cover{padding-block:64px 48px;padding-inline:0;}   /* full-bleed bg only */
main.frame{padding-block:48px 80px;}                            /* main IS the frame */

<header class="masthead">
  <div class="frame">                   <!-- masthead content lives inside frame -->
    <h1>Briefing Title</h1>
    <p class="rubric">…</p>
  </div>
</header>

<main class="frame">…</main>            <!-- body shares same frame token -->

Anti-pattern: .masthead { padding-inline: 8vw } combined with main { max-width: 1040px; margin: 0 auto } breaks alignment on wide screens — masthead at 8vw of viewport, body centered in 1040px. Always wrap masthead children in .frame div and use <main class="frame">.

Design Philosophy

• Authoritative, not decorative: Content hierarchy through typography alone
• Flat, not elevated: Zero shadows, zero rounded corners -- pure print DNA
• Red as scalpel, not paintbrush: One accent color (#E3120B), used sparingly
• Editorial density: More content per viewport than typical web design
• Newspaper grid: Strong horizontal rules replace card shadows as dividers

Color Palette (CSS Custom Properties)

:root {
  /* The Economist Red -- sole accent */
  --red: #E3120B;
  --red-light: rgba(227,18,11,0.06);
  --red-border: rgba(227,18,11,0.15);

  /* Navy -- masthead, step markers, emphasis */
  --navy: #1D2B53;
  --navy-light: #2A3F6F;

  /* Ink hierarchy */
  --ink: #1A1A1A;              /* Headlines, strong rules */
  --body: #333333;             /* Body text */
  --secondary: #6B6B6B;        /* Descriptions, meta */
  --muted: #999999;            /* Captions, footnotes */

  /* Rules (horizontal lines -- the primary structural element) */
  --rule: #DBDBDB;             /* Light dividers */
  --rule-strong: #1A1A1A;      /* Section separators (3px) */

  /* Backgrounds -- almost no color */
  --bg: #FFFFFF;               /* Page background */
  --bg-gray: #F6F6F6;          /* Boxed callouts, summaries */
  --bg-warm: #FBF9F7;          /* Subtle warmth for quotes */

  /* Typography */
  --font-headline: 'DM Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body: 'Source Serif 4', 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-sans: 'DM Sans', 'Noto Sans SC', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;
}

Typography Rules

Font Loading (Google Fonts)

<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=DM+Sans:wght@400;500;600;700;800&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&family=Noto+Serif+SC:wght@400;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">

Hierarchy (inverted from Claude style)

Element	Font	Weight	Size	Usage
Page title (h1)	var(--font-headline)	800	3rem	Document title (sans-serif!)
Section title (h2)	var(--font-headline)	800	1.6rem	Section headings
Subsection (h3)	var(--font-headline)	700	1.15rem	Card titles
Body text	var(--font-body)	400	17px	Paragraphs (serif!)
Section labels	var(--font-headline)	700	12px	Red uppercase labels
Pull quotes	var(--font-headline)	700	1.5rem	Extracted key statements

Key difference from Claude style: headlines = sans-serif, body = serif (reversed).

CJK Optimization

body {
  /* Body leading + tracking inherited from the foundation, script-aware
     (:lang(zh) 1.75 / Latin 1.5, --ls-body-cjk) -- do NOT re-declare a single
     literal for both scripts. The genre layer sets color/accent/font only. */
  -webkit-font-smoothing: antialiased;
}

Structural Elements

Masthead (Top Bar)

Dark navy bar with white text, mimicking The Economist's masthead:

.masthead {
  background: var(--navy);
  padding: 14px 0;
}

.masthead-title {
  font-family: var(--font-headline);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

Below it: a 4px solid red rule (.red-rule).

Section Labels

Every section gets a red uppercase label above its h2:

.section-label {
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

Section Rule (Red Underline)

A short 48px red bar below the h2:

.section-rule {
  width: 48px;
  height: 3px;
  background: var(--red);
  margin-bottom: 20px;
}

Pull Quotes

Large-font extracted statements, bounded by heavy rules:

.pull-quote {
  padding: 24px 0;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

Cards (Flat, No Shadow)

Cards use a top border instead of shadows:

.card {
  border-top: 3px solid var(--ink);
  padding: 20px 0 0;
  /* NO border-radius, NO box-shadow, NO background */
}

Boxed variant for emphasis:

.card-boxed {
  background: var(--bg-gray);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  padding: 24px;
}

KPI Grid (Data Strip)

Grid of KPI cells with 1px gaps, creating a newspaper-data-strip effect:

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);  /* gap color */
  border: 1px solid var(--rule);
}

.kpi {
  padding: 20px;
  background: var(--bg);
}

.kpi .label {
  font-family: var(--font-headline);
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

Tables (Bookended Rules + Responsive Wrapper)

Tables bounded by 2px dark rules at top and bottom, with a row-hover tint and a mandatory horizontal-scroll wrapper (CJK report tables routinely want 500-730px of min-content and overflow a ~358px phone frame — see Gotcha 4):

th {
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-headline);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

tbody tr:last-child td {
  border-bottom: 2px solid var(--ink);
}

tbody tr:hover td { background: var(--red-light); }   /* editorial row focus */

/* Responsive wrapper — inert on desktop (overflow-x:auto does nothing while the
   table fits the 1040px frame); on a phone the table scrolls locally instead of
   forcing the whole <body> to scroll horizontally. */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px -4px; }
.tbl-scroll table { margin: 0; min-width: 540px; }

MUST wrap every <table> in <div class="tbl-scroll"> — the CSS alone does nothing without the wrapper element:

<div class="tbl-scroll">
  <table>…</table>
</div>

Callouts (Left Border, No Shadow)

.callout {
  background: var(--bg-warm);
  border-left: 4px solid var(--red);
  padding: 20px 24px;
}

.quote-box {
  background: var(--bg-gray);
  border-left: 4px solid var(--navy);
  font-style: italic;
}

Timeline Steps (Navy Sidebar)

.step {
  display: grid;
  grid-template-columns: 100px 1fr;
  border-bottom: 1px solid var(--rule);
}

.step-num {
  background: var(--navy);
  color: white;
  font-family: var(--font-headline);
  font-weight: 700;
}

Risk/Scenario Grid

Joined cells (no gap), color-coded top border:

.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
}

.scenario {
  padding: 24px;
  border-right: 1px solid var(--rule);
}

.risk-low  { border-top: 4px solid #2E7D32; }
.risk-mid  { border-top: 4px solid #E65100; }
.risk-high { border-top: 4px solid var(--red); }

Print Stylesheet

Editorial reports get printed and PDF-exported. Add a @media print block so the masthead/header colors survive (print-color-adjust:exact), tables expand fully (scroll wrappers are meaningless on paper), and sections do not break mid-block:

@media print {
  body { font-size: 11pt; color: #000; }  /* leading inherited from the foundation (script-aware) */
  .frame { width: 100%; }
  .masthead, th {
    background: var(--navy) !important; color: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  tbody tr:hover td { background: transparent; }      /* kill screen-only hover */
  .tbl-scroll { overflow: visible; margin: 18px 0; }  /* full table on paper */
  .tbl-scroll table { min-width: 0; }
  section { margin-bottom: 24px; page-break-inside: avoid; }
  table, .callout, .quote-box, .pull-quote { page-break-inside: avoid; }
  h2, h3 { page-break-after: avoid; }
  a { color: #000; border-bottom: none; }
  footer { page-break-before: avoid; }
}

Layout Principles

• Max-width: 960px (narrower than Claude's 1100px -- denser reading)
• Padding: 32px horizontal
• Section spacing: Sections separated by 1px rules, not whitespace
• No border-radius anywhere: 0px on everything
• No box-shadow anywhere: Flat surfaces only
• No hover animations: No translateY, no shadow transitions
• Sections are full-width within container: No card wrapping on sections

Footer

<footer class="site-footer">
  <p>[ProjectName] -- [Document Type]</p>
  <p class="sig">Your Name | [e-mail]</p>
  <p class="attr">[Generation date and data source attribution]</p>
</footer>

Footer sits below a 3px dark rule. Text centered, --muted color, 13px.

Anti-Patterns (Never Do)

• No rounded corners (border-radius: 0 everywhere)
• No box shadows (flat is the entire point)
• No hover lift effects (no translateY, no shadow transitions)
• No gradients on backgrounds (only on the masthead red-rule)
• No serif headlines (headlines MUST be sans-serif in this style)
• No warm cream page background (use pure white #FFFFFF)
• No multiple accent colors (red only; navy for structural elements only)
• No card padding with border -- use top-rule cards instead
• No emoji in content (per project rules)
• No grid columns > 3 for CJK text-heavy cards (Chinese text in 4+ columns overflows on 960px container; use max repeat(3, 1fr) for editorial cards)
• No word-break: break-all on body (conflicts with CJK keep-all; use word-break: keep-all; overflow-wrap: break-word)
• No fixed-width grids without overflow protection (add min-width: 0 or overflow: hidden to grid children)

Comparison with Claude Humanistic Style

Dimension	Claude Humanistic	Economist Editorial
Page bg	Warm cream #F3F0E9	Pure white #FFFFFF
Accent	Terracotta #D67052	Red #E3120B
Headlines	Serif (Crimson Pro)	Sans-serif (DM Sans)
Body	Sans-serif (Source Sans 3)	Serif (Source Serif 4)
Corners	10px radius	0px (square)
Shadows	3-tier paper shadows	None
Dividers	Gradient pseudo-elements	Solid horizontal rules
Cards	White + shadow + radius	Top-rule + flat
Hover	translateY(-2px) lift	None
Density	Spacious (1100px)	Dense (960px → 1100px)
Feel	Academic book	Newspaper/magazine

Gotchas

1. Hero/masthead text uses opacity and becomes unreadable on dark backgrounds. Never use opacity for text contrast — use explicit color: rgba(255,255,255,0.85) minimum for subtitle, rgba(255,255,255,0.85) for meta. The navy masthead (#0D0D0D or similar) requires high-contrast white text. This is a cross-style-system rule validated on 2026-04-09.

2. Code/quote blocks need generous internal padding (>=20px). Content touching container borders is unprofessional. Minimum: padding: 20px 24px for blockquote and pre blocks, padding: 36px 40px 28px for any container with floating labels.

3. Container max-width: 960px is too narrow for CJK documents with tables. Use max-width: 1100px as the default. Apply consistently to .container, .article-body, .toc and all max-width-constrained elements. Mismatched widths cause visual misalignment between sections.

4. Multi-column report tables overflow the phone frame — wrap them, do not just shrink the font. Measured 2026-06-14 on a real weekly deep-research report: 5 of 6 tables had an intrinsic min-content width of 728 / 386 / 621 / 618 / 509px, while the phone reading frame is only ~358px (min(1040, 390 - clamp(32,6vw,96))). A @media font shrink to 12px does not fix 728px squeezed into 358px — the table either forces the whole <body> to scroll horizontally (layout breaks) or compresses to unreadable. The fix is the .tbl-scroll wrapper from the Tables section: it is inert at desktop (verified overflow-x:auto does nothing while the table fits the 1040 frame) and turns each oversized table into a locally-scrollable strip on a phone. This is why wrapping every <table> is MANDATORY, not optional.