NewspaperUI

Production-grade newspaper layout component library for the modern web.

参考 InDesign 与经典严肃风排版传统（NYT / The Times / FAZ），基于 24 列栅格、CSS Grid + Multi-column 双层机制。支持中文、英文、日语多语言报纸排版。

Quick Start

pnpm add @newspaperui/components @newspaperui/theme

import '@newspaperui/theme';
import { Layout, Section, Article, Masthead, BodyText } from '@newspaperui/components';

<Layout columns={24}>
  <Masthead variant="classic" title="The Daily Chronicle" date="May 19, 2026" />
  <Section columns={24}>
    <Article span={14}>
      <BodyText columns={3} dropCap>
        <p>Multi-column text flow with drop cap...</p>
      </BodyText>
    </Article>
  </Section>
</Layout>

Packages

Package	Description
@newspaperui/theme	CSS variables, visual weights, typography utilities, Google Fonts
@newspaperui/utils	Grid validation (validateSpan, clampSpan, cx)
@newspaperui/components	24 React components
@newspaperui/docs	Next.js documentation site with live demos

Components (24)

Layout

Layout · Section · Article · Layer · Masthead · Rule · Footer · Sidebar · BreakingNewsBanner · Folio · IndexBox · Factbox · RelatedArticles

Text

Headline · Subhead · Kicker · BodyText · Quote · Byline · Dateline · Caption · AuthorCard · JumpLine

Media

Image · Figure · Video · PullQuote

Key Features

• 24-column CSS Grid — unified grid-column: span N mechanism
• CSS Multi-column flow — real newspaper text reflow with column-rule hairlines
• Drop cap — ::first-letter float, 4.2em display serif
• True small caps — OpenType font-variant-caps: small-caps (not text-transform)
• Old-style figures — font-variant-numeric: oldstyle-nums for body text
• Visual weight system — data-driven typography from a single visualWeights mapping
• Warm off-white palette — #F7F4ED background, warm grays, no pure black/white
• Dark mode — [data-theme="dark"] with warm deep brown-black
• Multi-language — Chinese (Noto Serif SC), Japanese (Noto Serif JP), English (Source Serif 4), German (UnifrakturMaguntia)

Typography

Role	Font	Usage
Masthead	Cormorant Garamond	Newspaper title
Blackletter	UnifrakturMaguntia	German-style masthead preset
Display / Headline / Body	Source Serif 4	Main serif family (optical size)
Meta (Byline, Kicker, Caption)	Inter	Sans-serif small caps
Chinese	Noto Serif SC	中文报纸
Japanese	Noto Serif JP	日本語新聞

Live Demos

Run the documentation site:

pnpm install
pnpm --filter @newspaperui/docs dev
# → http://localhost:3000

Available Pages

Route	Description
/	Landing page with demo showcase
/blocks	6 production-grade newspaper blocks
/blocks/zh-frontpage	Chinese front page (人民周报)
/blocks/zh-feature	Chinese feature article (副刊)
/blocks/en-feature	English long-form (The Atlantic style)
/blocks/jp-horizontal	Japanese horizontal (朝日新聞)
/blocks/jp-vertical	Japanese vertical (writing-mode: vertical-rl)
/blocks/zh-editorial	Chinese editorial (社论)
/examples/nyt-frontpage	NYT-style English front page
/examples/blackletter-frontpage	German blackletter front page
/grid-system	Grid system documentation
/text	Text components + visual weight table
/theme	Theme system + dark mode toggle
/components/*	Component API docs

Development

pnpm install
pnpm build           # Build all 4 packages
pnpm test            # 51 tests (utils 11 + components 40)
pnpm --filter @newspaperui/docs dev  # Dev server

Design Specification

See design.md for the full design specification including visual weight mapping table, color system, and typography rules.

License

MIT