Themes

OpenPress themes are Press-local CSS source. They provide design tokens and font loading for one publication, while the framework owns the generic page shell, measurement CSS, print reset, and default MDX prose surface.

Why is theme source local to a Press?

One workspace can host very different outputs: an A4 report, a 16:9 slide deck, and social cards. Those formats should not share accidental global visual state. Keeping tokens under press/<slug>/theme/ gives each Press an explicit styling boundary.

Use theme files for:

• tokens.css: CSS variables for color, type, spacing, and artifact-level design decisions.
• fonts.css: portable @font-face loading.

Do not use theme files to reimplement the page shell. New work should not ship base/page-contract.css, base/print.css, or base/typography.css; those contracts are framework-owned.

Page geometry

Page size lives on <Press page>, not in CSS. Use a built-in preset for generic formats:

<Press page="a4" />
<Press page="slide-16-9" />

Use a custom object for project-specific formats:

<Press
  page={{ id: "campaign-card", label: "Campaign Card", width: "1080px", height: "1350px" }}
/>

The exporter injects the resolved geometry into document theme metadata and runtime CSS variables such as --openpress-page-width and --openpress-page-height.

Tailwind v4 and prose

OpenPress is Tailwind-first for new UI. Put page chrome, covers, tables of contents, slide layouts, and prose variants in React components with Tailwind classes. For MDX body content, use the framework’s prose surface and customize through component classes or prose presets rather than shared typography CSS.

When multiple Presses share Tailwind token names, keep Tailwind v4 @theme entries generic or backed by CSS variables. Put artifact-specific values on the owning Press wrapper or component so one Press cannot pollute another.